Anti-Slop Design: Making AI-Generated UI That Doesn't Look AI-Generated

Every developer who's used an AI agent to generate UI knows the feeling: the output works, but it looks... generated. The purple-to-blue gradient hero. The centred-everything layout. The 3-column icon-tile feature grid. The transition-all hover. The invented '10x faster' metric. These are the tells — the patterns every LLM reaches for by default because they're what it was trained on.

GradientDeck MCP ships with a 58-gate anti-slop test adapted from Hallmark (the open-source design skill by Together AI). It's available as the slop_test tool, integrated into critique_design, and baked into every generator's output. Here's how it works and what it catches.

The five critical tells

These are the gates that produce a 'ships as slop' verdict. If any one of these fires, the output is immediately flagged as AI-generated:

1. The purple-to-blue gradient (gate 2)

A linear-gradient from purple to blue, purple to pink, or cyan to magenta — anywhere in the code, including background-clip: text gradient headlines. This is the single most-recognised AI aesthetic. The fix: pick a single anchor hue, one accent, no gradient backgrounds on heroes. If you need a gradient, use an analogous or single-hue lightness ramp.

GradientDeck's generate_gradient tool detects this automatically. If you ask for a purple-to-blue gradient, the tool returns the gradient but attaches a prominent warning with a non-slop alternative (solid surface + single accent).

2. Gradient text (gate 2)

A headline with background-clip: text set to a gradient fill. This signals 'AI generated' faster than almost anything else. No genre allows it. The fix: solid ink. Carry emphasis with weight, a display face, or a drawn underline.

generate_text_gradient always warns — even if the colors aren't purple-blue, gradient text itself is the tell.

3. The full-viewport centred hero (gate 6)

min-height: 100vh with everything centred — eyebrow, title, lede, and CTA all stacked on the same centred vertical axis. The default LLM landing page. The fix: let the hero be the height of its content. Bias left or right. Break alignment.

compose_ui_treatment templates use min-h-[70vh] with items-start (left-biased) instead of min-h-screen with justify-center.

4. Invented metrics (gate 46)

'10x faster', 'trusted by 50,000+ teams', '99.9% uptime', '+47% conversion' — quantitative claims the user didn't supply. The fix: replace with a placeholder (— and 'metric to confirm') or rebuild without the proof slot.

5. The aurora-blob background (gate 29)

Blurred multi-radial mesh blobs in purple-to-pink-to-cyan, layered behind hero text. The 2022-2023 generated-design default. The fix: solid surface, or a subtle two-stop gradient + SVG grain at <0.1 opacity.

The major tells

These don't produce a 'ships as slop' verdict on their own, but they compound. Two or more in the same view is a confirmation:

• Inter/Roboto/Open Sans as display with no pairing face (gate 1) — a one-font page is a template page.
• 3-equal-column icon-tile feature grid (gate 3) — the universal template every LLM emits.
• transition-all (gate 10) — animates properties that should be instant.
• Universal hover:scale-105 (gate 11) — every card lifts on hover with no purpose.
• Bouncy overshoot easing on UI (gate 12) — tasteless throwback.
• Missing interaction states (gate 26) — no :focus-visible, :active, or :disabled.
• No prefers-reduced-motion (gate 27) — every animation needs a reduced-motion fallback.
• Emoji as feature icon (gate 30) — ✨🚀⚡🔥🎯✅ standing in for an icon library.
• Re-drawn UI chrome (gate 47) — fake browser bars, phone frames, code-block windows.

How GradientDeck's generators pass

Every compose_ui_treatment template (hero, cta, card, empty_state, section, pricing, login, navbar, footer, dashboard) passes the 58-gate test clean. Here's what's baked in:

• Token block: :root { --gd-accent, --gd-bg, --gd-text, --gd-surface, --gd-border, --gd-shadow } — every color references a named token.
• Interaction states: button:focus-visible { outline: 2px solid var(--gd-accent); }, button:active { transform: translateY(1px); }, button:disabled { opacity: 0.55; cursor: not-allowed; }.
• Reduced-motion: @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }.
• Overflow safety: overflow-x: clip on the root (not hidden — clip preserves sticky/fixed).
• Display headers: h1-h4 { overflow-wrap: anywhere; min-width: 0; } — long words don't overflow viewport.
• Button text: button { white-space: nowrap; } — clickable text never wraps to two lines.
• Solid headline: no gradient text. Color comes from var(--gd-text).
• Single accent: one subtle radial (not a multi-color mesh). CTA is solid var(--gd-accent).
• No fabricated metrics: dashboard template uses — placeholders instead of '12.4k' or '98%'.

Running the slop test yourself

The slop_test tool accepts any HTML/CSS/JSX/Tailwind code and returns all 58 gates with their status:

Ask your agent: "Use GradientDeck to run a slop test on this code." and paste your component.

The response includes:

• summary: total gates, pass count, fail count, review count, critical count.
• findings: each failure with its gate number, severity, issue description, and fix.
• gates: all 58 gates with pass/fail/review status.
• verdict: 'ships as slop' (critical failures), 'reads as AI-generated' (3+ failures), 'close — fix the flagged gates' (1-2 failures), or 'clean'.

The companion skill (coming soon)

The MCP's slop test is programmatic — it pattern-matches code strings. A companion skill (installable via npx skills add) will add the behavioral layer: a 7-step design flow (pre-flight scan → context gate → macrostructure pick → theme → rulesets → build → slop-test → stamp), a 6-axis pre-emit self-critique, automatic diversification tracking, and curated reference docs. The skill calls the MCP for assets and checks; the MCP provides the tools. Together, they match the depth of Hallmark.

The anti-slop system is what makes GradientDeck MCP different from every other design tool. It doesn't just generate — it refuses to ship slop. Connect at gradientdeck.com/mcp and try it.