Using with Claude Code

Claude Code reads DESIGN.md at the project root automatically. There's no plugin to install, no setting to flip, no MCP server to wire up. The file is the integration.

Drop the file

designdrop add stripe
# or, for a generated DESIGN.md
cp ~/Downloads/DESIGN.md ./

That's the install. Claude Code picks up the file the next time you start a session in that project.

Anchor the agent

Once DESIGN.md is in place, anchor the agent in your first prompt of a session:

Read DESIGN.md before generating UI. Follow its colors, typography, radius,
and spacing tokens. Quote the relevant section back to me before writing
each component so I can confirm.

The "quote it back" line is the trick. It forces Claude to ground the output in actual file content rather than its training prior, and you get a clear audit trail of which decisions came from the spec.

Per-session configuration

If your repo has multiple design systems (e.g. a marketing site and an admin app), keep one DESIGN.md per sub-app and tell Claude which one applies:

For UI in apps/web, follow apps/web/DESIGN.md.
For UI in apps/app, follow apps/app/DESIGN.md.

You can also commit a CLAUDE.md at the repo root with a one-liner:

## Design
 
Follow `apps/web/DESIGN.md` for marketing UI, `apps/app/DESIGN.md` for the
authenticated dashboard. Quote the relevant tokens before generating each
component.

CLAUDE.md is read automatically too — no extra prompt needed.

Editing in-flight

When the agent gets something wrong (wrong primary, off-brand radius), edit DESIGN.md directly rather than correcting in chat. The next generation reads the updated file and the correction sticks for the rest of the session — and every future session.

Common patterns

• Theme toggle — keep both light and dark variants in DESIGN.md. Claude will reference both when generating themed components.
• Token-only refactor — ask Claude to "refactor this file to consume tokens from DESIGN.md" and it will replace hardcoded hex values with the var(--token-name) references.
• WCAG enforcement — add a "Contrast requirements" section that says "every text/background pair must pass AA (4.5:1)". Claude treats this as a hard constraint.