Niltra/web-diseno-antislop

Design web anti-slop

Princípio: o modelo padrão converge para a média de tudo o que já viu. Esta skill rompe essa convergência obrigando a decidir antes de construir e verificando com evidência depois.

Quando ativar

• Ao construir ou redesenhar páginas, seções, heroes, cards, navegação ou qualquer UI.
• Ao auditar um site ou captura com a pergunta "isto parece feito por IA?".
• Ao escolher tipografias, paletas, espaçamento ou motion para um novo projeto.

Design DNA (obrigatório antes de tocar no código)

Todo projeto declara primeiro:

1. Paleta nomeada (ex.: "Sala de controle"): 1 cor de tinta/base, 1 de superfície, 1 acento de sinal, 1 acento de dados, 1 de alerta. HEX ou OKLCH + contraste AA verificado.
2. Par tipográfico com funções: display, corpo, mono técnica, números. Nunca uma única fonte para tudo.
3. Esqueleto da seção principal em ASCII.
4. Composição do hero: o que se vê sem scroll em um notebook 1280x720.
5. Elemento assinatura: algo único que só este site possui (um gráfico vivo, um padrão de grid, um cursor, uma transição própria).
6. Nível de motion (0-10) e comportamento com prefers-reduced-motion.

Escreva em docs/design-dna.md do projeto e não improvise no meio da construção.

Os dois testes anti-slop

• Teste 1: alguém poderia adivinhar a paleta sabendo apenas a categoria do produto? Se sim, refaça.
• Teste 2: poderia adivinhar a família estética com categoria + antirreferências? Se sim, refaça.

Proibições rígidas (se aparecer uma, regenere esse eixo)

Território tipográfico: Inter, Roboto, Open Sans ou qualquer fonte padrão do sistema em papel de destaque; todas as seções com o mesmo tamanho de título.

Território cor: gradientes roxos/índigo/violeta; #fff e #000 puros; neon verde sobre preto como "dev portfolio"; creme + terracota + serif; mais de um gradiente decorativo por página.

Território layout: hero centralizado empilhado (kicker + H1 + subtítulo + 2 botões); 3 colunas iguais com ícones; bento com cards dentro de cards; borda de acento lateral em cards; glassmorphism; dashboard falso com sparklines decorativas; tudo com fade-in-up ao entrar; seções idênticas em estrutura uma após a outra.

Território conteúdo visual: capturas inventadas ou mockups flutuantes; imagens stock; imagens geradas por IA como substituto de produto real; emojis como ícones de funcionalidades; logos em fila "confiam em nós" sem contexto.

Território copy: "Eleve seu...", "Desbloqueie", "Acelere", "Leve seu X ao próximo nível", "O futuro de...", "Perfeitamente", "Sem esforço"; travessões decorativos; selo "Disponível para trabalho" com ponto verde; mais de 2 tipos de botão diferentes.

Regras de construção

• O texto é HTML real (indexável), nunca texto dentro de canvas, SVG ou imagem.
• Grid com intenção: larguras diferentes por tipo de conteúdo, quebras de alinhamento propositais, hierarquia por tamanho e peso, não por caixas.
• Espaçamento por escala (4/8) declarada; nada de valores aleatórios.
• Interação real: hover, foco, teclado, estados de carregamento e vazio. Nada decorativo que não responda.
• Motion com propósito: entra uma vez, não em loop; anima transform e opacity; respeita prefers-reduced-motion de forma explícita.
• Acessibilidade acima de originalidade: contraste AA, foco visível, áreas táteis 44px, largura mínima de 375px.

Auditoria anti-slop (com capturas)

1. Capturar desktop 1440 e mobile 375 com Playwright CLI (nunca opinar sem captura).
2. Percorrer a lista de proibições e nomear o padrão detectado com evidência (seletor/captura).
3. Aplicar os dois testes.
4. Verificar foco, teclado, contraste computado e reduced-motion.
5. Saída: padrão → evidência → correção concreta. 0 padrões = aprovado.

Ferramentas de apoio

• Playwright CLI para capturas e verificação: ver skill web-qa-visual.
• Assets reais e logos: ver skill web-assets-reais.
• Texto: gate no-ai-slop.
• Registro de construções anteriores para não repetir esqueleto/paleta: docs/design-dna.md do projeto (append-only).