Pular para o conteúdo

Testada em uma tarefa realComunidade, verificadaDesign e front-end

Impeccable

Uma crítica com nota e evidências da sua página, seguida de um redesenho com visual próprio.

Instale Impeccable grátis

Deixe seu email e os passos de instalação abrem aqui mesmo: um prompt para colar na sua ferramenta de IA. Vale para as 149 skills.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Nossa nota
7/10
Funciona em
Claude, ChatGPT+7 outras

Claude Code, Claude app, Codex, ChatGPT, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf e mais de 60 ferramentas de IA que leem skills.

Precisa programar?
Não
Tempo até o resultado
55 min
Criado por
Paul Bakaus
Testada em
19 de out. de 2026
Sem a skillCom a skillCom a skill
Os dois corrigiram os fatos e acrescentaram a foto da caneca; o Claude puro optou por uma loja acolhedora em creme, serifa e terracota, enquanto o Impeccable escolheu pedra fria, tipografia grotesca forte, grandes amostras de esmalte e um medidor de frete grátis embaixo de um botão de compra escuro.

A resposta curta

Impeccable é uma skill de design para o Claude Code que critica e melhora interfaces como páginas de produto, landing pages, dashboards e telas de app, com comandos como critique, polish, bolder e harden. Serve para quem tem uma página que parece genérica e quer uma lista classificada e medida de problemas mais uma versão corrigida. Nosso veredito é 7/10: com o mesmo prompt, o Claude puro também fez uma página limpa e honesta na metade do tempo, mas o Impeccable acrescentou uma crítica com nota e evidências concretas e um design mais ousado feito para a loja.

Ideal para: Donos de uma página existente que parece genérica e querem uma lista classificada e medida do que está errado, mais um redesenho com identidade própria.

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale Impeccable em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Quando vale a pena usar

Critique e redesenhe uma página de produto

Sua página de produto parece com qualquer outro modelo. No nosso teste, a dona de uma loja de cerâmica recebeu um relatório dando nota 11 de 36 à página antiga e depois uma página reconstruída com grandes amostras de esmalte, um botão de carrinho funcionando e um medidor mostrando quanto falta para o frete grátis.

Acabamento final antes do lançamento

Uma página ou tela de app funciona, mas parece crua. O comando polish faz uma passada final de qualidade que mantém seu visual atual e corrige espaçamento, alinhamento, consistência e estados ausentes, como carregando, vazio e erro.

Documente seu design system

Você quer que as próximas páginas, feitas por você ou por IA, combinem com seu site. Ela escreve um arquivo DESIGN.md com suas cores, fontes, espaçamentos e componentes; nosso teste gerou um automaticamente no fim do redesenho.

Como ter um ótimo resultado

  1. Instale e deixe ela se configurar

    Instale (passos abaixo). Na primeira execução, ela baixa um pequeno motor auxiliar para a varredura automática de design; se isso falhar, o Claude avisa e lê seus arquivos diretamente, que foi o que aconteceu no nosso teste e ainda assim gerou uma crítica completa.

  2. Peça uma crítica e depois uma correção

    Aponte para o arquivo da sua página e peça para criticar o design e depois corrigir. Digite /impeccable sozinho se quiser que ela sugira dois ou três próximos passos.

  3. Leia o relatório com nota

    Você recebe uma nota de usabilidade de até 40 (ou menos, quando algumas regras não se aplicam), um veredito sobre se o design poderia ser de qualquer loja e de três a cinco problemas classificados de P0 (mais urgente) a P2 ou P3, cada um com o comando que o corrige.

  4. Responda às perguntas dela

    Ela sempre termina a crítica perguntando o que corrigir primeiro, quanto assumir e que direção seguir. Diga o que precisa ficar, como a cor da sua marca, e passe seus dados reais; no nosso teste, ela se ateve aos dados informados e marcou cada incógnita como placeholder.

  5. Confira o redesenho e as notas

    Para um redesenho, ela escreve um briefing curto, constrói a página, confere em tamanhos de desktop e celular e revisa o próprio trabalho antes de terminar. Abra a página no celular, preencha os placeholders e guarde o DESIGN.md que ela deixa para as próximas páginas.

Este é o prompt exato com que começamos o nosso teste:

O prompt que usamos
Esta é minha página de produto atual: input/product.html. Critique o design dela e depois corrija, para ela parecer profissional e vender mais. Salve a página melhorada como out/product.html (mantenha um único arquivo HTML).

Tudo o que ela criou

Cada peça abaixo é um resultado real do nosso teste, aberta do jeito que você abriria.

Com a skill
Com a skill, no celular
Com o Impeccable, a página se divide em seções em blocos de cor (uma faixa marinho de avaliações, um bloco Ash Green de oficinas, um bloco marinho de atacado com a conta do pedido já feita) e cada um dos outros mais vendidos ganha seu próprio botão Add to cart.
A página de onde os dois partiram
A página de produto que os dois receberam para criticar e corrigir. (celular)
A página de produto que os dois receberam para criticar e corrigir.
Sem a skill
Sem a skill, no celular
A página do Claude puro é uma loja limpa e convencional, com uma barra de oferta no topo, pequenos chips de esmalte, acordeões para os detalhes e um layout creme tranquilo que vende bem, mas parece com muitas lojas artesanais.

Como foi a sessão

A conversa do nosso teste, resumida. Cerca de 55 minutos do primeiro prompt até o resultado final.

  1. Você: Use a skill impeccable para isto. Esta é minha página de produto atual: input/product.html. Critique o design dela e depois corrija, para ela parecer profissional e vender mais. Salve a página melhorada como out/product.html (mantenha um único arquivo HTML). (Mais a ficha de dados da loja e 8 fotos de banco de imagens.)
  2. AI: O carregamento de contexto não rodou; vou ler o contexto existente do projeto diretamente.
  3. AI: Crítica salva em out/critique.md. Nota 11/36 (31%), Poor. Veredito: intercambiável com qualquer categoria, troque "caneca" por "vela" e nada muda. P0: a página traz dados de outra loja (Yafo Mug, ₪120, um ateliê em Jaffa, um rótulo literal "(reviews)", uma alegação "Eco Friendly" sem base) e não tem foto do produto. P1: o Add to Cart é um link quebrado, a quantidade aceita 0 e negativos, sem informação de frete; sem...
  4. AI: A skill pede que você escolha as prioridades aqui. Você não pode responder nesta sessão, então fiquei com as opções recomendadas: corrigir todos os problemas, fatos primeiro e um visual novo específico da Clay & Co em vez de polir o modelo.
  5. AI: Pronto. Direção: fundo frio de pedra de forno, Midnight para o texto e o botão de compra, uma seção de oficinas em Ash Green, esmaltes mostrados como amostras chapadas, Bricolage Grotesque com Hanken Grotesk, cantos de 3px, sem degradês nem emoji. Quando você escolhe um esmalte, a amostra se destaca; um medidor de pedido ao vivo mostra quanto falta para o frete grátis (acima de $75) e para 10% de desconto (4+ peças); o Add to cart mostra o total ao vivo e funciona....
  6. AI: Deixados como [placeholders] visíveis: fotos dos esmaltes, situação do estoque, dimensões, cuidados, devoluções, link da Etsy, datas das oficinas, fotos do ateliê, checkout. Não consegui rodar o motor do impeccable (detector, sobreposição) nem gerar imagens. Tempo: cerca de 55 minutos.

O que funcionou e onde deixou a desejar

O que funcionou

  • A crítica é um entregável de verdade que o Claude puro não produziu: um relatório com nota (11/36, Poor) e evidências medidas, como 15 de 32 elementos de texto reprovados em contraste, 72 pixels de rolagem lateral no celular, 7 áreas de toque abaixo de 44 pixels e 6 links quebrados, mais onde três tipos de comprador tropeçariam
  • Ela recusou o visual de 'fundo creme, título com serifa, botão terracota' que o Claude puro adotou de cara e construiu um visual próprio: fundo pedra fria, texto e botões em azul Midnight escuro, blocos de cor Ash Green e marinho, títulos grotescos robustos
  • Os esmaltes viraram grandes amostras clicáveis, e um medidor ao vivo embaixo do botão mostra quanto falta para o frete grátis e para o desconto de 10% por múltiplas peças; os outros mais vendidos têm seus próprios botões Add to cart
  • Ela se ateve estritamente aos dados da loja, marcou cada incógnita como placeholder visível e deixou um DESIGN.md para as próximas páginas combinarem

Onde deixou a desejar

  • O motor auxiliar dela (detector automático, sobreposição visual, histórico de críticas salvo) não estava instalado, então essas partes não rodaram; a crítica saiu completa mesmo assim, a partir das duas revisões
  • Levou cerca de 55 minutos, mais que o dobro dos 25 minutos de que o Claude puro precisou para uma página que vende com a mesma clareza; o Claude puro também escreveu uma crítica sólida, só mais curta e sem nota
  • O visual mais ousado é questão de gosto: a página de loja clássica e acolhedora do Claude puro é igualmente profissional, então o ganho principal da skill é personalidade e rigor, não uma página que funcione melhor

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale Impeccable em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Prompts que funcionam

Troque as partes entre colchetes pelos seus próprios dados. Não precisa citar a skill: peça o trabalho e sua ferramenta de IA usa a skill sozinha.

Critique e corrija uma página
Use a skill impeccable. Esta é minha página de produto atual: [nome do arquivo]. Critique o design dela e depois corrija, para ela parecer profissional e vender mais. Use só estes dados: [preços, frete, avaliações, contato]. Coloque um [placeholder] claro em tudo o que você não souber.
Acabamento antes do lançamento
/impeccable polish na minha página de [checkout / cadastro / produto] antes do lançamento. Mantenha o visual, as cores e o texto atuais e garanta que funcione bem no celular.
Deixe uma página sem graça mais ousada
/impeccable bolder: minha [landing page] parece segura e esquecível. Dê mais personalidade a ela, mas mantenha meu logo, meu texto e a cor da minha marca [código da cor].
Registre meu design system
/impeccable document: registre o design system deste site num arquivo DESIGN.md, para que as novas páginas que você construir depois combinem com ele.

O que você precisa: O Claude Code exige Pro ou superior. Skills no app do Claude funcionam em todos os planos, incluindo o Free, com Execução de código e criação de arquivos ativadas, mas o uso desta skill no app do Claude não está documentado, Internet na primeira execução, para ela baixar o motor auxiliar (nosso teste rodou sem ele, usando a alternativa), Subagentes no Claude Code para a crítica em duas partes.

Como instalar

As skills seguem o padrão aberto Agent Skills, então esta não depende de uma única empresa. Escolha a ferramenta de IA que você usa. Na dúvida? A primeira aba cobre a maioria em um passo só.

Mais fácil: cole isto em sua ferramenta de IA
Instale esta skill para mim para que ela funcione em todos os projetos: rode `npx skills add https://github.com/pbakaus/impeccable/tree/main/.claude/skills/impeccable -g -y` no meu terminal. Se faltar o Node.js, me diga primeiro como instalar. Quando terminar, confirme que a skill foi instalada e me diga como começar a usar.

Ou faça você mesmo:

Um comando instala a skill nas ferramentas de IA do seu computador. Ele encontra as que você tem e pergunta em quais adicionar: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode e mais de 60 outras.

npx skills add https://github.com/pbakaus/impeccable/tree/main/.claude/skills/impeccable -g

Você precisa ter o Node.js instalado (grátis, em nodejs.org). A opção -g deixa a skill disponível em todos os projetos.

Bom saber: Depois de adicionar o marketplace, você também pode escolher Impeccable na lista do /plugin.

Libere os passos de instalação

Grátis. Deixe seu email uma vez para liberar os passos de instalação das 149 skills e receber as melhores skills novas todo mês.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Como verificamos

Confirmamos a skill na fonte original em 18 de outubro de 2026: o SKILL.md está onde deveria, os arquivos foram atualizados no último ano e a licença (Apache-2.0) permite o uso. Depois, em 19 de outubro de 2026, instalamos, usamos na tarefa acima sem mudar a skill e anotamos o que aconteceu, inclusive o que deu errado.

Perguntas frequentes

É melhor do que simplesmente pedir ao Claude?

No nosso teste, em parte. O Claude puro, com o mesmo prompt, também corrigiu os fatos errados, usou as fotos e fez uma página limpa e convincente em cerca de 25 minutos, com uma crítica curta nas notas. O Impeccable levou cerca de 55 minutos, mas acrescentou uma crítica com nota e evidências medidas (11/36, 15 falhas de contraste, 72 pixels de rolagem lateral no celular) e recusou o visual de sempre de loja artesanal creme, serifa e terracota em favor de um design próprio mais ousado.

O que a crítica realmente encontrou?

Ela deu nota 11 de 36 à página original, classificada como Poor, e a chamou de um modelo que poderia vender velas tão facilmente quanto canecas. Os principais problemas eram dados errados de outra loja e nenhuma foto do produto, depois um link Add to Cart quebrado, um campo de quantidade que aceitava números negativos, nenhuma informação de frete e um layout de celular quebrado, e então um visual genérico com 15 de 32 elementos de texto reprovados em contraste.

Preciso programar para usar o Impeccable?

Não. Você pede em palavras simples ou digita comandos como /impeccable critique, e o Claude escreve o código. Você precisa, sim, ter o arquivo da sua página na pasta em que o Claude está trabalhando, para ele poder editá-lo.

De qual plano eu preciso, e ela funciona no app do Claude?

Ela é feita para o Claude Code, que exige Pro ou superior, e funciona melhor com subagentes e acesso à internet na primeira execução, para o motor auxiliar. Skills no app do Claude, em geral, funcionam em todos os planos, incluindo o Free, com Execução de código e criação de arquivos ativadas, mas o uso desta skill no app do Claude não está documentado.

O que significa a nota do Impeccable?

Ela avalia dez regras clássicas de usabilidade (as heurísticas de Nielsen) de 0 a 4 cada, então o máximo é 40, menos quando uma regra não se aplica à página. A skill diz que a maioria das interfaces reais tira entre 20 e 32 de 40; nossa página de teste tirou 11 de 36.