Banja Lab / Benchmarks / Test
PIXEL-0004UI components · hard
Two-column grid split with exact column widths and gutter
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: 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 a two-column layout, with no build step and no network calls (inline all CSS, no external fonts or scripts). The grader measures the rendered column geometry, so the widths and the gutter must be exact. Container `<div id="split">`: - `display: grid`, 800px wide, 400px tall. - A fixed left column of exactly 280px and a flexible right column, with a column gutter (gap) of exactly 32px. The right column therefore measures 488px wide and starts at left 312px. Children: - `<aside id="side">` (the left column): background #1e293b, border-radius 14px, colour #ffffff, with a heading `<h2 id="side-title">` at font-size 18px. - `<section id="main">` (the right column): background #f8fafc, border-radius 14px. The 280px sidebar, the 32px gutter, and the 488px main column are the contract.
