Impeccable: o site que não parece feito pela IA

O que é e porque importa

Abres o teu site e nota-se logo: foi a IA que o fez. Inter por todo o lado, um degradê de roxo para azul, cartões dentro de outros cartões, texto cinzento sobre um fundo colorido. O README do Impeccable lista-os como os sinais que voltam em todos os projetos: todos os modelos de IA aprenderam com os mesmos sites feitos em série.

O Impeccable serve para os tirar. É uma skill, ou seja, um pacote de instruções para o Claude Code, com 24 comandos que se tornam um vocabulário comum entre ti e ele. Além disso há um detetor com 62 regras fixas que corre sem IA e sem chaves de API. É open source no GitHub, com licença Apache 2.0 e mais de 90.000 estrelas no fim de outubro.

É para quem constrói sozinho com o Claude Code, sem designer. Para desenhar uma página nova do zero há outro guia, GUSTO. Este parte de outra pergunta: o site já o tens, como lhe tiras a cara de IA?

1. O que precisas e como a instalas no Claude Code

Precisas do Claude Code, da pasta do projeto e de uma versão recente do Node.js, o programa que corre o npx (confirma com node -v no terminal). Depois:

1. A partir da pasta principal do projeto, corre o instalador, a linha aqui em baixo.
2. Escolhe as ferramentas que usas entre as que encontra, por exemplo o Claude Code, e se a instalas neste projeto ou em todos.
3. Quando te propuser o controlo automático a cada alteração, diz que sim: vemos isso no ponto 5.
4. Reinicia o Claude Code para ele carregar a skill.

npx impeccable install

Em alternativa há o plugin: no Claude Code escreve /plugin marketplace add pbakaus/impeccable, depois abre /plugin, instala o Impeccable a partir de Discover e reinicia. Eu uso o instalador: é o caminho que o README recomenda, e o controlo automático vem com ele.

2. O primeiro comando: /impeccable init

Todos os comandos passam por /impeccable. O primeiro, uma vez por projeto, escreves no chat do Claude Code:

/impeccable init

Primeiro lê o projeto: documentos, funcionalidades, código, imagens. Depois só te pergunta o que falta: para quem é o produto, em que situação o usam, para que serve, que limites respeitar. E pede-te para confirmares o que percebeu sozinho.

Depois escreve o PRODUCT.md, um ficheiro de texto no projeto, com os factos em que estão de acordo e as decisões em aberto. Serve porque cada comando parte dali e sabe a quem fala a página, em vez de adivinhar. Relê-o e corrige-o; se o produto mudar, volta a correr o init.

Se o site já tem um estilo próprio, escreve também /impeccable document: regista-o no DESIGN.md, e o detetor verifica que as tuas páginas não se afastam dele.

3. Verifica o teu site num minuto, sem IA

A parte de que mais gosto: o detetor corre a partir do terminal, sem Claude e sem chaves. Em vez de src/ põe a pasta do código, um ficheiro ou um endereço, mesmo http://localhost:3000. Para os endereços usa o Chrome, o Chromium ou o Edge; com --viewport 390x844 vês a página do tamanho de um telemóvel.

npx impeccable detect src/

• Encontra os sinais da IA: degradês roxos, texto preenchido com um degradê, brilhos escuros, animações que saltam, o tipo de letra usado em excesso.
• E os problemas de qualidade: linhas demasiado compridas, espaços apertados, botões pequenos demais para tocar, títulos que saltam um nível.

Olha para o número com que termina: 0, nenhum problema principal; 2, problemas encontrados; 1, houve algo que não conseguiu verificar, por isso a verificação falhou. Com --json dá-te os resultados num formato que o Claude lê logo; o --list-rules mostra-te todas as regras.

E lembra-te do que diz o README: uma verificação limpa é um indício, não uma prova. Aquelas regras não encontraram nada, mas abre a página na mesma, também no telemóvel.

4. Os cinco comandos a usar primeiro na página que já tens

Escrevem-se no chat do Claude Code: /impeccable, o comando e o que ver, por palavras. Troca as partes entre [ ] pelas tuas.

critique: o que a trava

Uma revisão de design: onde a página parece genérica ou confusa e o que corrigir primeiro. Não muda nada, dá-te um relatório.

/impeccable critique a página inicial. Quem chega aqui tem de [descarregar a app]. Diz-me o que a faz parecer feita com IA e o que corrigias primeiro.

audit: as verificações técnicas

Acessibilidade, velocidade, temas, telemóvel. Cada problema tem uma prioridade de P0, que bloqueia, a P3, acabamento. O audit também deixa o código como está.

/impeccable audit a página de preços. Para cada problema diz-me a quem prejudica e como se corrige. Não mudes nada ainda.

distill: tira o que está a mais

Tira o que atrapalha a ação principal: informação repetida, decoração que não diz nada. Se a ação principal não estiver clara, primeiro pergunta-ta.

/impeccable distill a página inicial. A ação principal é [inscrever-se na lista de espera]. Tira os cartões dentro de cartões, mantém [os preços].

typeset: a tipografia

Hierarquia dos títulos, tamanhos, comprimento das linhas. Mantém os tipos de letra que tens, a não ser que peças para os mudar: se o Inter veio por omissão, diz-lho.

/impeccable typeset o site todo. O tipo de letra atual é o de omissão, não o da marca: propõe-me uma alternativa adequada a [quem usa o produto].

polish: a última passagem

Afina uma página cuja direção já está certa: estados em falta, espaços, alinhamentos. Muda o código, por isso vê as alterações. Se o problema é a direção, pede para a refazer.

/impeccable polish a página de registo. Mantém o layout e as cores da marca. No fim diz-me o que mudaste e volta a correr o npx impeccable detect.

5. O controlo automático a cada alteração

Com o instalador, o Claude Code recebe dois hooks, ou seja, comandos que arrancam sozinhos. Depois de cada alteração a um ficheiro da interface, um controlo rápido procura imagens partidas, texto que sai da caixa, brilhos; no fim da vez, um mais amplo olha para os ficheiros mexidos. O que encontra volta para o Claude, que o corrige ou te explica a escolha. Vês-los com /hooks.

• /impeccable hooks status diz-te se está ativo; /impeccable hooks off desliga-o, /impeccable hooks on volta a ligá-lo.
• npx impeccable install --no-hooks instala sem hook, só dessa vez.
• /impeccable doctor verifica se está bem instalado: se fica calado, também pode estar desligado.

E se o Inter for mesmo o teu tipo de letra? Diz-lho uma vez: a regra continua ativa para os outros, e a exceção vale tanto para o hook como para o detect.

npx impeccable ignores add-value overused-font Inter --reason "Tipo de letra da marca"

Os erros mais comuns

• Confiar num detect limpo. É um indício, não uma prova: abre a página e pede um critique.
• Usar o polish para mudar de direção. O polish afina, não redesenha.
• Desligar tudo por causa de um tipo de letra. Acrescenta a exceção com ignores add-value e mantém as outras regras.
• Pôr no git a pasta .impeccable/ inteira, com capturas e ficheiros temporários. Copia para o teu .gitignore o bloco do README.

Checklist

• Depois de reiniciar, o Claude Code vê /impeccable
• O PRODUCT.md existe e já o reli e corrigi
• npx impeccable detect no meu código termina com 0
• /impeccable hooks status diz que o controlo automático está ativo

Perguntas frequentes