# claude-design-system-prompt

A reconstruction of the system prompt behind Anthropic's Claude Design, published as plain markdown under MIT. Paste `system-prompt.md` into any LLM that accepts a system prompt and it turns the model into a design collaborator with committed opinions instead of a generator of SaaS-template output. The repo ships two variants — `claude/` for Claude Code and Claude.ai, `codex/` for OpenAI Codex with `AGENTS.md` as the auto-discovered entry point and sequential reviews in place of parallel subagents.

## What the prompt actually contains

Twenty chapters, and the useful thing about them is that they name specific enemies rather than gesturing at quality. The rejected default is aggressive gradients, emoji decoration, rounded-corner cards with a left border, and Inter everywhere. In their place: content discipline where every element has to earn its slot, a committed palette and tone, explicit hierarchy through size and weight and color and density, WCAG and semantic HTML and keyboard navigation and motion preferences, full interaction states, components and tokens rather than one-off pages, and real CSS Grid, `oklch()`, and `text-wrap: pretty` instead of approximations of them.

Fourteen skills sit alongside as self-contained phased procedures, each triggered by its own name matching the request. They fall into three groups. Production skills build something: `discovery-questions`, `frontend-aesthetic-direction`, `wireframe`, `make-a-deck`, `make-a-prototype`, `make-tweakable`, `generate-variations`. System skills pull structure out of what exists: `design-system-extract`, `component-extract`. Review skills audit and fix: `accessibility-audit`, `ai-slop-check`, `hierarchy-rhythm-review`, `interaction-states-pass`, `polish-pass`.

Skills chain. Greenfield runs `discovery-questions -> frontend-aesthetic-direction -> wireframe -> make-a-prototype -> polish-pass`; with an existing brand it becomes `design-system-extract -> generate-variations -> make-tweakable -> polish-pass`.

## The calibration notes are the interesting part

The README's "Model calibration" section is worth reading even if you never use the prompt, because it documents how prompting had to change for current frontier models.

Quotas were replaced with conditions. No "ask at least N questions," no "CRITICAL: YOU MUST" — these models treat a quota as a literal contract and over-trigger on it, so the prompt states the conditions under which to act and adds an autonomy clause telling the model to pick a reasonable option on minor decisions and note it rather than asking. The opposite adjustment applies to optional capabilities: current models under-reach for skills and subagents, so every skill description states *when* to invoke it and verifier delegation has an explicit trigger ("after every substantive visual change").

Review instructions got inverted for the same reason. Telling a current model to "only report important issues" is followed literally and silently suppresses findings, so review agents report everything with confidence and severity estimates and a separate aggregation step does the filtering.

The fourth note is the sharpest. Current Anthropic models have a default aesthetic of their own — cream background, serif display type, terracotta and amber accents — and the prompt treats it as a slop pattern like any other. `ai-slop-check` rule 9 detects it after the fact; `frontend-aesthetic-direction`'s four-directions protocol pre-empts it. Because `temperature` no longer exists as a parameter on these models, visual variety has to be specified per variation rather than sampled.

## Limits

The prompt assumes an HTML-output environment resembling Claude.ai's design tool. Pointing it at a Figma plugin, a code-only assistant, or a chat-only design coach means rewriting the workflow chapters and tool references; the principles in chapters 5 through 16 carry over unchanged. On older models the calmer phrasing may under-trigger, and the README says to restore imperative language if you see question rounds or reviews being skipped. The `codex/` variant is maintained separately and none of the calibration notes apply to it.

It is also, by construction, someone's reconstruction of a prompt they do not have. Treat it as a well-organized opinion about design, not as the artifact Anthropic ships.

## Related

[[vamp-ai-frontend]] argues the complementary point on the code side: framework implicitness is what makes AI-generated frontend bad, and an explicit minimal pattern beats a framework. [[credibility-as-slop-test]] is the general version of `ai-slop-check` — surface features are a weak test, and this prompt is essentially a long list of surface features that correlate with the real thing. For how skills work as a mechanism, [[mcp-vs-skills]]; for tooling around them, [[library-skills]] and [[agent-skill-linter]]. [[claude-code]] is the primary host for the `claude/` variant. [[toolbox/toolcraft]] is the same intent shipped as code rather than prompt — a React starter that hands the agent a design-app architecture to work inside — so the prompt's "components and tokens rather than one-off pages" has somewhere to land.

Repo: [Trystan-SA/claude-design-system-prompt](https://github.com/Trystan-SA/claude-design-system-prompt), MIT. Star count not recorded at ingest.