o problema
“Deixa bonito” devolve o genérico.
Quando você pede um site pro Claude sem nenhuma referência, ele faz a média de tudo o que já viu: o mesmo hero, o mesmo degradê, o mesmo card com sombra. Ele sabe desenhar. O que falta é uma regra pra seguir: qual cor, qual fonte, quanto espaço, como é o botão.
O DESIGN.md é essa regra, num arquivo só.
o que é
Um arquivo que o Claude lê antes de desenhar.
O DESIGN.md é um formato aberto, criado pelo Google Stitch: um texto simples que fica na raiz do projeto e descreve como o site deve parecer. A coleção awesome-design-md (da VoltAgent, licença MIT, mais de 119 mil estrelas no GitHub) traz esse arquivo pronto para mais de 70 marcas: Apple, Tesla, Ferrari, Nike, Notion, Spotify, Stripe, Linear e outras.
- 01As cores, com o código de cada uma.
- 02As fontes, com tamanho, peso e espaçamento de cada nível de título.
- 03Margens, grid e raio das bordas.
- 04Os componentes: menu, botões, cards, formulários e rodapé.
- 05Uma lista do que fazer e do que a marca nunca faz.
o que você vai conseguir
No fim deste guia, você vai:
- 01Instalar o padrão visual de uma marca grande no seu projeto com um comando.
- 02Fazer o Claude criar páginas seguindo esse padrão, sem você saber design.
- 03Trocar a marca de referência e ver o site inteiro mudar.
- 04Adaptar o padrão pra marca do seu cliente sem virar cópia.
antes de começar
Você vai precisar de:
- O Claude Code (também funciona no Cursor, no Codex e no Gemini).
- O Node.js instalado, pra rodar o comando npx.
- Uma pasta de projeto, nova ou que já exista.
passo 01
Escolha a marca no getdesign.md.
Abra o getdesign.md e role até a lista. Cada marca tem uma descrição curta do estilo e uma prévia renderizada com o arquivo aplicado.
