IA by DNACX

#15 no GitHub · Design e visual

Como usar o Impeccable no Claude Code: passo a passo

Um vocabulário de design para o seu assistente de código. Você usa comandos como polish e bolder para ajustar a aparência de um site ou tela, e critique e audit para revisar o que já existe.

Para quem
Quem já tem um site ou uma tela dentro de um projeto de código e quer revisar e melhorar o visual conversando com o Claude Code.
Estrelas (02/11/2026)
100.427, #15 no ranking
Licença
Apache 2.0
Repositório
pbakaus/impeccable

Passo a passo

Antes de começar: Claude Code instalado; Node (o README diz que ele só é necessário para o comando npx); Uma pasta de projeto, porque o instalador é rodado na raiz do projeto.

  1. Abra o terminal na pasta do projeto

    O instalador precisa ser rodado a partir da raiz do projeto onde você quer usar a skill. Entre nessa pasta no terminal antes de continuar.

  2. Rode o instalador

    Cole o comando e aperte Enter. O instalador descobre quais ferramentas de código você usa e faz perguntas.

    Comando
    npx impeccable install

  3. Responda às perguntas do instalador

    Ele pergunta se a instalação vale só para este projeto ou para todos (globalmente). Também oferece o hook de design, que confere automaticamente as telas que o assistente mexe. O README manda aceitar o hook.

  4. Recarregue o Claude Code

    Feche e abra o Claude Code de novo (ou recarregue a ferramenta) para ele enxergar a skill nova.

  5. Configure uma vez por projeto

    Digite o comando dentro da sessão do Claude Code. Ele lê o seu código, pergunta só o que não consegue descobrir sozinho (para quem é o produto, o que ele precisa fazer, restrições) e grava um arquivo PRODUCT.md. Os comandos seguintes leem esse arquivo.

    Comando
    /impeccable init

  6. Peça sua primeira revisão

    Escolha uma peça só, como um bloco de preços ou uma seção. O README diz que um alvo pequeno rende melhor que a página inteira. A resposta traz uma nota de usabilidade e uma lista do que consertar primeiro.

    Comando
    /impeccable critique the pricing cards

Primeiro teste

Numa sessão do Claude com a skill instalada, cole:

Primeiro teste
/impeccable critique the pricing cards

O README diz que critique avalia o design contra heurísticas de usabilidade e ordena o que consertar primeiro. Troque 'the pricing cards' pelo nome da peça que você quer revisar.

Cuidados

  • O hook de design roda comandos por fora da aprovação do modelo. No Claude Code, hooks instalados rodam mesmo quando você nega comandos do assistente, e a primeira edição pode baixar o motor da skill.
  • O motor da skill é um programa (binário) que vem junto dela ou é baixado uma vez para a pasta ~/.impeccable/bin/.
  • Há telemetria. Quando um design novo começa, a skill busca direções visuais no catálogo do site impeccable.style, e isso continua mesmo com a telemetria desligada. Desligar a telemetria só para o registro anônimo de quais direções foram mostradas e qual você escolheu. Para desligar: npx impeccable telemetry off, ou a variável DO_NOT_TRACK=1.
  • O modo live (/impeccable live) não faz parte do caminho feliz. O botão Apply pode rodar o claude ou o codex com aprovações e sandbox desligados. Evite esse modo em projeto desconhecido.
  • A skill grava arquivos de trabalho na pasta .impeccable/ do projeto e os arquivos PRODUCT.md e DESIGN.md.

Como desfazer

O README não traz um passo de desinstalação. Ele só descreve npx impeccable update para atualizar.

O que o README não confirma

Esta página foi montada lendo o README. Estes pontos não estão escritos lá:

  • O README não diz se o comando funciona em Windows, Mac ou Linux de forma diferente. A tabela de pastas lista as ferramentas, sem restrição de sistema.
  • Não está confirmado se os comandos e as respostas funcionam bem em português. Os exemplos do README estão em inglês.
  • A contagem de 62 regras e de 24 comandos é do autor e não foi conferida.
  • O tamanho do motor baixado e o endereço exato de onde ele vem não aparecem no README.

Dúvidas

Como vejo a lista de comandos?

Digite /impeccable sozinho na sessão e a lista aparece. O README também deixa descrever o que você quer em palavras, como em /impeccable redo this hero section.

Serve para criar um site do zero?

O README diz que a skill é mais forte em telas que já existem, e que também constrói páginas novas, em um modo mais difícil de acertar.

Preciso de chave de API?

Para o detector de problemas visuais, não. O README diz que são 62 regras determinísticas, sem LLM e sem chave de API.

A DNACX já usou o Impeccable?

Esta página foi montada a partir do README oficial. A DNACX não rodou cada passo, então confira a saída de cada comando e, se algo falhar, volte ao README do repositório.

Próxima da lista

← #14 Agent Reach

Ver as 15 skills

Por Diogo Kammers, da DNACX. Passo a passo montado a partir do README oficial de pbakaus/impeccable, lido em . A DNACX não rodou cada passo desta página. A skill é de terceiros e a DNACX não a criou.