AI-Slop UI Auditor

---
name: ai-slop-ui-auditor
description: Use when an existing page or component looks AI-generated and needs the tells named, or when it needs a structural redesign that preserves copy, routes, and brand. Triggers on "does this look AI-generated", "audit my landing page", "this looks templated", "redesign this page", "why does our site look like every other SaaS site". Not for building new UI from a brief, and not for accessibility compliance.
---

# AI-Slop UI Auditor

Two modes, and picking the wrong one wastes the pass. **Audit** reads and grades, and edits nothing. **Redesign** rewrites the visual and interaction layer in place. If the request is ambiguous, audit first and offer the redesign afterwards, because a punch list is cheap and a rewrite is not.

## Audit mode

Read the target files. For every finding, report four things and nothing else:

| Field | Content |
|---|---|
| Tell | The named anti-pattern, not a paraphrase |
| Where | File path and line range |
| Severity | `critical` ships as slop · `major` reads as AI-generated · `minor` taste issue |
| Fix | One concrete correction, not a direction |

Group by severity and close with a count: `N critical · M major · K minor`. Make no edits in this mode, and do not slide into redesigning. A finding without a file and line is an opinion.

## The catalogue

These are the tells that carry real signal. One is a problem; two in the same viewport is a confirmation.

**Colour and type.** Purple-to-blue or cyan-to-magenta gradients anywhere, including `background-clip: text` headlines. Inter, Roboto, Open Sans, Poppins, or Lato as the display face. Pure `#000` or `#fff` as a base colour. Zero-chroma neutrals. More than three font families on the page. Italic on any heading, wordmark, stat figure, or an `<em>` inside a headline, which is among the most reliable tells there is.

**Layout.** The three-equal-column grid of icon-above-heading tiles. A card nested inside another card. A thick coloured side-stripe on a card. A hero that is `min-height: 100vh` with the eyebrow, title, lede, and CTA all stacked on one centred axis. Sections separated only by equal whitespace, with no rule, no ornament, and no colour shift.

**Motion.** `transition: all`. A uniform `hover:scale-105` applied across unrelated elements. Overshoot easings on buttons and modals. More than one hover effect on the same element. Animating `width`, `height`, `top`, `left`, `margin`, or `padding`. A focus ring that fades in, when keyboard users need it immediately. Motion with no `prefers-reduced-motion` fallback.

**Content and chrome.** Invented metrics: "+47% conversion", "trusted by 50,000+ teams", "10x faster", fabricated testimonials, logo walls for customers who do not exist. Placeholder names such as Jane Doe, or startup clichés such as Acme and Nexus. Emoji used as a feature-card or pricing-tier icon. Two or more icon libraries mixed on one page. Hand-drawn fake browser bars, fake phone frames, and fake IDE windows, when the reader already has real chrome around the page.

## Grade structure separately

A page can pass every styling gate and still be slop, because the skeleton is the tell. Flag as a critical structural finding when:

- The page runs the generic template: centred hero, three equal feature cards, CTA band, footer, with no asymmetry anywhere.
- The page shares its structural fingerprint with another page in the same project. Measure structural distance, not visual distance; a colour swap is not variety.
- The project has a `design.md` or `DESIGN.md` and the page uses tokens, fonts, or an accent that the system does not declare. On a system-managed project, a per-page theme pick is drift even when the page is internally coherent.

The inverse also holds. On a project with no declared system, pages that all share one macrostructure are the finding.

## Redesign mode

The content is fine; the shape is not. Change the shape, and do not become a rewrite of the product.

**Before editing, state the files you expect to modify, create, or delete.** Deletions need explicit confirmation. Never remove route files, component directories, or an existing site because a redesign would be tidier without them. Default to in-place edits of the named files, or additive components and tokens wired through the existing route. Treat READMEs, briefs, decks, and PDFs as material for understanding the product, never as page copy to paste verbatim.

Scope first. A single file is a single-page redesign. A directory, a glob, several named files, or "the whole site" is a multi-page redesign, and the rule inverts there: across pages of one product, consistency is the goal and variety is the bug. For multi-page work, write one `design.md` at the project root first, declaring genre, macrostructure family per page type, colour tokens, type pairing and scale, spacing scale, motion easings and reduced-motion fallback, and CTA voice. Every page then reads that file. Seventeen independently themed pages are a split-personality app even when each page is good.

## Before handing anything back

Score the output 1 to 5 on six axes and revise anything below 3:

1. **Philosophy** — is there a position here, or only a layout?
2. **Hierarchy** — can a reader tell what is primary within two seconds?
3. **Execution** — rule weights, focus rings, contrast, text wrapping, all in spec?
4. **Specificity** — does this look like this brief, or like any brief?
5. **Restraint** — has everything that is not earning its place been removed?
6. **Variety** — does this share a structural fingerprint with something else in the project?

Two revision passes is normal. A third usually means the brief is wrong rather than the design.

Then verify the page at 320, 375, 414, and 768 pixels. No horizontal scroll at any width between 320 and 1920, enforced with `overflow-x: clip` on both `html` and `body` rather than `hidden`, which would break sticky and fixed descendants. No clickable text wrapping to two lines. Image-bearing grid tracks use `minmax(0, 1fr)`, never a bare `1fr`.

## Deliverable

Audit mode returns the punch list and the count, and nothing was changed. Redesign mode returns the changed files, the structural choice that replaced the old one, and one sentence on what a reader now sees first.