# The unslop pass

> Run the full procedure on a generated screen (squint, subtract, sweep, put a point of view back) and critique the render, not the code, in at most three rounds.

Module: Spotting AI-default UI · Level: intermediate · 9 min · https://school.agents.org.in/design/tells/the-unslop-pass

Step through this hero from left to right. Each step changes one layer of decisions.

*[Interactive demo: One generated hero, unslopped in six steps. Read the line under it at each step.]*

The previous lessons were a catalog: what the tells are. This one is the procedure, the unslop pass (The procedure for de-generating a screen: squint, delete what isn't needed, sweep color, type, layout, decoration, icons, copy and motion, then put one real point of view back). It has two halves, and the second is not optional: **a screen scrubbed of tells with no opinion of its own is still generic, just quieter.**

## The pass

  **Step: Squint.** Could this screen belong to any of ten thousand products? Find what ties it to *this* one. If the answer is "the logo", everything else is up for review.

  **Step: Subtract before you restyle.** Walk every element (icon, line, badge, caption, container, word) and ask what breaks if it's gone. If nothing, delete it. Then walk again: deletions expose each other.

  **Step: Sweep in order.** Color, typography, layout, decoration, icons, copy, motion. Color first because it is the loudest: a page survives a common layout, not indigo-to-purple.

  **Step: Put a point of view back.** One real palette, one type decision, the actual product, a signature (below).

  **Step: Final read.** "What here would make a designer suspect a model built this?" Fix it. Repeat until nothing.

"It adds visual interest" and "it fills the space" are exactly the reasons the model put something there. Deletion is free, can't introduce a new tell, and gives every survivor hierarchy for nothing.

## What the sweep catches

| Layer | Delete | Replace with |
|---|---|---|
| Color | Unchosen indigo and violet; gradients with no job; dark-and-neon as a "premium" costume | A palette from the domain, the brand or the content |
| Type | Gradient text; `Inter font-black tracking-tight`, centred | One distinctive type decision |
| Layout | Pill, centred headline, two buttons, orb; three icon cards; a bento that's three cards with better kerning | One feature full-width with a real screenshot; small features as a list; unequal features, unequal space |
| Decoration | Glass with nothing behind it; blobs; border **and** shadow **and** ring on one card; `rounded-2xl` everywhere | A plain surface, a radius scale |
| Icons | Emoji as bullets; a sparkle on every AI feature | One real icon set, or none |
| Proof | "Trusted by 10,000+" on an unlaunched product; stock-avatar quotes | Real numbers and named quotes, or nothing |
| Copy | A headline a competitor could paste | One concrete claim |
| Motion | `fade-in-up` on every block; `hover:scale-105` on things you can't click; pulsing blobs | Motion only where it explains something |

## Looking designed by someone

- **Derive the palette from something real**: the domain (ledger green for invoices), the brand, the content.
- **One distinctive type decision.** One is enough; three is a costume party.
- **Show the actual product**: a real screenshot, real data, a working embed.
- **Let content break symmetry**: an odd number of features, one oversized item, a section that is just a sentence.
- **Repeat a signature**: one odd element used consistently beats ten borrowed ones used once.
- **Restraint is a feature.** The confident version has *fewer* effects. Adding "personality effects" on top is re-slopping with extra steps.

The pass ends when you can name the one choice a competitor couldn't copy and paste. If nothing on the screen answers, you stopped halfway.

## Critique the render, not the code

An agent that reviews the page it just wrote reads its own intentions back: the class says `hero`, so it sees a hero. Screenshot critique (Reviewing a page from screenshots of what it actually renders (at desktop, tablet and phone widths) instead of reading its code, one focused pass at a time, in at most three rounds) fixes that. Take screenshots at 1440, 768 and 390px wide, first screen and full page, and look at them *before* the code.

Then make single-purpose passes, one at a time. Here is one of them, the edges pass:

*[Interactive demo: Follow the left edge of every text block down the page and count the distinct positions.]*

  **Step: One second, then five.** Glance away: there should be one answer (a word, an image, an object), not "a website". Then five seconds as a stranger: what is this, who is it for, what do I do next?

  **Step: Squint, cover the logo, scroll.** Does the idea reach the pricing and footer, or turn into stock blocks after the first screen?

  **Step: Edges.** Two or three left edges reused on purpose is a composition. Six means things were placed one at a time.

  **Step: Frame and sameness.** Equal margins, no half-empty sections. Write one word per section's layout (split, list, grid, statement); the same word three times is the template showing.

  **Step: Phone.** Is 390px its own composition, or the desktop squeezed?

  **Step: Fullness and collisions.** Does every section deliver its information at a readable size? Is anything overlapping a headline or button?

## Write it down, fix in order, stop at three

Every round gets the same short write-up:

```text
ROUND 1
Seen in one second: a purple blur
Idea (one sentence): invoices from tracked time
Layout words: hero=centred / features=grid / proof=logos / faq=list
Top three problems, most visible first:
1. hero: headline any product could use. Fix: the one-click invoice claim
2. features: three equal icon cards. Fix: one screenshot full-width, rest as a list
3. proof: "10,000+" with gray logos. Fix: cut until we have a real number
```

Name findings the way a designer talks to a colleague: "the paragraph starts 40px left of the headline". "Could be more polished" is not a finding.

Fix in this order: **idea, hierarchy, composition, type, imagery, color, detail, motion**. Later items can't rescue earlier ones; no amount of kerning saves a page with no idea. Run at most three rounds, and if the last still falls short, say so plainly instead of rounding up.

> **Subtraction can overshoot.** In taste-skill's blind tests, a richer page full of template devices beat a cleaner page that was thin. Removing tells is half the job. When a deletion leaves a gap, enlarge what remains or close the gap. Never refill it with an ornament.

*(The pass is not "make it minimal". It's "make it someone's".)*

**Unslop and critique (paste into your agent):**

```text
Run an unslop pass on this page.
1. Screenshot it at 1440, 768 and 390 (first screen + full page) and critique the render before reading code.
2. Subtract: list every element whose removal breaks nothing; delete them; repeat once.
3. Sweep color → type → layout → decoration → icons → copy → motion against the usual tells.
4. Put a point of view back: a palette from the domain, one type decision, a real product screenshot, one repeated signature.
Write each round as: seen in one second / idea in one sentence / layout word per section / top three problems with fixes. Fix in order idea → hierarchy → composition → type → imagery → color → detail → motion. Stop after three rounds and report what is still weak.
```

**Check yourself:** You deleted the orbs, pill and logo wall, and the hero now feels thin. What next?

- [ ] Add a subtle animated gradient to restore interest
- [ ] Put the deleted orbs back at lower opacity
- [x] Enlarge what remains or show the real product in the space, without adding ornament
- [ ] Stop; thin is always better than busy

*Why:* Subtraction is half the pass. Fill gaps with substance (a real screenshot, a bigger headline), never with a new ornament, which would be re-slopping.

## In the skill

- https://school.agents.org.in/skill/anti-patterns/unslop-pass.md
- https://school.agents.org.in/skill/anti-patterns/screenshot-critique.md