Craft

Stop AI slop before it ships: a design-rule checklist

7 min read · everyone

You can't always explain why an AI-generated page feels "off" — but you can name the patterns. These are the recurring tells we've collected from reviewing hundreds of AI-generated designs, plus the rule packs that automate the guardrails. Learn the list once and you'll spot slop instantly.

The slop telltale list

1 · Gradient everywhere

Purple/blue gradients on buttons, borders, text, charts, avatars — all at once. A good gradient is one deliberate accent; slop is a gradient party. Rule: no more than one gradient element per viewport, and never for text that must stay readable.

2 · The fake dashboard

A marketing page showing a dashboard mock whose numbers are nonsense ("+∞%", "$1.2B MRR", a chart of 3 bars labeled "growth"). Real product screenshots with believable numbers read as confidence; garbage numbers read as generated. Rule: mock dashboards must show plausible, internally consistent figures — or use abstract product art instead.

3 · Icon soup

Seven different icon families in one page — emoji, outlined, filled, brand icons, custom — because the AI improvised per section. Rule: one icon set (or none), one size weight. Our design system spec enforces exactly this.

4 · The hero of nothing

"Revolutionize your workflow" + a floating phone + a blurred gradient blob. The headline promises nothing concrete because there's no product behind it. Rule: if you can't state what the product does in the headline, the copy is slop regardless of layout.

5 · Stock-photo clichés

Handshakes, skyscrapers (shot from below), puzzle pieces, lightbulbs, group high-fives. Rule: if it came free with a stock library, it says less than nothing about your brand.

6 · The infinite feature grid

Twelve cards, each with an icon and two lines, none of which differentiate anything. Rule: fewer, specific features beat more, generic ones. If the third row adds nothing, cut it.

7 · Motion without reason

Entrance animations on everything — staggered, bouncy, 400ms — so the page is still animating 3 seconds after load. Rule: motion should explain or delight once; never be the page's personality.

Rule packs that automate the guardrails

The 5-second test: open any design and ask "is there a reason this element exists?" Every element — every color, every animation, every card — should have an answer. Slop is what survives without one.

← Back to all guides