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 redesenho — entenda o que você tem
- Quando a UI parece "estranha" mas você não consegue identificar o motivo
- Revisando PRs que alteram 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 CSS/Tailwind/styled-components em busca de padrões existentes
2. Extrai: cores, tipografia, espaçamento, raio de borda, sombras, breakpoints
3. Pesquisa 3 sites concorrentes para inspiração (via navegador MCP)
4. Propõe um conjunto de tokens de design (JSON + propriedades customizadas CSS)
5. Gera DESIGN.md com a justificativa para cada decisão
6. Cria uma página HTML interativa de pré-visualização (autocontida, sem dependências)
Saída: DESIGN.md + design-tokens.json + design-preview.html
Modo 2: Auditoria Visual
Atribui notas para sua UI 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 — proporções de contraste, estados de foco, áreas 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
- Cartas com "efeito vidro" sem propósito
- Cantos arredondados em elementos que não deveriam ser arredondados
- Animações excessivas ao rolar a página
- Hero genérico com texto centralizado sobre gradiente de banco de imagens
- Família de fontes sem serifa sem personalidade
Exemplos
Gerar para um aplicativo SaaS:
/design-system generate --style minimal --palette earth-tones
Auditar UI existente:
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
Verificar presença de "slop" de IA:
/design-system slop-check