Guhwoo ·
How to remove AI slop from a web page
A concrete pass for de-slopping an AI-generated page: what to check, in what order, and how to tell when you have actually changed the read of the page rather than just moved pixels.
What "slop" means here
AI slop is not bad output. It is default output: the choices a model makes when nothing in the prompt forced a decision. On a web page that shows up as a specific, repeatable set of moves — the indigo gradient, the glow, Inter, the three cards, the empowerment verbs. The page works. It just reads as though nobody was home.
Removing it is therefore not a rewrite. It is a pass to find the places where no decision was made, and make one. That framing matters, because it tells you when to stop: you are done when every prominent choice on the page has a reason behind it, not when the page stops resembling some reference you have in mind.
The pass, in order
1. Colour, first and always
Colour carries more of the "AI made this" signal than anything else, and it is the cheapest to change. Three checks:
- Is the accent an untouched Tailwind default (
#6366f1,#4f46e5,#8b5cf6and neighbours)? Replace it with a colour sampled from something that belongs to you — the product UI, a photograph, the logo. - Is there a diagonal gradient in the 230–290° hue band? Flatten it. If you want depth, get it from a real image or from contrast between surfaces, not from a hue ramp.
- Is the base a dark slate (
#0f172a,#1e293b)? That palette is a tell on its own. Even shifting to a warm neutral changes the read immediately.
The concrete move is to stop referencing scale values in markup and define a small token set instead — background, ink, accent, muted, and one more if the design genuinely needs it. Four tokens sampled from your own material will beat forty inherited ones, and the constraint does most of the design work for you.
2. Delete the decorative layer
Blurred radial blobs, floating orbs, grid overlays fading to nothing, noise textures at 3% opacity, frosted glass panels. Each was added to fill space rather than to say something.
Remove all of them at once — not one at a time, which always ends in negotiating with yourself — and then look at the page. It will feel emptier and better. Now decide what actually deserves that space. Usually the answer is a real screenshot of the product, which is both more informative and more distinctive than any amount of atmosphere.
Frosted glass deserves a specific mention because it is the most expensive of these: backdrop-filter: blur() costs legibility and compositing performance, and it is almost never load-bearing.
3. Typography
Change the typeface if it is one of the defaults, but the bigger win is usually the scale. Generated pages tend to have a timid type ramp — everything within a step or two of everything else, because the middle of the distribution is the safe place to be. Real hierarchy means something on the page is genuinely large and something is genuinely small.
Also worth checking: headings centred purely because centring was the default, gradient-filled headings, and letter-spacing left at zero on display sizes where it should be negative. None of these are individually damning. Together they are the difference between typeset and emitted.
4. Layout
The three-equal-cards row is the signature. It shows up because a model with no information about relative importance has no basis for making one thing bigger than another, and equal boxes are the safe answer.
So supply the information. Ask what the page is actually arguing, rank the items, and give the strongest one more room. Asymmetry here is not a style preference; it is evidence that somebody ranked things. The same logic applies to sections: a page where every section is the same height is a page where nobody decided which part mattered.
5. Copy
Cut the empowerment verbs — elevate, unlock, empower, supercharge, seamlessly, revolutionise. Cut the emoji bullets. Cut the "In today's fast-paced world" opener and the "It's not just X, it's Y" construction. Replace each with the specific claim underneath it.
The useful diagnostic: if a sentence would still be true after swapping in a competitor's product name, it is not saying anything. And if you cannot state the specific claim a section is making, that section may not need to exist — cutting it is a legitimate fix, often the best one.
6. Motion
Generated pages fade everything in on scroll with the same duration and the same easing, because a uniform rule is easier to emit than a considered one. Uniform motion reads as machine-timed even when each individual animation is fine.
If an animation is not doing work — directing attention, explaining a relationship, covering a state change — remove it. If it is, stagger it and vary the timing so the page has a rhythm rather than a metronome.
The over-correction failure
There is a way to do this badly, and it is common enough to name. Having learned that gradients and Inter are tells, people ban them, and arrive at a second monoculture: beige, serif, oversized display type, one asymmetric hero. It scores well on the detector and is just as inherited as what it replaced — it is simply copying a different reference.
The check that catches this: for each change you made, can you say what about your product or audience made it right? "Because it isn't the AI default" is not an answer. Removing a tell is necessary; it is not the same as making a decision.
How to know it worked
The honest test is not whether you like it more. It is whether a stranger can tell a person made decisions here. Two practical proxies:
- Name the reason for each of the top five visual choices on the page. Any "it came like that" is remaining slop.
- Run it through a detector. Our free slop checker takes a URL and returns which of the 39 registered tells it trips, with a weighted index. Scan before and after; the delta is the part you can defend.
Do not chase zero. A page can trip two or three low-signal rules and be entirely fine, because those rules describe conventions that are sometimes simply correct. The number is a prompt to go look, not a target.
Working with an agent instead of against it
Since most of these pages are generated in the first place, it is worth closing the loop rather than treating the fix as a separate manual phase.
Two things help. First, give the agent your tokens up front — the four colours, the typeface, the spacing scale — because a model with constraints departs from the mode readily; it is the absence of constraints that produces the default. Second, feed your edits back. If the agent regenerates from the original prompt, every fix you made is discarded on the next turn, which is the single most common way de-slopping work gets lost.
That loop is what Guhwoo is built around: the generated page lands on a canvas with its tells annotated and the evidence attached, you adjust by direct manipulation — drag, snap, retype a value — and each gesture writes straight back to the source, so the agent's next turn starts from what you decided rather than from what it originally guessed. The draft stays fast. The judgement stays yours.