Por que as telas de frontend feitas com Claude saem todas com a mesma cara?

Fonte Inter, gradiente roxo sobre fundo branco e animação mínima

Se você bateu o olho numa tela e já sabia que foi IA que fez, provavelmente foi por causa dessa combinação aí 🙂

E a parte que quase ninguém fala: o problema raramente é o modelo ser ruim

A própria Anthropic reconhece o padrão e até deu nome pra ele: distributional convergence, ou seja, o modelo amostra o centro estatístico das escolhas de design presentes nos dados de treino. Traduzindo: pedido genérico devolve a escolha média

Se o pedido não diz pra onde ir, ele vai pro meio da distribuição, que é exatamente o lugar onde todo mundo já está

E o visual repetido é só o primeiro sintoma da história

Os outros três são de hábito: o jeito que você pede o ajuste, o briefing estético que morre junto com a sessão e a marca que nunca entrou no contexto

Bora destrinchar os 4, um por um?

Sintoma 1: fonte Inter, gradiente roxo e layout SaaS genérico em todo projeto

O que você vê:

Você abre dois projetos diferentes, de nichos diferentes, e as telas parecem irmãs

Mesma tipografia, mesmo gradiente roxo no hero, mesmo card com borda arredondada, mesma animaçãozinha de nada. É o visual que denuncia geração automática antes de alguém ler uma linha do seu texto

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Por que acontece:

Esse é o caso clássico da convergência distribucional

Você pediu "uma landing page" ou "um dashboard", e o modelo preencheu os espaços em branco com a média do que existe no treino. Ele não errou, ele acertou o centro… que é justamente o problema

Quando não existe restrição, não existe escolha: existe estatística

Como resolver:

A skill oficial de frontend design do Claude ataca isso de um jeito bem direto: antes de escrever código, definir propósito, público e UMA direção estética específica

Uma só, e executada até o fim, sem meio termo

Alguns exemplos de direção que a própria skill cita:

• brutalista/cru
• maximalista
• retrô-futurista
• luxo/refinado
• editorial/revista
• lúdico
• orgânico
• art déco/geométrico
• pastel
• industrial

Repara que nenhuma dessas palavras é "bonito" ou "moderno"

Cada uma delas remove possibilidades, e remover possibilidade é o que tira o modelo do centro

Como prevenir:

Trata direção estética como requisito obrigatório do pedido, igual você trata stack e banco de dados

Não é detalhe de acabamento pra decidir no fim, é a primeira decisão. Se você deixar pra depois, o padrão já vai estar escrito em 40 componentes

Sintoma 2: você pede "mais bonito" e volta a mesma cara

O que você vê:

A tela ficou genérica, você pede "deixa mais bonito", "dá um tapa no visual", "deixa mais moderno"

E volta… a mesma coisa, com um gradiente a mais e um shadow diferente, né? haha

Por que acontece:

Porque "bonito" não é restrição

Adjetivo vago não remove nada do centro estatístico. Pra ele, bonito É o que está na média dos dados, então você literalmente pediu pra ele reforçar o padrão que você quer fugir

Como resolver:

Pede em dois formatos que funcionam muito melhor: proibição e recurso

A skill oficial lista explicitamente o que evitar:

• fontes de sistema e as mais batidas (Inter, Roboto, Arial)
• gradientes roxos previsíveis sobre branco
• layouts SaaS cookie-cutter
• componentes sem customização
• emoji usado como ícone

E orienta recursos concretos de estilo que vão além de trocar cor e fonte:

• pareamento tipográfico inesperado
• movimento orquestrado e interações acionadas por scroll (CSS puro quando é HTML, biblioteca Motion quando o projeto é React)
• fundos com atmosfera e profundidade via gradientes em camadas, padrões geométricos ou efeitos contextuais, em vez de cor sólida
• composição espacial com assimetria e quebra de grid

Se liga na diferença de pedido:

Ruim:  deixa essa tela mais bonita e moderna

Melhor: direção editorial/revista, sem Inter/Roboto/Arial,
sem gradiente roxo sobre branco, pareamento tipográfico
inesperado, fundo com profundidade em camadas e composição
assimétrica com quebra de grid

O segundo pedido tira opções da mesa, e é isso que muda a saída

Como prevenir:

Adjetivo fora, proibição e recurso dentro

Sempre que você for escrever "mais bonito", troca por "sem X" e "usando Y". Dói menos e entrega mais =)

Sintoma 3: você não quer reescrever o briefing estético em todo prompt

O que você vê:

Você descobre o pedido certo, funciona…

E na sessão seguinte tudo volta ao padrão, porque aquele briefing lindo morreu junto com o chat anterior

Por que acontece:

Simples: a orientação visual vivia só no prompt

Se a instrução não está instalada em nenhum lugar, ela depende da sua memória e da sua paciência de digitar a mesma coisa toda vez

Como resolver:

Existe um plugin oficial da Anthropic chamado frontend-design, mantido no repositório anthropics/claude-code, no caminho plugins/frontend-design

Ele também está publicado no diretório oficial anthropics/claude-plugins-official, em plugins/frontend-design

Pra instalar no Claude Code:

1. Rode o comando de instalação no Claude Code:

/plugin install frontend-design@claude-plugins-official

O erro comum deste passo: sair caçando nome de marketplace pra adicionar na mão. O marketplace oficial claude-plugins-official é adicionado automaticamente pelo Claude Code na primeira execução interativa, então se você nunca abriu o Claude Code interativo ainda, abra antes de tentar instalar

2. Confirme que o seu pedido continua trazendo direção estética

O erro comum deste passo: achar que plugin instalado substitui briefing. Ele melhora a orientação visual, mas propósito, público e direção continuam sendo decisão sua

3. Se você prefere trabalhar com a skill avulsa, ela também é distribuída no repositório de skills da Anthropic, no arquivo skills/frontend-design/SKILL.md

O erro comum deste passo: misturar as duas formas e depois não saber qual orientação está valendo. Escolhe um caminho e segue com ele

Como prevenir:

Deixa a orientação visual instalada no ambiente, não improvisada por prompt

O que está no ambiente sobrevive à sua falta de paciência, e isso é ótimo

Sintoma 4: o Claude não sabe como é a sua marca

O que você vê:

Cada tela nasce com uma identidade diferente

E nenhuma delas é a sua. O botão muda de personalidade entre páginas, a hierarquia tipográfica muda, e o produto parece feito por cinco pessoas que nunca se falaram

Por que acontece:

Porque nenhuma referência visual e nenhuma restrição de marca entrou no contexto

O modelo não adivinha paleta, nem tom, nem o que a sua marca NÃO faz. Sem isso, ele volta pro centro estatístico de novo

Como resolver:

São duas frentes, e as duas são rápidas

Frente 1: entregar referência visual

Print, mockup, tela de um produto concorrente, qualquer coisa que mostre o alvo. No Claude Code você pode:

1. Arrastar e soltar a imagem na janela do Claude Code

2. Colar da área de transferência com Ctrl+V (Alt+V no Windows e WSL)

O erro comum deste passo: tentar Ctrl+V no Windows/WSL e achar que a imagem não foi. É Alt+V nesses casos

3. Ou simplesmente informar o caminho do arquivo

Frente 2: fixar as restrições de marca

Arquivos CLAUDE.md guardam instruções persistentes e são lidos no início de cada sessão

Escopo de projeto fica na raiz do repositório, escopo global fica em ~/.claude. É ali que você escreve o que é proibido na sua marca, qual direção estética vale, o que nunca deve aparecer

4. Gere um arquivo inicial com /init

O erro comum deste passo: rodar /init e sair correndo. O arquivo gerado é ponto de partida, quem coloca as regras visuais dentro dele é você

5. Use /memory pra listar e refinar os arquivos de memória

O erro comum deste passo: empilhar regra contraditória no mesmo arquivo e depois estranhar a saída inconsistente

Essa parte também resolve muito bem a dor de alinhar padrão visual entre o time, porque a regra passa a viver no repositório em vez de viver na cabeça de quem escreveu o prompt

Como prevenir:

Referência e restrição entram ANTES da primeira linha de código

Depois de 30 componentes criados, você não está mais dando direção, está fazendo retrabalho

Quando o caminho não é o Claude Code: Claude Design e skill de auditoria

Nem todo caso se resolve dentro do Claude Code, então vale separar dois cenários bem diferentes

Caso 1: você já tem design system e quer prototipar visual

Aqui entra o Claude Design, que é um produto separado do Claude Code, voltado a design e protótipo visual

Ele está disponível em beta para assinantes Pro, Max, Team e Enterprise, incluso na assinatura, acessível em claude.ai/design, apenas em web e desktop. Em organizações ele vem desativado por padrão e precisa ser habilitado por um admin nas configurações da organização

O ponto forte pra quem sofre com visual genérico: ele aceita design system próprio como entrada de marca

Você pode trazer um ou vários design systems a partir de repositório do GitHub, arquivos de design ou uploads brutos. O Claude constrói com esses componentes e confere a saída contra o design system antes de mostrar o resultado

Pra quem tem marca definida, isso é mto massa, porque a restrição deixa de ser texto e passa a ser componente

Caso 2: você já tem frontend genérico pronto e quer auditar o que existe

Se o código já nasceu com a cara padrão, existe alternativa da comunidade focada em auditoria: a skill avoid-ai-design, do repositório funboy322/avoid-ai-design

A proposta dela é auditar frontend gerado por IA e reescrever padrões genéricos (gradiente roxo, Inter, componentes sem customização)

Importante e sem rodeio: é projeto de terceiro, não é da Anthropic. Avalia antes de jogar no código de produção, beleza?

Comparando os três caminhos:

Como isso aparece num projeto real com skills

No vídeo abaixo eu monto do zero, em pasta vazia, um app de controle de despesas pessoais no Claude Code dentro do VS Code: cadastro de gasto por categoria, dashboard de resumo mensal e gráfico por categoria

Antes de codar eu uso uma skill de brainstorm que vai me metralhando de pergunta: uso pessoal ou múltiplos usuários, tipo de autenticação, categorias fixas ou customizáveis

Respondi tudo antes de liberar a implementação, porque esse fluxo de perguntas gera uma documentação de especificação completa, e eu reviso e valido ela antes de seguir pro plano de implementação

No meio do brainstorm apareceu a oferta de montar mockups e diagramas no navegador durante a conversa, e eu recusei pra ir direto à implementação e não gastar mais tokens

O prompt inicial de implementação rodou por quase 10 minutos na minha máquina e fechou 14 tarefas

Outra coisa que eu faço de propósito: defino a stack no próprio prompt inicial, em vez de deixar a IA escolher por mim

App subiu em localhost:3000, abri no navegador e… tomei erro logo no cadastro e login 😅

Copiei a mensagem, colei no chat e pedi análise e correção até conseguir acessar. Pra mim isso é normal no primeiro build, não é defeito do fluxo. O cuidado aqui é outro: quando você vê o Claude Code repetindo a mesma correção, aí sim é hora de mudar de abordagem em vez de insistir

Com o app funcionando (login, cadastro de despesa, tela de gerenciador financeiro), lancei uma despesa de R$ 1.000 em alimentação só pra ver o fluxo completo rodando

E é aí que vem o ponto deste post inteiro: a interface saiu padrão, genérica, sem nada de especial

Eu chamo isso de AI slop: um projeto sem alma

O diagnóstico é direto: todas aquelas skills serviram pra deixar o pedido claro e a arquitetura boa, e nenhuma delas cuidava do visual

Por isso eu parti pra uma skill de frontend design em vez de instalar pacote de terceiro, e o prompt de redesign não pediu componente nem cor específica. Pedi visual clean e moderno que passe confiança financeira, modo escuro, e que o usuário sinta que tem controle das finanças sem se sentir sobrecarregado

E eu aviso antes de rodar: mudança significativa pode acontecer ou não, e isso depende também do prompt

Que é exatamente a minha leitura sobre quem reclama que a IA não entrega bom resultado: em boa parte dos casos, o prompt é que está ruim

Tem um detalhe final do vídeo que casa demais com a ideia de instrução fixa: eu também uso um ciclo de melhoria contínua pra evoluir as próprias skills

Configurei 5 iterações, e o resultado foi 4 melhorias aceitas e 1 descartada (uma refatoração que quebrou os padrões de regex)

E o ciclo só aceita melhoria quando consegue extrair um dado numérico: ganho vago tipo "ficou mais rápido" é descartado

Moral: instrução fixa também precisa ser revisada, e nem toda mudança automática merece entrar

O resumo: o padrão só quebra quando o pedido tem restrição

O visual repetido não é defeito inevitável do modelo, é consequência de pedido sem direção

Sem orientação, ele entrega a média: Inter, gradiente roxo sobre branco, animação mínima. Com direção, proibição e referência, a conversa muda completamente

O próximo passo prático pro projeto que você tem aberto agora:

1. Escolhe UMA direção estética pro projeto e escreve ela por extenso

2. Instala o plugin com /plugin install frontend-design@claude-plugins-official

3. Registra as restrições de marca no CLAUDE.md do repositório antes da próxima tela

Faça o teste e compara com o que saía antes, a diferença costuma ser bem visível 😀

até o próximo post!