DESIGN.md — o que é, como funciona, por que importa

DESIGN.md é um arquivo Markdown que serializa um design system completo — cores, tipografia, espaçamento, padrões de componentes e restrições visuais — em formato otimizado para consumo por LLMs.

Em março de 2026, o Google Stitch introduziu o formato como parte de uma atualização que incluiu canvas infinito, agente de design com memória de projeto e prototipagem instantânea. DESIGN.md é o componente menos visível dessa atualização, mas o mais reutilizável fora do Stitch.

Por que isso importa

LLMs processam cada prompt de forma isolada. Sem um arquivo de referência no repositório, o agente não tem como saber que #2665fd é a cor primária do projeto ou que botões usam rounded-lg. O resultado: cada componente gerado segue decisões visuais diferentes.

DESIGN.md resolve isso colocando o design system inteiro no context window do agente. O agente lê antes de gerar qualquer UI.

Estrutura mínima

# Design System
## Overview
Interface minimal para app de produtividade.
## Colors
- **Primary** (#2665fd): CTAs, estados ativos
- **Surface** (#0b1326): Backgrounds
## Typography
- Headlines: Geist, semi-bold
- Body: Geist, regular, 14-16px
## Components
- Buttons: rounded-lg, primary filled
## Do's and Don'ts
- Usar primary apenas para ações principais

Próximos passos

Explore a biblioteca de DESIGN.md para encontrar um design system pronto para o seu projeto, ou leia o guia completo sobre o formato.