A mesmice é herdada, não inventada
É tentador descrever isso como um problema de gosto. O modelo viu um bilhão de landing pages e regride para a média delas. 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 um dashboard para cinco ferramentas diferentes (Claude Code, Cursor, v0, Lovable, Bolt), sem nenhuma outra instrução. Você receberá cinco layouts e uma única identidade visual. Eles não estão copiando uns aos outros. Cada um está, independentemente, fazendo a escolha lógica com o mesmo material de partida.
Aqui está a afirmação demonstrada na prática, em vez de apenas argumentada. A primeira aba é a média estatística: indigo-500, um gradiente roxo, Inter, cards rounded-xl. As outras abas são a *mesma página*, renderizada novamente através de um design system real. Nada no layout muda; cada diferença que você vê é o sistema.
Same app · different design system
The Default AI Look
Live renderIndigo-500, a purple gradient, Inter, rounded-xl cards. Nobody chose this: it's the statistical average of the training data, which is why everyone gets it.
Os quatro sinais e a origem de cada um
1. A rampa neutra
O tema padrão do shadcn/ui é construído sobre a escala zinc do Tailwind, com slate e gray como as substituições comuns. É um cinza frio, levemente azulado. Uma vez que você nota isso, não consegue mais desver: é o fundo da maioria dos produtos criados 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.
O denunciante não é o cinza em si, mas a 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.
2. Inter, ou algo indistinguível dela
A Inter é uma tipografia de UI excelente, e é por isso que está em todo lugar e por que agora soa como um padrão, e não como uma decisão. Onde não é literalmente a Inter, é a stack font-sans do sistema, 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 uso de apenas uma família é o verdadeiro sinal, mais do que qual família seja. Um sistema projetado quase sempre faz pares: uma fonte display com personalidade para títulos contra uma fonte robusta 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.
3. `0.5rem` em tudo
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 onde está.
:root {
/* The line most AI-built projects never touch */
--radius: 0.5rem;
}4. O grid de três cards
Hero, depois três cards iguais, depois uma faixa de depoimentos e, por fim, um CTA. Este caso é genuinamente a gravidade dos dados de treinamento, e não um padrão de configuração. É a estrutura de página de marketing mais comum na web, portanto, é a forma que um modelo produz quando o briefing não implica outra. Não está errado. É simplesmente o layout que não transmite nenhuma informação sobre o seu produto.
Por que prompts melhores param de funcionar
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.
O desvio não é o agente esquecendo sua instrução. É o agente lembrando dela aproximadamente, seis vezes seguidas.
Quem está imerso nisso chama esse fenômeno de *design drift*, e é por isso que um app criado via "vibe-coding", que parecia impecável na sexta-feira, parece ter sido montado por um comitê na segunda. A instrução ficou na conversa, e conversas se perdem.
O teste que separa esses dois modos de falha: abra a primeira tela e a oitava lado a lado. Se elas divergem no espaçamento e na cor, mas cada uma é internamente consistente, isso é drift. Se ambas são internamente inconsistentes, o sistema nunca foi especificado.
A solução é um arquivo que o agente releia, não um parágrafo que ele lembre
Um design system interrompe o drift pelo mesmo motivo que o interrompe em equipes humanas: os valores residem em algum lugar durável e são consultados, em vez de ficarem na cabeça de alguém. Para um agente de código, esse lugar é um DESIGN.md somado a um conjunto de tokens no repo. Ambos são relidos no início de cada sessão, para que a tela vinte resolva o mesmo --primary que a tela um, e não um valor similar.
| No prompt | Em tokens + DESIGN.md | |
|---|---|---|
| Sobrevive a uma nova sessão | Não: o contexto é resetado | Sim: relido a partir do repo |
| Precisão após 10 telas | Aproximado ('meio quente') | Hex exato, sempre |
| Revisável em um PR | Não | Sim. É um arquivo que gera diff |
| Funciona entre ferramentas | Reescrever por ferramenta | Mesmo arquivo para Claude Code, Cursor, v0 |
Este é todo o argumento para dar a um agente um sistema real em vez de 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 um blue-600 espalhado pelo markup não.
Token specimen · real values
Terrain Vivant
Live renderTerrain Vivant's actual tokens — the same values its exports use.
As pessoas que documentam isso realmente conseguem escapar dos defaults?
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 defaults por três quartos das pessoas que se propuseram 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.
Os defaults sobrevivem à tentativa de substituí-los
Tipografia é abordada em 83% dos arquivos e cor em 67%, porque essas são as duas coisas que as pessoas associam a "design". Radius, elevação e dark mode são os que permanecem silenciosamente genéricos. Os quatro sinais persistem não porque ninguém tentou, mas porque a maioria das tentativas cobre apenas a metade visível.
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 default. Ele pede para o agente escolher um.
Uma auditoria de cinco minutos
- 1
Amostre o background
Pegue o hex do background da sua página. Se for
#09090b,#18181b,#0f172aou#020617, você está usando uma rampa de zinc ou slate intocada. - 2
Conte as famílias tipográficas
Abra os estilos computados de um H1 e de um parágrafo de corpo. A mesma
font-familyem ambos significa que uma única família está fazendo todo o trabalho. - 3
Compare dois radii
Meça o corner radius 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
Faça o diff da 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
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 que precisa ser corrigido.
Se você constrói no Lovable, v0, Bolt ou Replit
Tudo o que foi dito acima aplica-se em dobro nos builders focados em chat, pois neles você não consegue sequer editar a configuração manualmente durante o fluxo: a conversa é a interface. A correção durável segue a mesma lógica, adaptada a como cada ferramenta mantém o contexto: cole um design system completo como a primeira mensagem (ou como conhecimento do projeto) e, então, construa sobre ele. Mantemos uma versão pronta para colar de cada kit por builder: temas para Lovable, para v0, para Bolt, para Replit e para Base44.
Ignore completamente os quatro padrões
Cada kit do Identity Forge vem com um conjunto completo de design tokens (neutros ajustados à cor de destaque, um par de fontes real, raio escalonado por elemento) além do DESIGN.md que seu agente lê antes de escrever a marcação. Kits gratuitos não exigem conta.
Isso é um problema do modelo ou das ferramentas ao redor dele?
Principalmente das ferramentas. O mesmo modelo produz UIs distintas quando recebe um conjunto de tokens e um brief, e UIs genéricas quando não recebe nenhum dos dois. O que varia é o material de partida, não a capacidade.
Mudar a cor de destaque resolve?
Não, e este é o desperdício de tarde mais comum. Trocar a cor de destaque mantendo os neutros padrão, a família tipográfica única e o raio uniforme produz a mesma página em um tom diferente. A tipografia e a estrutura carregam mais da identidade do que a cor de destaque.
Posso apenas dizer ao agente para evitar Inter e zinc?
Para uma sessão, sim. A instrução vive no contexto, portanto, ela se degrada conforme a conversa cresce e desaparece completamente quando você abre uma nova. Um arquivo no repositório não tem essa característica.
O shadcn/ui é o problema?
Não. O shadcn entrega padrões sensatos justamente para que você possa começar sem precisar decidir tudo, e sua camada de temas é o que torna a correção simples. O problema é que os padrões são tratados como finalizados, em vez de serem um ponto de partida.
Como faço para meu app no Lovable ou v0 parecer único?
Entregue à ferramenta um design system completo antes de construir, não adjetivos durante o processo. Cole o prompt completo de um kit (tokens, fontes, escala tipográfica, motivos, regras) como a primeira mensagem ou no conhecimento do projeto, e então solicite as funcionalidades normalmente. Adjetivos ('deixe moderno, menos genérico') movem uma tela um passo para longe do padrão; um sistema colado move todas as telas e permanece fixo entre sessões.
Quantas telas são necessárias para que o drift se torne visível?
Em nossos próprios testes, isso aparece por volta da quinta ou sexta tela de uma sessão contínua, e muito antes se você trocar de ferramenta no meio do caminho. Não há um número fixo: isso acompanha a extensão da conversa, não a contagem de telas.