AI Slop: What It Means, Where It Came From and How to Spot It

Paste a v0-generated landing page next to a Bolt one and a Lovable one. Same Inter headline. Same from-blue-600 to-indigo-700 hero gradient. Same three pricing cards with a glowing middle tier. Same rounded-2xl everything and the same backdrop-blur-md nav. You can often guess that an agent wrote a page just by looking at it, and the reason is that the agents share their defaults.

This guide covers the term from end to end: what it means, who popularised it and when (with the sources), the seven areas of a site where it shows, what Sailop's URL scanner actually found on three public pages, and how to get a site off those defaults.

What "AI slop" actually means

Two dictionaries have defined it. Macquarie Dictionary, which named "AI slop" its word of the year for 2025, gives: "low-quality content created by generative AI, often containing errors, and not requested by the user." Merriam-Webster, which picked "slop" for the same year, gives: "digital content of low quality that is produced usually in quantity by means of artificial intelligence."

In web design the word has a narrower meaning: the convergent output that language models produce when they generate frontend code without strong design constraints. Three characteristics define it.

It is generic. Slop looks like a hundred other sites. The hero says "Welcome to Our Platform." The features section is three cards. The pricing has a glowing middle tier. None of these choices is wrong on its own. They are wrong because every other AI-generated landing page made the same choice.

It is detectable. Slop has a fingerprint: specific Tailwind utility combinations, specific font stacks, specific easing curves. You can scan a page and list the defaults it uses, because the patterns are mechanical, not aesthetic.

It compounds. A single default is invisible. A page with a dozen of them reads as generated, even when each choice was defensible. The signature is the combination, so removing Inter alone does not change how a page reads. (For a dimension-by-dimension walkthrough, see the 7 dimensions of generic design.)

Where the term comes from

"Slop" is an old word. Merriam-Webster traces it to the 1700s, when it meant soft mud, before it widened to mean anything of little value.

The AI sense took off in 2024. On 8 May 2024 the developer Simon Willison published "Slop is the new name for unwanted AI-generated content", crediting a post by @deepfates, and proposed the test that stuck: if content is "mindlessly generated and thrust upon someone who didn't ask for it, slop is the perfect term for it."

By the end of 2025 it was dictionary vocabulary. Macquarie Dictionary announced "AI slop" as its 2025 word of the year in November 2025, and Merriam-Webster announced "slop" as its own on 15 December 2025.

Willison's post was about text and images. The same word now covers code and interfaces: when a coding agent ships the same hero, the same palette and the same card grid to every user who did not ask for them, designers and developers call it slop for the same reason.

Why AI-built sites converge on the same defaults

None of the companies behind v0, Bolt, Lovable, Cursor or Claude Code publishes its training data, so this part is an explanation, not a measurement.

Public frontend code leans heavily toward a few well-documented sources: shadcn/ui and Tailwind UI examples, Next.js starter templates, deploy demos, "best of" galleries. They are not bad sources. They are narrow: one era of SaaS design, one utility framework, one aesthetic of rounded corners, blurred backgrounds and blue-to-indigo gradients.

Next-token prediction rewards the most probable continuation, and the most probable continuation is the dominant pattern. Ask for a hero and the likeliest tokens are flex flex-col items-center justify-center text-center, then an h1 in text-5xl font-bold tracking-tight, then a bg-gradient-to-r from-blue-600 to-indigo-700 button. No model decided that this was good design. It is where the probabilities point. This is why every AI-generated website looks the same.

The way out is a constraint the model cannot average away: a palette outside the default hue band, typefaces you chose, a layout that is not the template. That is what the fix kit in Sailop's scan hands you, seeded on your own domain.

The seven areas where AI slop shows

Seven areas of a page carry most of the fingerprint. For each one, the list says what to look for, and which of the eight signatures in Sailop's URL scan checks it automatically.

Dimension 1: Color

The strongest signal. Look for:

• Tailwind's default blues and violets: blue-500 (#3b82f6 in Tailwind v3), indigo-600 (#4f46e5), violet-500 (#8b5cf6). Roughly the 200 to 290 degree hue band.
• Gradient signatures: bg-gradient-to-r from-blue-600 to-indigo-700 and its purple variants.
• Pure white (#fff) or pure black (#000) for text, where a designed palette uses tinted off-blacks (#1a1612, #141820).
• Identical border-color and background-color in cards.

Checked by the scan: Default blue and Blue to purple gradient. More in why Tailwind makes every site look the same.

Dimension 2: Typography

Inter, Poppins, Roboto, Montserrat, Geist and DM Sans are the faces generated pages fall back on. Specific tells:

• font-family: Inter, sans-serif and nothing else
• Missing text-wrap: balance on headings or text-wrap: pretty on body text
• Uniform letter-spacing across every level of the hierarchy
• No optical sizing (font-optical-sizing or font-feature-settings absent)

Checked by the scan: Default typeface, which looks for Inter or Geist set as the page font. More in the Inter problem.

Dimension 3: Layout

Structural patterns that betray template generation:

• Three identical grid-cols-3 cards in a features section (why that hurts)
• A centered eyebrow badge above the h1
• The same py-20 or py-24 on every section
• max-w-7xl mx-auto on every container

Checked by the scan: Three-card row.

Dimension 4: Motion

The most predictable AI animation is opacity: 0 plus translateY(20px) plus ease-in-out, fired as each block enters the viewport. Other tells:

• An intersection-observer reveal with identical timing in every section
• No :active state on buttons, only :hover
• Linear stagger intervals (every child delayed by exactly 0.1s)
• No prefers-reduced-motion guard

Checked by the scan: Fade-up on scroll.

Dimension 5: Components

The component fingerprint:

• shadcn/ui imports (cn() utility, @/components/ui/*)
• backdrop-blur-md navigation
• rounded-2xl everywhere, with a heavy shadow
• animate-pulse on pricing cards
• Pill badges in bg-blue-100 text-blue-800
• Terminal mockups with three coloured dots

Checked by the scan: Frosted glass (background blur on three surfaces or more) and Soft shadow cards (large-radius cards with a heavy shadow, four times or more).

Dimension 6: Structure

The section order is a signature in itself: nav → hero → features → testimonials → pricing → faq → cta → footer, with no variation. Not checked by the scan, because order alone proves nothing. Check it by hand: if you could swap your sections with any template's without anyone noticing, the structure is the default.

Dimension 7: Copy

Phrases that mark machine authorship: "Welcome to our platform", "Get started today", "Effortlessly", "Seamlessly", "AI-powered" for a product that is not about AI, "Built for the modern web", "Streamline your workflow", "Unlock the power of". There is a list of 40 such phrases with replacements.

Checked by the scan: Stock button copy, the call-to-action labels that ship with every template.

What the scanner found on three public pages

Sailop keeps the scanner's saved answers for three public pages, taken on 13 October 2026 with the same endpoint as the free scan. They are the only figures in this guide that come from a measurement, and anyone can run the same scan on the same URLs (the pages may have changed since).

Three things to read from them.

A signature is a default, not proof that an AI wrote the page. tailwindcss.com shows seven of the eight signatures, and nobody thinks a model designed Tailwind's own site. It ships Tailwind's defaults because it is their showroom. That is exactly why the same defaults, in a site that never chose them, read as generated.

Most of the evidence lives in the stylesheets. On flowbite.com the scanner counted 4 occurrences of blue utility classes in the markup and 3,970 in the stylesheets. On tailwindcss.com the split was 60 in the markup and 544 in the stylesheets. A fix that only edits the HTML misses most of the problem.

A careful site can still trip one. stripe.com/fr shows a single signature: frosted glass, found 6 times, all in the stylesheets. One default used on purpose is a choice. Seven at once is a template.

What those defaults look like when they meet in one component (an illustration written for this guide, not a captured output):

<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>

Count the tells: centered stack, blue pill eyebrow, text-5xl font-bold tracking-tight, "effortlessly" in the headline, rounded-2xl, the blue-to-indigo gradient, and a "Get Started" label with no :active state. Five of the seven areas in one component.

How to check your own site

Three options, in order of effort.

1. Visual sniff test. Open your homepage next to a few outputs from AI builders. If your hero, features section and pricing would fit in comfortably among them, you have the defaults. The 30-second detection method lists 21 tells to look for.

2. Manual checklist. Run through the seven areas above and count what you find. Reading a site's CSS in DevTools shows where each value comes from.

3. The free URL scan. Paste an address into the scan. It fetches the page and its stylesheets, lists each of the eight signatures it finds with the first matching token and a count, and returns a fix kit. It reads what the page serves, not your source repository: a command-line version that reads source files is not published yet.

How to fix AI slop

Three layers of intervention, from weakest to strongest.

Layer 1: Remove the fingerprints. Drop Inter. Pick an accent outside the 200 to 290 degree band. Replace the three-card grid with a structure that fits the content, a definition list or uneven columns. Add prefers-reduced-motion guards. This is reactive: you fix each pattern after it appears.

Layer 2: Constrain the agent. Before you prompt, give your coding agent a written brief: the defaults it must not use and the tokens it must use instead. The fix kit from the scan includes such a brief, ready to paste into Claude Code or Cursor, and the anti-slop prompt template covers the prompt side in depth.

Layer 3: Own the design system. Decide the palette, the type pairing, the spacing scale and the motion rules before any code is written, and require every component to use them. The fix kit seeds such a system on your hostname as a starting point: Tailwind v4 @theme tokens, CSS variables and font tags.

What anti-slop is not

It is not "no AI." We use AI tools to build Sailop and to draft articles on this blog. The point is to use them with constraints, not to refuse them.

It is not "ugly on purpose." Brutalism is one valid direction, not the only one. Elegant, editorial, technical and retail sites can all avoid the defaults. The criterion is that the choices were made, not that they are strange.

It is not anti-shadcn or anti-Tailwind. shadcn is a fine starting point and Tailwind is a fine utility framework. Slop happens when the defaults ship unmodified. Customise the theme tokens and vary the component primitives, and the signatures the scanner looks for disappear.

What happens if nothing changes

Two plausible trajectories, neither of them measured yet.

Convergence. Every site looks like every other site, and distinctiveness becomes an advantage for the few teams that invest in it. Generic AI output becomes what default WordPress themes were: recognisable at a glance.

Backlash. Visitors learn to spot generated sites the way they learned to ignore banner ads, and a default-looking page loses trust before anyone reads it.

Either way, a site that made its own choices is easier to remember than one that did not.

Sources

• Simon Willison, "Slop is the new name for unwanted AI-generated content", 8 May 2024.
• Macquarie Dictionary, "Word of the Year 2025: AI slop", November 2025.
• Associated Press, "Merriam-Webster's 2025 word of the year is 'slop.' Here's why", 15 December 2025, as republished by WFSB.
• Sailop URL scanner, saved answers for tailwindcss.com, flowbite.com and stripe.com/fr, 13 October 2026.

Revision note

Updated on 17 October 2026. The origin of the term is now sourced. An earlier version reported a six-tool, thirty-site test for which we hold no record: that table, the scores drawn from it and percentages without a source have been removed, and the three saved scans above replace them. Instructions for the command-line tool, which is not published, were replaced by the web scan.