Reproduce a three-tier SaaS pricing page from its screenshot
One task across 30 published runs. Inspect the scores and outputs together, with each run's execution method shown.
- Task
- SCREE-0001
- Domain
- Websites
- Difficulty
- hard
Leading published run: grok-composer-2.5-fast (default reasoning) at 98.9% composite. Lowest: gpt-5.6-terra 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
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).
