AI Slop

Scope: marketing sites, product interfaces, dashboards, portfolios, editorial pages, and e-commerce. Complements frontend-design: that skill builds the interface, this one is the detailed rubric for judging whether the result is generic ("AI slop") or genuinely fit for the product.

This is not a universal style guide. It does not ban a visual style merely because AI systems use it often — a gradient, card grid, serif headline, glass surface, or dark theme may be appropriate. It becomes a slop signal when used by reflex rather than because the product, audience, content, interaction, or brand requires it.

MUST/MUST NOT are required for acceptance; SHOULD/SHOULD NOT are default rules whose deviations need a written rationale; MAY is optional and context-dependent.

1. Core definition

AI slop is superficially competent output that lacks sufficient intention, grounding, specificity, coherence, truthfulness, or product fit. It usually shows up as one or more of:

1. Default-driven — recognizable model/template reflexes replace deliberate decisions.
2. Interchangeable — could be relabeled for another product with minimal change.
3. Ungrounded — content, claims, visuals, or features aren't supported by the brief or evidence.
4. Incoherent — polished elements that don't form one consistent system.
5. Decorative without purpose — effects attract attention without clarifying hierarchy, meaning, state, or action.
6. Quantity-over-value — extra sections/cards/copy exist mainly to look complete.
7. Unreviewed — obvious responsive, accessibility, factual, or interaction defects remain.
8. Overfitted to current AI aesthetics — follows the fashionable model output distribution rather than the project's needs.

Output is not slop merely because AI helped produce it — a result can be AI-assisted and still strong when it's grounded in real product/user context, deliberately art-directed, specific, factually honest, coherent, accessible, edited, browser-validated, and hard to transplant unchanged to another product. Human-made work can also be slop; the classification concerns the output, not proof of authorship.

2. Two quick tests

• Substitution test: could the product name, logo, and accent color be swapped while 80% of the page stays equally plausible for another product? Yes = strong slop risk; No = likely meaningfully tied to the product.
• Rationale test: every prominent decision MUST answer at least one of: what user need does this serve, what product truth does it express, what hierarchy does it clarify, what brand trait does it embody, what interaction state does it communicate, what constraint made it appropriate? If the only answer is "it looks modern" or "AI suggested it," it's a slop candidate.

3. Evaluation dimensions (score each 0-4: 0 excellent, 1 minor, 2 noticeable, 3 serious, 4 blocking)

• Product grounding & specificity — generic value props, checklist-driven sections, invented features/personas, visual metaphors unrelated to the product. Evidence: a PRODUCT.md (or equivalent) with explicit users, jobs, constraints, and a traceable reason per section. Repair: cut unsupported sections, rewrite around concrete user tasks.
• Truthfulness & evidence (blocking) — invented prices, metrics, testimonials, logos, citations, or controls that imply unavailable functionality. Use [NEEDS INPUT], "Price on request," or clearly labeled sample data instead; keep an evidence ledger for verifiable claims; mark fictional demo data as demo data.
• Information architecture & narrative — default hero → logo cloud → cards → metrics → testimonials → pricing → FAQ; shuffleable section order; front-loaded slogans. Repair: define the reader's questions in order, give each section a unique job, cut sections that don't advance understanding.
• Composition & layout — everything centered, identical repeated cards, uniform spacing, excessive pills, desktop merely stacked on mobile, heading overflow at mid widths. Repair: content-led layouts, intentional density variation, a spatial system broken only for a reason, test real content at multiple widths.
• Visual system coherence — inconsistent radii/shadows/icon weights, unrelated surface treatments per section, tokens defined but bypassed. Evidence: a DESIGN.md with semantic tokens (color, type, spacing, radius, elevation, motion) that components actually consume, and a documented exception when something breaks the system.
• Color & material — unexplained purple/violet "tech" gradients, cyan glows on dark backgrounds, gradient headline text without purpose, glassmorphism everywhere, palette chosen from category stereotype alone. None of these are automatically forbidden — flag them when repeated, unsupported by the brand concept, or chosen as a reflex.
• Typography — same popular default typefaces everywhere, one weight pattern for every role, oversized display type for "editorial" feel, tiny tracked eyebrow labels, flat hierarchy, hero text that fails on mobile. Repair: select type from brand attributes and reading conditions, define role-based type tokens, test long words/localization/zoom.
• Copy & voice — "revolutionize/unlock/seamless/elevate," "not just X, but Y," empty claims ("built for the future"), repetitive cadence and em dashes, "Learn more" buttons with a predictable destination. Repair: concrete nouns/verbs, state what the product does for whom and why, remove undemonstrable claims.
• Imagery & iconography — generic gradient blobs standing in for the product, unlicensed stock hotlinks, AI imagery with anatomy/lighting inconsistencies, mixed icon families. Repair: authentic product imagery, purpose-built illustration, real screenshots, or honest placeholders — define an art-direction rule before generating assets.
• Motion & interaction — every element fades/rises on scroll, indiscriminate bounce easing, long entrance sequences, parallax with no semantic purpose, motion that ignores reduced-motion preferences. Repair: write a motion rationale, use a small tokenized duration/easing system, test keyboard/touch/reduced-motion/low-performance conditions.
• Usability & accessibility (blocking signals) — keyboard traps, missing focus states, insufficient contrast, unlabeled controls, tiny targets, hover-only information, broken zoom/reflow. Baseline: WCAG 2.2 AA for ordinary public-facing work.
• Responsive behavior — desktop grid collapsed into an undifferentiated stack, horizontal overflow, abrupt type-scale jumps, unchanged content priority on small screens. Repair: pick breakpoints from content failure (not device labels), test narrow/medium/wide plus zoom.
• Functional completeness — dead buttons/links, forms that can't submit or report state, tabs/menus/dialogs implemented only visually, missing loading/empty/error/disabled states. Repair: browser-based task tests from the brief, including edge states; never present incomplete controls as finished.
• Implementation quality — avoidable layout shift, unoptimized assets, excessive client JS for static content, repeated one-off CSS values, invalid semantics, console/hydration errors, performance sacrificed for decoration.
• Distinctiveness & category reflex — could someone guess the palette/typography/hero/components from the category alone (first-order reflex)? After banning the obvious cliché, did the result just move to the next fashionable alternative, e.g. dark-purple-glass → cream-editorial-serif (second-order reflex)? A design should feel plausible for this project, not inevitable from its category.

4. Cross-signal rule and severity

Classify the result as slop when: one blocking issue exists, three or more dimensions score 3, the same reflex repeats across multiple registers (color + typography + layout + copy), or both quick tests fail.

• Blocking (must fix before delivery): fabricated claims/facts, broken primary tasks, serious accessibility failures, deceptive controls, unusable responsive behavior, missing evidence for public claims, legal/safety-risk content.
• Major (strongly harms quality/distinctiveness): page-wide template reflex, incoherent design system, repetitive composition, unreadable typography, purposeless motion, generic copy dominating the experience.
• Minor (localized): one unnecessary pill, one weak label, one inconsistent radius, one overly long line, one generic section.