How to Stop AI-Generated UI Looking Templated

AI-generated UI looks templated when models default to statistically common patterns — Inter font, purple gradients, centered heroes, three feature cards — and your prompt gives no constraints to pull away from that centroid. You stop templated output by giving agents tokens, layout shells, explicit anti-slop rules, and visual references before the first line of code ships.

Why AI UI converges on the same look

Large models are trained on millions of websites. The most common SaaS landing page in that data has:

White or dark gray background with a violet-to-blue gradient accent
Inter or similar geometric sans-serif
Centered headline with a subhead and two CTAs
Three equal-width feature cards with lucide-style icons
A pricing table with a highlighted "Pro" column

When you say "build a landing page," the model samples from that distribution. It is not ignoring you — it is doing exactly what "landing page" means in its training data.

Templated output is a prior problem, not a skill problem. Fixing it requires changing the prior.

The anti-slop stack (four layers)

Layer	What it fixes	Example
Tokens	Random colors and spacing	CSS variables, Tailwind theme
Template	Generic layout structure	Dashboard shell, asymmetric hero
DESIGN.md	Taste and anti-patterns	"No gradients. One accent. `py-16` sections."
Reference	Vague "make it modern"	Screenshots, /inspiration links

Skip any layer and slop creeps back in within a few prompts.

Step 1: Lock tokens before prompting

Never let an agent pick your palette. Define it once:

:root {
  --bg: #fafaf9;
  --fg: #1c1917;
  --muted: #78716c;
  --accent: #0d9488;
  --accent-fg: #ffffff;
  --radius: 8px;
}

Rules that work in practice:

One accent color — used only for primary actions and key highlights
Neutral backgrounds — warm stone or cool gray, not pure #fff everywhere
Fixed radius scale — 4px / 8px / 16px, not "rounded-lg" interpreted differently per component
Named font — Geist, IBM Plex Sans, Source Sans — not "sans-serif"

Tell the agent: "Use only token variables from globals.css. Do not invent new colors."

Step 2: Start from a template, not a blank page

Blank-page prompts maximize generic output. Templates anchor structure.

A good agent-ready template defines:

Grid and section rhythm
Nav placement and density
Content width (max-w-6xl vs full bleed)
Where sidebars, cards, and forms live

Pull a shell from the Agent's Design gallery — templates there are built to resist the default AI SaaS layout, with DESIGN.md specs included.

Prompt pattern that works:

Extend the existing MarketingLayout template. Add a pricing section below Features. Do not change the header or token file. Follow DESIGN.md.

The agent edits; it does not reinvent.

Step 3: Write a DESIGN.md with anti-slop rules

Specs should be imperative and negative. Agents follow "do not" lists surprisingly well.

Example anti-slop section:

## Never do this
- No purple, violet, or blue-to-purple gradients (background or text)
- No emoji as UI icons — use Lucide at 20px
- No centered body text blocks wider than 480px
- No three equal feature cards unless explicitly requested
- No "Inter" — font is Geist only
- No box-shadow on every element — shadow only on elevated cards
- No hero with floating gradient orbs

Positive rules matter too:

## Always do this
- Section vertical padding: py-16 (marketing), py-8 (app)
- Headings: font-semibold tracking-tight
- Primary CTA: solid accent background, no gradient
- Use existing components from `components/ui/` before creating new ones

Keep DESIGN.md under two pages. Agents deprioritize bloated docs.

Step 4: Give visual reference, not adjectives

"Make it feel premium" is unexecutable. "Match the spacing density of [reference URL]" is.

Collect 3–5 references that share a vibe you want — not Dribbble shots with impossible layouts, but shipped sites with inspectable CSS. The /inspiration board on Agent's Design curates craft-forward references for this purpose.

Paste screenshots into the agent context or link specific sections: "Hero density like site A, typography rhythm like site B, color restraint like site C."

Step 5: Constrain the component search space

Agents invent components when primitives are missing. Invented components drift.

Standardize on one library:

shadcn/ui for Tailwind + React
HeroUI for polished defaults
Radix primitives if you need full style control

Ban parallel systems in DESIGN.md: "Do not add MUI, Chakra, or inline-styled one-off buttons."

Step 6: Iterate in sections, not whole-page rewrites

"Redesign the entire page" destroys template coherence. Instead:

Hero only
Social proof strip
Feature section (ask for two-column asymmetric, not three cards)
CTA footer

Each pass stays inside the template and token system.

Templated tropes to ban explicitly

Add these to your spec if they keep appearing:

Trope	Why it reads as AI slop	Fix
Purple gradient hero	#1 AI SaaS cliché	Solid accent or subtle texture
Three identical feature cards	Default "features" prior	Asymmetric 2-col or bento grid
Giant rounded pill buttons everywhere	Over-friendly default	One primary pill; rest rectangular
"Built with ❤️" footer	Low-effort signal	Real links, minimal footer
Gradient text on headline	2023 AI landing trend	Solid fg or single underline accent
Dark mode toggle on marketing page v1	Premature complexity	Ship light; add dark when app needs it
Stock illustration placeholders	Screams template	Typography-led or real product screenshot

Prompt patterns that reduce slop

Weak: "Create a modern SaaS landing page."

Strong: "Using MarketingLayout and tokens in globals.css, add a waitlist section. Follow DESIGN.md anti-patterns. Two-column hero: copy left, product screenshot right. No gradients."

Weak: "Make it look better."

Strong: "Reduce shadow usage to cards only. Change section gaps to py-16. Replace centered three-card row with a 2×2 bento grid using existing Card component."

Specificity beats superlatives.

Wire specs into your agent permanently

One-time prompts fade. Persistent rules do not.

Tool	Where to put DESIGN.md
Cursor	`.cursor/rules` or `@DESIGN.md` in agent context
Claude Code	`CLAUDE.md` or project instructions
Codex	System / project context per your setup

Also add: "Read DESIGN.md before any UI task."

Agents that load rules on every session drift less than agents reminded occasionally.

When generated UI is good enough to ship

Checklist before merge:

Colors come from tokens only
Typography matches spec (correct font, scale)
Layout extends template — nav, footer, grid unchanged without reason
No banned tropes (gradients, three-card default, emoji icons)
Spacing rhythm consistent across sections
One obvious primary CTA per viewport
Accessible contrast and focus states on interactive elements

If three or more fail, fix the spec and re-prompt — do not manually patch slop forever.

Long-term: build your own anti-slop kit

After two or three projects, fork what worked:

Your token file
Your DESIGN.md
Two templates (marketing + app)
A prompts snippet file for common tasks

Or start from agent-ready baselines in the Agent's Design gallery and customize — faster than authoring anti-slop rules from scratch.

Pro access (~$89 via Polar) unlocks the full template and spec library when you are shipping regularly; browsing the gallery is enough to evaluate the approach.

FAQ

Why does my UI still look like v0/Bolt output after I switch to Cursor?

Because you imported the slop with the code. Re-tokenize, apply DESIGN.md, and restructure layout against a template — do not just edit copy on a generic scaffold.

How many anti-slop rules is too many?

More than ~20 "never" rules dilutes focus. Start with 8–10 bans targeting the tropes you actually see. Expand when repeat mistakes show up.

Can I fix templated UI without a designer?

Yes. Tokens, templates, references, and explicit rules get you most of the way. Designers help when you need a distinctive brand identity beyond "clean and not purple."

Does Agent's Design prevent slop automatically?

It gives you templates and specs engineered for agent workflows — a stronger starting prior. You still prompt with constraints; the baseline is just much better than a blank page.

AI-generated UI looks templated when agents guess your taste from the average of the internet. Stop guessing: lock tokens, load a template, write anti-slop rules, and point your agent at real references.

For agent-ready templates and DESIGN.md specs built to beat the defaults, browse the Agent's Design gallery.