Impeccable: A Skill com 23 Comandos que Resolve Design de Frontend com IA

Eu já testei dezenas de abordagens para gerar front-end com IA. O resultado é quase sempre o mesmo: a interface funciona, mas parece que você já viu ela em algum lugar. Gradientes roxos, cards com glassmorphism, padding generoso demais — o que eu chamo de "AI slop" visual. Não é que a IA seja ruim. É que ela não tem intencionalidade. Ela não sabe para quem é o produto, qual a personalidade da marca, o que evitar. A skill Impeccable ataca exatamente essa lacuna com 23 comandos que injetam contexto de design antes de qualquer linha de código — e o resultado é uma UI que parece ter sido desenhada por um humano que entendeu o produto.

O Problema: Design Genérico Gerado por IA

Quando você pede para uma IA "criar uma landing page" sem dar contexto, ela busca o caminho estatisticamente mais provável. Isso significa cores púrpura, gradientes chamativos, glassmorphism padrão. É o equivalente visual de um texto do ChatGPT que começa com "No mundo atual, cada vez mais...". A IA entrega o que foi treinada para entregar: a média.

O problema de fundo é simples: design sem contexto produz output genérico. Eu já explorei isso em detalhes quando escrevi sobre os 3 níveis de design com IA — do prompt engineering básico ao TDD visual. O Impeccable opera no terceiro nível: em vez de iterar prompts de design, você documenta a intenção do produto e deixa a IA consultar essa documentação.

Como o Impeccable Funciona: 23 Comandos com Propósito

A skill é organizada em categorias que espelham o ciclo real de design de software:

Criar: o craft executa o pipeline completo — descoberta, referência, implementação, iteração visual. O shape faz a descoberta estruturada antes de escrever código — ideal para alinhar escopo com time. E o comando vazio /impeccable sugere o próximo passo quando você não sabe por onde começar.

Refinar: comandos como polish e animate adicionam camadas de polimento em telas existentes. O delight resolve o clássico problema do empty state sem graça.

Auditar: o critique faz uma análise completa de heurísticas de design — consistência, flexibilidade, estética, carga cognitiva — e inclui um detector de AI slop que identifica padrões genéricos. Cada violação vem com recomendação de correção.

Blindar: o harden cobre edge cases, estados de erro, estados de carregamento e acessibilidade — as coisas que a gente normalmente esquece no primeiro commit.

Documentar: o document gera os artefatos que alimentam todos os outros comandos.

Product.md e Design.md: O Contexto que Falta para a IA

O segredo do Impeccable está em dois arquivos que ele gera na raiz do projeto, versionáveis e legíveis por qualquer coding agent:

product.md responde "para quem, o quê e por quê". Define o propósito do produto, a persona principal, a personalidade da marca em 3 palavras, anti-referências (o que NÃO fazer — tipo "nada de enterprise blue" ou "sem cartoon infantil"), princípios de design e necessidades de acessibilidade. É o artefato estratégico.

design.md responde "como isso vai se parecer". Contém a paleta de cores, escala tipográfica, tokens de elevação, arredondamento de borda, filosofia dos componentes e regras explícitas de o-que-fazer e o-que-não-fazer. Segue o padrão design.md que o Google popularizou — um formato que ferramentas como Google Stitch e Cloud Design já adotaram como standard para design system com IA.

Com esses dois arquivos, a IA não parte do zero estatístico: ela parte da intenção do seu produto. A diferença no output é gritante. Em vez de "UI genérica com gradiente roxo", você recebe uma interface que respeita a personalidade da marca, os tokens visuais definidos e as restrições que você documentou.

Craft, Critique e Polish: O Ciclo de Design na Prática

O workflow real segue três etapas:

Teach: você roda /impeccable teach e a IA conduz uma entrevista guiada de 5 a 8 minutos. Ela pergunta: qual o tipo de produto (ferramenta, marketing, dashboard)? Quem são os usuários primários? Qual o resultado esperado de um bom design? Personalidade da marca em 3 palavras? Quais anti-referências visuais? Cada pergunta tem opções de múltipla escolha com exemplos concretos ("Linear e Figma" vs "Notion e Whimsical").

Document: a IA escaneia o código existente, identifica tokens de design já usados (cores, fontes, border-radius), detecta inconsistências entre o código e a intenção declarada, e gera product.md e design.md. Se você já tem um sistema de tokens no projeto, ele aproveita.

Execute: a partir daí, qualquer comando — craft para feature nova, critique para auditar tela existente, polish para refinar — lê product.md e design.md automaticamente. Eu rodei o critique em uma página com problemas de acessibilidade (ícones sem label, cor como único indicador de estado) e ele apontou cada violação com o comando exato para corrigir. Rodei o craft para uma feature de texto inline e a UI gerada respeitou cores, bordas, tipografia e hierarquia do design system existente — zero roxo genérico.

Por Que Isso Importa para Devs

(1) Design system como código versionável. Product.md e design.md são arquivos de texto — commitados junto com o projeto, revisados em PR, compartilhados entre o time. Qualquer coding agent que ler esses arquivos produz UI consistente. Você não precisa re-explicar o contexto de design a cada sessão. Assim como um CLAUDE.md bem configurado instrui a IA sobre o projeto, product.md e design.md instruem sobre a identidade visual.

(2) Auditoria contínua de UI. O critique funciona como um linter visual — detecta problemas de acessibilidade, inconsistência de componentes, AI slop e gargalos de carga cognitiva antes do usuário final ver. É o equivalente de um ESLint para interface.

(3) O padrão design.md veio para ficar. O Google estabeleceu esse formato como standard para ferramentas de design com IA — Google Stitch, Cloud Design e Open Design já consomem esse formato. Quem adotar o design.md agora está na frente da curva quando mais ferramentas passarem a suportá-lo nativamente.

Conclusão

99% do design genérico de IA desaparece quando você dá contexto de produto antes de gerar UI. O Impeccable transforma esse princípio em 23 comandos reutilizáveis e dois arquivos que viram a memória de design do seu projeto — versionada, compartilhável e à prova de "gradiente roxo".

Não é mágica. É intencionalidade documentada.