Banja Lab / Benchmarks / Test
RESPO-0007Websites · medium
CTA buttons that stack full-width on mobile and sit in a row on desktop
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 0.0% composite. Lowest: deepseek-v4-flash 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 with no build step and no network calls (inline all CSS and JS; no external fonts, scripts, or images). Build a hero section with an <h1>, a paragraph, and a pair of call-to-action links inside a container with id="actions": a primary link (id="primary") and a secondary link (id="secondary"). Make the pair responsive: - on a phone (around 360px wide) the two links stack vertically into a single column, each link stretched to the full width of the container (so the secondary link sits below the primary one, at the same left edge), - on a tablet and desktop (around 768px and 1440px wide) the two links sit side by side on one row, each sized to its own content (so the secondary link is to the right of the primary one, on the same row). The page must not scroll horizontally at any of 360px, 768px, or 1440px wide. Use plain, accessible markup.
