DESIGN.md + Google Stitch

Pré-requisitos

• Acesso ao Google Stitch
• Um arquivo DESIGN.md — copie da biblioteca, gere com a skill design-md ou exporte do próprio Stitch

Configuração

1. Importar o DESIGN.md

O Google Stitch criou o formato DESIGN.md — o suporte é nativo. Para importar:

1. Abra o projeto no Stitch
2. Acesse Settings → Design System → Import DESIGN.md
3. Selecione o arquivo ou cole o conteúdo
4. O Stitch valida e aplica as regras automaticamente

Stitch UI:
Settings → Design System → Import DESIGN.md → Selecionar arquivo

2. Verificar a importação

Após o import, o Stitch exibe um resumo do design system carregado:

• Paleta de cores com swatches
• Escala tipográfica
• Escala de espaçamento
• Padrões de componentes
• Restrições (Do’s and Don’ts)

Verifique se todos os valores foram interpretados corretamente. O Stitch parseia o Markdown e extrai os valores estruturados.

3. Gerar UI com o design system

Com o DESIGN.md importado, toda geração de UI no Stitch segue as regras definidas:

Prompt: Crie um dashboard com sidebar, header e grid de cards

O Stitch aplica automaticamente as cores, tipografia, espaçamento e padrões de componentes do DESIGN.md importado. Não é necessário referenciar o arquivo em cada prompt.

4. Exportar DESIGN.md do Stitch

Se você criou o design system diretamente no Stitch, exporte para usar em outros agentes:

1. Acesse Settings → Design System → Export DESIGN.md
2. O Stitch gera o arquivo no formato padrão
3. Salve na raiz do projeto para uso com Claude Code, Cursor, Kiro ou Windsurf

Troubleshooting

• Import falhou — verifique se o DESIGN.md segue a estrutura padrão com headings Markdown (## Colors, ## Typography, etc.). O Stitch espera seções específicas para parsear corretamente.
• Cores não reconhecidas — use formato hex (#1A73E8) nas definições de cor. O Stitch pode não reconhecer nomes de cor sem hex (ex: “azul escuro” sem valor).
• Componentes não aplicados — a seção Components precisa de padrões com valores concretos. “Botão arredondado” é vago — use “rounded-lg, py-2 px-4, bg brand-primary”.
• Design system desatualizado — reimporte o DESIGN.md após edições. O Stitch não monitora mudanças no arquivo automaticamente.

Combinações úteis

• Stitch → outros agentes — exporte o DESIGN.md do Stitch e use com Claude Code, Cursor, Kiro ou Windsurf. O formato é o mesmo — funciona em qualquer agente que leia arquivos do repositório.
• Biblioteca designmd.app → Stitch — copie um DESIGN.md da biblioteca e importe no Stitch para ter um design system pronto em segundos. Customize os valores depois.
• Stitch + prototipagem — o Stitch usa o DESIGN.md para prototipagem instantânea. Combine com o canvas infinito e a interação por voz para iterar rapidamente sobre o design.
• Versionamento — mantenha o DESIGN.md no Git mesmo usando Stitch. Isso permite histórico de mudanças e uso simultâneo com outros agentes fora do ecossistema Google.