Sistema de Design — Gere e Audite Sistemas Visuais
Quando Usar
- Iniciando um novo projeto que precisa de um sistema de design
- Auditando uma base de código existente em busca de consistência visual
- Antes de um redesign — entenda o que você tem
- Quando a IU parece "estranha" mas você não consegue identificar exatamente por quê
- Revisando PRs que alteram a estilização
Como Funciona
Modo 1: Gerar Sistema de Design
Analisa sua base de código e gera um sistema de design coeso:
1. Escaneia padrões existentes em CSS/Tailwind/styled-components
2. Extrai: cores, tipografia, espaçamento, border-radius, sombras, breakpoints
3. Pesquisa 3 sites concorrentes para inspiração (via MCP do navegador)
4. Propõe um conjunto de tokens de design (JSON + custom properties CSS)
5. Gera DESIGN.md com a justificativa para cada decisão
6. Cria uma página HTML de pré-visualização interativa (autocontida, sem dependências)
Saída: DESIGN.md + design-tokens.json + design-preview.html
Modo 2: Auditoria Visual
Atribui notas à sua IU em 10 dimensões (0-10 cada):
1. Consistência de cor — você está usando sua paleta ou valores hex aleatórios?
2. Hierarquia tipográfica — h1 > h2 > h3 > body > caption claros?
3. Ritmo de espaçamento — escala consistente (4px/8px/16px) ou arbitrária?
4. Consistência de componentes — elementos semelhantes parecem semelhantes?
5. Comportamento responsivo — fluido ou quebrado nos breakpoints?
6. Modo escuro — completo ou pela metade?
7. Animação — proposital ou gratuita?
8. Acessibilidade — contrastes, estados de foco, alvos de toque
9. Densidade de informação — poluída ou limpa?
10. Polimento — estados de hover, transições, estados de carregamento, estados vazios
Cada dimensão recebe uma nota, exemplos específicos e uma correção com arquivo:linha exatos.
Modo 3: Detecção de 'Slop' de IA
Identifica padrões genéricos de design gerados por IA:
- Gradientes gratuitos em tudo
- Padrões roxo-para-azul
- Cartões em "vidro fosco" sem propósito
- Cantos arredondados em coisas que não deveriam ser arredondadas
- Animações excessivas ao rolar
- Hero genérico com texto centralizado sobre gradiente padrão
- Pilha de fontes sem serifa sem personalidade
Exemplos
Gerar para um aplicativo SaaS:
/design-system generate --style minimal --palette earth-tones
Auditar IU existente:
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
Verificar se há 'slop' de IA:
/design-system slop-check