Por que todo site gerado por IA parece igual

É tentador descrever isso como um problema de gosto — o modelo viu um bilhão de landing pages e regride para a média. Isso faz parte, mas não é o mecanismo, e leva as pessoas à solução errada (prompts melhores). O mecanismo é mais tedioso e muito mais acionável: um agente de código solicitado a construir uma UI recorre a uma biblioteca de componentes, e essa biblioteca entrega padrões. Esses padrões foram projetados para serem inofensivos, que é exatamente o que os torna universais.

Peça a cinco ferramentas diferentes — Claude Code, Cursor, v0, Lovable, Bolt — um dashboard, sem nenhuma outra instrução. Você receberá cinco layouts e uma única identidade visual. Elas não estão copiando umas às outras. Cada uma está, independentemente, fazendo a coisa sensata com o mesmo material de partida.

O tema padrão do shadcn/ui é construído sobre a escala zinc do Tailwind, com slate e gray como substituições comuns. É um cinza frio, levemente azulado. Uma vez que você nota, não consegue parar de notar: é o fundo da maioria dos produtos feitos por IA lançados nos últimos dois anos. É um neutro genuinamente bom, e esse é o problema — é bom o suficiente para que ninguém o substitua.

A entrega não é o cinza em si, mas sua *uniformidade*. Uma interface projetada geralmente inclina seus neutros levemente para a cor da marca, para que os cinzas pareçam relacionados ao destaque. Uma interface padrão tem uma rampa pura ao lado de um destaque não relacionado, e os dois nunca parecem pertencer um ao outro.

A Inter é uma tipografia de UI excelente, e é por isso que está em todo lugar e por que agora parece um padrão, e não uma decisão. Onde não é literalmente Inter, é a stack de sistema font-sans, que resulta em uma grotesque quase idêntica na maioria das máquinas. De qualquer forma, a página tem uma única família fazendo todo o trabalho: títulos, corpo, labels, números.

O fato de haver apenas uma família é o sinal real, mais do que qual família seja. Um design system quase sempre faz pares — uma fonte de display com personalidade para títulos contra uma fonte de trabalho para o corpo, ou, no mínimo, um contraste deliberado de peso e largura dentro de uma mesma superfamília. Páginas de família única parecem planas, mesmo quando todas as outras decisões são sólidas.

O --radius padrão do shadcn é 0.5rem, e ele se propaga para botões, inputs, cards, dialogs e popovers da mesma forma. Raio uniforme em todos os tamanhos de elemento não é como design systems se comportam: um botão de 44px e um card de 400px com o mesmo raio de canto fazem o card parecer suave demais e o botão parecer uma 'bolha', porque o raio é percebido em relação ao elemento em que está.

:root {
  /* The line most AI-built projects never touch */
  --radius: 0.5rem;
}

Hero, depois três cards iguais, depois uma faixa de depoimentos, depois um CTA. Este é genuinamente fruto da gravidade dos dados de treinamento, e não de um padrão de configuração — é a estrutura de página de marketing mais comum na web, então é a forma que um modelo produz quando o briefing não sugere outra. Não está errado. É simplesmente o layout que não transmite nenhuma informação sobre o seu produto.

A resposta comum é escrever um prompt mais longo: *use uma paleta quente, combine uma display serif com um corpo grotesque, varie o raio.* Isso funciona. Funciona para uma tela, e geralmente funciona para a segunda e a terceira.

Então a qualidade cai, e cai de uma forma específica. O agente não está ignorando sua instrução — ele está mantendo uma conversa cada vez mais longa na qual seu parágrafo de estilização está competindo com tudo o que veio depois. Na quinta tela, ele lembra do *quente* e perdeu os valores hex, então ele aproxima. A aproximação é um quente ligeiramente diferente. A sexta tela aproxima a aproximação.

Quem está no meio desse processo chama isso de *design drift*, e é a razão pela qual um app feito via 'vibe' que parecia nítido na sexta-feira parece ter sido montado por um comitê na segunda. A instrução vivia na conversa, e conversas se degradam.

Um design system interrompe o drift pela mesma razão que o interrompe em equipes humanas: os valores vivem em algum lugar durável e são consultados, em vez de serem carregados na cabeça de alguém. Para um agente de código, esse lugar é um DESIGN.md mais um conjunto de tokens no repo. Ambos são relidos no início de cada sessão, então a tela vinte resolve o mesmo --primary que a tela um — e não um similar.

Este é todo o argumento para dar a um agente um sistema real em vez de apenas uma descrição melhor de um. A camada de tokens semânticos importa mais do que a paleta: --primary e --muted-foreground sobrevivem a um redesign, enquanto blue-600 espalhado pelo markup não.

Na maioria das vezes, não, e essa é a descoberta mais desconfortável. Analisamos 299 arquivos DESIGN.md públicos no GitHub — o arquivo cuja única função é evitar isso — e medimos o que havia neles.

Dos 72 que descrevem um design system visual, 21% especificam uma escala de radius e 26% especificam elevação. Esses são dois dos quatro sinais mencionados acima, deixados nos padrões por três quartos das pessoas que se dedicaram especificamente a escrever um contrato de design. 69% omitem completamente o dark mode, deixando todo o segundo tema para o agente inventar. E 86% nomeiam cores por matiz ou listam hexes puros em vez de usar papéis semânticos, o que significa que o arquivo não pode ser aplicado a nenhum componente que não tenha sido explicitamente descrito.

Existe uma versão de segunda ordem do mesmo problema: 54% dos arquivos contêm pelo menos um adjetivo vago substituindo um valor, liderados por *clean* (39%) e *modern* (36%). Um adjetivo não substitui um padrão. Ele pede para o agente escolher um.

1. 1

   Amostre o background

   Pegue o hex do background da sua página. Se for #09090b, #18181b, #0f172a ou #020617, você está usando uma rampa de zinc ou slate intocada.

2. 2

   Conte as famílias tipográficas

   Abra os estilos computados de um H1 e de um parágrafo de corpo. A mesma font-family em ambos significa que uma única família está fazendo todo o trabalho.

3. 3

   Compare dois radii

   Meça o radius do canto de um botão e do seu maior card. Valores idênticos significam que ninguém escalou o radius de acordo com o tamanho do elemento.

4. 4

   Compare sua primeira e última tela

   Coloque a primeira tela que você criou ao lado da mais recente. Liste cada valor que diverge — essa lista é o seu drift.

5. 5

   Decida onde a resposta reside

   Para cada divergência, pergunte se o valor correto existe em algum lugar durável. Se a resposta honesta for 'no prompt que escrevi em março', isso é o que precisa ser corrigido.