Impeccable: a skill que mostra o que dá cara de IA ao seu site

Sites gerados por IA costumam se parecer: degradê roxo para azul, título com letra em degradê, a mesma fonte de sempre e cartões arredondados em fileira. A Impeccable, criada por Paul Bakaus e publicada no GitHub, é uma skill para agentes de código como o Claude Code que ataca esse problema. A descrição do projeto diz que ela serve para pegar o design genérico de IA antes de o site ir ao ar.

Ela faz duas coisas. A primeira é revisar: o detector lê o código e aponta sinais de design genérico. A lista inclui paleta com cara de IA (degradê roxo ou violeta), texto em degradê, fontes muito usadas como Inter e Roboto, texto com contraste abaixo do mínimo da norma WCAG AA, texto longo todo em caixa alta e níveis de título pulados, como um h1 seguido direto de um h3. A segunda é corrigir: a skill traz comandos como polish, bolder, quieter, typeset e layout, que orientam o Claude Code a refazer o visual com um objetivo claro.

O detector não usa IA nem chave de API. Ele é um conjunto de regras fixas que roda no seu computador, então o resultado é o mesmo toda vez que você roda. Isso também significa que ele acha sinais mecânicos, não julga se o design ficou bonito. Um site pode passar sem nenhum alerta e continuar sem personalidade, por isso a revisão humana continua necessária.

Para usar, você precisa do Claude Code e de um projeto de site com arquivos como HTML, CSS, JSX ou TSX. Também precisa do Node instalado, porque a instalação usa o npx. Pela documentação oficial do Claude Code, uma skill é uma pasta com um arquivo SKILL.md. Ela pode ficar em ~/.claude/skills/ (vale para todos os seus projetos) ou em .claude/skills/ dentro do repositório (vale só para aquele projeto). Você a chama digitando uma barra e o nome, como /impeccable.

A instalação, segundo o README do projeto, é um comando rodado na raiz do seu projeto: npx impeccable install. O instalador detecta suas ferramentas, pergunta se a instalação vale para o projeto ou para todos os projetos e oferece instalar um hook de design. Depois, recarregue o Claude Code e rode /impeccable init, que lê seu código, faz poucas perguntas e cria um arquivo PRODUCT.md com o contexto do produto. Quem prefere o caminho de plugin pode rodar /plugin marketplace add pbakaus/impeccable dentro do Claude Code e instalar o Impeccable pelo painel /plugin.

Com tudo instalado, escolha um alvo pequeno e dê um comando. Exemplos do próprio projeto: /impeccable critique the onboarding flow para uma revisão de usabilidade com notas, /impeccable audit para um relatório técnico e /impeccable polish settings para o ajuste final. Também dá para pedir em texto livre, como /impeccable redo this hero section. O projeto recomenda alvos estreitos: revisar uma seção com atenção rende mais do que olhar a página inteira de relance.

Se você só quer a lista de problemas, sem agente, rode o detector direto no terminal: npx impeccable detect src/ para uma pasta ou npx impeccable detect http://localhost:5173 para uma página rodando. Há um detalhe importante: nos arquivos de código, o detector só aplica as regras de padrão. As regras que dependem da página renderizada, como contraste fraco e texto pequeno, só rodam quando você aponta para uma URL. O comando termina com código 2 quando acha problemas, o que permite usá-lo em integração contínua.

O hook de design é o que fecha o ciclo dentro do Claude Code. Depois de cada edição em arquivo de interface, ele roda o detector e devolve os achados ao agente, que corrige. Ao final da sessão, uma passada mais completa revisa o que sobrou. Isso é o que torna possível o fluxo de refazer o visual e checar de novo, mas é o agente quem corrige: o detector não conserta nada sozinho.

Sobre os números que circulam, o relato de que um site foi de 31 problemas para zero em 13 minutos vem do teste de quem publicou o post, e não há como confirmá-lo na fonte oficial. O resultado depende do site, do modelo e do que você pedir. Trate como um exemplo, não como promessa.

Cuidados. Primeiro, o modo live (/impeccable live) edita seu código local com um overlay no navegador, e o README avisa para não usá-lo em site publicado. Segundo, o README descreve que, ao aplicar edições de texto sem uma sessão de chat ativa, ele pode chamar o codex ou o claude com as verificações de permissão desligadas; para manter tudo no seu chat, defina IMPECCABLE_LIVE_COPY_AGENT=chat. Terceiro, ao começar um design novo, a skill busca sugestões de direção visual no catálogo do projeto e, por padrão, registra de forma anônima qual você escolheu. O README diz que o código e o nome do projeto não são enviados, e que dá para desligar com npx impeccable telemetry off. Leia o README antes de instalar em um projeto de cliente.