---
name: design-taste-anti-slop
description: Detect and eliminate AI-generated design patterns: purple gradients, centered everything, cream backgrounds, and the sameness that makes interfaces feel machine-made.
---

# Design Taste & Anti-Slop

Override generic AI output with intentional, metric-driven taste

Override generic AI-generated output with intentional design decisions. The goal is not to look different for its own sake — it's to ensure every choice is a choice, not a default.

## The Slop Fingerprints

These patterns appear in >80% of AI-generated interfaces. If your design has three or more, it reads as machine-made.

### Visual Slop

- **Purple-blue gradient on white**: the single most common AI color scheme. If your hero has a purple-to-blue gradient text or background, you've defaulted.
- **Cream/sand/beige body background**: the saturated AI default of 2026. The whole warm-neutral band (OKLCH L 0.84–0.97, C < 0.06, hue 40–100) reads as cream/sand/paper regardless of what you call it. Token names like `--paper`, `--cream`, `--sand`, `--bone` are tells.
- **Inter/Roboto/system font stack**: the safe default. If you didn't choose a font, you defaulted.
- **Centered everything**: hero text centered, features centered, CTA centered. Every section with the same centered layout reads as template.
- **Card grid for everything**: features as cards, testimonials as cards, pricing as cards. Cards are the lazy answer — use them only when they're truly the best affordance. Nested cards are always wrong.
- **Rounded corners on everything**: `border-radius: 1rem` on every element. Sharp corners are a design choice too.
- **Generic stock-style imagery**: gradient blobs, abstract shapes, people smiling at laptops. Use real, subject-specific assets or nothing.
- **Identical section structure**: hero → features → testimonials → CTA. Every AI page follows this exact sequence.

### Structural Slop

- **Happy path only**: no loading states, no error states, no empty states, no edge cases. The interface only looks right when everything goes perfectly.
- **No focus states**: keyboard navigation is an afterthought. Tab through the page — if you can't see where focus is, it's slop.
- **Hardcoded values**: `#6366f1` instead of `var(--color-primary)`. Values that don't survive theming.
- **Lorem ipsum**: placeholder text that teaches nothing. Write real microcopy — it doubles as documentation.

### Typography Slop

- **Single weight for everything**: all regular, or all bold. No hierarchy.
- **Similar fonts paired together**: two geometric sans-serifs, two humanist sans-serifs. Pair on a contrast axis (serif + sans) or use one family in multiple weights.
- **Too many fonts**: 4+ font families is chaos, not variety. 2 families + 1 mono is the ceiling.
- **Font size without line-height**: `font-size: 2rem` without `line-height: 1.1` is a readability disaster.

## The Taste Test

Before showing work, run these checks:

### The Swap Test
If you swapped the typeface for the most common alternative, would anyone notice? The places where swapping wouldn't matter are the places you defaulted.

### The Squint Test
Blur your eyes. Can you still perceive hierarchy? If everything looks the same weight, there's no hierarchy.

### The Signature Test
Can you point to five specific elements where a distinctive design choice appears? If not, the design is generic.

### The Token Test
Read your CSS variables out loud. Do they sound like they belong to this product's world (`--ink`, `--parchment`, `--signal`) or like a template (`--gray-700`, `--surface-2`)?

### The Sameness Test
If another AI, given a similar prompt, would produce substantially the same output — you have failed. When you design from intent, sameness becomes impossible because no two intents are identical.

## Intent Before Implementation

Before touching code, answer these with specifics:

1. **Who is this human?** Not "users." The actual person. Where are they when they open this? What's on their mind?
2. **What must they accomplish?** Not "use the dashboard." The verb. Grade these submissions. Find the broken deployment.
3. **What should this feel like?** "Clean and modern" means nothing. Warm like a notebook? Cold like a terminal? Dense like a trading floor?
4. **What is the signature?** One element — visual, structural, or interaction — that could only exist for THIS product.

If you cannot answer these with specifics, stop. Ask the user. Do not guess. Do not default.

## Color Decisions

### Avoid Warmth-by-Default
"Warmth" in a brand is carried by accent + typography + imagery, not by body background. If the brief says "warm, traditional" — do NOT translate that into a near-white warm-tinted bg. Pick:
- A saturated brand color as the body (terracotta, oxblood, deep ochre, near-black).
- A true off-white at chroma 0 (or chroma toward the brand's own hue, not toward warmth-by-default).
- A darker mid-tone tinted neutral that's clearly the brand's own.

### Tinted Neutrals
Add 0.005–0.015 chroma toward the brand's hue. Don't default-tint toward warm or cool "because the brand feels that way" — that's the cross-project monoculture move.

### Committed Color
- **Committed**: one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
- **Full palette**: 3–4 named roles, each used deliberately. Brand campaigns; product data viz.
- **Drenched**: the surface IS the color. Brand heroes, campaign pages.

## Typography Decisions

### The Pairing Rule
Pair on a contrast axis:
- Serif display + sans body (editorial)
- Geometric sans display + humanist sans body (modern)
- One family, multiple weights (restrained)

Never pair similar-within-category (two geometric sans-serifs).

### The Hierarchy Rule
Every heading level should be distinguishable by at least TWO properties:
- Size + weight
- Size + color
- Weight + letter-spacing
- Size + font family

If only one property changes, the hierarchy is too subtle.

## Layout Decisions

### Break the Grid (Intentionally)
- Asymmetric layouts over centered symmetry.
- Overlapping elements create depth.
- Grid-breaking elements (a wide image in a narrow column) create visual interest.
- Generous negative space OR controlled density — pick one per page, don't default to medium.

### Section Variety
Every section should have a different structural pattern:
- Hero: full-bleed image + overlaid text
- Features: alternating image/text rows (not a card grid)
- Stats: horizontal number strip
- Testimonials: single large quote, not three cards
- CTA: full-width colored block

## The Mandate

**Every choice must be a choice.** For every decision, you must be able to explain WHY. If your answer is "it's common" or "it's clean" or "it works" — you haven't chosen. You've defaulted. Defaults are invisible. Invisible choices compound into generic output.

**Before showing the user, look at what you made.** Ask yourself: "If they said this lacks craft, what would they mean?" That thing you just thought of — fix it first.