Evitando o visual genérico de IA (AI slop)

Você já viu uma tela que "grita" ser genérica antes mesmo de saber por quê. Não é preconceito contra ferramentas de IA — é que um punhado de decisões visuais virou atalho tão repetido (por templates, gerador de landing page, ferramentas de geração de UI) que passou a significar, pra quem olha, "ninguém tomou uma decisão de verdade aqui". Reconhecer esses padrões é o primeiro passo pra evitá-los.

Gradiente roxo-azul-rosa genérico

Um gradiente diagonal saindo de roxo pra azul (às vezes terminando em rosa) virou o "papel de parede padrão" de quem quer parecer moderno sem tomar nenhuma decisão de marca. O problema não é o gradiente em si — é que essa combinação específica não significa nada sobre o produto. Ela não vem da paleta da marca, não segue o raciocínio de proporção da lição 3, está ali só porque "parece tech". Uma paleta com propósito, mesmo que mais simples (uma cor sólida com significado, seguindo 60-30-10), comunica mais cuidado do que um gradiente bonito e vazio.

Emoji no lugar de ícone

Usar ✨, 🚀 ou 💡 dentro de um botão ou título, no lugar de um ícone de verdade, é outro atalho comum. O problema prático: emoji renderiza de forma diferente em cada sistema operacional e navegador — você não controla o traço, o peso nem a cor dele do mesmo jeito que controla um ícone de biblioteca (Lucide, Heroicons, Phosphor). Ele também não tem estado (não muda de cor no :hover, não herda o peso visual do resto do design) e frequentemente destoa do resto da composição tipográfica. Um ícone SVG de verdade, no stroke-width e tamanho combinando com o restante da interface, comunica a mesma ideia com controle total sobre a aparência.

Glassmorphism forçado sem propósito

Blur de fundo (backdrop-filter: blur(...)) combinado com transparência pode ser uma técnica legítima — quando existe um propósito real de camada, como um menu flutuante sobre conteúdo dinâmico que precisa continuar parcialmente visível atrás dele. O problema é aplicar esse efeito em tudo — cards, botões, seções inteiras — só pela estética "vidro fosco". Isso reduz contraste (o texto some contra o fundo variável atrás do blur, entrando em conflito direto com o que a lição 11 cobre sobre acessibilidade) e vira ruído visual sem hierarquia: se tudo é "vidro flutuante", nada realmente flutua.

Border-radius exagerado e sombra flutuante "fofinha"

Cantos extremamente arredondados (perto de virar pílula) combinados com uma sombra suave e difusa em todo elemento — botão, card, input, imagem — sem exceção, é outro padrão que ficou associado a "gerado rápido, sem hierarquia real". Quando cada elemento recebe exatamente o mesmo tratamento visual, elementos de importância diferente (uma ação principal e uma legenda secundária, por exemplo) ficam com o mesmo peso visual — o oposto do que a lição 2 ensina sobre hierarquia.

Comparando lado a lado