# designmd.app

> Referência aberta de arquivos DESIGN.md documentados para agentes de IA.

## O que é 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.

## Estrutura do formato
- Duas camadas: YAML front matter (tokens) + corpo Markdown (prosa)
- Token types: Color (#hex sRGB), Dimension (px/em/rem), Typography (object), Token Reference ({path.to.token})
- 8 seções na ordem canônica: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts
- CLI oficial: npx @google/design.md lint|diff|export|spec
- Interoperabilidade: export para Tailwind theme config e DTCG tokens.json (W3C)

## Seções do site
- https://designmd.app.br/library — Coleção de DESIGN.md por vertical e estilo, documentados e prontos para copiar
- https://designmd.app.br/o-que-e-design-md — Referência técnica completa sobre o formato e especificação oficial
- https://designmd.app.br/guides — Setup por agente: Claude Code, Cursor, Kiro, Windsurf, Google Stitch
- https://designmd.app.br/for — Padrões DESIGN.md por vertical (SaaS, e-commerce, fintech, etc.)
- https://designmd.app.br/blog — Artigos técnicos sobre DESIGN.md, design systems para IA, vibe coding
- https://designmd.app.br/skills — Skills de agente de IA (módulos SKILL.md) por ft.ia.br

## Detalhes técnicos
- Formato: Markdown + YAML front matter (tokens legíveis por máquina)
- 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)
- Propósito: contexto visual persistente que previne UI inconsistente gerada por IA

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

## Documentação expandida
- https://designmd.app.br/llms-full.txt — Versão completa com catálogo de todos os DESIGN.md, guias e blog