Español

Your Site Screams AI-Generated: Grep the Three Tells

Your site screams AI-generated — and you don't need a designer's eye to prove it. The "AI slop" look is a statistical artifact, which means it leaves a signature in your source. Three grep commands over your CSS will tell you in under a minute whether your frontend looks like everyone else's.

Why every AI frontend looks the same

LLMs are pattern matchers, not designers: asked to "build a landing page" with no constraints, they emit the statistical median of every tutorial and starter template in their training data. And that median has a color. Tailwind UI shipped its demo components with bg-indigo-500 buttons and from-indigo-500 to-purple-600 gradients; thousands of tutorials, templates, and GitHub repos copied them verbatim, and that corpus is what the models learned from. The result is a feedback loop — AI-generated purple sites get deployed, scraped, and trained on again.

The cost isn't functional, it's credibility. Users have seen the purple-gradient, centered-hero, rounded-everything template hundreds of times. It reads as "nobody designed this."

The three greps

Run these from your project root (adjust --include for .scss, .tsx, etc.):

# Tell 1 — purple/violet gradients
grep -rniE "linear-gradient\([^)]*(purple|violet|indigo|#a855f7|#8b5cf6|#7c3aed|#6366f1)" \
  --include="*.css" .
# Tailwind flavor:
grep -rnE "from-(indigo|purple|violet)-[0-9]+" --include="*.tsx" --include="*.html" .

# Tell 2 — text-align: center on nearly everything
grep -rcn "text-align: *center" --include="*.css" .

# Tell 3 — one big radius everywhere (16px+ / rounded-2xl)
grep -rhoE "border-radius: *[0-9]+px" --include="*.css" . | sort | uniq -c | sort -rn

That last pipeline is the interesting one: it histograms your radii. A hand-designed system has a small scale of radii (buttons ≠ cards ≠ inputs). Slop has exactly one value, 16px or larger, on everything.

Rules of thumb

The percentages are heuristics, not laws — a marketing splash page centers more than a dashboard. What matters is whether the numbers reflect a decision or a default.

Power-user: make the model stop doing it

• Write a DESIGN.md (or design-system doc) the agent must read: exact hex palette capped at ~3 hues, a named font pairing, a radius scale. AI generates from the context you provide — vague prompts return the training-data average.
• Remove the defaults from the toolchain. Override Tailwind's palette with your own tokens instead of aliasing indigo to primary; if indigo-600 doesn't exist in your config, neither the model nor a hurried teammate can reach for it.
• Ban the tokens explicitly. A prompt line like "no purple/indigo gradients, no rounded-2xl, no centered hero stack" measurably shifts output away from the median.
• Break symmetry on purpose. Asymmetric grid layouts and a real radius scale are the cheapest "a human designed this" signals.

Read the source, not the pixels: the slop signature is in your CSS before it's on your screen.

Resources

• Why Your AI Keeps Building the Same Purple Gradient Website — the statistical-median explanation
• Why Every AI-Built Website Looks the Same (Blame Tailwind's Indigo-500) — how one default flooded the training data
• How to Fix the "AI-Generated" Look in Your Frontend — four concrete fixes
• AI Slop Design: Why AI-Generated UI Looks Generic — the full tell catalog and six repair rules
• Design Systems for AI Coding: Stop Getting Purple Gradients — token architecture as AI context