ai · tutorial · agents

Everything Looks Beige: Fix Generic AI UI

Every AI screen looks the same: gray cards, purple gradients, Inter everywhere. The taste constraints that make output yours. Inside.

Near-identical suburban houses along a curved street with a young tree in the foreground, Levittown, New York, 1958
Near-identical suburban houses along a curved street with a young tree in the foreground, Levittown, New York, 1958 · Photo: Gottscho-Schleisner, public domain, via Wikimedia Commons

The landing page looked like everyone's landing page

Prompt a landing page and get... the landing page. Gray background, white cards, a purple-blue gradient blob, Inter font, centered hero with three columns.

Shown to a founder friend: "Which template is that?" It wasn't a template. It was the model's taste — the statistical average of the internet's design, served confidently as "modern and clean."

Ai beige ui slop isn't ugly. That's the problem. It's pleasantly identical, and identical doesn't convert, isn't memorable, and belongs to no one.

Default AI taste, itemized

Default choice Why the model picks it What sameness costs
Purple-blue gradient hero Most common in training Instant "AI-made" read
Inter everywhere Safest font statistically Zero voice, zero memory
Gray cards + soft shadows Average of all cards Blends with every competitor
Centered hero + 3 columns Dominant layout pattern Users skim past (learned blindness)
Emoji icons Easiest "icon" to emit Cheapens trust instantly
Rounded-full buttons Modal default Same as everyone

Three things de-beiging teaches:

  1. Averages don't convert. Design converts through distinction (memory) and trust (craft signals) — the average of all designs carries neither, by definition. Beige tests fine in isolation ("looks clean!") and dies in comparison (ten identical tabs, yours unremembered). Optimize for the tab bar, not the screenshot.
  2. Models can't choose taste, only frequency. "Make it premium" samples premium-adjacent tokens (gradients, serif-ish, gold?) without understanding restraint — output swings generic-luxury instead of distinct. Taste is subtraction (what's forbidden), and models only learn subtraction from explicit rules. Forbid first, describe second.
  3. Emojis are the immediate tell. Users clock AI provenance in milliseconds from emoji bullets and 🤖-adjacent decoration — trust drops before content gets read. Inline SVG icons cost the agent one extra step and buy instant human-made credibility. The cheapest craft signal in the stack, skipped by default every time.

The slop-review post covered volume. This one covers the beige inside every unit.

Ai beige ui slop constraints

Taste as law in your conventions file — palette, type, texture rules agents obey per session.

Step 1 — Pin the palette and type, forbid the defaults.

Write the palette and type rules down as law. For example: stone neutrals only for backgrounds and borders, with purple or blue gradients, neon glows and blanket dark mode forbidden. For type, name the display serif, the body sans and the mono label families, loaded once, with the default sans and emoji icons forbidden in favor of inline SVG.

Named allows beat vague aspirations ("premium feel" produces gradients; "stone-50 + serif display" produces distinction). Forbiddens matter more than allows — the model's defaults need explicit bans, not gentle discouragement. Taste written as law survives every session; taste as vibe dies by step three.

Step 2 — Require texture: one signature per surface.

per-page requirement (review checklist):
  ONE distinctive choice minimum: terminal-clone bar, provider pill row,
  eyebrow wayfinding badge, hairline table cards, serif pull-quote —
  never zero (beige), never five (circus). Exactly the house voice.

Signatures are how users recognize you blind: the terminal bar, the pill row, the eyebrow labels — repeated everywhere, copied nowhere else. One per surface keeps pages distinct yet related (family resemblance, not uniforms). Review counts signatures like guards: zero fails, five fails, one-to-two passes. Distinctness, measured.

Step 3 — Ban the tells, review with screenshots.

# review ritual per UI PR (human, 5 min):
# 1. screenshot at mobile + desktop (real rendering, not imagination)
# 2. grep: emojis (fail), "Inter" unpinned (fail), gradient classes (fail)
# 3. tab-bar test: screenshot beside 3 competitors — memorable or beige?

Screenshots ground review in reality (code lies about visuals; pixels don't). Greps catch the tells mechanically. The tab-bar test is the only metric that matters: distinctive among competitors, or beige among them. My beige landing failed it spectacularly — which is how the constraints above got written. Tests born from embarrassment work best.

Simple as that — pages with a face, not a uniform.

Beige vs constrained, one landing page

Check Beige version Constrained version
"Which template?" asked Yes (painful) Never since
Distinctive elements 0 3 (terminal, pills, eyebrows)
Banned tells present Emojis + gradient None (grep-verified)
Conversion (rough) Baseline Up (distinct remembered)
Agent rebuild fidelity Drifts to beige Holds (rules persist)

To be straight about it: constraints slow UI sessions (agents negotiate taste rules, propose alternatives, need verdicts) and strong taste polarizes (some visitors prefer beige comfort). Priced against conversion indifference: memorable-plus-polarizing beats forgettable-plus-safe for every product with competitors — which is every product. Beige is safe the way invisibility is safe.

FAQ

Is ai beige ui slop really hurting conversions, or just designer pride?

Both, measurably-ish: beige doesn't tank analytics alone (it tests "fine"), but distinct-plus-craft outperforms in recall, trust, and word-of-mouth — the metrics that compound. Pride is the early warning system for sameness; listen to the cringe. When your own page bores you, it bores prospects faster. Taste complaints are conversion forecasts wearing aesthetics.

Should AI generate the design system or just follow it?

Follow, always: systems encode judgment (hundreds of micro-decisions about restraint) that generation can't derive per session. Humans (or opinionated founders) author the tokens once; agents apply them forever. Generation inside constraints produces distinct output; generation of constraints produces average taste with confidence. Author taste, delegate application.

What about dark mode — more beige risk or less?

More, handled explicitly: dark palettes default to the same purple-glow average (dark beige is still beige). Constrain dark equally (named stone-dark scale, same signature elements, same bans). One system, two luminance modes, identical discipline. Mode switches change brightness, never taste rules.

How do taste rules survive agent sessions that "improve" design?

Same as code rules: violations fail review (grep + screenshot ritual), improvements arrive as proposals to the tokens file (reviewed like code). "Improvement" without approval is just drift with enthusiasm. Token amendments quarterly, seasonal refreshes deliberately, daily drift never. Taste maintained like law, not like mood.

Do constraints kill the creativity clients pay for?

Clients pay for distinction, which constraints produce (forced choices beat infinite beige). Unconstrained AI output is what actually kills creativity — average taste at scale, every client identical. Constraints are creativity's scaffolding: sonnets beat free verse for memorability, uniforms beat chaos for teams. Frame rules as the thing that makes work recognizable — because it is.

When should the design system itself be redesigned?

Yearly at most, on evidence (conversion shifts, brand evolution, product pivots) — never on boredom (founder restlessness is not user feedback). Redesigns touch tokens (one file, cascading) not pages (fifty files, chaos). Systematic refresh compounds brand equity; impulsive restyles spend it. Calendar taste the way you calendar pricing: deliberate, infrequent, measured.

Keep reading

+ all the boring stuff (analytics, auth, SQLite ↔ Supabase, full marketplace, webhooks)

The Agent-First Shipping Kit

Command from your phone.

Built so autonomous AI agents build what you want without breaking what's already paying you.

$199

Get BoringPush

One-time payment · Lifetime updates · Unlimited projects.

Keep reading