██╗   ██╗██╗
██║   ██║██║
██║   ██║██║
██║   ██║██║
╚██████╔╝██║
 ╚═════╝ ╚═╝
██    ██ ██ 
██    ██ ██ 
██    ██ ██ 
██    ██ ██ 
 ██████  ██ 
            
██████╗ ███████╗███╗   ██╗ ██████╗██╗  ██╗
██╔══██╗██╔════╝████╗  ██║██╔════╝██║  ██║
██████╔╝█████╗  ██╔██╗ ██║██║     ███████║
██╔══██╗██╔══╝  ██║╚██╗██║██║     ██╔══██║
██████╔╝███████╗██║ ╚████║╚██████╗██║  ██║
╚═════╝ ╚══════╝╚═╝  ╚═══╝ ╚═════╝╚═╝  ╚═╝
██████  ███████ ███    ██  ██████ ██   ██ 
██   ██ ██      ████   ██ ██      ██   ██ 
██████  █████   ██ ██  ██ ██      ███████ 
██   ██ ██      ██  ██ ██ ██      ██   ██ 
██████  ███████ ██   ████  ██████ ██   ██

The frontend design benchmark

View BenchmarksCompare
#EVALS
1
Landing PageInspired by Theo's sequential variation test
2
SaaS DashboardTests layout creativity and data presentation skills
3
Replication TestTests visual fidelity and CSS precision
4
Mobile ApplicationTests mobile-first design thinking
Claude Haiku 4.5Claude Haiku 4.5Claude Opus 4.6Claude Opus 4.6Claude Sonnet 4.6Claude Sonnet 4.6Gpt 5.1 Codex MiniGpt 5.1 Codex MiniGpt 5.2 CodexGpt 5.2 CodexGpt 5.3 CodexGpt 5.3 CodexGpt 5.4Gpt 5.4Gpt 5.4 MiniGpt 5.4 Mini
Claude Haiku 4.5Claude Haiku 4.5Claude Opus 4.6Claude Opus 4.6Claude Sonnet 4.6Claude Sonnet 4.6Gpt 5.1 Codex MiniGpt 5.1 Codex MiniGpt 5.2 CodexGpt 5.2 CodexGpt 5.3 CodexGpt 5.3 CodexGpt 5.4Gpt 5.4Gpt 5.4 MiniGpt 5.4 Mini
View all models →

Landing Page

Create 10 distinct landing page designs from a single prompt. Inspired by Theo's sequential variation test.

SaaS Dashboard

Design 10 unique SaaS dashboard interfaces. Tests layout creativity and data presentation skills.

Replication Test

Given a reference screenshot, replicate the design as faithfully as possible. Tests precision and attention to detail.

reference.png
output.html

Mobile Application

Design a mobile application interface. Tests responsive thinking, touch-friendly UI, and mobile-specific patterns.

How we score

Every generated HTML file is scored automatically across three layers of analysis, combined into a single 0–100 composite score.

Static Analysis

HTML is parsed with Cheerio to extract structural metrics. No browser needed.

15%
Responsiveness
Viewport meta, media queries, flexbox/grid
10%
CSS Complexity
Rule count, colors, fonts, animations
15%
Semantic Quality
Semantic tags, lang attr, heading structure
10%
Interactivity
Buttons, links, inputs, hover/focus states
Accessibility

axe-core runs in headless Chrome to catch real accessibility violations.

20%
Axe Score
Starts at 100, deducts per violation
Severity penalties
Critical-15
Serious-8
Moderate-4
Minor-1
Lighthouse

Google Lighthouse audits each page for performance, accessibility, best practices, and SEO.

15%Accessibility
5%Performance
5%Best Practices
5%SEO