# De Slopify Audit

> Scan a site for AI-slop defaults and replace them with premium patterns. Detects generic giveaways (Inter everywhere,

- Skill: `automattic/de-slopify-audit` (Agent Skill)
- Install (CLI): `npx skillmds@latest add automattic/de-slopify-audit`
- Raw SKILL.md: https://api.skillmd.com/api/skills/automattic/de-slopify-audit/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Security
- Author: Automattic (https://skillmd.com/u/automattic)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/automattic/de-slopify-audit

---


# De-Slopify Audit

A checklist-driven audit to strip AI-slop tells from a site and replace them with premium patterns. Extracted from comparing 12 VC-funded case studies against common AI-generated defaults.

## When to invoke

- User says: "it looks like ChatGPT/Claude/v0 generated this"
- Site is ready-to-ship but feels generic
- Pre-launch final review
- Design review comparing against references
- When someone else sent you a "why does this look AI-made?" question

## The 17-point audit

Run through each point. For every item marked ❌, apply the fix.

### 1. Background color
- ❌ **Slop**: `background: #ffffff` or `background: #f9fafb`
- ✅ **Fix**: Warm off-white `#fafafa`, `#f7f7f5`, `#f5f2f0`, or `#fbfaf9`
- See: `soft-gradient-dreamy` skill, Rule 1

### 2. Primary typeface
- ❌ **Slop**: `font-family: Inter, sans-serif` on every element
- ✅ **Fix**: Distinct display font + neutral body. PP Neue Montreal / Geist / Söhne / Instrument Serif + Inter/Geist body
- See: `typography-that-sells`, Rule 1

### 3. Display letter-spacing
- ❌ **Slop**: `h1 { font-size: 64px; }` with no letter-spacing
- ✅ **Fix**: `letter-spacing: -0.035em` minimum on 48px+ headings; use px (`-0.46px`) for foundry precision
- See: `typography-that-sells`, Rule 2

### 4. Display line-height
- ❌ **Slop**: `line-height: 1.5` on 60px headings
- ✅ **Fix**: `line-height: 1.0-1.1` on display, `1.3-1.5` on body
- See: `typography-that-sells`, Rule 3

### 5. Body font-weight
- ❌ **Slop**: `font-weight: 400` or `500` on body
- ✅ **Fix**: `font-weight: 300` body paired with 500-600 display — maximum elegance contrast
- See: `typography-that-sells`, Rule 4

### 6. Shadow color
- ❌ **Slop**: `box-shadow: 0 4px 6px rgba(0,0,0,0.1)` — neutral black
- ✅ **Fix**: Tint shadow to match theme. Warm → plum `rgba(45,32,50,..)` / rose `rgba(100,63,63,..)`. Cool → blue-gray `rgba(34,42,53,..)`. Match to your palette
- See: `soft-gradient-dreamy`, Rule 2

### 7. Shadow layering
- ❌ **Slop**: single-layer `shadow-lg` Tailwind default
- ✅ **Fix**: 3-8 layer stack: ring + short contact + medium ambient + long ambient + inset highlights (top & bottom)
- See: `soft-gradient-dreamy`, Rule 3

### 8. Hero gradient
- ❌ **Slop**: `linear-gradient(135deg, #667eea, #764ba2)` purple→blue diagonal
- ✅ **Fix**: 3+ stop warm gradient at a specific angle (70°, 78°, 145°, 195°). Copy from Incident/Cohere/AngelList
- See: `soft-gradient-dreamy`, Rule 4

### 9. Border radius
- ❌ **Slop**: `rounded-md` (8px) on every card, button, input, image
- ✅ **Fix**: Pick a radius architecture: binary (0/pill), asymmetric interlocking, or per-element variety (pill buttons + 12-20px cards + 2px chips)
- See: `spatial-rhythm-and-whitespace`, Rule 1

### 10. Borders
- ❌ **Slop**: `border: 1px solid #e5e7eb`
- ✅ **Fix**: Hairline at 4-10% alpha of theme-tinted dark color. `rgba(0,0,0,0.06)` minimum, or `rgba(12,38,77,0.04)` navy-tinted
- See: `spatial-rhythm-and-whitespace`, Rule 6

### 11. Section padding
- ❌ **Slop**: `py-12` (48px) or `py-16` (64px) on every section
- ✅ **Fix**: 80-160px vertical section padding. Use `py-24` minimum; `py-32` for hero; `py-40` for editorial
- See: `spatial-rhythm-and-whitespace`, Rule 2

### 12. Transition
- ❌ **Slop**: `transition: all 300ms ease-in-out`
- ✅ **Fix**: Named cubic-bezier (`cubic-bezier(.215,.61,.355,1)` or `cubic-bezier(.4,0,.2,1)`). Duration per interaction: 75ms press, 200ms hover, 600ms reveal
- See: `motion-and-micro-interactions`, Rules 1-2

### 13. Button hover
- ❌ **Slop**: `hover:bg-blue-600` color-only hover
- ✅ **Fix**: Add `:active { transform: scale(0.95); }` for press feedback; add shadow delta; orchestrate child translations
- See: `motion-and-micro-interactions`, Rule 3

### 14. Card hover
- ❌ **Slop**: `hover:translate-y-[-4px] hover:shadow-xl`
- ✅ **Fix**: Grow the shadow ring weight (8% → 10% alpha) and deepen contact shadows; keep the card stationary
- See: `motion-and-micro-interactions`, Rule 5

### 15. Icons
- ❌ **Slop**: Lucide everything, 2px stroke, defaults
- ✅ **Fix**: Phosphor (with Bold/Fill weights) OR custom inline SVG OR icon font; 1.5px stroke standard; rounded caps
- See case studies: Outseta (Phosphor), Cohere (icon font), Cal (custom 1.5)

### 16. Gradient on buttons
- ❌ **Slop**: Primary button has a gradient background
- ✅ **Fix**: Flat solid color for button background + rich multi-layer shadow for depth. Gradient lives elsewhere (hero, art plates, text-clip)
- See: Amplemarket, Cal, Cohere — all flat-color buttons with stacked shadows

### 17. Eyebrow labels
- ❌ **Slop**: `<span class="text-xs uppercase">Features</span>`
- ✅ **Fix**: Monospace font, wider positive tracking (0.1-0.2em), optionally color-muted
```css
.eyebrow {
  font-family: 'Geist Mono', 'Fragment Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
```

## Quick-scan grep commands

Run these against your codebase to find slop patterns:

```bash
# Find pure-white backgrounds
grep -rn "background.*#fff\b\|#ffffff\|bg-white\b" --include="*.{css,tsx,jsx,html,vue,svelte}" .

# Find generic ease-in-out 300ms
grep -rn "ease-in-out\|duration-300\|0\.3s ease" --include="*.{css,tsx,jsx}" .

# Find rounded-md monotone
grep -rn "rounded-md\|border-radius:\s*8px" --include="*.{css,tsx,jsx,html}" .

# Find the purple→blue gradient
grep -rn "#667eea\|#764ba2\|from-purple.*to-blue\|from-blue.*to-purple" --include="*.{css,tsx,jsx}" .

# Find single-layer shadows
grep -rn "box-shadow:\s*0 4px 6px\|shadow-md\|shadow-lg" --include="*.{css,tsx,jsx}" .

# Find Inter everywhere
grep -rn "font-family.*Inter\|font-sans" --include="*.{css,tsx,jsx}" . | wc -l

# Find translateY hover cards
grep -rn "hover:.*translate-y\|hover:-translate" --include="*.{css,tsx,jsx}" .

# Find 48/64px section padding
grep -rn "py-12\|py-16\|padding-block:\s*48\|padding-block:\s*64" --include="*.{css,tsx,jsx,html}" .

# Find plain black shadows
grep -rn "rgba(0,\s*0,\s*0," --include="*.{css,tsx,jsx}" .

# Find color-only button hover
grep -rn "hover:bg-\|hover:background" --include="*.{css,tsx,jsx}" .
```

## Audit report template

Run through the site, mark each with ✅ / ⚠️ / ❌:

```
## De-Slopify Audit: <site-name>

Background:            [ ]   (if ❌: swap #fff → #fafafa/#f7f7f5)
Typeface:              [ ]   (if ❌: display font + body font split)
Display tracking:      [ ]   (if ❌: -0.035em minimum)
Display line-height:   [ ]   (if ❌: ≤1.1 on display)
Body weight:           [ ]   (if ❌: test weight 300)
Shadow tint:           [ ]   (if ❌: tint to theme)
Shadow layering:       [ ]   (if ❌: 3-8 layer stack)
Hero gradient:         [ ]   (if ❌: 3+ stop warm, non-135° angle)
Border radius system:  [ ]   (if ❌: pick architecture)
Border colors:         [ ]   (if ❌: hairline at 4-10% alpha)
Section padding:       [ ]   (if ❌: 80-160px)
Transition easing:     [ ]   (if ❌: named cubic-bezier)
Transition duration:   [ ]   (if ❌: per-interaction durations)
Button hover:          [ ]   (if ❌: add :active scale, child orchestration)
Card hover:            [ ]   (if ❌: shadow growth, no translateY)
Icon style:            [ ]   (if ❌: 1.5px stroke, not Lucide defaults)
Button background:     [ ]   (if ❌: flat color + rich shadow)
Eyebrow labels:        [ ]   (if ❌: mono + wide tracking)

Score: X / 18
```

## The 5 most damaging AI tells (fix these first)

If you can only fix 5 things, fix these — they move the design from "AI" to "designed":

1. **Background color** — swap `#fff` → `#fafafa`/`#f7f7f5` (60 seconds, massive impact)
2. **Display font** — add ONE distinctive typeface for headings
3. **Tracking + line-height on h1/h2** — `-0.035em / line-height: 1.0` (huge perception shift)
4. **Shadow tint + layering** — drop in a 5-layer tinted shadow system
5. **Button :active state** — add `scale(0.95)` press feedback

## Before/after snippets

### Before (AI slop)
```css
body { background: #ffffff; font-family: Inter, sans-serif; color: #333; }
h1 { font-size: 60px; font-weight: 700; }
.btn { background: #3b82f6; color: white; padding: 12px 24px; border-radius: 8px;
       transition: all 0.3s ease-in-out; }
.btn:hover { background: #2563eb; }
.card { background: white; border: 1px solid #e5e7eb; border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 24px; }
.hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 64px 0; }
```

### After (de-slopified)
```css
body {
  background: #f7f7f5;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  color: #222221;
}
h1 {
  font-family: 'PP Neue Montreal', 'Söhne', system-ui, sans-serif;
  font-size: clamp(3rem, 2rem + 5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.035em;
}
.btn {
  background: #222221;
  color: #fff;
  padding: 12px 20px 13px 24px;
  border-radius: 9999px;
  font-weight: 500;
  box-shadow:
    0 1px 2px rgba(45,32,50,0.05),
    inset 0 10px 24px -10px rgba(255,255,255,0.4);
  transition: all 75ms ease-in;
}
.btn:hover  { transition-duration: 200ms; }
.btn:active { transform: scale(0.97); box-shadow: 0 1px 2px rgba(45,32,50,0.05); }
.card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow:
    0 0 0 1px rgba(45,32,50,0.06),
    0 2px 6px -2px rgba(45,32,50,0.08),
    0 16px 40px -8px rgba(45,32,50,0.06),
    inset 0 .5px .5px rgba(255,255,255,0.4);
  transition: box-shadow 200ms cubic-bezier(.4,0,.2,1);
}
.card:hover { box-shadow:
    0 0 0 1px rgba(45,32,50,0.10),
    0 4px 12px -2px rgba(45,32,50,0.10),
    0 24px 56px -12px rgba(45,32,50,0.10),
    inset 0 .5px .5px rgba(255,255,255,0.4); }
.hero {
  background:
    linear-gradient(180deg, rgba(224,246,255,0.1) 0%, transparent 25%,
                            transparent 90%, rgba(224,246,255,0.1) 100%),
    #f7f7f5;
  padding-block: 140px 96px;
}
```

## Related skills

After running this audit, escalate to:
- **`typography-that-sells`** for deep type work
- **`soft-gradient-dreamy`** for shadow/gradient systems
- **`motion-and-micro-interactions`** for animation
- **`spatial-rhythm-and-whitespace`** for layout
- **`add-signature-moment`** once the baseline is polished