Pessoa frustrada com as mãos na cabeça diante de um site genérico com gradiente roxo, típico de design feito por IA

Como fazer o Claude criar sites que não parecem feitos por IA

Por

Você já olhou para um site criado por IA e pensou: “isso eu já vi antes”?

Fonte Inter. Gradiente roxo. Cards dentro de cards.

Sempre igual. E o problema não é o Claude. Falta ensinar bom gosto a ele.

Veja como fazer o Claude criar sites que não parecem feitos por IA, com 3 skills gratuitas e 2 ferramentas que fazem ele construir e testar sozinho.

Por que todo site feito por IA parece igual?

Sem direção, a IA repete os mesmos hábitos visuais. Os mais comuns:

  • Fonte Inter em tudo
  • Gradientes roxos
  • Cards dentro de cards
  • Texto com gradiente

O Claude consegue criar sites bonitos. Mas, de fábrica, ele segue o caminho mais óbvio.

A solução é instalar skills de design. Elas trocam esses reflexos por critério de verdade.

Importante: tudo isso roda no Claude Code (o terminal), não no app comum do Claude.

Skill 1: Emil Kowalski (animações que não parecem robóticas)

Coleção de skills de engenharia de design e animação criada por Emil Kowalski (ex-Vercel e Linear) para orientar assistentes de IA e desenvolvedores a criarem interfaces de usuário (UIs) refinadas.

Sabe aquela animação dura, sem vida? Essa skill resolve isso.

Ela ensina o Claude a criar movimento suave e moderno. É baseada no trabalho de um design engineer especializado em animação de interfaces.

bashCopynpx skills add emilkowal/skill  
Try:Agent|Desktop

Confira o nome exato no site dele (emilkowal.ski) na hora de instalar. Nomes de skills podem mudar.

Acesse o repositório oficial do github: emilkowalski/skills

O próximo ponto é o que mais separa um site amador de um profissional.

Skill 2: Impeccable (tipografia, espaçamento e cor)

O Impeccable é um pacote de habilidades (skill) de design e front-end criado por Paul Bakaus (ex-Google e criador da Web Animations API) que serve para eliminar o visual genérico e repetitivo de projetos gerados por inteligência artificial.

Essa skill corrige tipografia, espaçamento e cores automaticamente.

Ela rejeita fontes batidas e pega os “sinais de IA”, como texto com gradiente e cards aninhados.

bashCopy/plugin marketplace add pbakaus/impeccable  
# depois, na raiz do projeto:  
npx impeccable install  
/impeccable init  
Try:Agent|Desktop

São 23 comandos. Os dois que você mais vai usar:

  • /impeccable audit: encontra os problemas
  • /impeccable polish: limpa e refina

Acesse o repositório oficial do github: pbakaus/impeccable

Quer o resultado de um designer sem ser designer? Continue lendo, porque ainda tem mais.

Quer ver o antes e depois? [Clique aqui e veja um exemplo comparativo].

Skill 3: Taste (aprender com sites bem desenhados)

Em vez de “achar” o que é bonito, o Claude aprende com sites reais e bem projetados.

O resultado: seus projetos deixam de parecer gerados por IA.

bashCopynpx skills add Leonxlnx/taste  
Try:Agent|Desktop

Acesse o repositório oficial do github: leonxlnx/taste-skill

Faça o Claude construir e testar sozinho: Figma + Playwright

Aqui o jogo muda. Com essas duas conexões, o Claude desenha a interface, escreve o código e testa num navegador real. Você só descreve o site.

bashCopyclaude mcp add figma  
claude mcp add playwright  
Try:Agent|Desktop
  • Figma: traduz o design com fidelidade
  • Playwright: tira prints do próprio resultado, testa e corrige o que quebrou

Como usar tudo isso na prática

  1. Instale as três skills primeiro. Depois é só descrever o site. Elas entram em ação sozinhas.
  2. Dê uma direção de design. Uma linha sobre o clima já ajuda muito. Exemplo: “limpo, premium, bastante espaço em branco”.
  3. Rode uma auditoria antes de publicar. Use /impeccable audit para pegar o que escapou.
  4. Lembre que é um ponto de partida. As skills levam você a cerca de 90%. Seu conteúdo real e alguns ajustes fecham o resto.

E você?

  • Seu último projeto com IA tinha cara de “template”?
  • Qual desses vícios visuais você já notou em outros sites?
  • O que mudaria se o seu site parecesse feito por um designer?

Conclusão

O visual genérico não é limite do Claude. É uma skill que faltava.

Instale as três, adicione Figma e Playwright, dê uma direção de estilo e audite antes de publicar.

Comece pela primeira skill hoje. Em poucos minutos você já nota a diferença.

Gostou? Leia o próximo artigo sobre casos de uso do Claude e [baixe o material complementar].

Veja Mais: Estratégias, Playbooks e Estudos de Caso

Deixe um comentário