How to fix an AI slop website (the actual fix, not the meme)

TL;DR

• The Design System Pack fixes all five tells (and six more) without rewriting a word of your copy. Paste, run section-by-section, ship in about 30 minutes.
• Five tells you can spot from across the room: purple gradient hero, three feature cards, Inter weight 700, centered everything, gradient "Most popular" pricing pill.
• Three sentences of fix: weight 500 not 700 for headlines, asymmetric layouts not three-card grids, three accent colors max with three appearances each.

You saw the meme and clicked

You searched "AI slop website" because you saw the meme. Maybe the John Oliver clip. Maybe "your ai slop bores me" floating around your timeline. Maybe a screenshot dunking on someone else's site that landed too close to home. You recognized your own work in it.

You're in the right place. Here's what's actually wrong, and the actual fix that isn't a joke.

The five tells are real, named, and specific. The fix is three sentences of typography, color, and layout. You can do it yourself in about 90 minutes if you're handy with components, or you can paste a pack into your AI tool and have it done in 30. Both options below. Skim if you're in a hurry.

The five tells

1. Purple gradient hero

If your hero has a gradient that fades violet to indigo, or violet through pink to cyan, that's tell #1. The training data made every AI think this was modern. It's not modern. It's 2024 Vercel-aesthetic and it's been mocked into oblivion since June. Fix: solid dark background with one warm radial accent in a corner. Or noise texture at 5% opacity. Anything except a multi-stop gradient. Your hero should feel like a room, not a Photoshop tutorial.

2. Three feature cards in a row

Three cards, equal width, each with an icon, a heading, a paragraph. They look fine individually. Together they look like they came from the same template every other site has been using since 2023. Fix: kill the grid. Replace with one big primary feature plus two smaller secondaries. Or vertical stack with alternating image sides. Asymmetric beats symmetric every time when the goal is "looks intentional."

3. Inter at weight 700 everywhere

Display headlines in Inter weight 700 with tight letter-spacing. The font is fine. The weight is the giveaway. Weight 700 is what the AI defaults to because every shadcn example uses it, which means every AI-built site uses it, which means you can pattern-match it from across the room. Fix: Inter weight 500. The size carries the visual weight, not the boldness. Or replace Inter with Geist or a serif. Either move kills the tell.

4. Centered everything

Hero centered. Subhead centered. Body paragraphs centered. Feature descriptions centered. The whole page is one column down the middle. The AI defaults to center alignment because it's the safest. Safe is exactly the problem. Fix: left-align everything except the hero, and even then consider a left-aligned hero. Asymmetry is what makes a page feel composed instead of templated.

5. Gradient "Most popular" pricing pill

The middle pricing plan has a small pill above it that says "Most popular," and the pill has a gradient. Sometimes the card around it has a gradient border too. It's the most visible single tell on the whole site. Fix: delete the pill. Bold the recommended plan name. The reader figures out which plan you want them to pick without you putting a flashing arrow on it.

The fix in three sentences

Weight 500, not weight 700, for display headlines. Make this one change and the page immediately stops looking like every shadcn template that ever shipped. Weight 500 reads "considered." Weight 700 reads "trying." Most AI generated sites are stuck at 700 because the model's training data treated it as the default for "important text." Move down two stops and the page exhales.

Asymmetric layouts, not three-card grids. One big thing and two smaller things beats three identical things every time. The eye gets a hierarchy to follow instead of a row to scan. Three cards is the visual equivalent of a sentence with three commas: technically grammatical, definitely boring. One primary plus two secondaries reads like a designer made a decision, because they did.

Three accent colors, three appearances each, max. Nine accent moments on the page total. Most AI-built sites have four to six accent colors that each appear six to ten times, which is why the page feels like a slot machine. Restraint is the design move. The page should feel like a single product, not a Bento grid of ideas.

That's the actual fix. Three rules, applied across every section. You'll spend 90 minutes refactoring components, but you'll know it's working when the next AI you show it to doesn't immediately say "Lovable, right?"

Pack

Or get the pack and let it do the work for you. The Design System Pack ships with a renovate prompt that fixes all five tells (and six more) without rewriting a word of your copy. You paste it into Lovable, Cursor, Claude Code, or your AI tool of choice. It runs section by section, checks in with you on each, and ships a clean version in about 30 minutes. $19, one-time, unlimited projects. 14-day refund. The link's right there.