Banja Lab / Benchmarks / Test
PIXEL-0003UI components · hard
Flex toolbar with an exact gap and exact button geometry
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: grok-4.3 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 horizontal toolbar, with no build step and no network calls (inline all CSS, no external fonts or scripts). The grader measures the rendered flex gap and the button box, so the numbers must be exact, not close. Bar: - A `<nav id="bar">` that is `display: flex`, 600px wide, 56px tall, with a flex `gap` of exactly 16px, vertically centred items, background #f1f5f9, radius 10px. Three buttons with IDs `b1`, `b2`, `b3`, each exactly 120px wide and 36px tall, border-radius 8px, font-size 15px, background #6d28d9, colour #ffffff. Put a flexible spacer between the second and third button so the third button sits at the right end. The 16px gap, the 120px button width, and the 15px font-size are the contract.
