how to fix 'AI slop' UI in Cursor and Claude Code

You know the look the moment it renders. A purple-to-blue gradient hero, Inter headlines, three feature cards in a row with matching icons, a 1px gray border on every surface, dark mode you never asked for, and every text size sitting within a few pixels of every other. Cursor and Claude Code both ship it by default, and once you have seen it a hundred times you cannot unsee it. That is "AI slop": the generic median every coding agent reaches for when you leave the design decisions open. This is a checklist for taking them back, one fix at a time.

why the default is the average

A language model predicts the most probable next token. 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 it has ever seen. As one widely shared breakdown of the phenomenon put it, when you ask an agent to "build a landing page" with no constraints, you get the median of every Tailwind tutorial scraped between 2019 and 2024, and that median is purple. There is even a real origin story: in August 2025 Tailwind's Adam Wathan posted a half-joking apology, viewed over a million times, for making bg-indigo-500 the default button color years ago, seeding the training data that now turns every AI interface the same shade.

Stack shadcn/ui on top and it compounds. With no design system in context, the agent falls back to its training distribution, and the center of that distribution looks like shadcn with a gradient. This is not a Cursor or Claude Code bug. It is what happens when you hand the model almost nothing and let it fill the blanks. The fixes below all do the same thing from different angles: they remove ambiguity so the highest-probability answer stops being the generic one.

1. cap the palette and kill the default gradient

Slop starts with color. The agent reaches for indigo and a diagonal gradient because that is the safe average. Take the decision away from it. Pick one brand hue plus a neutral ramp, name them as tokens, and forbid the rest. A rule as blunt as this changes the output immediately:

Use only these colors. Brand: #0B5CFF. Neutrals: #0A0A0A to #FAFAFA.
No purple, no indigo, no diagonal gradients, no default shadcn theme.
Flat fills only unless I ask for a gradient.

The generic gradient is a symptom of an unconstrained palette. Constrain the palette and it disappears on its own.

2. fix the type scale, not just the font

Swapping Inter for another font is not enough, because slop is really a hierarchy problem: every size sits within a few pixels of the next, so nothing reads as more important than anything else. A type scale is a deliberate set of steps with real jumps between them, and it is the structural layer every later decision leans on. Give the agent an explicit ramp and matching weights:

The exact numbers matter less than the ratio between them. When the display size is 3x the body, hierarchy is obvious. When everything is 16px to 20px, you get the flat, undifferentiated wall that reads as AI-generated.

3. enforce one spacing rhythm

The other tell is spacing that looks arbitrary: 13px here, 22px there, padding that never repeats. Real interfaces are built on a single base unit, usually 8px, so every gap is a multiple of it and the whole layout snaps to a grid. Whitespace is not empty space; it groups related elements and separates unrelated ones, and consistent spacing is what makes a page feel calm instead of vibe-coded. Lock the scale:

Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64, 96.
Every margin, padding, and gap MUST be one of these. No in-between values.
Section padding is 96 desktop / 48 mobile. Card padding is 24.

An agent given a fixed spacing scale produces rhythm for free. An agent left to guess produces noise.

4. restore hierarchy and cut the three-card reflex

Slop layouts are flat: three equal cards in a row, every element competing for the same attention. Hierarchy means deciding what matters most and using size, contrast, and space to say so. Tell the agent there is a single focal point and let the rest recede. Name the one primary action per screen, demote everything else to secondary or ghost styling, and explicitly reject the default grid when it does not serve the content:

One primary CTA per screen, filled. All other actions are ghost or link style.
Do not default to a 3-column feature grid. Choose the layout the content needs:
a split hero, a single focused column, or an asymmetric grid.

5. default cards to borderless

The 1px gray border on every surface is pure slop grammar. Modern interfaces separate surfaces with subtle elevation, background contrast, or generous spacing instead of hairlines around everything. Make borderless the default and let borders be a deliberate exception, not a reflex.

6. feed the agent a real reference

The five fixes above are you writing the design system by hand. That works, but it is slow, and the fastest way to make an agent stop averaging is to hand it a specific, real reference so the highest-probability answer is no longer the generic one. The common advice is to paste a site's raw HTML and CSS, but that dumps thousands of tokens of framework noise into the context and means copying someone's literal bytes.

uiscanner does the clean version. 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 raw scrape misses: the real primary button rather than the first one in the source, whether the hero is centered or split, and which imagery is decorative (with prompts to recreate it as originals). It describes and tokenizes a page and never copies or re-hosts the original asset bytes, so you rebuild in your own stack from the tokens and structure. That is exactly the palette, type scale, and spacing rhythm the fixes above are chasing, extracted from a page you already admire instead of typed out from scratch.

It runs as an MCP server, the same interface Cursor and Claude Code use to pull in outside context. One line wires it into Claude Code:

claude mcp add uiscanner -- npx -y uiscanner-mcp@latest

Once registered, the agent gets five tools it can call mid-build:

The setup page at https://uiscanner.com/mcp covers every client (it is a docs page, not a hosted endpoint; the server runs locally over stdio). Prefer to script it? The CLI reads the same pipeline:

npx -y uiscanner-mcp@latest scan stripe.com --target landing

putting it together

Say you want a landing page that feels like Stripe instead of like every other AI page. The wish version, make it clean and modern like Stripe, returns the average because the agent has no idea what "like Stripe" means in tokens. The grounded version hands it the reference first:

Use the uiscanner MCP: run ui_teardown on stripe.com with target "landing".
Build our hero from the returned tokens, section structure, and build prompt.
Keep our brand copy; borrow the type scale, spacing, palette, and motion.

Now the agent is not guessing. It has the actual type scale from fix 2, the real spacing rhythm from fix 3, a capped palette from fix 1, and a section order that gives it the hierarchy from fix 4. If you later want the same reference to drive a dashboard, call retarget_teardown and the prompt is re-tailored to that archetype (landing, dashboard, marketing, ecommerce, portfolio, mobile, or general) without spending another scan. Every scan also returns a shareable uiscanner.com/t/<id> link, so one reference can seed a whole feature. Browse example teardowns to see the output shape, or read the full Stripe teardown and the Linear teardown to see what a finished reference looks like before you wire anything up.

the honest version of "study the best"

None of this is about cloning a page. It is about giving your agent taste on tap. The reputable tools here are transformative, not extractive: they tokenize and describe a page so you can rebuild the language in your own stack, and never re-host the original assets. That is the only version of learning from the best that is fair to the sites you learn from, and it happens to be the version that produces better code, because tokens and structure travel cleanly into an agent while copied bytes do not.

Do the five hand fixes and you will already beat the median. Wire in a real reference and you stop fighting the average entirely, because you finally told the model what "good" means. The free plan includes 5 scans per rolling 30 days, and paid plans (Indie at 100, Studio at 400) share the same quota across the web app, MCP, and CLI. Point it at a page worth learning from, hand your agent the teardown, and the slop is gone.