Design.dev design.dev
AI Tools

DESIGN.md Generator

Build a tokenized design system AI coding agents can read and apply, following the open DESIGN.md spec. 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:

							
    
								
  • 
									Validate against the spec (JSON findings)
									npx @google/design.md lint DESIGN.md
								
    • 
								
  • 
									Tailwind v4 @theme block
									npx @google/design.md export --format css-tailwind DESIGN.md
								
    • 
								
  • 
									Tailwind v3 theme.extend config
									npx @google/design.md export --format json-tailwind DESIGN.md
								
    • 
								
  • 
									W3C DTCG tokens.json
									npx @google/design.md export --format dtcg DESIGN.md
								
    • 
								
  • 
									Detect token regressions
									npx @google/design.md diff DESIGN.md DESIGN-v2.md
								
    • 
								
  • 
									Output spec + lint rules for agent prompts
									npx @google/design.md spec --rules
								
    • 
							

						

					


					
					

						
							
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?
						
Eight rules, mirroring the official @google/design.md linter: broken-ref (token references like {colors.foo} that don't resolve), missing-primary (no primary color defined), contrast-ratio (WCAG AA failures on component backgroundColor/textColor pairs), orphaned-tokens (colors never referenced), missing-typography (colors defined but no type tokens), missing-sections (no spacing or rounded scales), section-order (sections out of canonical order), and token-summary (info-level count by group).

					

					

						What is the canonical section order?
						
Sections use ## headings in this order, per the spec: Overview (or "Brand & Style"), Colors, Typography, Layout (or "Layout & Spacing"), Elevation & Depth, Shapes, Components, and Do's and Don'ts. Sections can be omitted, but those present must appear in this sequence — the section-order rule flags any deviation.

					

					

						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 (matching the official css-tailwind exporter), and W3C DTCG-format JSON for tools like Style Dictionary, Tokens Studio, or any pipeline that consumes the community standard. The spec is still at alpha, so we track upstream changes closely — pin the CLI version in CI if you depend on exact output.

					

					

						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!