Impeccable: a linguagem de design que sua IA precisava
por Fabricio Telles··design.app.br
O problema que o Impeccable resolve
Você pede à IA “crie uma landing page” e recebe Inter, gradiente roxo, cards genéricos. Pede de novo e recebe a mesma coisa. Pede com mais detalhes e recebe… a mesma coisa com mais palavras. O problema não é o prompt — é que a IA não tem vocabulário de design. O Impeccable dá esse vocabulário a ela.
Quem criou entende do assunto. Paul Bakaus é o criador do jQuery UI, liderou developer relations no Google (AMP, Google for Creators), e depois construiu o Spotter Studio. O cara entende de design e developer experience.
O que é o Impeccable?
É uma skill open-source que combate o “AI slop” no frontend. Se baseia na skill frontend-design original da Anthropic e expande com mais profundidade e controle.
O projeto tem três partes:
Skill expandida com 7 referências de domínio
| Referência | O que cobre |
|---|---|
typography | Sistemas tipográficos, pareamento de fontes, escalas modulares, OpenType |
color-and-contrast | OKLCH, neutros com tint, dark mode, acessibilidade |
spatial-design | Sistemas de espaçamento, grids, hierarquia visual |
motion-design | Curvas de easing, staggering, reduced motion |
interaction-design | Formulários, estados de foco, padrões de loading |
responsive-design | Mobile-first, design fluido, container queries |
ux-writing | Labels de botões, mensagens de erro, empty states |
Cada referência é tecnicamente precisa. O guia de tipografia, por exemplo, vai além de “use boas fontes”. Explica como ritmo vertical funciona, por que FOUT acontece e como prevenir com size-adjust, e quando clamp() para tipo fluido é a escolha errada. Eu fiquei genuinamente impressionado com o nível de detalhe.
Protocolo de coleta de contexto
O comando /teach-impeccable é subestimado. Antes de qualquer trabalho de design, a skill exige contexto 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.
A IA gera frontend genérico em parte porque não tem contexto do projeto — ela recorre a escolhas seguras e medianas. O Impeccable força esse contexto a ser estabelecido primeiro. Parece óbvio, mas quase ninguém faz isso.
20 comandos de design
Os comandos de análise: /audit faz checagem técnica (a11y, performance, responsivo) e /critique faz review de UX.
Os de correção: /normalize alinha com padrões do design system, /typeset corrige fontes e hierarquia, /arrange corrige layout e espaçamento.
Os de refinamento: /polish é o passe final antes de shipar, /distill reduz ao essencial, /clarify melhora UX copy confusa.
Os de intensidade: /bolder amplifica designs tímidos, /quieter suaviza designs agressivos, /colorize adiciona cor, /animate adiciona movimento com propósito, /delight adiciona momentos de alegria.
E os avançados: /overdrive para efeitos extraordinários, /harden para error handling e edge cases, /optimize para performance.
Como instalar
npx skills add pbakaus/impeccableFunciona com Cursor, Claude Code, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Trae, Rovo Dev, OpenCode e Pi.
Por que me convenceu
O Impeccable dá ao dev o vocabulário de design que ele não sabia que precisava. Você não precisa saber pedir “mais ritmo vertical” se nunca usou essas palavras. Os comandos colocam essa linguagem nas suas mãos. Na minha experiência, é a skill que mais muda o output da IA de forma consistente.