Segmented pill nav with an exact active pill and gap
One task across 30 published runs. Inspect the scores and outputs together, with each run's execution method shown.
- Task
- PIXEL-0007
- Domain
- UI components
- Difficulty
- hard
Leading published run: claude-opus-4-8 (low reasoning) at 100.0% composite. Lowest: grok-build-0.1 at 0.0%. 30 published runs shown on this task.
How this task was evaluated
Results are ordered by this task's published score. API runs use one prompt and one completion; agent runs use a coding harness with tools and iteration. Inspect the execution method when comparing results.
Objective scores use the benchmark's execution checks. Judge scores use a vision panel's fixed rubric; the published score leaves out a model's own family. Missing values are labelled rather than treated as zero.
Read 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.
