Claude Design, reverse-engineered: the 340-line taste recipe
In April 2026 Anthropic shipped Claude Design — a mode where Claude plans, writes and renders whole designs as HTML artifacts. The industry's reaction was immediate: Figma's stock dropped 7% that day. What made it more than a demo was the design philosophy baked into a leaked 340-line system prompt. We dissected it from our research hub; here's the anatomy that matters.
The five layers
1 · Identity
The prompt tells the model it is a world-class product designer working directly in the browser — not a chatbot pretending to design. Identity framing like this matters: everything downstream is filtered through "act like a senior designer on a real project".
2 · Taste
The largest section, with concrete rules that separate designed output from AI slop: spacing over decoration, restrained color (fewer, deliberate accents), typography as the backbone, and "when in doubt, remove". This is where the anti-slop checklist (see our anti-slop guide) gets its teeth — the prompt's rules are the model's only guardrails.
3 · Flow
Design is not a one-shot generation: the prompt enforces a staged process — understand the brief, propose a direction, get sign-off, then iterate. Each state carries different constraints. This is precisely what our own DESIGN.md workflow externalizes: the rules, but versioned by the team.
4 · Tools
The model is told which tools exist for which jobs (rendering, screenshots, iteration loops) and when to use them — including when to stop and ask. Tool discipline, not capability, is what makes the flow repeatable.
5 · Technical rules
Output constraints: valid standalone HTML, no broken assets, responsive by default. Boring, but it's why Claude Design output actually deploys — the same reason every template we ship is static, standalone HTML.
The open-source wave
Within weeks the community rebuilt it:
- Huashu Design — a one-prompt-to-prototype-to-MP4 pipeline that runs across agents (Claude Code, Cursor, Codex, even Hermes).
- Open Design — 77K stars in 11 days, an open alternative to the Pro subscription wall (bring your own API key).
What the wave proves: the design value isn't in a proprietary model — it's in the rules and the loop. You can reproduce 80% of the result with any capable model plus a strict DESIGN.md and a review stage.
What we stole (and what you should too)
- Stage the work — never generate a final design in one shot. Direction first, details second.
- Write the taste rules down — "fewer colors, more whitespace" as literal instructions beats vibes.
- Constrain by default — standalone, valid, responsive output; no dead links, no placeholder blobs.
- Stop and ask — when the brief is ambiguous, asking beats guessing. Every time.