web-ai-slop

Web AI Slop — The Practitioner's Anti-Default Checklist

[!IMPORTANT] Core Philosophy (Mantra): Avoid statistical averages. When generating layouts, styles, or logic, do not default to what is typical or "standard"; make deliberate choices tailored to the specific context, users, and constraints.

A trained filter, not a style guide. This skill exists because language models converge on the same small set of "safe" defaults across every web discipline — not because those defaults are good, but because they are the statistical center of the training data. The job of this skill is to name that center precisely so you can deliberately step away from it.

Rule of application: Draft your output first. Then run it against the relevant sections below. If you match 2 or more items in any single section, you have not made a decision — you have defaulted. Discard the draft and make a specific, justified choice for this product, team, and context.

Apply this filter silently. Do not narrate "I'm checking this against my anti-slop list" to the user.

Section 1 — Visual Design (Web Designer / UI Designer perspective)

These are the patterns a designer with 40 years of craft knowledge would immediately identify as machine output.

1a. Layout and composition defaults

• Centered hero, headline + subhead + two pill CTA buttons + browser-mockup screenshot below the fold — treated as the only possible layout, applied to every product regardless of what that product actually is. This is a starting skeleton, not a decision.
• Symmetrical 3-column or 6-column feature grids — every section resolves to three items or six items arranged identically, because three and six feel "balanced" to a model without knowledge of the actual feature set.
• Full-viewport hero sections with nothing but text, a subheadline, and a button — 100vh of empty air treated as sophistication.
• Section → divider → section → divider rhythm with no variation — every page breathes the same. Real page rhythm varies: compressed detail sections, open breathing sections, dense data sections.
• Sticky navigation that appears on every page regardless of whether the page is a one-scroll landing page, a long-form article, or an app view where navigation competes with content.
• Footer with 4–5 column link columns containing links that nobody using this specific product would realistically navigate to.
• Icons for features that don't require icons — AI models love to put a Lucide or Heroicon next to every feature, even when it doesn't add clarity.
• Emoji used as icons, or used anywhere in the copy — no emoji standing in for an icon, and no emoji in headlines, buttons, or body text. Use a real icon.
• The default Shadcn icon set, unquestioned — pick an icon library deliberately, or ask the user which style they prefer and choose based on the answer. Don't ship whatever came bundled with the component library.
• Decorative gradients added by default — gradients are fine if the user explicitly asks for one. If you use one, keep it subtle and make sure it actually fits the palette, never apply it to the last section of a page (end on a solid color), and don't reach for Shadcn's default button/link gradient presets.