# Anti-slop: como não parecer "site gerado por IA" Este arquivo ensina a redesenhar a página de um cliente real (nutricionista, psicólogo, advogado, dentista, fisioterapeuta) sem cair na estética genérica de IA. O objetivo não é variedade *visual* (trocar cores), é variedade **estrutural**: dois sites feitos por você devem parecer sites diferentes, não o mesmo template com cores trocadas. Regra de ouro: **escolha a macroestrutura ANTES de estilizar** e passe por uma autocrítica antes de entregar. Se você começa pelo CSS, cai no atrator padrão — hero centralizado → 3 cards com ícone → CTA → rodapé de 4 colunas. Isso é slop. --- ## 1. As 4 disciplinas transversais Valem para todo redesign, sempre. Não são opcionais. ### 1.1 Autocrítica pré-entrega (6 métricas, corte < 3) Antes de entregar qualquer página, dê nota de 1 a 5 em seis eixos. **Qualquer nota < 3 obriga uma revisão** antes de considerar pronto. Duas passadas de revisão é normal; três significa que o briefing está errado, não o design. | Sigla | Eixo | O que você avalia | |---|---|---| | **P** | Filosofia (Philosophy) | Há um *porquê*, uma posição que a página assume? Ou é só layout? | | **H** | Hierarquia (Hierarchy) | Em 2 segundos dá pra saber o que é primário, secundário, terciário? | | **E** | Execução (Execution) | Detalhes no ponto — espessura de linha, foco visível, contraste, quebra de texto? | | **S** | Especificidade (Specificity) | Parece *este* cliente, ou uma "página que poderia ser de qualquer um"? | | **R** | Contenção (Restraint) | Você removeu tudo que não se justifica? Decoração, redundância, padding vazio? | | **V** | Variedade (Variety) | Compartilha impressão estrutural com outra página que você já fez? Distância estrutural, não de cor. | Carimbe as seis notas no topo do CSS: `/* pre-emit critique: P5 H4 E5 S4 R5 V5 */` Exemplo de aplicação a um consultório: se a página do dentista ficou "genérica sorriso + 3 serviços + agende", provavelmente S=2 e V=2 — refaça a estrutura antes de entregar. ### 1.2 Copy honesta — nenhuma métrica inventada Se o cliente não te deu um número, **não invente**. Frases como *"+47% de conversão"*, *"mais de 5.000 pacientes atendidos"*, *"98% de satisfação"*, *"10x mais rápido"* viram slop no instante em que são fabricadas. O mesmo vale para depoimentos, logos e contagens de casos. Três saídas, nesta ordem de preferência: 1. Trocar o número por `—` e um bloco cinza rotulado ("dado a confirmar"). 2. Perguntar o número real ao cliente e pausar. 3. Reconstruir a seção sem o espaço de "prova" — se um layout puxado a estatística não tem estatística real, ele é a macroestrutura errada. O buraco em formato de número é honesto; o número fabricado é slop. ### 1.3 Tokens travados — sem improviso no meio do caminho Escolhida a paleta/tema no início, **toda** cor e **toda** `font-family` no arquivo deve referenciar um token nomeado (`var(--color-accent)`, `font-family: var(--font-display)`). Nada de `#5b6cff`, `oklch(...)`, `rgb(...)` ou `font-family: "Alguma Fonte"` soltos no meio do CSS. Se precisar de um valor que não existe como token, primeiro promova ele ao bloco de tokens com um nome, depois referencie. Cor solta é como a coesão se perde: na terceira edição você tem oito cores em vez de três. ### 1.4 Nada de "chrome" redesenhado (a quarta disciplina) Não construa à mão barra de navegador falsa (pílula de URL + três bolinhas), moldura de celular falsa, janela de código falsa nem chrome de IDE falso. O ambiente do usuário já tem o chrome real. Use screenshot real dentro de um `

` (com no máximo uma borda fina), ou dispense o chrome e deixe o conteúdo se sustentar. Chrome redesenhado é um dos sinais mais fortes de "IA inventou uma interface que já existe". Complemento não-negociável: **responsividade** verificada em 320 / 375 / 414 / 768 px — sem rolagem horizontal, sem texto clicável em duas linhas, `overflow-x: clip` na raiz. --- ## 2. Escolha a macroestrutura ANTES de estilizar Uma macroestrutura é uma impressão digital completa da página — posição dos títulos, composição do corpo, linguagem dos divisores, voz dos botões, tratamento de imagem, padrão de revelação — empacotada como uma única escolha nomeada. Escolher uma macroestrutura nomeada é mais rápido, menos sujeito a erro e categoricamente mais variado do que montar seis eixos do zero. **Regra de diversificação:** se já existe carimbo `/* macrostructure: */` no CSS do projeto, sua escolha tem que ser uma macroestrutura diferente. Quando o briefing é vago, escolha entre as dez primeiras. **Nunca** caia em Specimen por padrão (rótulos numerados na margem + serifa gigante) só para "parecer editorial" — é o slop mais repetido. ### Catálogo (nome + 1 linha, adaptado a negócio local/serviço) - **01 · Bento Grid** — Blocos modulares de tamanhos variados; cada bloco é um serviço, um depoimento, uma foto do consultório. Ritmo vem da variação de tamanho, não de cards iguais. - **02 · Long Document** — Lê como uma carta/artigo. Prosa contínua com títulos inline. Ótimo para psicólogo ou terapeuta que quer transmitir abordagem e confiança. - **03 · Marquee Hero** — O hero É a página acima da dobra: uma afirmação forte preenche a tela. Abaixo, vira lista ou grade. Bom para clínica com posicionamento claro. - **04 · Stat-Led** — O hero é um número gigante (anos de atuação, nº de especialidades). Use só com dado real do cliente. - **05 · Workbench** — Fotos/telas em molduras são o conteúdo principal. "Veja como funciona" — bom para antes/depois de tratamento, tour do espaço. - **06 · Conversational FAQ** — Perguntas em negrito, respostas curtas. Excelente para serviço: "Atende convênio?", "Como agendo?", "Primeira consulta como é?". - **07 · Manifesto** — Tipografia grande e polêmica. Declara no que acreditar antes de vender. Para profissional com filosofia forte (nutrição comportamental, advocacia de causa). - **08 · Photographic** — Uma imagem enorme domina cada dobra; texto é anotação pequena. Consultório fotogênico, estúdio de fisioterapia, spa. - **09 · Quote-Led** — O hero é um depoimento com autoria (real!). Lidera com prova social. - **10 · Specimen** — Rótulos numerados na margem, serifa enorme, colunas assimétricas. Energia editorial. Só quando o briefing pedir isso explicitamente. - **11 · Catalogue** — Grade uniforme de variações do mesmo tipo (planos, procedimentos). - **12 · Letter** — Primeira pessoa, íntimo, abre com saudação. Nota pessoal do profissional. - **13 · Index-First** — A página É uma lista de links. Navegação como design. - **14 · Narrative Workflow** — Etapas numeradas contam a jornada do paciente (1 → 2 → 3 → 4). - **15 · Split Studio** — Díptico: texto de um lado, prova do outro, alternando direção. - **16 · Feature Stack** — Painel fixo à esquerda + conteúdo sincronizado à rolagem. - **17 · Type Specimen** — A própria tipografia é o design (raro em serviço local). - **18 · Portfolio Grid** — Cards filtráveis de trabalhos/casos (estúdio, arquiteto). - **19 · Map / Diagram** — Um grande diagrama espacial organiza a página. - **20 · Ecosystem Index** — Várias superfícies de descoberta (destaques / recentes / por categoria). - **21 · Component Playground** — Blocos interativos de código/preview (para produto, não serviço). **Escolha nav e rodapé neste passo.** Fuja do N1 (marca + 4-5 links + botão à direita em largura total) e do Ft3 (4 colunas de links + ícones sociais + copyright minúsculo) — são as digitais de IA mais reconhecidas. Diga a escolha em voz alta antes de codar: *"Macroestrutura: Conversational FAQ. Nav: pílula flutuante. Rodapé: statement."* --- ## 3. O slop test — os gates que reprovam a página Rode ao final. Toda resposta tem que ser **não**. Os mais relevantes para landing de serviço: - **Fonte de display** é Inter/Roboto/Open Sans/Poppins/Lato ou fonte de sistema? (reprova) - Existe **gradiente roxo→azul/rosa** em algum lugar? Título com **gradiente em `background-clip: text`**? (reprova sempre) - **Grade de 3 colunas iguais** com card "ícone em cima + título + 3 linhas"? Card dentro de card? - **Borda lateral colorida grossa** no card? **Hero `100vh` com tudo centralizado**? - Uso de **`#000` puro ou `#fff` puro** como base? - **Mesma impressão estrutural** da última página (hero → 3 features → CTA → rodapé)? - **`transition: all`**? **`hover:scale-105`** uniforme em tudo? **Easing com overshoot/bounce** em botão/modal? - Animar **width/height/top/left/margin/padding**? **Anel de foco que aparece com fade** (tem que ser instantâneo)? - **Toast comemorativo** ("Feito!") para ação que o usuário já vê que aconteceu? - **Nome placeholder** "Fulano de Tal" / clichê de startup ("Nexus", "Seamless")? - **Métrica inventada** (gate 56) · **chrome redesenhado** (gate 57) · **token improvisado** (gate 58). - **Texto clicável em duas linhas** em qualquer largura (gate 59) · **emoji como ícone** ✨🚀⚡ (gate 60). - **Contraste**: corpo < 4,5:1 contra o fundo? Botão com `color` ≈ `background` (texto preto no botão preto)? Seção escura que esqueceu de virar a cor do texto (tinta sobre tinta)? - **Rolagem horizontal** entre 320 e 1920 px? - **Eyebrow em toda seção** (`01 / SERVIÇOS`), ou pior, ao lado do título em duas colunas (gate 66 — reprova direto). Se algum falhar: conserte. Não entregue slop. --- ## 4. Anti-patterns — o que NUNCA fazer **Críticos (entrega como slop):** - **Hero de gradiente roxo** — a estética de IA mais reconhecida. Uma cor âncora só, sem gradiente no fundo. - **Inter em tudo** — página de uma fonte é página de template. Pareie display distinta + corpo refinada. - **Grade de 3 features com ícone-em-cima** — todo LLM emite isso. Quebre a grade, varie larguras/alturas. - **Card dentro de card** — escolha uma camada de contêiner só. - **Título com gradiente** — tinta sólida; use peso/itálico/fonte de display para dar vida. - **Card com faixa lateral grossa** — borda fina em toda volta, ou nenhuma. - **Hero de tela cheia centralizado** — deixe o hero ter a altura do conteúdo; enviese à esquerda/direita. - **Preto puro / branco puro** — tinja os neutros na direção da cor âncora. - **Nav de IA** e **rodapé de IA** — as formas são "cegas ao gênero": caem igual em fotógrafo, padaria e SaaS. - **Fundo aurora-blob / orbes flutuantes** — ambiência 3D genérica é o novo banco de imagens. Corte. - **Vídeo com som no autoplay** — sempre `autoplay muted loop playsinline`. - **LCP com `loading="lazy"`** — a imagem do hero precisa de `fetchpriority="high"`, nunca lazy. **Maiores (parece feito por IA):** - Easing com bounce/elástico em UI · tudo centralizado · **eyebrow em toda seção** · card de ícone em tile · glassmorphism sem função · afordância só no hover (toque não recebe nada) · números sem `tabular-nums` · fade-up no scroll em tudo · misturar conjuntos de ícones · **visual de ilustração de IA** (bonecos mesh, doodle corporativo) · **métricas inventadas** · **emoji como ícone de feature** · **chrome redesenhado** · **token improvisado** · atalho de Lottie onde CSS resolveria · Three.js para objeto parado. **Menores (gosto):** aspas retas em vez de curvas (`"..."` → `"..."`), `--` em vez de `—`, `...` em vez de `…`, nomes placeholder, `z-index: 9999`, todas as seções com o mesmo padding, `width: 100vw`. --- ## 5. Pipeline do redesign — reconstruir sem perder o que funciona O cliente quer uma página diferente do mesmo conteúdo, porque a atual parece template. Você redesenha a camada visual e de interação **respeitando os limites da implementação existente** — não é licença para demolir código. **Regra não-destrutiva:** nunca apague arquivos de rota, diretórios de componente ou o site antigo sem o cliente pedir explicitamente. Prefira edição no lugar ou componentes/tokens novos ligados à rota existente. Trate PDFs, briefings e textos de apoio como *material de referência* — não copie palavra por palavra na página a menos que peçam verbatim. Antes de editar, diga quais arquivos vai modificar/criar/apagar; deleção pede confirmação. **O que PRESERVAR:** - A intenção da copy, afirmações factuais, nome do profissional/clínica, mensagem principal. - A arquitetura de informação (quais seções existem, em que ordem aproximada). - A marca (cores e fontes que o cliente já nomeou). - A ação principal (agendar, ligar, WhatsApp). - Os limites de rota/componente existentes. **O que SUBSTITUIR:** - A impressão estrutural — escolha uma combinação **diferente** da que o site tinha. - A voz dos componentes — outro estilo de botão, outra linguagem de divisor, outro tratamento de imagem. - O padrão de revelação — se o original dava fade em tudo no scroll, o novo talvez não tenha revelação nenhuma. - O ritmo visual — seções com paddings diferentes, alinhamentos deliberadamente quebrados. **O que NÃO substituir sem confirmar:** árvores de rota, lógica que funciona (formulários, dados, integração), copy existente trocada por texto colado de PDF. **Passos:** 1. Leia o que existe. Liste as seções e o que cada uma faz. Anote marca, fontes, cores reais. 2. Rode a autocrítica das 6 métricas sobre o site atual — ela nomeia por que parece template (geralmente S e V baixos). 3. Escolha uma macroestrutura diferente da atual (item 2) e diga em voz alta antes de codar. 4. Trave os tokens, aplique a nova estrutura, mantendo copy/IA/marca/ação. 5. Rode o slop test (item 3). Conserte o que falhar. 6. Entregue com uma nota curta: a impressão estrutural escolhida (eixo a eixo), por que ela serve melhor que a original, e **uma coisa que você removeu e por quê**.