Por que todo site feito com IA parece o mesmo

Você pede um site para a IA. Vem bonito. Você pede a segunda tela e ela vem bonita também, só que de outro site. O azul mudou de tom, o botão mudou de altura, o título que era grande virou médio.

O modelo não está incapaz. É que ninguém disse a ele qual é o seu azul. Cada pedido começa do zero, e do zero todo modelo vai para o mesmo lugar: gradiente roxo, canto arredondado, Inter.

A correção é um arquivo. Uma página de markdown que o agente lê antes de desenhar qualquer coisa, com os valores exatos e o papel de cada um. Chama DESIGN.md, e o resto deste post é como conseguir o seu.

Primeiro: roube de quem já acertou

Antes de decidir nada, vale ver sistema de gente que passou anos afinando o seu. A Refero Styles extraiu o design system de mais de 2.000 produtos e publicou cada um em formato que máquina lê.

Os filtros já dizem bastante sobre como pensar o próprio: Minimal Design, Clean SaaS, Editorial Type, Soft Gradients, Monochrome UI, Playful Design, High Contrast, Premium Design.

A Refero também não é projeto de fim de semana. Ela nasceu de uma biblioteca que cataloga screenshots de produto web e iOS há anos, então o acervo tem lastro.

A anatomia, vista de perto

Abre qualquer um e você vê o que precisa reproduzir. Esse é o sistema da Apple:

Repara na tabela de cores. Ela tem quatro colunas, e a quarta é a que importa: Papel.

Apple Blue | #0071e3 | --color-apple-blue | Filled action buttons, selected states Frost | #f5f5f7 | --color-frost | Page canvas, body backgrounds, footer surface

Um hex sozinho não ensina nada a um agente. Ele vai usar seu azul de marca num parágrafo inteiro e achar que obedeceu. O papel é o que amarra: onde entra, e onde nunca entra.

A tipografia segue a mesma lógica. A entrada não diz “SF Pro” e para por aí: diz SF Pro Display para títulos de 40px pra cima, com pesos 400, 600 e 700, altura de linha entre 1.07 e 1.19, e tracking negativo que aperta conforme o tamanho cresce.

O resumo de uma linha é a melhor parte do documento: “white room with a single blue switch”. Cabe na cabeça, e qualquer pessoa da equipe consegue julgar uma tela contra isso.

O prompt

Copia o bloco, troca as cinco linhas do CONTEXTO, roda. Ele não escreve nada antes de entender o que é o seu produto.

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.

Duas coisas dentro dele merecem explicação.

A seção ## Proibido existe porque agente derrapa no negativo. Dizer “use azul nos botões” funciona; o que salva a terceira tela é ter escrito “nunca use azul em bloco de texto”.

A marca de valor inventado obriga o modelo a confessar onde chutou. Sem ela você recebe uma escala de espaçamento inteira com cara de decisão e só descobre o chute três telas depois.

Onde rodar

No Claude Design, se você quer ver acontecendo. Conversa de um lado, tela do outro. Escreve o DESIGN.md, pede a home logo em seguida e comenta direto no canvas o que estiver errado. A correção volta pro documento, não só pro pixel, e descobrir que aquele cinza não funciona leva dois minutos em vez de uma semana. Precisa de plano pago e ainda está em research preview.

No Codex ou no Claude Code, se você já tem repositório. Salva como DESIGN.md na raiz e toda tarefa de tela passa a começar com “leia o DESIGN.md antes”. Terminada a tela, vem o pedido que quase todo mundo esquece: “compare esta tela com o DESIGN.md e liste onde ela desobedece”.

O formato é portátil. Nasceu no Google Stitch e hoje é lido por Cursor, Claude Code, Codex, v0 e Lovable, então dá pra escrever uma vez só.

Com o sistema pronto, monta a página

Aí sim faz sentido pegar bloco pronto. A 21st.dev é um registro de componentes React publicados por design engineers, com preview ao vivo e instalação via shadcn.

São 12 mil componentes e 2 mil blocos de marketing, divididos em Animated heroes, Hero sections, Shaders, Liquid & metal, Backgrounds, Gradients e Footers. Cada um tem um botão “Copy prompt” que você joga direto no agente.

Dois avisos honestos. O plano grátis libera duas cópias por dia e os templates bons são pagos. E a busca é mais rasa do que o número sugere: procurei por hero escuro com destaque em cursivo e vieram três resultados, dois do mesmo autor. Serve para o comum, não para o específico, que é justamente por que você escreveu o DESIGN.md primeiro.

Por último, o acabamento

O Spell UI é grátis, open-source, e faz uma coisa só muito bem: efeito.

Blur Reveal, Shimmer Text, Light Rays, Exploding Input, Tilt Card, Perspective Book. Fica pro fim de propósito: nenhum site trava por falta de texto que brilha, e sim por falta de estrutura. Sobremesa antes do prato estraga os dois.

O resumo do método

1. Acha um produto que você admira e pega o DESIGN.md dele na Refero.
2. Roda o prompt e escreve o seu, com papel em cada token.
3. Monta a página com blocos da 21st, obedecendo o documento.
4. Só então, acabamento.

A diferença não aparece na primeira tela. Aparece na décima, quando ela ainda parece da mesma família.

Este site foi feito assim. O DESIGN.md do portal saiu do prompt acima e está aberto para você copiar.