Unslop pass

---
name: unslop-pass
description: Strip the tells of AI-generated UI and put a point of view back in. Load after an agent builds a page or component, or when a screen "could belong to anyone". Not for polish, accessibility, or motion timing; run those after.
---

# Unslop pass

A generated screen is fifty median choices made at once. None is wrong alone. Together they are a watermark. This pass removes them in a fixed order and ends with one choice a competitor could not copy.

## Order

1. **Squint.** Could this screen belong to any of ten thousand products? List what ties it to this one. If the answer is "the logo", everything else is under review.
2. **Subtract.** Walk every element: icon, line, badge, caption, container, word. Ask "what breaks if this is gone?" Delete anything that answers "nothing". Run the walk twice; deletions expose each other.
3. **Sweep** in this order: colour, type, layout, decoration, icons, copy, motion. Colour first because it is the loudest tell.
4. **Add one point of view.** A palette derived from the product, one distinctive type choice, a real screenshot, content-driven asymmetry, or one repeated signature. One is enough.
5. **Report** as a single Before / After / Why table, ranked by how much each item hurts. Then make the edits.

## Rules

Colour
- No indigo, violet or purple utility classes unless the palette was derived from the product. `bg-indigo-500` is the single strongest tell. Use the project's accent tokens.
- One gradient per screen with a job, or none. Gradient text is never the job.
- Dark-by-default with glowing borders is a costume. Dark mode is chosen from where the product is used.

Type
- No `bg-clip-text text-transparent` headlines. Solid colour, real contrast.
- One distinctive type decision per project. Inter at `font-black tracking-tight`, centred, is the absence of one.

Layout
- Pill badge, centred headline, subhead, two buttons, orb behind: the hero every model builds. Lead with the product instead. Left-align if the copy is long. Cut the badge unless there is an announcement.
- Three equal cards with icon, heading, two lines: the layout was chosen before the content. Let unequal features take unequal space. Bento is the same tell with better kerning.

Decoration
- `backdrop-blur` only when something meaningful sits behind the surface.
- Nothing floats behind the hero. Delete blurred orbs and blobs; if the background then feels empty, the foreground is too weak.
- One depth cue per surface: border or shadow, not border, shadow, ring and gradient.

Icons
- Emoji are not icons. One icon library, one stroke width, or no icons.
- No sparkle badge on AI features. If it matters, the copy says what it does.

Proof
- No invented numbers, quotes or logo walls. Real, or cut. An empty spot beats fake proof.

Copy
- A headline a competitor could paste unchanged is slop. Sentence case. Specific verbs.

Motion
- No fade-in-up on every section. No `hover:scale-105` on cards that are not links. No `transition: all`.

## Exceptions

- A brand whose palette genuinely is purple keeps it. The rule is against unchosen purple.
- A hero with a real announcement keeps its badge.
- Glass over a photo or video is glass. Keep it.

## Report format

| Before | After | Why |
| --- | --- | --- |

One row per issue. "Why" is the one-line reason a designer would give. Close with the single choice that now makes the screen this product's.

## Never

- Never add "personality effects" to compensate for deletions. Deleting is the pass; adding is re-slopping.
- Never restyle an element you are about to delete. Subtract first.
- Never run this on a screen whose layout is still undecided. Prototype first.

#!/usr/bin/env sh
# Grep for the mechanical tells of generated UI. Usage: sh scripts/tells.sh [dir]
# Prints file:line for each hit. A hit is a question, not a verdict.
DIR="${1:-.}"
INC='--include=*.tsx --include=*.jsx --include=*.ts --include=*.vue --include=*.svelte --include=*.html --include=*.css'

section() { printf '\n== %s\n' "$1"; }
hits() { grep -rnE $INC -e "$1" "$DIR" 2>/dev/null | grep -v node_modules | head -40; }

section "Unchosen purple (indigo / violet / purple utilities)"
hits '\b(bg|text|from|to|via|border|ring)-(indigo|violet|purple)-[0-9]{2,3}\b'

section "Gradient text"
hits 'bg-clip-text|background-clip: ?text'

section "Glass with nothing behind it"
hits 'backdrop-blur|backdrop-filter'

section "Orbs and blobs"
hits 'blur-(2xl|3xl)|animate-blob|mix-blend-multiply'

section "transition: all"
hits 'transition-all|transition: ?all'

section "Hover scale on cards"
hits 'hover:scale-1(05|10)'

section "Emoji used as icons"
find "$DIR" -type f \( -name '*.tsx' -o -name '*.jsx' -o -name '*.ts' -o -name '*.vue' -o -name '*.svelte' -o -name '*.html' \) -not -path '*/node_modules/*' \
  -exec perl -CSD -ne 'print "$ARGV:$.: $_" if /[\x{1F300}-\x{1FAFF}\x{2600}-\x{27BF}]/; close ARGV if eof' {} + 2>/dev/null | head -40

section "Sparkle AI badges"
hits '✨|Sparkles'

section "Placeholder proof"
hits 'Trusted by|10,?000\+|Join [0-9,]+ '

section "Everything fades in on scroll"
hits 'fade-in-up|whileInView|data-aos'