What is AI slop in design?
Published 22 September 2026
How to spot AI slop: ten signs.
Each is a default: what an agent writes when nothing tells it otherwise. One alone proves little — a purple gradient is slop on a product that never chose purple and a decision on one that did. It is the cluster that gives a screen away. Six of the ten are on the screen below.
One screen, built twice.
The right screen is not a picture: every control on it comes from the library this page and the product are both built from. Press it, focus it, type in the field.
What the agent left behind: gradient fill, glow at rest, pill corners, fill and border, spaced-out capitals, coloured stripe.
- 01
A purple-to-blue gradient nobody chose
A wash between violet and blue across the main button, the hero or the logo. It is what an agent reaches for when nothing says what colour the product is, so on a brand that never chose purple it is somebody else's colour.
- 02
A glow on things at rest
A soft halo around a button, a card or an icon that nothing is happening to. Light on a screen is a signal — this has focus, this needs you — and a glow that never goes out signals nothing. When something does need attention, the effect is spent.
- 03
Every control rounded into a pill
Buttons, fields, tags and badges given the same fully rounded ends, whatever their height. A corner is a decision about size: what suits a small tag looks swollen on a tall field. One curve on everything says the decision was never made.
- 04
A card told apart from the page three ways at once
A background colour, a border and a shadow on the same card, or any two of them. One is enough to lift a card off the page; stacked, they make every edge loud and nothing stands out.
- 05
Tiny labels in spaced-out capitals
Section labels and status badges set small, in capitals, with the letters pulled apart. It is a shortcut to looking designed, and it costs the one thing a label is for: being read at a glance.
- 06
A coloured stripe down the side of a notice
A thick bar of colour down one edge of an alert, a card or a list row. It adds emphasis without meaning — the notice's colour and words already say what kind it is — and once every notice has one, the emphasis cancels out.
- 07
An icon or emoji in front of every heading
A small picture before every title, list item and button label. When every line has one, none of them helps anybody find anything. An icon earns its place where it is quicker to recognise than the word — search, close, settings — not as decoration.
- 08
A centred headline with two buttons over a glowing mockup
A large centred headline, a line under it, a primary and a secondary button, and a screenshot floating in a glow. Centring is not the problem: the arrangement arrives as one piece whatever the product is, so the first screen says nothing about this one.
- 09
Three identical feature cards in a row
Three cards of equal size, each with an icon on top, a two-word title and a line that could describe any product. The number comes from the grid, not the product: nobody decided there were exactly three things worth saying.
- 10
Invented social proof
Quotes nobody said, stars nobody gave, logos of companies that never used the product, “trusted by 10,000+ teams”. The layout had a slot for proof and the agent filled it with something plausible — a claim somebody will one day have to stand behind.
Why AI-built websites and apps all look the same.
A language model writes the likeliest continuation of what it has been given. Ask for a settings page with nothing else to go on and you get the settings page it has seen most often — the statistical middle of everything it has read. The middle is not bad. It is the same for everyone who asks.
And the middle is made of defaults. Tutorials, starter templates and the examples that ship with component libraries are written to be copied; what is copied most is what an agent has seen most, so their colours, corners and layouts are what it writes back.
An agent cannot follow a system it cannot see. Your design may live in a Figma file or a designer's head, while the agent sees the repository and the prompt. Unless the system is in the repository in a form it reads — tokens, components, instruction files — it falls back on the middle.
Every screen is written on its own. Unless earlier choices were written down, the agent starts each task without them and makes small ones of its own: a grey that is nearly yours, a corner slightly off the scale, one more button variant. None is big enough to stop a review. Together they are drift.
Prompts wear off. “Follow our design system” typed into a chat lasts for that conversation, if that long, and the next one starts without it. Even while it lasts, it is a sentence about your system rather than the system.
Why AI slop matters, even when it looks fine.
People judge how something was made by how it looks. These defaults turn up on product after product, so users recognise them, and a recognisable default says that nobody decided — which reads as low effort whether or not it was.
A brand that looks like everyone else's is not a brand. A visual identity exists so people can tell your product from the next one; the generic look erases exactly that, and quietly, because nothing on the screen is wrong enough to complain about.
And the clean-up compounds. Every generated screen adds colours, corners and components that are nearly your own, and the longer it goes on, the more near-copies there are to find before anything can be fixed.
How to get rid of AI slop.
None of this needs a particular tool. It comes down to putting your system where the agent will find it, and checking what comes back.
- 01
Write the system down as tokens, not prose.
Colours, type sizes, spacing, corners and shadows belong in files the code imports — CSS variables, a Tailwind theme, a JSON token file — named for what each value is for. An agent can misread “use our blue sparingly”. It cannot misread
--color-accentwhen every component already uses it. - 02
Give the agent components, not descriptions.
A button described in a document is rewritten on every screen, a little differently each time. A button that exists as a component, with its variants, states and keyboard behaviour, is imported. The more of the interface that exists as code, the less is left to guess.
- 03
Put the rules where the agent reads them.
Coding agents read instruction files at the root of the repository:
CLAUDE.mdfor Claude Code,AGENTS.mdfor Codex, Cursor, GitHub Copilot and many others,.cursorrulesfor Cursor. Keep them short and specific — which components exist, where the tokens live, what the product never does. Unlike a prompt, they are there at the start of every session. - 04
Check the work before it merges.
Much of slop is visible in the code: a raw colour value instead of a token, a gradient, a border and a shadow on one element. A lint rule or a small script catches those on every change, and an agent that can run it catches its own drift before calling the work done. A person reviews the rest.
- 05
Audit what already shipped, and fix the worst first.
In a live product, slop is a backlog, not a rewrite. Find it, count it, and start with what people see most: the screens they open every day and the components used everywhere. One kind of fix per change keeps each change small enough to review.
- 06
Keep the choices you made on purpose.
Not every gradient is slop. A brand that is purple on purpose, a rounded control that is part of your identity, a blur you designed — these are decisions, and a clean-up that removes them swaps your look for somebody else's. Write them down as decisions so nobody “fixes” them later.
How Broom does it.
Broom turns that list into files. It reads your repository or your Figma file and learns the system already in it — or designs one from a short brief when nothing exists yet — then gives your agent that system as components for your stack, tokens and skills in your product's own names, with a slop check the agent runs on its own work. For a live product, an audit scores the slop, names the file and line of every finding, and keeps what your system chose on purpose. Broom does not touch your code; your agent does, after reading the pack.
3 credits free. No card needed.
Questions about AI slop.
Is AI slop just bad design?
No. Bad design fails at something: it confuses, breaks or cannot be read. AI slop usually works. Its fault is that it could belong to any product — every default is reasonable on its own, and together they make a screen nobody designed for yours.
Can a better prompt fix AI slop?
For a screen or two. A prompt is a sentence about your system: it lasts as long as the session, and the agent still guesses every value it leaves out. What holds is the system itself in the repository, and a check the agent runs before calling the work done.
Is Inter, or any other font, a sign of AI slop?
Not by itself. No typeface is slop; a typeface becomes slop when nobody chose it — when it came with the template and its sizes and spacing were left as they came. Chosen, sized and spaced on purpose, it is a decision like any other. This page is set in Inter, on purpose.
Why do AI-built websites use so much purple?
Because purple and indigo sit in the defaults of widely used templates and component libraries, and an agent reproduces what it has seen most often. Purple is not the problem. The tell is purple that arrived with the template rather than with a decision; on a brand that chose it, it is simply the brand.
Can AI slop be detected automatically?
Much of it, because it is written in the code — raw colour values, gradients, a border and a shadow on one element, spaced-out capitals — and an audit can read the files that build the interface and name each finding with its file and line.
Some of it needs eyes: no script can tell whether a layout says anything about the product, or whether a testimonial is real.
What an audit hands backDoes AI slop matter if my users do not notice it?
Your team notices: every near-duplicate colour, corner and component is one more thing to keep in step when the design changes. And users need not name the look to be affected by it — a product that looks like every other gives them one less reason to remember it.