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.