Guide · glossary
what is 'AI slop' UI, and how to avoid it
"AI slop" is the catch-all term for low-effort, mass-produced generative-AI content: the filler articles, the six-fingered stock images, the summaries that say nothing. It got big enough that Merriam-Webster named "slop" its 2025 Word of the Year. When you narrow that term to interfaces, you get "AI-slop UI": the generic, instantly recognizable look an AI coding agent produces when you leave the design decisions open. An indigo-to-violet gradient hero, Inter headlines, three feature cards in a row with matching line icons, a 1px gray border on every card, dark mode you never asked for, and every text size sitting within a few pixels of the next. You know it the moment it renders, and once you have seen it a hundred times you cannot unsee it.
This is a glossary post, so it does two things: it defines the term precisely, including where it came from, and it explains the one mechanism that produces it. Then it gives you the short checklist for avoiding it. The through-line is simple: slop is what an agent outputs when it has no design reference, so the cure is to give it one.
where the term comes from
"Slop" as a name for low-grade AI output started as in-group slang. Per Wikipedia's entry on AI slop, early uses appeared among 4chan, Hacker News, and YouTube commenters reacting to the first wave of AI image generators around 2022. The programmer Simon Willison is credited with pushing the term into the mainstream on his blog in May 2024, though he has said it was in circulation well before that. It broke through in the second quarter of 2024, partly on the back of AI-generated search answers, and by 2025 it was Word of the Year.
The word is deliberately unflattering. As The Conversation's explainer frames it, slop is content "lacking in effort, quality, or meaning," produced in volume because it is cheap to make. "AI-slop UI" carries that charge into product design. It is not a bug, and it is not always ugly at a glance. It is what average looks like when a machine picks it for you.
the definition, tightened
AI-slop UI is the set of design defaults an AI coding agent reverts to when the prompt leaves color, type, spacing, and hierarchy unspecified. It is characterized by:
- an indigo or purple-to-blue gradient, usually on the hero and the primary button
- Inter (or a near-identical geometric sans) at nearly every size
- a compressed type scale, so headings and body text sit only a few pixels apart and nothing reads as more important
- three feature cards in a row, each with a matching icon, inside a card, sometimes inside another card
- a 1px light-gray border and a soft shadow on every surface
- glassmorphism and blur applied to things that did not need it
- dark mode as the default reflex, requested or not
None of these is wrong on its own. The problem is that they arrive together, every time, so the interface reads as machine-made rather than designed. That is the tell.
why AI defaults to slop: the averaging mechanism
There is one root cause, and everything else is a symptom of it. A language model predicts the most probable next token given everything before it. That is exactly what you want when it writes a function, and exactly what wrecks a design, because "most probable" means the statistical center of every interface the model has ever seen.
When you tell an agent "build a clean SaaS landing page" with no other constraints, you have not given it a direction, so it returns the median of its training data. As Shuffle's breakdown puts it, AI does not design websites, it predicts patterns, and the pattern that dominates the modern web is the Tailwind-blue, rounded-corner, minimal-SaaS look. The model is also tuned to be safe: it is rewarded for output that reads as correct and offends no one, not for taking a visual risk. Safe plus average plus no direction equals the same page over and over.
Two things compound this. First, most AI tools produce one draft and stop, so the output stays close to that first averaged guess. Second, the training distribution is skewed. VibeCodeKit's guide traces the indigo default to the sheer volume of Tailwind tutorials and starter templates that used bg-indigo-500, which seeded the data the model now averages over. The gradient is not a taste. It is a frequency.
So the fix is not a cleverer prompt asking for "modern, premium design," because those adjectives are already baked into the averaged output. The fix is to remove the ambiguity the model is filling with its defaults.
how to avoid it: give the agent a real reference
Every durable fix does the same thing from a different angle: it replaces "you decide" with "here are the decisions." Below is the short checklist. If you want the long, per-fix version with example rules, the companion piece on how to fix AI-slop UI in Cursor and Claude Code goes deeper.
| Symptom | The fix | What it removes |
|---|---|---|
| Indigo gradient everywhere | Cap the palette to one brand hue plus a neutral ramp, ban gradients | The default color |
| Flat hierarchy | Give an explicit type scale with real jumps between steps | The compressed sizing |
| Cramped or random spacing | Lock a spacing scale (4px or 8px base) and enforce it | Ad-hoc padding |
| Cards inside cards | Default surfaces to borderless, allow one elevation level | Nested chrome |
| Generic everything | Feed a concrete reference the agent builds from | The averaging itself |
The first four constrain a single axis each. The last one is the leverage point, and it is the one most guides skip. An agent that has a real design reference in context stops averaging, because it no longer has blanks to fill. The most reliable form of that reference is a named set of tokens plus a section structure: color.action = #0B5CFF, radius.md = 8px, a hero that is split rather than centered, a spacing rhythm on an 8px grid. Those are decisions, not vibes, and a model can build from them without guessing.
where the reference comes from: study sites that got it right
You can author that reference by hand in a DESIGN.md. You can also lift it off a site that already nailed the look, which is faster and grounds the agent in something real rather than your best recollection of good taste.
That is what uiscanner does. Paste any public URL and it returns a design teardown: tokens (colors, fonts, type scale, radii, spacing, shadows, motion), a section-by-section structure, and a Claude-tailored build prompt to recreate the look. It reads the rendered page with vision plus the DOM, so it catches what a code-only scraper misses: the real primary button, a centered versus split hero, and decorative imagery it describes as prompts to recreate as originals. It describes and tokenizes, and it never copies or re-hosts the original site's asset bytes, so you rebuild in your own stack. Every scan returns an id and a shareable uiscanner.com/t/<id> link.
Feeding real tokens works because they are the opposite of slop. Slop is the averaged center; a token set from a specific, well-designed site is a committed direction. The Stripe teardown and the Linear teardown show the output shape on two of the most-studied interfaces on the web, and you can browse more in explore.
To pull tokens from your terminal:
npx -y uiscanner-mcp@latest scan stripe.com --target landing
Or wire it into Claude Code as an MCP server so an agent can request a teardown mid-build, instead of falling back to indigo:
claude mcp add uiscanner -- npx -y uiscanner-mcp@latest
That runs locally over stdio, and there is a setup page for every client at https://uiscanner.com/mcp. It exposes five tools: ui_teardown(url, target?), ui_probe(url) as a cheap preflight that spends no scan, get_teardown(id), retarget_teardown(id, target) to re-tailor the build prompt to another archetype (landing, dashboard, marketing, ecommerce, portfolio, mobile, general) without re-scanning, and whoami(). Quota is unified across the web app, MCP, and CLI on a rolling 30-day window: Free is 5 scans, Indie ($12/mo) is 100, Studio ($39/mo) is 400.
the short version
AI-slop UI is the generic median an AI agent reaches for when the design is left unspecified: indigo gradient, Inter, three cards, borders on everything, dark mode by reflex. It happens for one reason, which is that a model predicts the statistical center of its training data and you gave it nothing to point away from that center. You avoid it by removing the ambiguity: cap the palette, fix the type scale, lock the spacing, restore hierarchy, and above all feed a real design reference so the agent builds from decisions instead of averages. Slop is what happens when the machine chooses for you. Choosing is the whole cure.