# designmd.app

> Referência aberta de arquivos DESIGN.md documentados para agentes de IA.
> Open reference of documented DESIGN.md files for AI coding agents.

## O que é DESIGN.md / What is DESIGN.md
Arquivo Markdown com YAML front matter que combina design tokens legíveis por máquina (cores, tipografia, espaçamento, rounded, componentes) com prosa de racional de design legível por humanos. Formato open-source mantido pelo Google (github.com/google-labs-code/design.md). Introduzido pelo Google Stitch em março de 2026. O agente lê o arquivo na raiz do projeto e aplica regras visuais de forma consistente em toda UI gerada.

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.

## Estrutura do formato / Format structure
- Duas camadas: YAML front matter (tokens) + corpo Markdown (prosa) / 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 seções na ordem canônica / 8 sections in canonical order: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts
- CLI oficial / Official CLI: npx @google/design.md lint|diff|export|spec
- Interoperabilidade / Interoperability: export para Tailwind theme config e DTCG tokens.json (W3C)

## Seções do site / Site sections
- /library — Coleção de DESIGN.md por vertical e estilo, documentados e prontos para copiar / Documented DESIGN.md files by vertical and style, ready to copy
- /o-que-e-design-md — Referência técnica completa sobre o formato e especificação oficial / Complete technical reference on the format and official specification
- /en/what-is-design-md — English version of the format reference
- /guides — Setup por agente: Claude Code, Cursor, Kiro, Windsurf, Google Stitch / Agent-specific setup
- /for — Padrões DESIGN.md por vertical (SaaS, e-commerce, fintech, etc.) / DESIGN.md patterns by industry vertical
- /blog — Artigos técnicos sobre DESIGN.md, design systems para IA, vibe coding / Technical articles
- /skills — Skills de agente de IA (módulos SKILL.md) por ft.ia.br / AI agent skills

## Detalhes técnicos / Key technical details
- Formato: Markdown + YAML front matter (tokens legíveis por máquina) / Format: Markdown + YAML front matter (machine-readable tokens)
- Seções: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts
- Token schema: colors, typography, rounded, spacing, components (com referências cruzadas {path.to.token})
- Validação: npx @google/design.md lint (broken-ref, contrast-ratio, missing-primary, orphaned-tokens, section-order)
- Compatibilidade: qualquer agente que leia arquivos do repositório (Claude Code, Cursor, Kiro, Windsurf, Stitch) / Compatibility: any agent that reads project files
- Propósito: contexto visual persistente que previne UI inconsistente gerada por IA / Purpose: persistent visual context that prevents inconsistent AI-generated UI

## Relacionados / Related
- github.com/google-labs-code/design.md — Especificação oficial / Official specification
- skill.dev.br — Marketplace de skills de agente de IA (módulos SKILL.md) / AI agent skills marketplace
- ft.ia.br — Autor / Author

## Documentação expandida / Extended documentation
- /llms-full.txt — Versão completa com catálogo de todos os DESIGN.md, guias e blog / Full version with complete library catalog, guides and blog