Impeccable na prática: workflow completo com 20 comandos

20 atalhos para o resultado que você levaria horas para descrever

Imagine ter um diretor de arte ao lado que entende comandos de uma palavra. “Audite.” “Normalize.” “Polir.” É isso que os 20 comandos do Impeccable fazem — traduzem intenções de design em ações concretas que a IA executa. O diferencial está na capacidade de combinar comandos em workflows. Cada comando resolve um problema específico, e juntos formam um pipeline de design.

Workflow 1: auditoria completa de um blog

/audit blog

O /audit roda checagens técnicas em 5 dimensões, cada uma com severidade P0-P3: acessibilidade (contraste, ARIA, navegação por teclado), performance (tamanho de assets, lazy loading, CLS), responsividade (breakpoints, touch targets, overflow), semântica (HTML semântico, heading hierarchy) e consistência (tokens de design, espaçamento).

O resultado é um relatório estruturado, sem edições — apenas diagnóstico.

/normalize blog

Depois do audit, o /normalize aplica as correções: tokens de design, espaçamento padronizado, estilos de botão consistentes.

/polish blog

O passe final. /polish cuida dos detalhes: alinhamento pixel-perfect, espaçamento fino, transições suaves.

Combinação rápida:

/audit /normalize /polish blog

Workflow 2: redesign de landing page

/critique landing page

Diferente do /audit (técnico), o /critique faz review de UX design. Avalia contra as 10 heurísticas de Nielsen, testa com personas arquetípicas e mede carga cognitiva. Eu achei esse comando mais útil do que esperava.

/distill landing page

Remove complexidade que não justifica sua existência. Seções desnecessárias, elementos decorativos sem função, texto que não converte.

/bolder landing page

Se o resultado ficou muito seguro, /bolder amplifica: tipografia mais contrastante, CTAs mais visíveis, hierarquia mais dramática.

Workflow 3: polimento de checkout

/critique /harden checkout

Review de UX + hardening: error handling para cada campo, estados de loading, mensagens de erro claras, edge cases de pagamento.

/animate checkout

Adiciona movimento com propósito, não decoração. Transições entre etapas, feedback visual de validação, micro-interações nos botões.

Workflow 4: consistência de design system

O /typeset corrige escolhas de fonte, hierarquia e sizing. Recomenda escalas tipográficas fixas para UIs de app (reservando tipografia fluida para páginas de marketing).

O /arrange corrige layout, espaçamento e ritmo visual. Alinha grids, padroniza gaps, estabelece hierarquia espacial.

O comando que você deveria rodar primeiro

Antes de tudo, rode uma vez:

/teach-impeccable

Ele coleta contexto do projeto (público, marca, tom) e salva em .impeccable.md. Todos os outros comandos se beneficiam desse contexto. As sugestões ficam específicas para o seu projeto, não genéricas. Eu esqueci de rodar isso na primeira vez e a diferença foi perceptível.

Anti-patterns que o Impeccable bloqueia

O Impeccable diz explicitamente o que NÃO fazer:

• Fontes overused (Arial, Inter, system defaults sem personalidade)
• Texto cinza sobre fundos coloridos
• Preto/cinza puro (sempre usar tint)
• Cards dentro de cards dentro de cards
• Easing bounce/elastic (parece datado)
• Gradientes roxo-para-azul genéricos

Use /overdrive (beta) quando quiser efeitos extraordinários — animações complexas, shaders, efeitos de parallax avançados. É o modo “sem limites”.

Fonte: github.com/pbakaus/impeccable | impeccable.style