Reading
Articles and guides
Everything about giving AI coding agents real design taste: how to wire DESIGN.md into the tool you already use, and what to do when tokens alone are not enough.
Articles
deep divesDESIGN.md at scale: when tokens are not enough
Color and type tokens stop drift in individual components. Here is what to add when your agent still gets layout, density, and states wrong.
DESIGN.md vs AGENTS.md vs RULES.md: which file does what
A practical map of the context files AI coding agents read, what belongs in each one, and how to stop them from contradicting each other.
74 real brand design systems your AI agent can read
Every system in the library is documented in the same DESIGN.md format, from Stripe and Linear to Tesla, Nike, and a 1996 Dell homepage. Here is what is in there and how to use it.
Setup guides
One per tool. Each covers the exact config file, how to verify it loaded, and the mistakes that quietly break it.
How to use DESIGN.md with Aider
Use .aider.conf.yml to load DESIGN.md as read-only context in every Aider session.
Read guideClaude CodeHow to use DESIGN.md with Claude Code
Point CLAUDE.md at your DESIGN.md so Claude Code reads your design system before it writes a single line of UI.
Read guideClineHow to use DESIGN.md with Cline
Configure .clinerules so Cline reads your design tokens before it plans or edits any interface code.
Read guideCodexHow to use DESIGN.md with Codex
Pair AGENTS.md engineering rules with DESIGN.md visual rules so Codex ships UI that matches your product.
Read guideContinue.devHow to use DESIGN.md with Continue.dev
Add a rules file to your Continue config so every chat and edit inherits your DESIGN.md tokens.
Read guideCursorHow to use DESIGN.md with Cursor
Use .cursor/rules to inject your DESIGN.md into every UI generation, automatically and on every request.
Read guideDevinHow to use DESIGN.md with Devin
Add your DESIGN.md to Devin's Knowledge base so long autonomous sessions stay on brand from start to finish.
Read guideGitHub CopilotHow to use DESIGN.md with GitHub Copilot
Configure copilot-instructions.md so Copilot Chat and agent mode respect your design tokens on every suggestion.
Read guideGoogle StitchHow to use DESIGN.md with Google Stitch
Stitch has no rules file, so here is the prompt-side workflow that keeps generated UI matching your design system.
Read guideKiroHow to use DESIGN.md with Kiro
Add your DESIGN.md to Kiro's steering directory so every spec and task inherits the same visual rules.
Read guidev0 and LovableHow to use DESIGN.md with v0 and Lovable
Browser builders have no rules file, so use a pinned constraint block and a normalisation pass to keep generated UI on brand.
Read guideWindsurfHow to use DESIGN.md with Windsurf
Point Windsurf rules at your DESIGN.md so Cascade builds UI with your tokens instead of its defaults.
Read guideNeed a DESIGN.md to start from?
The library has documented design systems from real brands, each one a single file you can copy and edit.