anti-slop-design

Anti-Slop Design Skill ("Taste Layer")

Build UIs that look like a senior designer made them, not a language model. This skill enforces category-aware design thinking, concrete palettes, and a pre-delivery quality gate.

When to Use

• Building any UI: landing page, dashboard, app screen, marketing site
• User asks to "design", "build a page", "create a component", or "make it look good"
• User asks to "create a design system" or "set up design tokens"
• Reviewing or improving existing UI code

For full pages or multi-section layouts, also read reference.md in this skill directory. It contains section anatomy patterns, extended slop catalog, microcopy examples, stack-specific notes, common mistakes per category, CSS token starters, and a mobile-first checklist. Skip it for single-component work.

---

Step 0: Read Design Context

Before designing anything, inspect the project:

1. Check the package manifest for styling approach (Tailwind, CSS Modules, styled-components, vanilla CSS).
2. Check for existing design tokens: tailwind.config.*, theme.ts, CSS variable files, globals.css.
3. Check for existing font imports (Google Fonts @import, next/font, @font-face).
4. Check for an existing icon library (lucide-react, heroicons, phosphor, etc.).
5. If a design system already exists, respect it. Extend, do not replace.

Skip this step only for standalone demos or canvases with no project context.

---

Step 1: Design Thinking

Before writing any UI code, commit to a direction. Never skip this.

1. Pick the register. Every surface is brand (marketing, landing, campaign, portfolio -- design IS the product) or product (app UI, dashboard, admin, tool -- design SERVES the task). Brand surfaces earn drama; product surfaces earn clarity, restraint, and density control. Two common slop sources: brand drama applied to product UI, and timid product defaults applied to brand pages.
2. Identify the category. Match the project to a row in the Category Design Guide below.
3. Pick the tone. Use the category's recommended tone or choose a bold alternative -- never "modern and clean" (that is generic). Tone vocabulary to draw from: brutally minimal, maximalist, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, industrial/utilitarian.
4. Choose the theme from a scene, not a category. Dark vs. light is never a default. Write one sentence of physical scene -- who uses this, where, under what ambient light, in what mood -- and let it force the answer. "SRE glancing at incident severity at 2am in a dim room" forces dark; "the category is observability" forces nothing.
5. Pick a color strategy (see Color Strategy below) before picking any hex values.
6. State the memorable thing. What is the ONE element someone will remember? Commit to it.
7. Vary across generations. If your last output was dark editorial, the next must differ -- unless the user explicitly requests consistency.

Intentionality over intensity. Bold maximalism and refined minimalism both work; the only failure is timid genericness. Match implementation complexity to the vision: maximalist directions need elaborate code and orchestrated effects; minimal directions need precision in spacing, type, and subtle detail. Restraint executed well is a strong direction, not a missing one.

---

Color Strategy (commit before picking hexes)

Four steps on a commitment axis -- choose one deliberately per surface:

The accent-counting rule in the Slop Second Pass applies to Restrained only -- Committed, Full palette, and Drenched exceed it on purpose. Do not collapse every design to Restrained by reflex, and do not "decorate" a Restrained product surface into Committed by accident.

Mechanics: prefer OKLCH when the stack allows. Tint every neutral toward the brand hue (chroma 0.005–0.01 is enough -- never pure gray). Reduce chroma as lightness approaches 0 or 100; high chroma at the extremes looks garish.

---

Banned Patterns ("AI Slop")

These are the statistical median of AI training data. Never generate them:

• Three-column card grids with centered icons and centered text
• Indigo/purple gradients on buttons or text (unless explicitly requested)
• Thick gray borders and over-boxed layouts
• Emoji as UI icons
• Inter, Roboto, Arial, system-ui, Space Grotesk as default fonts
• Empty hero sections with no imagery or decorative elements
• Generic "Lorem ipsum" placeholder text
• Colored-circle-initial avatars
• 5-star yellow rating widgets
• Cookie-cutter components with no context-specific character
• Side-stripe accent borders (border-left: 4px solid on cards, callouts, alerts) -- use full borders, background tints, or a leading icon instead
• Gradient text (background-clip: text over a gradient) -- emphasize with weight, size, or a solid color
• The hero-metric template (big number + small label + gradient accent) as the only dashboard idea
• Nested cards (a card inside a card) -- flatten, or separate with background shifts
• Modal as the first thought -- exhaust inline editing and progressive disclosure before reaching for a dialog

Secondary slop signals (also avoid)

These patterns are nearly as common as the list above; treat them as soft bans unless the user explicitly wants them.

• Glass stacks: multiple nested backdrop-blur panels filling the page — reads as template UI; use glass for one focal layer only.
• Blob clusters: three overlapping blurred circles (purple/pink/cyan) behind every hero — substitute category-specific texture, photography, or one intentional mesh.
• Fake social proof: "Trusted by" with placeholder logos, repeated generic company names, or SVG boxes labeled "Logo".
• Abstract 3D illustration overload: same glossy shapes on every SaaS landing — prefer product screenshots, UI chrome, or category-appropriate photography.
• Identical section rhythm: every block is py-24 + headline + subtitle + grid — vary vertical rhythm, full-bleed breaks, or editorial pulls.
• Motion soup: everything fades in on scroll with the same delay — stagger meaningfully or reserve motion for one hero moment.
• Generic microcopy: "Welcome!", "No data available", "Something went wrong" with no next step — write voice-specific, actionable copy (see reference.md).

---

Multimodal Design Parity (M3)

When the user provides a design mock, screenshot, or reference image, treat the image as the contract for the build. On M3 the runtime can read the image directly; do not paraphrase from a guessed description.

• Read the image file in the current session and reference the exact path in your closeout.
• Cite the region you are matching (hero block, top-right nav, footer) when reviewing deviations — generic "looks right" is not a citation.
• After the build, re-read the resulting state (post-change screenshot/frame) and compare against the reference; state "visually matched" only when you actually opened both.
• If the reference is a low-fidelity wireframe, design for the wireframe's intent, not its pixel values; if the reference is a high-fidelity mock, match the values.
• For multi-image sets (desktop, tablet, mobile mockups), re-read each before claiming a responsive match.

Stack And Kit Integration

When the project already uses shadcn/ui, Radix, MUI, or similar:

1. Do not replace the component library for marketing polish — map the Category Design Guide to semantic tokens (--primary, --background, --muted, radius) so primitives stay accessible.
2. Override at theme / CSS variable layer first; only fork components when layout truly demands it.
3. For Tailwind v4, prefer @theme or token files that align with existing globals.css — avoid parallel conflicting palettes.

---

Copy, Empty, And Error States

• Headlines and CTAs should sound like this product, not any SaaS: ban "Empower your workflow", "Unlock potential", "Streamline operations" unless ironic.
• Empty states: explain what will appear, one primary action, optional illustration that matches category — not a gray box and "Nothing here".
• Errors: what failed, what the user can do, support or retry — not only red text "Error".
• Loading: prefer skeleton shapes that match final layout; avoid infinite shimmer on unrelated blocks.

---

Category Design Guide

Match the project to a category. Use the palette, fonts, and patterns as your starting point -- then push further.

Category-reflex check. These tables are a floor, not a ceiling. If someone could guess your palette from the category name alone (healthcare → teal on white, fintech → navy + gold, gaming → neon on black), you have reproduced the training-data median -- the polished version of slop. Run the scene sentence, the tone choice, and any brand inputs against the table until the domain no longer fully predicts the design.

SaaS / Developer Tools

E-commerce / Retail

Fintech / Banking

Healthcare / Medical

Portfolio / Personal

Blog / Editorial / Media

Restaurant / Food & Beverage

Real Estate / Property

Education / EdTech

Agency / Creative Studio

Legal / Corporate / Professional Services

Entertainment / Gaming

Non-profit / Charity

Travel / Hospitality

Fitness / Wellness / Beauty

---

The Taste Layer Principles

These apply universally across all categories.

Typography

• Distinctive font pairings mandatory -- use the category guide as starting point.
• Hierarchy through weight and color, not just size. De-emphasize secondary text with tinted muted colors, not smaller-and-black.
• Keep ≥1.25 ratio between adjacent scale steps -- flat scales read as no hierarchy at all.
• Tighten letter-spacing as display size grows (-0.01em to -0.04em above ~32px); never negative-track body text.
• Cap body measure at 65–75ch regardless of category.
• Left-align body text. Center-align only for short hero headlines.

Color

• Cohesive palette via CSS variables. One dominant + one sharp accent beats an evenly-distributed rainbow.
• Tinted grays (slate, zinc, stone) that complement the primary. Never pure neutral gray.
• Dark mode: rich deep colors (#0A0A0B, #0f172a), not #000. Light mode: warm/cool off-whites, not #FFF.

Spacing and Layout

• Start with too much whitespace, then tighten. Strict 4px-based spacing scale.
• Vary spacing for rhythm -- identical padding on every section is monotony, not consistency.
• Integrated over boxed: elements breathe on the canvas, not everything in cards. Cards are the lazy default -- use them only when grouping is truly the right affordance, and never nest them.
• Spatial composition is a tool: asymmetry, overlap, diagonal flow, and one deliberate grid-breaking element beat a perfectly safe stack of centered blocks (brand surfaces especially).
• All sections share the same max-width and horizontal padding -- edges align hero to footer.
• Hero: height: 100svh with symmetric vertical padding for true optical centering.

Motion

• Orchestrated page entrance with staggered animation-delay reveals.
• IntersectionObserver for scroll-triggered fade-up/slide-in below the fold.
• Animate only transform and opacity -- never layout properties (width, height, top, margin).
• Ease out with exponential curves (ease-out-quart/quint/expo). No bounce or elastic in product UI; reserve spring physics for deliberately playful brand moments.
• Hover states that surprise: scale, color shift, shadow, underline. Not just opacity.
• Always respect prefers-reduced-motion.

Backgrounds and Atmosphere

• Match to category: gradient meshes for luxury, noise/grain for tactile premium, dot-grids for technical, organic shapes for wellness.
• Glassmorphism only when it serves the design, not as a default.

Borders and Depth

• Separate with whitespace or subtle background shifts. Use ring-1 ring-black/5 for subtle edges.
• Shadows only for true elevation (dropdowns, floating nav). No decorative drop shadows.

Icons

• Real SVG only: Lucide, Heroicons, Phosphor, Hugeicons. Never emoji.
• Style matches tone: stroke for minimal, filled for bold, duotone for marketing.
• Sizes: 16-20px inline, 24px nav, 32-48px feature callouts.

Imagery

• Hero sections never visually empty: real photography (Unsplash, Pexels), product screenshots, or decorative SVG.
• Real headshots for testimonials, not colored-circle initials.
• When photography unavailable: animated SVG shapes, gradient blobs, or geometric patterns.

---

Design System Generation

When asked to create a design system or set up tokens, output this structure:

Master Tokens

Category: [matched from Category Design Guide]
Tone: [one sentence]

Palette (CSS variables):
  --color-primary:    [hex]
  --color-secondary:  [hex]
  --color-accent:     [hex]
  --color-surface:    [hex]
  --color-surface-alt:[hex]
  --color-text:       [hex]
  --color-text-muted: [hex]
  --color-success:    [hex]
  --color-warning:    [hex]
  --color-error:      [hex]

Typography:
  --font-display: '[Display Font]', [fallback]
  --font-body:    '[Body Font]', [fallback]
  --font-mono:    '[Mono Font]', monospace  (if needed)

  Scale: 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 48 / 60 / 72

Spacing (4px base):
  4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96

Border radius:
  --radius-sm: 4px
  --radius-md: 8px
  --radius-lg: 16px
  --radius-full: 9999px

Shadows:
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05)
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08)
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12)

Page Overrides (Optional)

When a specific page deviates from the master (e.g., a marketing landing page within a SaaS dashboard), document the override:

Page: [name]
Overrides:
  --color-surface: [different hex]
  Tone shift: [e.g., "more playful than the dashboard default"]
  Additional font: [if needed]

---

Domain-Specific Patterns

---

Workflow

1. READ    -> Inspect project: styling approach, existing tokens, fonts, icons
2. MATCH   -> Register (brand vs product) + category from the Category Design Guide
3. COMMIT  -> Scene sentence (theme) + color strategy + tone + memorable element
4. BUILD   -> Apply category palette, fonts, and patterns + Taste Layer principles
5. CHECK   -> Run Pre-Delivery Checklist + Slop second pass before presenting

---

Slop Second Pass (before ship)

After the main checklist, scan once for:

1. Sameness: If two sections could swap places with no loss of meaning, differentiate structure or merge them.
2. Proof: At least one place shows real product, real data shape, or real imagery — not only abstract shapes and lorem.
3. One accent rule (Restrained strategy only): Count accent-color uses; if more than three competing "look at me" elements per viewport, demote some to neutral. For Committed/Full/Drenched strategies, check instead that the color commitment is consistent, not accidental.
4. Category reflex: Could someone guess the palette from the category name alone? If yes, push at least one axis (theme, accent, type) off the median.
5. Touch: Every primary action on mobile is reachable and ≥44px; no hover-only affordances.
6. Voice: Read headings aloud — if they could apply to any competitor, rewrite.

---

Pre-Delivery Checklist

Before presenting any UI code, verify every item:

[ ] Design thinking completed (register + category identified, scene sentence written, color strategy + tone stated)
[ ] No banned patterns (Inter, purple gradients, emoji icons, empty heroes, 3-col card grids)
[ ] No side-stripe borders, gradient text, nested cards, or reflexive modals
[ ] Font pairing is distinctive and matches category
[ ] Icons from real SVG library (Lucide, Heroicons, Phosphor)
[ ] Hero and feature areas have imagery or decorative fills
[ ] Color palette uses CSS variables, tinted grays, no pure #000/#FFF
[ ] Sections share consistent max-width and padding
[ ] Responsive: tested mentally at 375px, 768px, 1024px, 1440px
[ ] Motion animates only transform/opacity with ease-out curves; prefers-reduced-motion respected
[ ] Accessibility: 4.5:1 contrast, visible focus states, form labels
[ ] Cursor pointer on all clickable elements
[ ] Hover states provide clear visual feedback (not just opacity)
[ ] No secondary slop: blob trio hero, stacked glass panels, fake logo wall, motion soup
[ ] If shadcn/MUI/Radix: colors/radius mapped to tokens, components not rewritten unnecessarily
[ ] Empty / error / loading states are specific and actionable, not generic placeholders
[ ] Slop second pass completed (sameness, proof, accent discipline, category reflex, touch, voice)

---

Before / After Examples

Before: "AI Slop"

<div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; font-family: Inter, sans-serif;">
  <h3 style="font-size: 20px; font-weight: bold; color: black;">Plan your project</h3>
  <p style="font-size: 14px; color: #374151; margin-top: 8px;">Use our tool to manage tasks.</p>
  <button style="margin-top: 16px; background: linear-gradient(to right, #8b5cf6, #6366f1); color: white; padding: 8px 16px; border-radius: 6px;">
    Get Started
  </button>
</div>

After: Category-Aware (SaaS)

<div style="position: relative; overflow: hidden; border-radius: 16px; background: #f8fafc;
  outline: 1px solid rgba(15,23,42,0.06); padding: 32px; transition: box-shadow 0.3s;">
  <!-- Subtle radial glow from category accent (teal) -->
  <div style="position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 20%, rgba(20,184,166,0.06), transparent 60%);"></div>
  <div style="position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;">
    <span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
      font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
      color: #14b8a6; font-family: 'DM Sans', sans-serif;">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
        stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/>
        <rect x="14" y="3" width="7" height="7" rx="1"/>
        <rect x="3" y="14" width="7" height="7" rx="1"/>
        <rect x="14" y="14" width="7" height="7" rx="1"/></svg>
      Project Management
    </span>
    <h3 style="font-size: 20px; font-weight: 600; letter-spacing: -0.025em;
      color: #0f172a; font-family: 'Plus Jakarta Sans', sans-serif;">Plan your project</h3>
    <p style="font-size: 16px; line-height: 1.6; color: #64748b; font-family: 'DM Sans', sans-serif;">
      Bring tasks, docs, and team communication into one place.</p>
    <button style="display: inline-flex; height: 40px; align-items: center; border-radius: 8px;
      background: #0f172a; padding: 0 24px; font-size: 14px; font-weight: 500; color: #f8fafc;
      cursor: pointer; transition: background 0.2s; font-family: 'DM Sans', sans-serif;">
      Get Started</button>
  </div>
</div>

---

Quick Reference

READ    -> package.json, tailwind.config, existing fonts/icons
MATCH   -> Register (brand vs product) + Category Design Guide table
COMMIT  -> Scene sentence + color strategy + tone + memorable element
BUILD   -> Category palette + fonts + Taste Layer principles
CHECK   -> Pre-Delivery Checklist (no slop, no banned patterns)

BANNED  -> Inter, Roboto, Arial, purple gradients, emoji icons,
           empty heroes, 3-col card grids, thick gray borders,
           colored-circle avatars, pure #000/#FFF,
           blob trio heroes, nested glass, fake logos, generic SaaS copy,
           side-stripe borders, gradient text, nested cards,
           hero-metric template, modal-as-first-thought

ALWAYS  -> Real SVG icons, tinted grays (toward brand hue), CSS variables,
           responsive, prefers-reduced-motion, 4.5:1 contrast, cursor pointer,
           consistent max-width, distinctive font pairing, ≥1.25 type ratio,
           transform/opacity-only motion with ease-out curves,
           tokens over ripping UI kits, second-pass slop scan