What is DESIGN.md?
A concept introduced by Google Stitch — a plain-text Markdown file that tells AI coding agents how your UI should look.
The problem
AI coding agents (Claude Code, Cursor, Copilot) generate UI that all looks the same. Tailwind defaults, generic colors, no brand identity. If you say "make it look like Stripe," the AI guesses — because it can't see the web.
The solution
DESIGN.md is a Markdown file you place in your project root. It describes the complete design system — colors, fonts, spacing, components, shadows, do's and don'ts — in a format AI agents can read natively.
When an AI agent finds DESIGN.md in your project, it uses those exact values instead of guessing. The result: UI that actually matches the brand.
What's inside a DESIGN.md?
A standard 9-section structure:
How to set up
Pick or extract
Click a brand on the home page, or paste any URL to extract live.
Copy
Click "Copy DESIGN.md" on the results panel.
Drop in
Save as DESIGN.md in your project root. Your AI agent reads it automatically.
Works with
DESIGN.md is just a Markdown file. Any LLM-based coding tool that can read project files will understand it — no plugins, no config, no lock-in.
← Back to generatorDisclaimer
Design data is automatically extracted and may not be 100% accurate. Always verify against the original source before production use.
All brand names, logos, and designs are trademarks of their respective owners. This tool is not affiliated with, endorsed by, or sponsored by any of the brands listed.
This tool is intended for development and learning purposes. The extracted design data (colors, fonts, spacing) consists of factual information that is not subject to copyright protection.