Taste, measured

826 real sites graded and taken apart, then handed to your model as one skill.

git clone github.com/jaydendavisnc/frontend-craft ~/.claude/skills/frontend-craft

Every page you can see here was built by a model using it.

Claude Opus scored 6.33.With this skill, 7.93.

Frontend Craft is a design skill for Claude Code and Codex. Scored blind out of 10 by AI review panels, real top-tier sites got 7.85.

The page Claude Opus built for this prompt without the skill

The page Claude Opus built for this prompt with the skill

Twelve briefs, two models, the same prompt with and without the skill

Open every page

It reads 826 graded sites instead of its own habits

Real sites, including Awwwards Site of the Day winners and Framer gallery pages, taken apart into parts with exact specs.

frontend-craft / data / sites Showing 11 of 826

The same prompt never starts from the same page

Each run is dealt a different real page structure, type system and palette. Across repeat runs, GPT-6's font overlap fell from 0.889 to 0.

build me a landing page for a coffee shopSix runs of one prompt, as the models left them

First screen of the Trosclair Coffee page, built by Claude Opus from the same prompt — **Trosclair Coffee**Claude Opus, Switzer

First screen of the Mercer Coffee page, built by GPT-6 from the same prompt — **Mercer Coffee**GPT-6, Mona Sans

First screen of the Gourlay Coffee page, built by Claude Opus from the same prompt — **Gourlay Coffee**Claude Opus, Zalando Sans Expanded

First screen of the Morrow Coffee page, built by GPT-6 from the same prompt — **Morrow Coffee**GPT-6, Hedvig Letters

First screen of the Ibbotson Coffee page, built by Claude Opus from the same prompt — **Ibbotson Coffee**Claude Opus, Source Serif

$ python3 scripts/direction.py "build me a landing page for a coffee shop"

This page was built the same way

~/frontend-craft-site

StructureFramer

TypeZalando Sans

VoiceDry

The first cut of this page, before any critique

The first screen of this page, as it shipped

This page was built the same way

Everything in the panel is real output from the run. The brief is quoted as it was typed.

You give it any brief

One line is enough. The skill never asks for a better one.

A sampler deals the direction

It draws from the measured corpus, so the run starts somewhere other than the model's favourite page.

Every section gets a brainstorm

Three lines per section, each starting "wouldn't it be cool if". One must work with no text in it.

The model builds what it was dealt

Real copy first, then the first screen on its own, then the rest, section by section.

A real browser sends it back

A screenshot tool scrolls the page, lists what is weak, and the model fixes it until nothing honest is left to fix.

frontend-craft-site

~/frontend-craft-site

> make me an AWARd WINning landing page for the frontend skill it cant fill corny it has to feel like framerr ensure it doesnt feel too ccluttered in cvertain places have god scorlling animations, font and give so ething that feels production grade

Read frontend-craft/SKILL.md

python3 scripts/direction.py "make me an AWARd WINning…" --no-images

Reads as ai, surface landing, register dark-precision

structure from Framer, a gold saas page

Your direction, seed 1669852216

Navigationscroll-swap-bar
Heroproduct-canvas
Logo wallone-lit-logo
App windowside-bleed-capture
UI fragmentfading-live-feed
Sticky scrolllist-drives-pinned-stage
Integrationslogo-tile-grid
Animated demolive-status-matrix
Case studystory-index-rows
Closingsignature-art-close
Footerfull-width-directory

Structure

Framer

Type

Zalando Sans

Display 64px, 600, -0.03em
Text 17px, 1.55
Wide at wdth 125 for labels
Dense at wdth 75 for headlines

Palette, from Chromatic

Voice

Dry

## 3. Logo wall

Wouldn't it be cool if the page you just dragged shrank back into its slot in a grey wall of every other page, and then the light spread outward, slot by slot?

Wouldn't it be cool if a single lit page wandered around a dim wall on a timer?

## 8. Animated demo

Wouldn't it be cool if twelve tiles checked themselves off one at a time for each model?

Wouldn't it be cool if the real pages themselves were the bar chart, hanging from one top line at true length?

## 11. Footer

Wouldn't it be cool if the footer directory were the real folder listing of the skill?

Wouldn't it be cool if the footer sat under the page and was uncovered like a sheet being lifted?

Clone one folder, then ask as you normally would

It goes in the skills folder of either tool, and it is open for anyone to install.

Blind AI panels put real top‑tier sites at 7.85

Blind AI panels put real top-tier sites at 7.85

12 identical briefs, scored out of 10 by panels of Claude reviewers who did not know what made each page. Real sites were mixed in as anchors.

Overall score

Real top-tier sites, 7.85

Claude Opus

6.337.93

GPT-6

5.215.99

"Would a funded company ship this"

Claude Opus

5.677.89

Claude Opus improved on 12 of 12 briefs

GPT-6 improved on 10 of 12 briefs

GPT-6's median page went from about 3,600px to about 7,000px

Each strip is one real page at true proportion, hanging from the top of the page. Left without the skill, right with it.

How to read this: the panels were Claude models scoring pages they could not identify, on small samples, and the skill was tuned on these 12 briefs. On six briefs it was never tuned on, GPT-6 went from 5.67 to 6.72, improving on all six. The matching Claude control was not clean, so there is no held-out Claude result. Full results.

Read every page before you trust a score

12 briefs, both models, as the models left them. Open any row to read both versions at full length.