Ele não escreve nada antes de entender o que é o seu produto. Se faltar informação, pergunta no máximo três coisas e para.
COLA NO CLAUDE DESIGN OU NO CODEX Copiar
Você vai escrever o DESIGN.md do meu produto: um documento que qualquer agente
de IA lê antes de gerar tela e passa a obedecer. Não é moodboard, não é texto
de marca. É contrato.
## CONTEXTO (a única parte que eu preencho)
- PRODUTO: <o que é, em uma frase, e para quem>
- SENSAÇÃO: <três adjetivos que a pessoa deve sentir ao abrir>
- REFERÊNCIAS: <1 a 3 produtos reais que eu admiro, e o que admiro em cada>
- INEGOCIÁVEIS: <cores de marca em hex, fonte, logo — o que já existe e não muda>
- ONDE VIVE: <landing page / app web / dashboard / mobile>
## COMO VOCÊ TRABALHA
Antes de escrever, me faça no máximo 3 perguntas — só as que mudam o resultado
e que eu não respondi acima. Se o CONTEXTO já bastar, não pergunte nada e
escreva.
Depois entregue o DESIGN.md completo, em markdown, nesta ordem:
1. `# <Produto> — Style Reference`
2. Uma linha entre `>` que resume o espírito em imagem concreta, não em
adjetivo. Bom: "sala branca com um único interruptor azul". Ruim:
"moderno e elegante".
3. `**Theme:** light` ou `dark`
4. Linguagem visual — um parágrafo de 100 a 150 palavras explicando a lógica
do sistema: o que domina, o que recua, de onde vem o ritmo. Quem ler isso
tem que conseguir reconhecer uma tela fora do padrão.
5. `## Tokens — Cores` — tabela `| Nome | Valor | Token | Papel |`.
O Papel é obrigatório e é específico: onde essa cor entra e onde ela nunca
entra. "Azul primário" não é papel. "Preenchimento de botão de ação e
estado selecionado, nunca em texto corrido" é papel.
Inclua os neutros. A maioria dos sistemas quebra no cinza, não no destaque.
6. `## Tokens — Tipografia` — uma subseção por família, com: para que serve,
fonte substituta se a original não carregar, pesos, tamanhos em px, altura
de linha por tamanho e tracking por tamanho.
Se houver fonte decorativa, declare explicitamente o teto de uso dela.
7. `## Tokens — Espaçamento e Raio` — a escala inteira, com a regra de quando
se pula um degrau.
8. `## Componentes` — botão, campo de formulário, card e navegação no mínimo.
Para cada um: anatomia, estados (repouso, hover, foco, desabilitado, erro)
e as medidas que não podem mudar.
9. `## Regras de composição` — densidade, largura máxima de leitura, o que
pode aparecer junto e o que nunca aparece na mesma tela.
10. `## Proibido` — de 5 a 8 linhas do que nunca se faz neste sistema.
Escreva pensando em um agente com pressa: é aqui que ele derrapa.
11. `## Checklist` — perguntas objetivas para conferir uma tela pronta contra
este documento.
## REGRAS DE ESCRITA
- Todo valor é exato. Hex, px, ms, peso numérico. Zero "médio", "suave",
"generoso".
- Toda regra diz o porquê em meia linha. Agente cumpre melhor regra explicada.
- Acessibilidade entra como número, não como intenção: contraste mínimo de
4.5:1 em texto corrido e 3:1 em elemento de interface, e foco sempre visível.
- Se você precisar inventar um valor que eu não dei, marque com "inventado" no
fim da linha. Eu confiro depois. Não me entregue chute disfarçado de decisão.
- Sem emoji, sem texto de venda, sem "eleve sua experiência".
Quando terminar, liste em separado tudo que ficou marcado como inventado.
RESGATAR MATERIAL →