Banja Lab / Benchmarks / Test
SCREE-0001Websites · hard
Reproduce a three-tier SaaS pricing page from its screenshot
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: grok-composer-2.5-fast (default reasoning) at 98.9% composite. Lowest: claude-sonnet-5 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
You are given a reference screenshot of a SaaS pricing page. Reproduce it as faithfully as you can as ONE self-contained HTML file (`index.html`) that renders with no build step and no network calls (inline all CSS, no external fonts, scripts, or images). Match what the screenshot shows: - a light grey page background with centred header text: a small indigo "PRICING" eyebrow, a large heading "Plans that scale with you", and a muted one-line sub-heading, - three pricing cards laid out in a row, each a white rounded card: "Starter" at $0/mo, "Team" at $29/mo, and "Business" at $99/mo, - the middle "Team" card visibly highlighted as the featured plan (indigo border and a "Most popular" badge), - each card carries a short description, a checklist of features, and a call-to-action button ("Get started", "Start free trial", "Contact sales" respectively), - the indigo accent colour (around #4f46e5) used for the eyebrow, the featured border, the checkmarks, and the primary button. Keep the colours, the three-column card layout, and the relative sizing close to the screenshot. The page must stay readable when the window is narrowed (the cards should wrap, not overflow).
