Design.dev design.dev
AI Tools

DESIGN.md Generator

Build a tokenized design system AI coding agents can read and apply. Follows the open DESIGN.md spec with YAML token frontmatter and prose sections. Live preview, WCAG AA contrast linting, and Tailwind / DTCG / CSS export.

2 Quick Start Generate from one color

Brand color Generates a starter palette, scales, and components

3 Colors Semantic tokens

Color Tokens 0 tokens

4 Typography

Type Tokens 0 tokens
Token name Font family Size Weight

5 Scales Spacing & Rounded

Spacing 0 levels
Rounded 0 levels

6 Components Map tokens to UI

7 Prose Sections The "why" for agents

Live Preview rendered with your tokens

The quick brown fox

A live preview of your design system rendered with the current tokens. Edit colors, typography, spacing, and components on the left to see the canvas update in real time.

Card example

Cards inherit your card-bg, card-border, rounded.md, and elevation tokens. Hover-state components work too — define button-primary-hover and the linter will validate it.
Linter
All clear
No findings — your DESIGN.md is valid.
DESIGN.md 

							

						

					


					

						
						
					


					
					

						
Where to place your DESIGN.md

						

							
your-project/
├── DESIGN.md          ← root of repo
├── AGENTS.md          ← reference DESIGN.md from here
├── package.json
└── src/

						

						

							
Validate with the official CLI:

							

								npx @google/design.md lint DESIGN.mdValidate against the spec
								npx @google/design.md export --format tailwindConvert to Tailwind theme
								npx @google/design.md diff a.md b.mdDetect token regressions
							

						

					


					
					

						
							
Pair with

							
AGENTS.md Generator →

							
Tell coding agents to reference this DESIGN.md for any UI work.

						
						
							
Also useful

							
llms.txt Generator →

							
Curate a public file pointing LLMs at your site's key resources.

						
					


				

			

		


		

			

				

					
Frequently asked questions

					
What DESIGN.md is, where it lives, and how AI coding agents use it.

				

				

					

						What is DESIGN.md?
						
An open spec from Google's Stitch project. A markdown file with YAML frontmatter that encodes a design system — colors, typography, spacing, components — in a format AI coding agents can read and apply consistently across every UI they generate.

					

					

						Where do I put the DESIGN.md file?
						
Repository root, named exactly DESIGN.md. Most agents discover it automatically. To make discovery explicit, reference ./DESIGN.md from your AGENTS.md in a "UI & Design System" section.

					

					

						Which AI tools read DESIGN.md?
						
Designed for Stitch but readable by any agent that supports AGENTS.md cross-references — Codex, Cursor, Claude Code, Aider, Sourcegraph Amp, Jules, and others — when you reference it from AGENTS.md.

					

					

						What does the linter check?
						
Seven rules: broken token references ({colors.foo} pointing at nothing), missing primary/background colors, WCAG AA contrast failures on component color pairs, orphaned tokens never referenced, missing typography scales, section ordering, and an overall token count summary.

					

					

						Can I export to other formats besides DESIGN.md?
						
Yes. The generator exports the same tokens as native CSS custom properties (:root { --colors-primary: ... }), a Tailwind v4 theme block, and W3C DTCG-format JSON for tools like Style Dictionary, Tokens Studio, or any pipeline that consumes the community standard.

					

					

						Is anything sent to a server?
						
No. Everything — palette generation, contrast checks, linting, exports — runs entirely in your browser. The whole generator works offline once loaded.

					

				

			

		

	


	
	

		

			
		

	


	

	
Copied to clipboard!