Impeccable é uma skill (habilidade) de código para Claude, de código aberto, criada por Paul Bakaus, que combate o problema da "baixa qualidade da IA" na saída de frontend gerada por IA. Ele vem com 20 comandos de direção (/audit, /polish, /critique e mais), 7 arquivos de referência de design específicos do domínio e antipadrões selecionados que dizem ao modelo exatamente o que NÃO gerar. O resultado: UIs que parecem projetadas, não geradas automaticamente.
Por Que Todo Frontend Gerado por IA Parece o Mesmo
Peça a qualquer assistente de codificação de IA para construir um painel, uma landing page ou um painel de configurações. Dê a ele carta branca. O que você obtém?
Fonte Inter. Gradiente de roxo para azul. Cards aninhados dentro de cards. Texto cinza em um fundo colorido. Uma seção de herói com um número grande, um pequeno rótulo e um destaque luminoso. Talvez algum glassmorphism para "profundidade".
Você já viu isso mil vezes porque todo modelo de linguagem grande treinado nos mesmos modelos genéricos produz a mesma saída genérica. Essa é a armadilha do frontend gerado por IA: tecnicamente funcional, visualmente esquecível.
Impeccable foi criado especificamente para quebrar esse ciclo. Onde a skill oficial frontend-design da Anthropic lançou as bases, Impeccable se baseia nela com experiência mais profunda, maior cobertura de domínio e restrições rígidas que afastam a IA dos padrões previsíveis gravados em seus pesos.
O Que Impeccable Realmente É
Impeccable é uma skill (habilidade) do Claude Code – um conjunto instalável de instruções, arquivos de referência e comandos de barra que aumentam a forma como o Claude Code aborda qualquer tarefa de frontend.
Em sua essência, a skill vem com três componentes:
A Skill `frontend-design` Expandida do Impeccable
A skill `frontend-design` dentro do Impeccable é um guia de design abrangente dividido em sete arquivos de referência específicos do domínio:
Cada arquivo de referência é tecnicamente preciso. O guia de tipografia, por exemplo, vai além de "use boas fontes" e explica como o ritmo vertical funciona, por que o FOUT (Flash of Unstyled Text) acontece e como preveni-lo com substituições de `size-adjust`, e quando o tipo fluido com `clamp()` é, na verdade, a escolha errada. Essa profundidade é o que separa o Impeccable de um guia de estilo genérico.
O Protocolo de Coleta de Contexto do Impeccable
Um dos aspectos mais subestimados do design do Impeccable é o comando `/teach-impeccable`. Antes que qualquer trabalho de design comece, a skill exige contexto de design confirmado: público-alvo, casos de uso e personalidade da marca. Esse contexto é salvo em `.impeccable.md` na raiz do projeto e é carregado automaticamente em sessões futuras.
É uma pequena coisa que faz uma grande diferença. A saída de frontend gerada por IA é genérica em parte porque o modelo não tem contexto de projeto — ele assume escolhas seguras e médias por padrão. Impeccable força que esse contexto seja estabelecido primeiro.
Os 20 Comandos Que Corrigem Frontends Gerados por IA
Impeccable vem com 20 comandos invocáveis pelo usuário, cada um abordando um modo de falha específico no trabalho de frontend gerado por IA. Você os chama como comandos de barra dentro do Claude Code:
/audit → Verificação de acessibilidade, performance e qualidade responsiva
/critique → Revisão de UX: hierarquia, clareza, ressonância emocional
/polish → Revisão final antes da entrega (alinhamento, espaçamento, detalhes)
/distill → Destilar à essência — remover complexidade que não justifica sua presença
/normalize → Alinhar com os padrões do sistema de design
/animate → Adicionar movimento proposital (não tremores decorativos)
/colorize → Introduzir cores estratégicas em interfaces monocromáticas
/bolder → Amplificar designs seguros e sem graça
/quieter → Suavizar designs excessivamente agressivos
/delight → Adicionar momentos memoráveis de alegria
/typeset → Corrigir escolhas de fontes, hierarquia e dimensionamento
/arrange → Corrigir layout, espaçamento e ritmo visual
/harden → Tratamento de erros, i18n, casos de borda
/optimize → Melhorias de performance
/extract → Extrair componentes reutilizáveis e design tokens
/adapt → Adaptar para diferentes dispositivos/contextos
/onboard → Projetar fluxos de onboarding e estados vazios
/clarify → Melhorar o texto de UX pouco claro
/overdrive → Efeitos tecnicamente ambiciosos (shaders, física de mola, revelações acionadas por rolagem)
/teach-impeccable → Configuração única: coletar e salvar contexto de design
A maioria dos comandos aceita um argumento de escopo opcional. /audit header executa a auditoria apenas na barra de navegação. /polish checkout-form foca a revisão final no fluxo de pagamento. Essa segmentação cirúrgica mantém o Claude focado e o impede de tocar em partes do frontend gerado por IA que já estão funcionando.
O verdadeiro poder vem do encadeamento de comandos. Um fluxo de trabalho típico pode executar /audit para identificar problemas, /arrange para corrigir problemas de layout, /typeset para organizar a hierarquia tipográfica e /polish como a etapa final antes da entrega — cada passo construindo sobre o anterior.
A Biblioteca de Antipadrões: Ensinando à IA o Que Não Fazer
A contribuição mais original que Impeccable faz para o problema do frontend gerado por IA não são os comandos — são os antipadrões.
A skill incorpora restrições explícitas de "NÃO FAÇA" diretamente no contexto do modelo. Estas não são preferências de estilo vagas; são assinaturas de falha específicas e recorrentes que aparecem na saída de frontend gerada por IA repetidamente:
Antipadrões de tipografia:
- Não use Inter, Roboto, Arial ou padrões do sistema (eles tornam os designs invisíveis)
- Não use fontes monoespaçadas como um atalho preguiçoso para "vibes de desenvolvedor"
- Não coloque ícones redondos grandes acima de cada título — parece um template
Antipadrões de cor:
- Não use texto cinza em fundos coloridos — parece desbotado; use um tom mais escuro da cor de fundo em vez disso
- Não use a "paleta de IA": ciano em fundo escuro, gradientes de roxo para azul, detalhes neon em fundos escuros
- Não use preto puro (
#000) ou branco puro (#fff) — tinja seus neutros
Antipadrões de layout:
- Não envolva tudo em cards — nem todo elemento precisa de um contêiner
- Não aninhe cards dentro de cards
- Não use grades de cards idênticas (ícone + título + texto, repetidos indefinidamente)
- Não centralize tudo — texto alinhado à esquerda com layouts assimétricos parece projetado
Antipadrões de movimento:
- Não use easing de 'bounce' ou 'elastic' — eles parecem datados; objetos reais desaceleram suavemente
- Não anime propriedades de layout como
width,height,padding— usetransformeopacityapenas
Essas regras são correspondidas exatamente aos hábitos que tornam o código de frontend gerado por IA reconhecível à primeira vista. Ao nomeá-los explicitamente, Impeccable oferece ao modelo uma lente corretiva que ele não teria sem orientação externa.
Nos Bastidores: Sistema de Build, Testes de Unidade e Suporte a Múltiplas Ferramentas
Impeccable não é apenas um arquivo de prompt — é um projeto de software adequado com um sistema de build, um pacote de testes de unidade e suporte a múltiplos provedores.
O Sistema de Build
Os arquivos fonte da skill residem em source/skills/ e usam frontmatter YAML rico (seguindo a especificação Agent Skills). Uma única etapa de build os compila para formatos específicos de provedor para Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro e Pi:
bun run build # Compila todos os 8 formatos de provedor
bun run rebuild # Limpa e reconstrói do zero
Cada provedor recebe o dialeto correto. Claude Code e OpenCode recebem metadados completos, incluindo `args` e `allowed-tools`. Codex CLI recebe o formato `argument-hint` com placeholders `$ARGNAME`. Gemini recebe frontmatter mínimo. O build lida com tudo isso automaticamente através de uma arquitetura de transformadores modular em `scripts/lib/transformers/`.
O Pacote de Testes de Unidade
Impeccable vem com um pacote de testes de unidade baseado em Bun em `tests/build.test.js`. Os testes cobrem todo o pipeline de build:
- Testes de orquestração verificam se cada função do transformador é chamada com os argumentos corretos
- Testes de integração criam arquivos fonte reais em um diretório temporário e afirmam que os arquivos de saída esperados existem para cada provedor
- Testes de correção de transformação verificam transformações específicas — que a saída do Gemini contém `{{args}}`, que a saída do Codex contém `$TARGET`, que a saída do Claude Code contém `user-invokable: true`
- Testes de casos de borda lidam com listas de skills vazias e verificam se o pipeline não falha
Executar o pacote de testes de unidade é um único comando:
bun test
Esses testes de unidade são o que tornam seguro contribuir para o Impeccable. Você pode modificar um transformador, executar os testes de unidade e saber imediatamente se sua alteração quebrou a saída para qualquer uma das oito ferramentas suportadas. Essa é a confiança de engenharia que separa projetos de código aberto mantidos de coleções de prompts abandonadas.
Impeccable + Apidog: Combinando Qualidade de Design com Qualidade de API
Impeccable resolve o problema de qualidade do frontend gerado por IA na camada de UI. Apidog o resolve na camada de API.
Quando você está construindo um produto real com assistência de IA, ambas as camadas importam. Um frontend gerado por IA que parece polido ainda decepcionará os usuários se as chamadas de API que ele faz forem mal documentadas, não testadas ou não confiáveis. Apidog oferece o mesmo nível de precisão para sua API que Impeccable oferece para sua UI.
Com o Apidog, você pode:
- Projetar APIs visualmente antes de escrever uma única linha de código de backend
- Gerar servidores mock automaticamente a partir do seu esquema de API, para que seu frontend gerado por IA tenha dados realistas para renderizar durante o desenvolvimento
- Executar testes de API automatizados contra cada endpoint, capturando regressões antes que cheguem à produção
- Compartilhar documentação de API interativa com sua equipe, mantendo desenvolvedores frontend e backend alinhados
A combinação é natural: use Impeccable para garantir que seu frontend gerado por IA seja visualmente distinto e pronto para produção, e use Apidog para garantir que as APIs que alimentam esse frontend sejam confiáveis e bem documentadas. Juntos, eles fecham a lacuna de qualidade que o desenvolvimento assistido por IA sozinho deixa aberta.
Experimente o Apidog gratuitamente para gerar servidores mock e documentação de API para seu próximo projeto de frontend gerado por IA.
Começando com Impeccable
O caminho mais rápido é baixar o pacote pronto para uso em impeccable.style, escolher sua ferramenta e extrair.
Para o Claude Code especificamente:
# Instalação em nível de projeto
cp -r dist/claude-code/.claude your-project/
# Ou instale globalmente para todos os projetos
cp -r dist/claude-code/.claude/* ~/.claude/
Em seguida, execute /teach-impeccable uma vez para salvar o contexto de design do seu projeto, e você estará pronto para usar todos os 20 comandos.
FAQ
O que torna Impeccable diferente da skill oficial `frontend-design` da Anthropic? Impeccable se baseia na skill da Anthropic com 7 arquivos de referência específicos do domínio, 20 comandos de direção e uma biblioteca explícita de antipadrões. A skill oficial é um ponto de partida; Impeccable é um sistema de design abrangente sobreposto a ela.
Impeccable funciona com outras ferramentas além do Claude Code? Sim. Impeccable suporta Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro e Pi. O sistema de build compila um único formato fonte em dialetos específicos de provedor para cada ferramenta.
Para que serve o comando /overdrive? /overdrive é para efeitos tecnicamente ambiciosos que vão além dos limites convencionais — shaders WebGL, tabelas virtuais de 60fps, física de mola em caixas de diálogo, revelações acionadas por rolagem. Use-o quando quiser algo que faça os usuários perguntarem "como eles fizeram isso?"
Como Impeccable lida com testes de unidade? O projeto vem com um pacote de testes de unidade baseado em Bun que cobre todo o pipeline de build, incluindo a correção do transformador e testes de integração que criam arquivos fonte reais e verificam a saída. Execute bun test para executar o pacote completo de testes de unidade.
Impeccable pode ajudar com frontends orientados por API? Impeccable lida com a qualidade da UI. Para a camada de API, combine-o com Apidog, que oferece design visual de API, testes automatizados e geração de servidor mock — tudo o que você precisa para construir backends confiáveis para seu frontend gerado por IA.
Impeccable é gratuito para usar? Sim. Impeccable é licenciado sob Apache 2.0 e de código aberto. O código-fonte está disponível no GitHub e os pacotes compilados estão disponíveis em impeccable.style.