← Back to blog
·6 min read

How to Fix an AI-Slop Website

TL;DR

  • The two-paste recovery: Rottoways for design, UI Motion Prompts for motion. One hour total.
  • "AI slop" is two layers — generic visual language and zero/uniform motion — and each layer has a one-paste fix
  • Fixing the visual layer first matters; motion on top of generic visuals just makes generic visuals move

You shipped a Lovable site in an afternoon and now you cannot stand to look at it. The problem is not that it looks bad — AI builders rarely produce something that looks broken. The problem is that it looks like every other AI-built site. That feeling has a name on Twitter (AI slop) and a structural cause that you can fix in about an hour without rebuilding from scratch.

The two layers of slop

AI slop on a website breaks into exactly two layers, and they need to be fixed in order.

Layer 1: visual language. Inter typography, soft gradients, rounded-2xl cards, pill buttons, three-column grid. Always. Until you replace this, nothing else helps.

Layer 2: motion. Either nothing animates, or everything animates with the same 0.3-second linear fade. Either failure mode reads as static.

If you fix layer 2 before layer 1, you end up with a generic site that moves smoothly — which somehow feels worse than a generic site that does not move at all. Always fix the visual layer first.

Layer 1: replace the visual language

The fastest way to do this is to paste a complete design system into your AI tool before the next prompt. The Rottoways design system pack is the one we point people to: $49 one-time, includes a "renovate existing site" prompt that explicitly preserves your copy. You paste, you prompt, the visual layer gets replaced. The new site has a coherent palette, a real type ramp, intentional spacing, and component shapes that are not the default.

This step alone removes maybe 70% of the slop feeling. The site stops looking generated and starts looking opinionated.

Layer 2: replace the motion

After the visual layer is fixed, the static feel becomes the next thing the eye notices. The fix is structurally identical: paste in a motion prompt and re-run. UI Motion Prompts covers entrance, hover, press, route transitions, stagger, and reduced-motion handling. Lovable, Cursor, and Claude apply it across every component automatically.

Four edits the AI cannot do for you

Even after both paste-ins, four small edits will push the site further from "AI default" toward "intentional."

  • Crop a real product screenshot into the hero. AI tools default to gradient blobs because real screenshots are risky. A real screenshot, even cropped tight, is the single biggest credibility upgrade.
  • Break one section grid. Pick the third section and have it use an asymmetric layout — half-width text, off-grid image, no card border. One break is enough.
  • Replace one generic line with a number. "Built for fast-moving teams" → "Used by 1,200+ teams shipping daily." Numbers and named customers are the cheapest specificity wins.
  • Add a single decorative quirk. A specific accent color, an unusual cursor on a CTA, a footer signature — anything the AI default would not have produced.

    • Verify the fix

    Send the site to three people and ask: "Does this look AI-generated?" If two out of three say no, you are out of slop territory. If two out of three still say yes, you probably skipped the design system step or forgot to lock copy during the redesign.

    The math

    Fixing AI slop properly takes about an hour: 15 minutes to paste in and run the design system, 15 minutes for the motion layer, 30 minutes for the four manual edits. Rebuilding from scratch in Figma plus React takes about three weeks and produces roughly the same outcome. The paste-in path wins on every dimension that matters.

    Two paste-ins fix most of it: Rottoways for the visual layer, UI Motion Prompts for the motion layer. One hour, no rebuild.

    More articles

    Why Every Lovable Landing Page Looks the Same

    Lovable defaults produce a recognizable visual fingerprint — the same gradient hero, the same pill buttons, the same boxy card grid. Here's why, and how to break the pattern.

    Best Vibecoding Tips to Improve Your AI-Generated Website

    A practical checklist of vibecoding upgrades — design system, motion, copy, and layout — that turn a generic AI-generated site into something that looks like it was built by a human.