Impeccable é uma skill (habilidade) de código para Claude, open source, criada por Paul Bakaus, que resolve o problema de “baixa qualidade da IA” na geração de frontend. Ele oferece 20 comandos práticos (/audit, /polish, /critique etc.), 7 arquivos de referência de design e antipadrões claros para orientar o que NÃO gerar, resultando em UIs que parecem projetadas de verdade.
Por Que Todo Frontend Gerado por IA Parece o Mesmo
Se você pedir para qualquer assistente de IA criar um painel, landing page ou formulário de configurações, verá sempre os mesmos padrões: fonte Inter, gradiente roxo-azul, cards aninhados, texto cinza em fundo colorido, glassmorphism, seções de herói genéricas. Isso ocorre porque os LLMs foram treinados em milhares de exemplos medianos e replicam escolhas seguras e genéricas.
Impeccable foi desenvolvido para quebrar esse padrão. Ele vai além da skill oficial frontend-design da Anthropic, oferecendo mais profundidade, comandos mais específicos e restrições mais rígidas para forçar UIs diferenciadas.
💡Antes de rodar /audit, /polish ou /overdrive no Claude Code com Impeccable, baixe o Apidog gratuitamente. Com ele, teste e depure visualmente os endpoints de API que seu frontend vai consumir, validando payloads, tokens, formatos de resposta e dados mock em segundos. Assim você evita retrabalho entre UI polida e integrações problemáticas.
O Que Impeccable Realmente É
Impeccable é uma skill plugável para Claude Code, composta por instruções, arquivos de referência e comandos de barra para elevar qualquer tarefa de frontend feita pela IA.
Ela é composta por três partes principais:
A Skill frontend-design Expandida do Impeccable
O Impeccable inclui um guia de design dividido em 7 arquivos de referência, cada um cobrindo temas essenciais (tipografia, cor, layout, etc):
Por exemplo, o guia de tipografia explica ritmo vertical, previne FOUT com size-adjust, alerta quando clamp() não é adequado, indo muito além de “use boas fontes”. O detalhamento técnico é o que diferencia o Impeccable de guias genéricos.
O Protocolo de Coleta de Contexto do Impeccable
O comando /teach-impeccable exige, antes de qualquer geração, que você informe público, casos de uso e personalidade da marca. Esse contexto vai para .impeccable.md no projeto e é automaticamente carregado nas próximas sessões. Assim, a IA deixa de assumir escolhas medianas e passa a seguir o briefing do projeto.
Os 20 Comandos Que Corrigem Frontends Gerados por IA
Cada comando do Impeccable resolve um problema recorrente no frontend gerado por IA. Utilize-os como comandos de barra no Claude Code:
/audit → Checagem de acessibilidade, performance e responsividade
/critique → Revisão de UX: hierarquia, clareza, emoção
/polish → Toque final (alinhamento, espaçamento, detalhes)
/distill → Remover complexidade desnecessária
/normalize → Alinhar ao design system
/animate → Adicionar movimento intencional
/colorize → Inserir cores estratégicas em UIs monocromáticas
/bolder → Deixar o design mais ousado
/quieter → Suavizar layouts agressivos
/delight → Inserir momentos de alegria
/typeset → Ajustar fontes, hierarquia e tamanhos
/arrange → Corrigir layout e ritmo visual
/harden → Tratamento de erros, i18n, edge cases
/optimize → Otimização de performance
/extract → Extrair componentes e tokens reutilizáveis
/adapt → Adaptar para dispositivos/contextos diferentes
/onboard → Criar onboarding e estados vazios
/clarify → Melhorar textos confusos de UX
/overdrive → Efeitos avançados (shaders, física, scroll triggers)
/teach-impeccable → Configuração inicial: coletar contexto do projeto
Você pode passar um escopo para o comando: /audit header audita só a navbar, /polish checkout-form refina só o checkout. Assim, só partes que precisam de ajuste são alteradas.
O fluxo recomendado: rode /audit para achar problemas, /arrange para layout, /typeset para tipografia e /polish antes de entregar.
A Biblioteca de Antipadrões: Ensinando à IA o Que Não Fazer
O diferencial do Impeccable não são só os comandos, mas sua biblioteca de antipadrões. Ele injeta restrições explícitas de "NÃO FAÇA", combatendo falhas recorrentes do frontend gerado por IA:
Antipadrões de Tipografia:
- Evite Inter, Roboto, Arial ou fontes do sistema
- Não use monospace como “vibe de dev”
- Não coloque ícones circulares grandes acima de títulos
Antipadrões de Cor:
- Evite texto cinza em fundo colorido
- Nada de paleta “ciano + gradiente roxo/azul + neon”
- Não use
#000ou#fffpuros
Antipadrões de Layout:
- Não coloque tudo em cards
- Não aninhe cards em cards
- Evite grades de cards idênticos
- Não centralize tudo; use alinhamento à esquerda e assimetria
Antipadrões de Movimento:
- Não use easing
bounceouelastic - Evite animar
width,height,padding; usetransformeopacity
Esses antipadrões atacam diretamente o que torna UIs de IA óbvias e genéricas. Nomeando-os, Impeccable ensina o modelo a evitá-los.
Nos Bastidores: Sistema de Build, Testes de Unidade e Multiplataforma
Sistema de Build
Os arquivos da skill ficam em source/skills/ usando frontmatter YAML (padrão Agent Skills). Uma etapa compila para 8 formatos: Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro e Pi:
bun run build # Compila todos os formatos
bun run rebuild # Limpa e recompila do zero
Cada provedor recebe o formato e metadados corretos. O build faz tudo automaticamente via transformadores em scripts/lib/transformers/.
Testes de Unidade
O projeto inclui testes de unidade com Bun em tests/build.test.js:
- Testes de orquestração: checam se cada transformador recebe os argumentos certos
- Testes de integração: criam arquivos reais e validam outputs
- Testes de transformação: garantem que cada dialeto está correto
- Testes de edge cases: validam skills vazias e pipeline
Rode todos os testes com:
bun test
Assim, contribuir com Impeccable é seguro: altere, rode os testes e saiba se quebrou algum dos 8 formatos.
Impeccable + Apidog: Qualidade de Design e API lado a lado
Impeccable resolve a camada de UI do frontend de IA. O Apidog resolve a camada de API.
Para produtos reais, ambas importam: um frontend bonito falha se a API for mal documentada ou instável. O Apidog traz precisão e testes automatizados para APIs, assim como Impeccable faz para UI.
Com o Apidog, você pode:
- Projetar APIs visualmente antes do backend
- Gerar mocks automáticos para testar o frontend com dados reais
- Rodar testes automáticos em todos os endpoints
- Compartilhar documentação interativa entre times
Use Impeccable para garantir um frontend distinto e pronto para produção, e Apidog para garantir APIs confiáveis para alimentar essa UI. Eles juntos fecham a lacuna de qualidade do desenvolvimento assistido por IA.
Experimente o Apidog gratuitamente para gerar mocks e documentação para seu próximo frontend AI-driven.
Começando com Impeccable
Baixe o pacote pronto em impeccable.style, selecione sua ferramenta e extraia.
Para Claude Code, faça assim:
# Instalar no projeto
cp -r dist/claude-code/.claude seu-projeto/
# Ou para todos os projetos
cp -r dist/claude-code/.claude/* ~/.claude/
Depois, rode /teach-impeccable uma vez para salvar o contexto do projeto e já use qualquer um dos 20 comandos.
FAQ
Qual a diferença do Impeccable para a skill oficial frontend-design? Impeccable vai além: 7 arquivos de referência, 20 comandos e antipadrões explícitos. A skill oficial é um ponto de partida; Impeccable é um sistema completo.
Funciona com outras ferramentas além do Claude Code? Sim — Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro e Pi. O build exporta para todos.
Para que serve /overdrive? Para efeitos avançados: shaders WebGL, tabelas virtuais 60fps, física, animações de scroll. Use quando quiser surpreender.
Como são feitos os testes de unidade? Com pacote Bun cobrindo todo o pipeline, incluindo transformadores e integração. Rode bun test.
Ajuda com frontends orientados por API? Impeccable cuida da UI. Para a API, use junto com Apidog para design visual, testes e mocks.
É gratuito? Sim, open source Apache 2.0. Código no GitHub, builds em impeccable.style.
Top comments (0)