# designmd.app

> Open reference of documented DESIGN.md files for AI coding agents.

## What is DESIGN.md
A Markdown file with YAML front matter that combines machine-readable design tokens (colors, typography, spacing, rounded, components) with human-readable design rationale prose. Open-source format maintained by Google (github.com/google-labs-code/design.md). Introduced by Google Stitch in March 2026. The agent reads it from the project root and applies visual rules consistently across all generated UI.

## Format structure
- Two layers: YAML front matter (tokens) + Markdown body (prose)
- Token types: Color (#hex sRGB), Dimension (px/em/rem), Typography (object), Token Reference ({path.to.token})
- 8 sections in canonical order: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts
- Official CLI: npx @google/design.md lint|diff|export|spec
- Interoperability: export to Tailwind theme config and DTCG tokens.json (W3C)

## Site sections
- https://designmd.app/library — Documented DESIGN.md files by vertical and style, ready to copy
- https://designmd.app/what-is-design-md — Complete technical reference on the format and official specification
- https://designmd.app/guides — Agent-specific setup: Claude Code, Cursor, Kiro, Windsurf, Google Stitch
- https://designmd.app/for — DESIGN.md patterns by industry vertical (SaaS, e-commerce, fintech, etc.)
- https://designmd.app/blog — Technical articles on DESIGN.md, design systems for AI, vibe coding
- https://designmd.app/skills — AI agent skills (SKILL.md modules) by ft.ia.br

## Key technical details
- Format: Markdown + YAML front matter (machine-readable tokens)
- Sections: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts
- Token schema: colors, typography, rounded, spacing, components (with cross-references {path.to.token})
- Validation: npx @google/design.md lint (broken-ref, contrast-ratio, missing-primary, orphaned-tokens, section-order)
- Compatibility: any agent that reads project files (Claude Code, Cursor, Kiro, Windsurf, Stitch)
- Purpose: persistent visual context that prevents inconsistent AI-generated UI

## Related
- github.com/google-labs-code/design.md — Official specification
- skill.dev.br — AI agent skills marketplace (SKILL.md modules)
- ft.ia.br — Author

## Extended documentation
- https://designmd.app/llms-full.txt — Full version with complete library catalog, guides and blog