# 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
- [DESIGN.md Library](https://designmd.app/library) — Documented DESIGN.md files by vertical and style, ready to copy
- [Brand Collection](https://designmd.app/brands) — Real brand DESIGN.md files extracted from public sources (Nubank NuDS, iFood Pomodoro, Santander Flame, Itau Voxel, DSGov, Olist, RD Saúde Pulso, Stripe, Apple, etc.)
- [What is DESIGN.md](https://designmd.app/what-is-design-md) — Complete technical reference on the format and official specification
- [Integrations](https://designmd.app/integrations) — DESIGN.md integrations for AI agents: Claude Code, Cursor, Kiro, Windsurf, Google Stitch
- [Guides](https://designmd.app/guides) — Agent-specific setup guides with step-by-step configuration
- [Patterns by Industry](https://designmd.app/for) — DESIGN.md patterns by industry vertical (SaaS, e-commerce, fintech, etc.)
- [Blog](https://designmd.app/blog) — Technical articles on DESIGN.md, design systems for AI, vibe coding
- [Agent Skills](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, missing-primary, contrast-ratio, orphaned-tokens, token-summary, missing-sections, missing-typography, section-order, unknown-key; +1 more rule in the next release)
- Exit codes: lint 0=no errors/1=errors; diff 0=no regression/1=regression/2=input failure; export 0=success
- Lint JSON summary shape: { errors, warnings, infos }
- Compatibility: any agent that reads project files (Claude Code, Cursor, Kiro, Windsurf, Stitch)
- Purpose: persistent visual context that prevents inconsistent AI-generated UI

## When to use this
- **AI coding agents** (Claude Code, Cursor, Kiro, Windsurf, Stitch) — read DESIGN.md from project root for consistent UI generation
- **Design system teams** — extract tokens via `npx @google/design.md export` to Tailwind or DTCG
- **Code review** — run `npx @google/design.md diff` in CI to prevent visual regressions
- **Learning** — study real brand DESIGN.md files to understand design token architecture
- **Vibe coding** — provide persistent visual context to prevent inconsistent AI-generated interfaces

## Alternative names and common misspellings
People often search for DESIGN.md using these variations:
- desainmd, desain md — Indonesian/Malay spelling influence
- desing md, desing.md — common typo (missing 'i')
- design.md, designmd — correct forms
- getdesignmd — looking for the CLI or package
- design md library, design.md library — looking for this site's library
- design md template, design md templates — looking for ready-to-use files
- design system md, system design md — related concepts
- app design md — mobile/app context

All these terms refer to the same format: DESIGN.md files for AI coding agents.

## Related
- [Official specification](https://github.com/google-labs-code/design.md) — GitHub repo
- [Agent skills marketplace](https://skill.dev.br) — SKILL.md modules
- [Author](https://ft.ia.br) — ft.ia.br

## Extended documentation
- [llms-full.txt](https://designmd.app/llms-full.txt) — Full version with complete library catalog, guides and blog
- [API Catalog](https://designmd.app/.well-known/api-catalog) — Machine-readable API discovery
- [Auth Protocol](https://designmd.app/auth.md) — Agent authentication and access policy