O que é AI slop? Significado, origem e como reconhecer num site
O que o termo significa, quem o popularizou e quando, por que sites feitos com IA compartilham os mesmos padrões, o que nosso scanner encontrou em três páginas públicas e como sair deles.
On this page
Coloque uma landing page gerada pelo v0 ao lado de uma do Bolt e de outra do Lovable. O mesmo título em Inter. O mesmo degradê from-blue-600 to-indigo-700 no hero. Os mesmos três cards de preço com o plano do meio brilhando. O mesmo rounded-2xl em tudo e a mesma barra de navegação com backdrop-blur-md. Muitas vezes dá para adivinhar que um agente escreveu a página só de olhar, e o motivo é que os agentes compartilham os mesmos padrões.
Este guia cobre o termo do começo ao fim: o que ele significa, quem o popularizou e quando (com as fontes), as sete áreas de um site onde ele aparece, o que o scanner de URL do Sailop encontrou de fato em três páginas públicas e como tirar um site desses padrões.
O que "AI slop" quer dizer
Dois dicionários definiram o termo. O Macquarie Dictionary, que escolheu "AI slop" como palavra do ano de 2025, traz: "low-quality content created by generative AI, often containing errors, and not requested by the user" (conteúdo de baixa qualidade criado por IA generativa, muitas vezes com erros, e que o usuário não pediu). O Merriam-Webster, que escolheu "slop" para o mesmo ano, traz: "digital content of low quality that is produced usually in quantity by means of artificial intelligence" (conteúdo digital de baixa qualidade produzido, em geral em grande quantidade, por meio de inteligência artificial).
Em web design a palavra tem um sentido mais estreito: a saída convergente que os modelos de linguagem produzem quando geram código frontend sem restrições fortes de design. Três características a definem.
É genérico. O slop se parece com outros cem sites. O hero diz "Welcome to Our Platform". A seção de funcionalidades são três cards. Os preços têm um plano do meio que brilha. Nenhuma dessas escolhas é errada sozinha. Elas viram erro porque todas as outras landing pages geradas por IA fizeram a mesma escolha.
É detectável. O slop tem impressão digital: combinações específicas de classes do Tailwind, pilhas de fontes específicas, curvas de easing específicas. Dá para escanear uma página e listar os padrões que ela usa, porque esses padrões são mecânicos, não estéticos.
Se acumula. Um padrão isolado passa despercebido. Uma página com uma dúzia deles parece gerada, mesmo que cada escolha tivesse defesa. A assinatura é a combinação, então tirar só a Inter não muda como a página é lida. (Para o passo a passo dimensão por dimensão, veja as 7 dimensões do design genérico, em inglês.)
De onde vem o termo
"Slop" é uma palavra inglesa antiga. O Merriam-Webster a remonta ao século XVIII, quando significava lama mole, antes de passar a designar qualquer coisa de pouco valor.
O sentido ligado à IA decolou em 2024. Em 8 de maio de 2024, o desenvolvedor Simon Willison publicou "Slop is the new name for unwanted AI-generated content", dando crédito a uma postagem de @deepfates, e propôs o teste que pegou: se um conteúdo é "mindlessly generated and thrust upon someone who didn't ask for it" (gerado sem pensar e empurrado para alguém que não pediu), "slop" é a palavra certa.
No fim de 2025 já era vocabulário de dicionário. O Macquarie Dictionary anunciou "AI slop" como palavra do ano de 2025 em novembro de 2025, e o Merriam-Webster anunciou "slop" como a sua em 15 de dezembro de 2025.
O texto de Willison falava de texto e imagens. A mesma palavra hoje cobre código e interfaces: quando um agente de código entrega o mesmo hero, a mesma paleta e o mesmo grid de cards para cada usuário que não pediu nada disso, designers e desenvolvedores chamam de slop pelo mesmo motivo.
Por que sites feitos com IA convergem para os mesmos padrões
Nenhuma das empresas por trás do v0, Bolt, Lovable, Cursor ou Claude Code publica seus dados de treino, então esta parte é uma explicação, não uma medição.
O código frontend público pende muito para poucas fontes bem documentadas: os exemplos do shadcn/ui e do Tailwind UI, os templates iniciais do Next.js, as demos de deploy, as galerias "best of". Não são fontes ruins. São estreitas: uma época do design de SaaS, um framework de utilitários, uma estética de cantos arredondados, fundos desfocados e degradês do azul ao índigo.
A previsão do próximo token premia a continuação mais provável, e a continuação mais provável é o padrão dominante. Peça um hero e os tokens mais prováveis são flex flex-col items-center justify-center text-center, depois um h1 em text-5xl font-bold tracking-tight, depois um botão bg-gradient-to-r from-blue-600 to-indigo-700. Nenhum modelo decidiu que isso era bom design. É para onde as probabilidades apontam. É por isso que todo site gerado por IA parece igual (em inglês).
A saída é uma restrição que o modelo não consiga tirar a média: uma paleta fora da faixa de matizes padrão, fontes que você escolheu, um layout que não seja o template. É o que o kit de correção do scan do Sailop entrega, gerado a partir do seu próprio domínio.
As sete áreas onde o AI slop aparece
Sete áreas de uma página carregam quase toda a impressão digital. Para cada uma, a lista diz o que procurar e qual das oito assinaturas do scan de URL do Sailop a verifica automaticamente.
Dimensão 1: cor
O sinal mais forte. Procure:
- Os azuis e violetas padrão do Tailwind:
blue-500(#3b82f6no Tailwind v3),indigo-600(#4f46e5),violet-500(#8b5cf6). Mais ou menos a faixa de matizes de 200 a 290 graus. - As assinaturas de degradê:
bg-gradient-to-r from-blue-600 to-indigo-700e suas variantes roxas. - Branco puro (
#fff) ou preto puro (#000) no texto, onde uma paleta pensada usa quase-pretos tingidos (#1a1612,#141820). border-colorebackground-coloridênticos nos cards.
Verificado pelo scan: Azul padrão e Degradê azul-roxo. Mais em como escolher uma cor de destaque que não seja o azul do Tailwind.
Dimensão 2: tipografia
Inter, Poppins, Roboto, Montserrat, Geist e DM Sans são as fontes em que as páginas geradas caem. Sinais específicos:
font-family: Inter, sans-serife mais nada- Falta
text-wrap: balancenos títulos outext-wrap: prettyno texto corrido - O mesmo espaçamento entre letras em todos os níveis da hierarquia
- Nenhum ajuste óptico (faltam
font-optical-sizingoufont-feature-settings)
Verificado pelo scan: Fonte padrão, que procura Inter ou Geist como fonte da página. Mais em o problema da Inter (em inglês).
Dimensão 3: layout
Padrões de estrutura que entregam um template:
- Três cards idênticos em
grid-cols-3na seção de funcionalidades (por que isso atrapalha, em inglês) - Um selo centralizado acima do
h1 - O mesmo
py-20oupy-24em todas as seções max-w-7xl mx-autoem todos os contêineres
Verificado pelo scan: Fileira de três cards.
Dimensão 4: movimento
A animação de IA mais previsível é opacity: 0 mais translateY(20px) mais ease-in-out, disparada quando cada bloco entra na tela. Outros sinais:
- Uma revelação por intersection observer com o mesmo tempo em todas as seções
- Nenhum estado
:activenos botões, só:hover - Atrasos lineares (cada filho atrasado exatamente 0,1 s)
- Nenhuma proteção
prefers-reduced-motion
Verificado pelo scan: Fade-up no scroll. Mais em motion slop: o fade-in-up.
Dimensão 5: componentes
A impressão digital dos componentes:
- Imports do shadcn/ui (o utilitário
cn(),@/components/ui/*) - Navegação com
backdrop-blur-md rounded-2xlem tudo, com sombra pesadaanimate-pulsenos cards de preço- Selos em pílula com
bg-blue-100 text-blue-800 - Mockups de terminal com três bolinhas coloridas
Verificado pelo scan: Vidro fosco (desfoque de fundo em três superfícies ou mais) e Cards com sombra suave (cards de raio grande com sombra pesada, quatro vezes ou mais). Mais em glassmorphism e backdrop-blur.
Dimensão 6: estrutura
A ordem das seções já é uma assinatura: nav → hero → features → testimonials → pricing → faq → cta → footer, sem variação. O scan não verifica isso, porque a ordem sozinha não prova nada. Confira na mão: se você pudesse trocar suas seções pelas de qualquer template sem ninguém perceber, a estrutura é a padrão.
Dimensão 7: texto
Frases que denunciam autoria de máquina: "Welcome to our platform", "Get started today", "Effortlessly", "Seamlessly", "AI-powered" para um produto que não é sobre IA, "Built for the modern web", "Streamline your workflow", "Unlock the power of". Existe uma lista de 40 frases assim com substitutos (em inglês), e um artigo sobre a fórmula de título "X sem o Y".
Verificado pelo scan: Texto de botão genérico, os rótulos de call to action que vêm com todo template.
O que o scanner encontrou em três páginas públicas
O Sailop guarda as respostas do scanner para três páginas públicas, coletadas em 13 de outubro de 2026 com o mesmo endpoint do scan gratuito. São os únicos números deste guia que vêm de uma medição, e qualquer pessoa pode rodar o mesmo scan nos mesmos endereços (as páginas podem ter mudado desde então).
| Página escaneada | Assinaturas encontradas | Assinatura: primeiro padrão detectado (ocorrências) |
|---|---|---|
| tailwindcss.com | 7 de 8 | Azul padrão: text-sky-800 (363). Degradê azul-roxo: from-purple-600 (26). Fonte padrão: font-family:inter (4). Fileira de três cards: lg:grid-cols-3 (18). Vidro fosco: backdrop-blur-md (164). Texto de botão genérico: Get started (2). Cards com sombra suave: rounded-2xl (35). |
| flowbite.com | 4 de 8 | Azul padrão: text-blue-600 (799). Degradê azul-roxo: #2563eb (14). Fonte padrão: font-family:Inter (1). Fileira de três cards: grid-cols-3 (1). |
| stripe.com/fr | 1 de 8 | Vidro fosco: backdrop-filter:blur (6). |
Fonte: scanner de URL do Sailop, respostas salvas em 13 de outubro de 2026. Para cada assinatura encontrada, o primeiro padrão que bateu e o número de ocorrências que o scanner contou na página e nas folhas de estilo.
Três leituras.
Uma assinatura é um padrão, não a prova de que uma IA escreveu a página. O tailwindcss.com mostra sete das oito assinaturas, e ninguém acha que um modelo desenhou o site do Tailwind. Ele exibe os padrões do Tailwind porque é a vitrine deles. É exatamente por isso que os mesmos padrões, num site que nunca os escolheu, parecem gerados.
Quase toda a evidência está nas folhas de estilo. No flowbite.com, o scanner contou 4 ocorrências de classes azuis no markup e 3.970 nas folhas de estilo. No tailwindcss.com, a divisão foi de 60 no markup e 544 nas folhas de estilo. Uma correção que só mexe no HTML deixa de fora a maior parte do problema.
Um site cuidadoso também pode disparar uma. O stripe.com/fr mostra uma única assinatura: vidro fosco, encontrado 6 vezes, todas nas folhas de estilo. Um padrão usado de propósito é uma escolha. Sete de uma vez são um template.
É assim que esses padrões ficam quando se encontram num único componente (uma ilustração escrita para este guia, não uma saída capturada):
<section className="flex flex-col items-center justify-center text-center py-24">
<span className="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-800">
Now in public beta
</span>
<h1 className="mt-6 text-5xl font-bold tracking-tight">
Write better commit messages, effortlessly
</h1>
<button className="mt-8 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-700 px-6 py-3 text-white">
Get Started
</button>
</section>Conte os sinais: bloco centralizado, selo azul em pílula, text-5xl font-bold tracking-tight, "effortlessly" no título, rounded-2xl, o degradê do azul ao índigo e um "Get Started" sem estado :active. Cinco das sete áreas num único componente.
Como verificar o seu site
Três opções, da que dá menos trabalho para a que dá mais.
1. O teste do olho. Abra a sua página inicial ao lado de algumas saídas de construtores com IA. Se o seu hero, a sua seção de funcionalidades e os seus preços caberiam tranquilamente no meio delas, você tem os padrões. O método de detecção em 30 segundos (em inglês) lista 21 sinais para procurar.
2. A lista na mão. Percorra as sete áreas acima e conte o que encontrar. Ler o CSS de um site no DevTools (em inglês) mostra de onde vem cada valor.
3. O scan de URL gratuito. Cole um endereço no scan. Ele baixa a página e as folhas de estilo, lista cada uma das oito assinaturas que encontra com o primeiro padrão correspondente e uma contagem, e devolve um kit de correção. Ele lê o que a página serve, não o seu repositório: uma versão de linha de comando que lê os arquivos-fonte ainda não foi publicada.
Como corrigir o AI slop
Três camadas de intervenção, da mais fraca para a mais forte.
Camada 1: apagar as impressões digitais. Largue a Inter. Escolha um destaque fora da faixa de 200 a 290 graus. Troque o grid de três cards por uma estrutura que combine com o conteúdo, uma lista de definições ou colunas desiguais. Adicione proteções prefers-reduced-motion. Isso é reativo: você corrige cada padrão depois que ele aparece.
Camada 2: restringir o agente. Antes do prompt, dê ao seu agente de código um briefing por escrito: os padrões que ele não deve usar e os tokens que deve usar no lugar. O kit de correção do scan inclui um briefing assim, pronto para colar no Claude Code ou no Cursor, e o template de prompt anti-slop (em inglês) cobre o lado do prompt a fundo.
Camada 3: ser dono do design system. Defina a paleta, o par de fontes, a escala de espaçamento e as regras de movimento antes de escrever código, e exija que todo componente use isso. O kit de correção gera um sistema assim a partir do seu hostname, como ponto de partida: tokens @theme do Tailwind v4, variáveis CSS e tags de fonte.
O que o anti-slop não é
Não é "zero IA". Usamos ferramentas de IA para construir o Sailop e para preparar os artigos deste blog. A ideia é usá-las com restrições, não recusá-las.
Não é "feio de propósito". O brutalismo é uma direção válida, não a única. Sites elegantes, editoriais, técnicos ou de varejo podem todos evitar os padrões. O critério é que as escolhas tenham sido feitas, não que sejam estranhas.
Não é contra o shadcn nem contra o Tailwind. O shadcn é um bom ponto de partida e o Tailwind um bom framework de utilitários. O slop acontece quando os padrões vão para produção sem mudança. Personalize os tokens do tema, varie os componentes de base, e as assinaturas que o scanner procura somem.
O que acontece se nada mudar
Duas trajetórias plausíveis, nenhuma medida ainda.
Convergência. Todo site parece com todos os outros, e ser diferente vira vantagem para as poucas equipes que investem nisso. A saída genérica da IA vira o que foram os temas padrão do WordPress: reconhecível num relance.
Rejeição. Os visitantes aprendem a reconhecer sites gerados do mesmo jeito que aprenderam a ignorar banners, e uma página com cara de padrão perde a confiança antes de alguém ler.
Nos dois casos, um site que fez as próprias escolhas fica mais na memória do que um que não fez.
Fontes
- Simon Willison, "Slop is the new name for unwanted AI-generated content", 8 de maio de 2024.
- Macquarie Dictionary, "Word of the Year 2025: AI slop", novembro de 2025.
- Associated Press, "Merriam-Webster's 2025 word of the year is 'slop.' Here's why", 15 de dezembro de 2025, republicado pela WFSB.
- Scanner de URL do Sailop, respostas salvas para tailwindcss.com, flowbite.com e stripe.com/fr, 13 de outubro de 2026.
Nota de revisão
Reescrito em 18 de outubro de 2026 com base na versão em inglês, refeita em 17 de outubro. A versão anterior atribuía o termo a Andy Baio no meio de 2024, quando a fonte mais antiga que citamos é o texto de Simon Willison de 8 de maio de 2024. Ela também trazia números sem nenhuma fonte, entre eles: algo entre 50% e 60% das novas páginas com parte substancial de conteúdo gerado por IA, uma distribuição das cores primárias das landings de SaaS em 2020 e em 2026, um teste com 1.000 buscas no Perplexity, e quedas de tráfego orgânico de 70% a 95%. Tudo isso foi retirado, assim como as instruções da ferramenta de linha de comando e do servidor MCP, que não foram publicados. Os três scans salvos em 13 de outubro de 2026 agora são os únicos números medidos do artigo.
Ship code that looks intentional
Scan any live page for AI-default patterns and get a fix kit: design tokens, class swaps and an agent brief. Free, no account.