english/.opencode/skills/frontend-design/references/anti-slop-rules.md

Anti-Slop Rules: Avoiding AI Design Fingerprints

These are patterns LLMs gravitate toward by default. Treat them as "overused AI defaults" — not absolute bans. Context matters. A SaaS dashboard and a personal blog have different rules.

Typography

Strongly prefer alternatives to:

• Inter — ubiquitous to the point of being invisible. Prefer Geist, Outfit, Cabinet Grotesk, Satoshi, Plus Jakarta Sans
• Roboto / Arial / Open Sans — browser defaults with no character
• Space Grotesk — overused in "tech startup" contexts

Alternatives: Variable fonts, display serifs (editorial), tight grotesks (minimal SaaS), humanist sans (consumer apps)

Avoid:

• Serif fonts on dashboards/data UIs — reserve for creative/editorial work
• Only Regular (400) + Bold (700) — use 500/600 for subtler hierarchy
• Orphaned words — use text-wrap: balance or text-wrap: pretty
• All-caps subheaders everywhere — try lowercase italic, sentence case, small-caps

Color

Strongly prefer alternatives to:

• AI purple/blue gradient aesthetic — the single most common LLM design fingerprint
• Pure #000000 — use off-black: #0a0a0a, #111, Zinc-950, or tinted dark
• Oversaturated accents (saturation > 80%) — desaturate to blend elegantly
• Gradient text on large headers — use sparingly, never on body copy

Principles:

• Max 1 accent color per project. Remove the rest.
• Stick to one gray family — never mix warm and cool grays
• Tint shadows to match background hue (dark navy shadow on navy bg), not pure black
• Flat design with zero texture feels sterile — add subtle noise/grain

Layout

Strongly prefer alternatives to:

• 3-column equal card layouts as feature rows — the most generic AI layout. Use 2-col zig-zag, asymmetric grid, horizontal scroll, or masonry
• Centered hero with centered H1 at high variance — try split-screen, left-aligned, or asymmetric whitespace
• h-screen for full-height sections — always use min-h-[100dvh] (iOS Safari viewport bug)
• Complex flexbox calc() math for grids — use CSS Grid instead

Avoid:

• Everything centered and symmetrical — break with offset margins or mixed aspect ratios
• Equal card heights forced by flexbox — allow variable heights or use masonry
• Uniform border-radius everywhere — vary: tighter on inner elements, softer on containers
• Missing max-width — always constrain to ~1200-1440px with auto margins

Content (The "Jane Doe" Effect)

Avoid:

• Generic names: "John Doe", "Jane Smith", "Sarah Chan" — use realistic, diverse names
• Round fake numbers: 99.99%, 50%, $100.00 — use organic data: 47.2%, $99.00
• Startup slop names: "Acme", "Nexus", "SmartFlow" — invent contextual brand names
• AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry" — write plain, specific language
• Lorem Ipsum — write real draft copy, even if rough
• Exclamation marks in success messages — be confident, not loud
• "Oops!" error messages — be direct: "Connection failed. Try again."
• Title Case On Every Single Header — use sentence case

Visual Effects

Strongly prefer alternatives to:

• Neon/outer glows (box-shadow glows) — use inner borders or subtle tinted shadows instead
• Custom mouse cursors — outdated, hurt performance and accessibility
• Standard ease-in-out / linear transitions — use spring physics or custom cubic-beziers

Allowed with care:

• Gradient text — sparingly on accent elements, never on body or large headers
• Glassmorphism — only when it goes beyond backdrop-blur (add inner border + refraction shadow)

Components

Strongly prefer alternatives to:

• Unstyled/default shadcn components — always customize radii, colors, and shadows
• Generic card (border + shadow + white bg) at high visual density — use spacing/dividers instead
• Standard Lucide/Feather icons as the only icon set — try Phosphor, Heroicons, or custom SVG for differentiation
• Rocketship for "Launch", shield for "Security" — avoid cliché icon metaphors
• 3-card carousel testimonials with dots — masonry wall, embedded posts, or single rotating quote
• Pill-shaped "New"/"Beta" badges everywhere — try square badges or plain text labels
• Avatar circles exclusively — try squircles or rounded squares

External Resources

Avoid:

• Unsplash direct links — use https://picsum.photos/seed/{name}/800/600 or SVG UI Avatars
• Same avatar image for multiple users — use unique assets
• Stock "diverse team" photos — use real photos, candid shots, or consistent illustration style

AI Tells: Quick Self-Check

Before shipping, scan for these instant giveaways:

• Inter font anywhere in the project?
• Purple or blue gradient as the main aesthetic?
• Three equal-width cards in a row?
• Centered hero text over a dark gradient image?
• "John Doe" or "Acme Corp" in any content?
• Round placeholder numbers (50%, $100)?
• "Elevate your workflow" or similar AI copy?
• Pure #000000 as background?
• Generic spinner (no skeleton loader)?
• No hover/active states on buttons?

If any box is checked, the design reads as AI-generated. Address before delivery.