Web Design Deslop

O que Web Design Deslop faz?

"Slop de IA" em design web não é uma escolha ruim única. É a média de um milhão de landing pages: o gradiente roxo para rosa, o herói centralizado com um selo e dois botões, os três cartões de recursos iguais com um ícone quadrado colorido, os cartões de vidro em um fundo quase preto, o texto que diz "Desbloqueie fluxos de trabalho perfeitos". Cada peça é boa por si só. Juntas, elas criam uma página que poderia pertencer a qualquer empresa, o que significa que não pertence a nenhuma.

Este skill faz três trabalhos:

1. Auditar uma página existente, mockup ou código e relatar seus sinais de slop com correções concretas.
2. Guiar uma nova construção para que o slop nunca seja escrito em primeiro lugar.
3. Reescrever cópias que soam geradas.

Leia references/tells.md (sinais visuais, de layout, de movimento e de Tailwind, com a troca para cada um) sempre que auditar ou construir. Leia references/copy.md sempre que um título, subtítulo, descrição de recurso ou CTA estiver sendo escrito ou revisado.

O único teste que importa

O teste de troca. Substitua o logotipo e o nome do produto pelo de um concorrente. A página ainda funciona? Se sim, é slop, por mais polido que seja. Uma página projetada é construída a partir de material que só esta marca possui: seu produto, suas pessoas, seu lugar, seu processo, seus números reais, sua voz. Cada julgamento abaixo é um caso especial deste teste.

Dois testes de apoio:

• O teste de apertar os olhos. Aperte os olhos. Se você vir uma coluna centralizada de retângulos arredondados do mesmo tamanho empilhados em intervalos iguais, o layout é um template. Páginas projetadas têm uma silhueta irregular: uma seção larga, a próxima estreita, uma coisa muito grande, muitas coisas pequenas.
• O teste da fonte. De onde veio cada decisão? "Do material da marca" é bom. "Porque é assim que as landing pages são" é o sinal.

Modo 1: Auditoria

Use quando o usuário compartilhar uma URL, captura de tela, frame do Figma, componente ou repositório e quiser uma revisão, ou disser que parece genérico.

1. Leia tudo primeiro. Para código, leia cada componente de página/seção e o config do Tailwind ou CSS global. Para capturas de tela, olhe a página inteira antes de escrever. Não comente apenas pelo herói.
2. Execute o teste de troca e dê o veredito em uma frase. Seja honesto e específico: "Esta poderia ser a página inicial de qualquer startup de devtools" é mais útil do que uma pontuação.
3. Liste os sinais, do pior primeiro. Para cada um: o sinal, onde está (arquivo e linha, ou nome da seção), por que parece gerado e a correção. Inspire-se em references/tells.md, mas escreva a correção para esta página, não a troca genérica.
4. Nomeie o que manter. Toda página tem algo que funciona. Diga isso, ou o usuário jogará fora junto com o slop.
5. Dê as três mudanças com maior efeito. Geralmente: uma decisão tipográfica, uma decisão de layout, uma decisão de conteúdo. Se o usuário fizer apenas estas, a página já deve passar no teste de apertar os olhos.

Formato de saída para uma auditoria:

## Veredito
Uma ou duas frases. Resultado do teste de troca. No geral: modelado / misturado / projetado.

## Corrija estes primeiro
1. [sinal] / [onde] / [correção específica]
2. ...
3. ...

## Todo o resto, por área
### Tipo  ### Cor  ### Layout  ### Componentes  ### Movimento  ### Cópia  ### Conteúdo/Imagens
(uma lista curta em cada; pule áreas vazias)

## Manter
O que já está bom e por quê.

Quando o usuário pedir para aplicar as correções, edite os arquivos reais. Não reescreva a página inteira do zero, a menos que solicitado; edições direcionadas preservam o que funciona e são mais fáceis de revisar.

Modo 2: Construir sem slop

Use sempre que gerar um site, página, seção ou template. A ordem importa: decisões tomadas cedo (conceito, tipo, grade) previnem slop; decisões tomadas tarde (trocar este gradiente) só o escondem.

Antes de escrever qualquer marcação

1. Encontre o material bruto da marca. O que este negócio realmente tem? Um produto com uma interface real, um lugar físico, um material, um processo artesanal, um fundador com um ponto de vista, um conjunto de dados, uma base de clientes com um nome. Escolha uma coisa e deixe-a guiar a página. O site de uma torrefação de café pode ser construído em torno dos perfis de torra; o de uma concessionária, em torno do salão de vendas; o de um aplicativo de faturamento, em torno de uma fatura real. Se o usuário não te deu nada, faça uma pergunta ou declare a suposição que você está usando no topo da sua resposta.
2. Escolha uma ideia de layout, não uma lista de seções. Decida o movimento estrutural que a página faz: duas colunas editoriais com uma lateral fixa, um ritmo de imagens em sangria, uma página densa de índice/tabela, um único título enorme com texto de apoio pequeno, um scroll horizontal de produtos. Depois, deixe as seções surgirem disso. Nunca comece de "herói → logotipos → recursos → depoimentos → preços → FAQ → CTA → rodapé". Essa lista é o template de slop; se a página precisar de algumas dessas seções, elas devem parecer com esta página, não com a lista.
3. Defina o tipo antes da cor. Escolha uma fonte de exibição com personalidade e uma de corpo confiável; defina uma escala real com saltos grandes (ex.: 14 / 18 / 32 / 72 / 140) em vez da rampa suave do Tailwind de text-4xl para text-6xl. Decida o alinhamento: alinhado à esquerda é o padrão de páginas projetadas; centralizado é o padrão das geradas.
4. Derive uma paleta do material. Uma ou duas cores da marca, um fundo de papel ou tinta, e o destaque usado em apenas alguns lugares. Gradientes não são proibidos, mas um gradiente que não é derivado de nada (roxo→rosa, azul→violeta) é o sinal de IA mais forte na web atualmente.

Ao escrever a marcação

• Varie o ritmo. Nem toda seção é py-24 max-w-7xl mx-auto. Deixe uma seção quebrar o contêiner, uma sentar em uma medida estreita, uma ser uma lista dividida por traços finos em vez de cartões.
• Prefira linhas e espaço a cartões e sombras. Bordas finas (border-b border-neutral-200), espaços em branco e tamanho de tipo carregam hierarquia melhor do que caixas rounded-2xl shadow-lg. Use um cartão quando a coisa é realmente um objeto discreto (um produto, um plano), não como um invólucro padrão.
• Use conteúdo real ou placeholders honestos. Escreva o título real a partir do material da marca. Se um fato é desconhecido, escreva {{TODO: figura real}} em vez de inventar "10.000+ clientes felizes". Logotipos falsos, depoimentos falsos de cinco estrelas e estatísticas redondas são slop de conteúdo e são piores do que uma seção ausente.
• Ícones: poucos ou nenhum. Emojis nunca são ícones. Uma lista de recursos não precisa de um ícone lucide por linha. Se ícones forem usados, devem ser de um conjunto consistente, pequenos e secundários ao texto.
• Movimento com motivo. Sem fade-up escalonado em cada elemento. Um ou dois movimentos deliberados ligados ao conteúdo (uma imagem de produto que revela ao rolar, um hover que mostra um detalhe) leem como projetados. Transições padrão devem ser rápidas e simples.
• Imagens: específicas em vez de abstratas. Sem blobs 3D, sem orbes gradientes, sem stock de "laptop na mesa". Uma captura de tela real, uma foto de produto, um mapa, um documento, uma textura do material. Se nenhum existir, um bloco tipográfico bem definido supera uma imagem de placeholder.
• Verifique também o slop de segunda ordem. A reação ao slop de gradiente tem seu próprio template: serifa gigante, sobreposição de grão, seções numeradas (01), etiquetas em mono maiúsculas em todo lugar, linhas de marquee, blobs que seguem o cursor, "© 2026 — Todos os direitos reservados" em mono. É igualmente reconhecível. Use esses movimentos apenas quando vêm da marca, não porque sinalizam "projetado".

Antes de entregar

Execute a auditoria na sua própria saída rapidamente: teste de troca, teste de apertar os olhos, escaneie references/tells.md. Corrija o que encontrar. Depois, diga ao usuário em uma ou duas linhas por que a página parece com o que parece (de qual material foi construída, qual é a ideia de layout), para que ele possa julgar a decisão em vez dos pixels.

Modo 3: Cópia

Leia references/copy.md. A versão resumida: cópia gerada é abstrata, adjetival e simétrica. Cópia projetada é concreta, específica e desigual. Substitua cada alegação por um fato, cada "perfeito" pelo que realmente acontece, cada trio pela única coisa que importa. Os títulos devem dizer o que a coisa é ou faz, na voz da marca, nas palavras que o cliente usaria. O CTA diz o que acontece depois ("Veja as torras", "Agende um test drive"), não "Comece agora".

Calibragem

• Nem todo padrão é errado em todo contexto. Uma tabela de preços com três níveis é correta para um produto com três níveis; o sinal é o selo "Mais popular" no nível do meio quando nada o suporta. Julgue pelo teste de troca, não por uma lista de verificação.
• O usuário pode querer um layout convencional e confiável (um banco, uma clínica, uma concessionária). Deslop não significa estranho. Significa específico. Uma estrutura convencional construída a partir de material real passa; um layout experimental cheio de cartões genéricos não.
• Quando o usuário é um designer ou desenvolvedor, dê correções como código ou valores exatos. Quando não são, descreva a mudança em linguagem simples e ofereça-se para fazê-la.
• Não bajule e não acumule. Um veredito honesto, uma lista classificada e um caminho a seguir.