Banja Lab / Benchmarks / Test
SCREE-0003Websites · hard
Reproduce an editorial blog article 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 100.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
You are given a reference screenshot of an editorial blog article 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 warm off-white page with serif body text, - a top masthead bar: the rust-red "The Ledger" word-mark on the left and a nav on the right with the links Latest, Engineering, Culture, About, - a centred article column with a small rust-red "ENGINEERING" category label, then a large serif headline "How we cut build times in half without changing the stack", - a byline row with a small round avatar and the text "By Dana Okoro - 14 June 2026 - 6 min read", - a wide rounded hero banner (a warm orange gradient block) below the byline, - article body paragraphs, a sub-heading "Start by measuring, not guessing", and a pull-quote (blockquote) styled with a rust-red left border. Keep the warm editorial palette, the centred single-column article layout, the serif headline, and the hero banner close to the screenshot. The page must stay readable when narrowed.
