Banja Lab / Benchmarks / Test
PIXEL-0007UI components · hard
Segmented pill nav with an exact active pill and gap
The same task, run on 27 models. Compare the outputs side by side, or open any one in a popup to inspect it.
Top result: claude-opus-4-8 (low reasoning) at 100.0% composite. Lowest: claude-opus-4-8 at 0.0%. 27 models compared on this task.
How it ran
- Each model was given the brief below in a fresh, isolated session with no access to our tools, and returned a single self-contained index.html (inline CSS and JS, no external requests, no build step).
- The rendered output was scored 1 to 5 on brief fidelity, visual design, craft, and impact by a four-family vision panel - Anthropic (Claude Opus 4.8), OpenAI (GPT-5.5), Google (Gemini 3.1 Pro), and xAI (Grok 4.3) - using one identical prompt so the scores compare. The published judge score is leave-one-family-out: a model is never scored by a judge of its own family, so same-family self-preference is removed.
The brief
Build a single self-contained HTML file (`index.html`) that renders a segmented pill navigation, with no build step and no network calls (inline all CSS, no external fonts or scripts). The grader measures the rendered geometry and computed style, so match the spec exactly. Bar `<nav id="nav">`: - `display: flex`, 520px wide, 44px tall, flex `gap` exactly 12px, padding 6px, background #f1f5f9, border-radius 22px. Four pill buttons with IDs `p1`..`p4`, each 96px wide and 32px tall, border-radius 16px, font-size 14px. The first pill (`p1`) is the active one: background #6d28d9, colour #ffffff. The other three are inactive: transparent background, colour #475569. Pill labels: Overview, Activity, Reports, Settings. The 96px pill width, the 12px gap, and the #6d28d9 active-pill fill are the contract.
