iamyashwanthreddy/Anti-slop-website-design

Design web Anti-slop

A maioria dos sites feitos por IA se parecem porque o modelo preenche cada decisão em aberto com a resposta mais comum estatisticamente: Inter, um gradiente índigo para roxo, cards arredondados-2xl com sombras suaves, um herói centralizado com um selo de pílula, três cards de recursos com ícones Lucide. Cada escolha é boa por si só. Juntas, elas transmitem a ideia de que "ninguém decidiu nada", e os visitantes percebem isso imediatamente.

Pessoas que trabalham com design profissional não evitam essas coisas porque uma regra diz para fazer assim. Elas as evitam porque partem do assunto (o negócio, o conteúdo, o público) e cada escolha decorre disso. Seu trabalho é fazer o mesmo. A lista de proibições abaixo é uma rede de segurança, não o método.

O processo

1. Escreva um briefing de design antes de qualquer código

Gaste algumas frases com isso, seja em seu raciocínio ou mostrado ao usuário se o escopo for grande. Preencha:

• Assunto: o que é, para quem é, o que eles precisam fazer na página?
• Caráter: três adjetivos específicos para este assunto. "Moderno, limpo, elegante" descreve tudo, então não conta. Algo como "empoeirado, acolhedor, levemente nerd" para um sebo, ou "clínico, calmo, exato" para um laboratório.
• Uma referência do mundo real: uma tradição de design física ou histórica da qual a página empresta. Exemplos: um horário de trem, um pôster suíço dos anos 1970, um pacote de sementes, uma etiqueta de museu, um catálogo de ferragens, uma primeira página de jornal, um fanzine, um cardápio de restaurante, um caderno de campo, um manual de software antigo, uma capa de disco. Escolha a partir do assunto, não use o mesmo por padrão.
• Paleta: 3–5 valores hexadecimais reais e de onde eles vêm (o material do produto, a marca, uma foto, a referência acima).
• Nicho e tipo: nomeie o nicho (padaria, escritório de advocacia, ferramenta de desenvolvimento, academia, casamento...), depois escolha fontes da linha desse nicho em references/fonts-by-niche.md, escolhendo a opção que corresponda aos seus três adjetivos. Escreva uma linha sobre por que ela se encaixa ("Alfa Slab One: parece a placa pintada na parede de uma cervejaria"). Se você não conseguir escrever essa linha, ainda não escolheu.
• Um detalhe marcante: um único movimento memorável que pertence apenas a este site. Por exemplo, preços definidos como um quadro negro escrito à mão, números de seção na margem como um documento legal, uma grade pautada como papel milimetrado, uma foto usada em sangria total e sem cortes.

Se o usuário já lhe deu uma marca, cores, fontes ou uma referência, elas têm prioridade. Construa o briefing em torno delas.

2. Construa a partir do conteúdo para fora

• Use conteúdo real quando tiver. Quando não tiver, escreva um texto temporário plausível e específico para este assunto (nomes de produtos que parecem reais, números que parecem reais, um endereço crível), não um texto de marketing genérico.
• Deixe o conteúdo decidir o layout. Um cardápio quer colunas e linhas pontilhadas. Um portfólio quer imagens grandes e pouca decoração. Um site de documentação quer uma barra lateral e texto denso. Não coloque todo assunto no mesmo template de página de destino.
• Varie a estrutura das seções. Sites reais têm uma seção de texto longa, uma tabela densa, uma imagem que quebra a grade. Eles não repetem "título + subtítulo + 3 cards" oito vezes.

3. Audite antes de entregar

Verifique sua saída em relação a references/slop-catalog.md (leia na primeira vez que usar esta habilidade em uma sessão; é a lista completa com razões e alternativas). Se o projeto estiver no disco e o Node estiver disponível, execute também o scanner:

node <skill-path>/scripts/slop-check.js <arquivo-ou-pasta>

Ele sinaliza características comuns (gradientes, sombras brilhantes, fontes muito usadas, emojis de brilho, cópia de palavras da moda) com arquivo e linha. Nem todo resultado está errado. Um gradiente em um mapa meteorológico ou uma fonte que o usuário solicitou explicitamente está correto. Corrija cada resultado ou mantenha-o intencionalmente com um motivo.

A lista curta de proibições

Estas são as características mais comuns. Evite-as, a menos que o usuário as solicite ou a marca realmente as exija. O catálogo tem a lista completa.

Cor

• Gradientes roxo / violeta / índigo / azul / rosa, em fundos, botões, bordas ou texto
• Texto degradê (background-clip: text) em títulos
• Acentos neon (ciano elétrico, magenta, verde limão ácido) em fundos quase pretos
• "Orbes" coloridos desfocados, auroras ou manchas de gradiente de malha atrás do herói
• Paleta padrão do Tailwind usada diretamente (indigo-600, slate-900, violet-500) como cores da marca

Superfícies e efeitos

• Sombras brilhantes coloridas (box-shadow: 0 0 40px rgba(139,92,246,.5)) e shadow-2xl em tudo
• Glassmorphism: backdrop-blur com preenchimentos brancos translúcidos e border-white/10
• Cada elemento em seu próprio card arredondado, com o mesmo raio grande (rounded-2xl/3xl) em todos os lugares
• Padrões de pontos ou grade com um mascaramento de desvanecimento radial
• Bordas de gradiente animadas, varreduras brilhantes, linhas de "feixe", holofote que segue o cursor
• Cada card subindo ao passar o mouse (translateY(-4px) + sombra maior)

Tipografia

• Inter, Poppins, Montserrat, Plus Jakarta Sans, DM Sans, Outfit, Sora, Manrope, Space Grotesk, Geist ou Instrument Serif escolhidas por reflexo. São fontes boas. O problema é escolhê-las sem um motivo.
• Qualquer fonte que não se encaixe no nicho, ou no clichê óbvio do nicho (veja references/fonts-by-niche.md)
• Um título de herói com uma palavra em gradiente ou em serifa itálica ("Construa mais rápido")
• Uma etiqueta "sobrancelha" minúscula, com espaçamento amplo e maiúscula acima de cada título de seção
• Tudo centralizado

Layout

• O template: navegação fixa → herói centralizado com um selo "✨ Novo" → dois botões → logotipos em escala de cinza "Confiado por" → 3 cards de recursos com ícones em quadrados arredondados → faixa de estatísticas → cards de depoimento com 5 estrelas → precificação de 3 níveis com o meio destacado → seção de perguntas frequentes em acordeão → banner CTA com gradiente → rodapé de 4 colunas
• Grades Bento como a maneira padrão de mostrar recursos
• Uma captura de tela falsa de painel de controle inclinada com perspectiva

Conteúdo e cópia

• Emojis como ícones ou marcadores (🚀 ✨ ⚡ 💡 🔥), e o ícone de brilho para qualquer coisa de "IA"
• "Desbloqueie o poder de", "Acelere", "Eleve", "Perfeito", "Sem esforço", "Revolucione", "Próxima geração", "plataforma tudo-em-um", "construído para o futuro", "leve X para o próximo nível"
• Slogans tricolon: "Rápido. Simples. Poderoso."
• Estatísticas inventadas (10k+ usuários, 99,9% de disponibilidade) e depoimentos falsos ("Sarah J., CEO da TechCorp")

Movimento

• Aparecer ao rolar em cada elemento, escalonados
• Elementos flutuantes/balançantes, títulos de máquina de escrever, números de contagem crescente

O que fazer em vez disso

Cor. Comece com neutros, mas dê a eles uma temperatura (papel quente #f4efe6, cinza frio #e8eaec, tinta #1b1a17) em vez de #fff puro e slate do Tailwind. Adicione um acento e use-o com moderação, para links, a ação principal e um ou dois destaques. Extraia do assunto: terracota para um estúdio de cerâmica, laranja sinalização para um aplicativo de trânsito, verde garrafa para uma farmácia. Use preenchimentos planos. Se um gradiente realmente pertencer (um céu, um mapa de calor), torne-o sutil e vinculado ao significado.

Tipografia. Escolha fontes por nicho, nunca aleatoriamente ou por hábito. Pergunte o que este negócio teria plausivelmente impresso em sua placa, cardápio, etiqueta ou papel timbrado e encontre o tipo que corresponde. Uma cervejaria e um escritório de advocacia nunca devem compartilhar uma tipografia por acidente. Leia references/fonts-by-niche.md antes de escolher. Ele abrange cerca de 40 nichos com várias opções cada, os clichês que a IA usa em cada nicho (Orbitron para jogos, Playfair para luxo, Bebas + Montserrat para academias) e fontes para scripts não latinos, como Hindi e Tamil. A pilha de fontes do sistema (system-ui, -apple-system, "Segoe UI", sans-serif) é uma escolha legítima para ferramentas e painéis. Uma família geralmente é suficiente. No máximo duas. Construa hierarquia com tamanho, peso e espaçamento, e alinhe o corpo do texto à esquerda com uma medida legível (~60–75 caracteres).

Superfícies. Separe as coisas com espaço em branco, linhas (1px solid em um tom neutro mais escuro) e mudanças de fundo em vez de sombras. Se usar uma sombra, faça-a pequena, neutra e deslocada como luz real (0 1px 2px rgb(0 0 0 / .08)). Escolha um raio intencionalmente: 0 para editorial ou industrial, 2–6px para a maioria das interfaces de usuário, totalmente redondo apenas para pílulas e avatares. Nem tudo precisa de um contêiner.

Layout. Use assimetria: uma coluna de texto larga com uma barra lateral estreita, uma imagem que sai da grade, um herói alinhado à esquerda. Deixe a densidade corresponder ao conteúdo. A precificação pode ser uma tabela simples. Os recursos podem ser uma lista com frases em vez de cards. Deixe de fora seções que o assunto não precisa. Um site de padaria não precisa de uma faixa de estatísticas.

Interação. Sublinhe links. Os estados de foco alteram a cor ou o sublinhado, não a posição. Dê aos botões um estado de pressionado/foco claro. Use movimento apenas onde ele explica algo (um menu abrindo, uma mudança de estado) e respeite prefers-reduced-motion.

Imagens. Fotos reais da coisa real vencem qualquer ilustração. Sem elas, use placeholders honestos (uma caixa neutra rotulada "foto: fachada da loja, luz da manhã") em vez de blobs 3D de banco de imagens, pessoas isométricas ou arte de IA. Diagramas simples, mapas, fotos de produtos e composições apenas com texto parecem humanos.

Cópia. Diga concretamente o que a coisa faz, nas palavras simples que o proprietário usaria em um balcão. "Pão sourdough fresco todas as manhãs a partir das 7, fechado às segundas" vence "Experimente a excelência artesanal". Deixe uma estatística de fora em vez de inventar uma.

Não troque um clichê por outro

Quando um padrão é banido, a resposta mais comum seguinte se torna o novo padrão: Space Grotesk em vez de Inter, verde-azulado em vez de roxo, "brutalista" com uma borda preta grossa e destaque amarelo em todos os sites. Se dois assuntos diferentes que você projeta acabarem parecidos, você está trabalhando a partir de um template, não de um briefing. Volte ao passo 1 e deixe o assunto forçar mais.

Quando o usuário quer o visual "slop"

Alguns usuários querem o visual brilhante de SaaS, ou uma marca é realmente roxa com gradientes. Siga instruções explícitas e diretrizes da marca. Elas substituem esta habilidade. Você ainda pode aplicar a moderação onde ela é gratuita: um gradiente em vez de cinco, cópia real em vez de palavras da moda, um par de fontes deliberado.