The Anti-Slop Design Checklist for Vibe Coders

Most vibe-coded UIs fail the same way: correct components, wrong taste. Before you ship, run this anti-slop checklist — typography, spacing, motion, copy, and layout patterns that separate intentional design from default LLM output. Use it in Cursor, Claude Code, Codex, v0, or any agent workflow.

Why vibe-coded sites look the same

AI coding tools are fast at assembling UI. They are not fast at making choices. When the brief is vague, agents fall back to the same training-data defaults: purple gradients on dark mesh backgrounds, three equal feature cards, Inter everywhere, and hero copy that could belong to any SaaS on earth.

That is not a tooling problem. It is a specification problem. You gave the agent components but not constraints. The checklist below turns taste into repeatable guardrails you can paste into a prompt, a DESIGN.md, or a pre-ship review.

Typography: stop shipping Inter by default

Typography is the fastest tell. Fix it first.

Check these before merge:

• Body font is intentional. If you did not choose a typeface, the agent chose Inter or system-ui for you. Pick one: a grotesk for product UI (Geist, Söhne, IBM Plex Sans), a serif for editorial (Instrument Serif, Fraunces), or a distinctive display for marketing heroes.
• Scale is consistent. Define a type ramp (e.g. 14 / 16 / 20 / 28 / 40) and stick to it. Slop shows up as random text-xl on one card and text-2xl on another with no hierarchy logic.
• Line length is readable. Marketing copy should sit around 60–75 characters per line. Full-width paragraphs on desktop are a layout bug, not a style choice.
• Weight contrast is deliberate. If everything is font-medium, nothing is emphasized. Use two weights max in marketing sections: regular body, semibold for labels and headings.

Prompt fix: "Use [font]. Body 16px/1.6. Headings: semibold only. Max paragraph width 65ch."

Color: one accent, one surface system

Slop palettes share a signature: violet-to-fuchsia gradient, #0f172a background, and text-slate-400 for everything secondary.

Check these:

• You can name your palette in one sentence. Example: "Warm off-white surface, near-black text, single terracotta accent." If you cannot describe it, the agent improvised.
• Accent color appears sparingly. CTAs, links, one highlight per section. If gradients appear on buttons, cards, and backgrounds, pull back.
• Surfaces have hierarchy. Background, elevated card, border separator — three levels, not seven shades of gray that look identical.
• Dark mode is a decision, not a default. Dark tech aesthetic works for dev tools. It is wrong for most B2B, health, finance, and consumer brands. Match the audience, not the template.

Layout: break the three-card grid

The "hero → three features → pricing → footer" stack is the LLM floor plan. It is not wrong, but it is never differentiated.

Check these:

• Hero has a point of view. Asymmetric layout, editorial headline, product screenshot with real UI — something that could not swap logos with a competitor.
• Feature sections vary in structure. One bento grid, one side-by-side with screenshot, one short list. Identical card rows signal template.
• Whitespace is earned. Dense pages feel like slide decks. Airy pages feel expensive. Pick a density target and hold it.
• Mobile was designed, not shrunk. Stack order matters. CTAs should not disappear below three screens of filler.

Motion: one idea, not a theme park

Agents love animation because it looks "polished" in a screenshot. In production, it reads as cheap.

Check these:

• One motion concept per page. Fade-up on scroll, or a subtle hero entrance, or hover lift on cards — not all three plus parallax plus floating blobs.
• Reduced motion is respected. Use prefers-reduced-motion and disable nonessential animation.
• Duration is short. Marketing UI: 150–300ms for micro-interactions. Anything over 600ms without narrative purpose feels sluggish.
• Nothing loops forever. Pulsing gradients and infinite float animations are wallpaper, not design.

Copy: write like a human with a product

Slop copy is symmetrical, vague, and stuffed with "leverage," "streamline," and "unlock."

Check these:

• Headline states a specific outcome. Not "Build faster with AI." Try "Ship agent-ready landing pages in one afternoon."
• Subheads add information. If removing the subhead changes nothing, delete it or rewrite it.
• Feature bullets are falsifiable. Each bullet should describe something the user can verify in the UI or docs.
• CTA labels are verbs with objects. "Get started" is lazy. "Browse templates" or "Open in Cursor" is better.

Components: libraries do not equal design

shadcn, HeroUI, Radix — all fine. None of them prevent slop if composition is random.

Check these:

• Component variants are limited. Pick one button style, one card style, one input style. Agents add variants until the page looks like a component demo.
• Icons match weight and size. Mixed 16px and 24px icons with different stroke widths is a common agent artifact.
• Borders and shadows pick a lane. Hairline borders or soft shadows. Both everywhere looks muddy.
• Real content, real states. Empty states, error text, and loading skeletons expose whether the design was thought through or skinned.

The 10-minute pre-ship audit

Run this in order. Fix failures before requesting "make it prettier."

Step	Question	Pass criteria
1	Squint test	At 50% zoom, hierarchy is obvious
2	Swap test	Could a competitor's logo fit without changes? If yes, redesign hero
3	Font test	Can you name the typefaces and why you chose them?
4	Color test	Accent used ≤3 times above the fold
5	Motion test	Disable animations — page still works and still looks good
6	Copy test	Headline mentions your product's actual job-to-be-done
7	Mobile test	Primary CTA visible without scrolling on a phone
8	Agent test	Re-prompt: "Remove all gradients and generic SaaS patterns" — how much changes?

Bake the checklist into your agent workflow

Checklists only work if they live where the agent reads them.

1. Add a DESIGN.md to the repo with type scale, colors, spacing, motion rules, and explicit anti-patterns ("no purple gradients," "no three identical feature cards").
2. Reference it in every UI prompt. "Follow DESIGN.md. Run the anti-slop checklist before finishing."
3. Start from a curated template when speed matters. A good template encodes composition and taste so the agent edits instead of invents.

That last point is why we built Agent's Design gallery — agent-ready templates with DESIGN.md specs and prompts that already pass most of this checklist. Browse a SaaS landing or portfolio starter, paste the spec into Cursor or Claude Code, and spend your iteration budget on differentiation, not undoing defaults.

What good looks like

Anti-slop design is not maximalism or "more custom CSS." It is constraint plus intent: a readable type system, a disciplined palette, varied section layouts, minimal motion, and copy that could only belong to your product.

Vibe coding stays fast when taste is specified upfront. Use this checklist as the spec.