---
name: anti-ui-slop
description: >
  Detect, review, prevent, and remove AI-generated UI convergence patterns ("AI slop")
  in frontend code. Use whenever building or styling a UI, reviewing frontend changes,
  refining visual design, or when the user asks to remove the AI look, make an interface
  feel human-designed, polish a page, audit UI quality, or explain why a design feels
  generic. Covers HTML, CSS, JSX/TSX, Vue, Svelte, and Tailwind; audits 46 catalogued
  patterns plus composition-level checks, separates source-confirmed, rendered, and
  judgment-based evidence, and rewrites authorized code toward a product-specific design
  direction without requiring external dependencies.
license: MIT
---

# Anti UI Slop

## Goal

AI-generated interfaces reveal themselves through convergence: familiar fonts, palettes,
card anatomies, copy rhythms, spacing, and motion accumulate until the page could belong to
any product. A single fashionable choice provides weak evidence. Repeated context-free choices
provide strong evidence.

The finished interface should express its product, audience, content, and constraints. Removing
a tell counts as progress only when the replacement strengthens that specificity.

Keep two classes of findings separate:

- **Quality failures** reduce accessibility, readability, robustness, or performance. Confirmed
  failures receive correction recommendations in reviews and fixes in authorized edit tasks.
- **Slop signals** reveal convergence. Context, repetition, composition, and product fit determine
  whether they become actionable findings.

## Operating contract

- Match the user's authorization. Review and audit requests produce findings only. Diagnose
  requests explain causes only. Build, fix, refine, and polish requests authorize edits.
- Preserve the established design system, brand language, component conventions, responsive
  behavior, semantics, and interaction behavior.
- Read changed UI files first, then shared tokens, layout primitives, typography, and representative
  pages. Existing intent supplies the design direction.
- Exclude generated output, dependency code, lockfiles, snapshots, and intentional anti-pattern
  specimens. Storybooks, design-system galleries, and documentation examples need page-context
  confirmation before they count as repeated composition.
- Use existing fonts, packages, icons, and assets. Obtain user authorization before adding a
  dependency, remote font, generated image, or broad design-system change.
- Preserve product facts. Remove unsupported metrics and decorative claims; never invent evidence.
- Keep fixes scoped. A local tell receives a local fix. A repeated system-level tell receives a
  token or primitive fix.

## Workflow

1. **Scope the interface.** Identify the route, components, styles, and shared primitives that
   control the requested surface. Inspect recent or changed files first in an existing project.
2. **Write the direction.** State one sentence before editing:
   `[product/audience] should feel [qualities]; [content] has priority; [constraints] shape the UI.`
3. **Scan in three passes.** Check quality failures, catalogued slop signals, then composition-level
   repetition across the whole page.
4. **Classify the evidence.** Assign layer, confidence, and context. Record earned exemptions.
5. **Fix the highest-leverage cause.** Correct shared tokens and repeated structures before isolated
   selectors. Let content hierarchy determine layout, emphasis, and rhythm.
6. **Verify.** Inspect the diff, run existing checks, and perform rendered checks when a browser or
   preview is available.
7. **Report the outcome.** Lead with findings for reviews. Lead with implemented changes for edit
   requests. Include remaining rendered-verification items.

## Evidence model

| Layer | Meaning | Reporting rule |
|---|---|---|
| **Source** | Literal markup, styles, tokens, or copy provide direct evidence | Cite the selector, class, component, or text and its source line |
| **Render** | Computed layout, stacking, viewport size, or composited color determines the result | Confirm in a rendered page; otherwise label `Candidate - needs rendered verification` |
| **Judgment** | Product context and page composition determine whether a pattern is earned | Cite at least two concrete observations and explain the product mismatch |
| **Opt-in** | Provider-associated weak signal from the reference catalog | Keep silent unless the user requests an aggressive/provider-specific sweep |

Use these confidence levels:

- **Confirmed:** direct quality failure, rendered failure, or unmistakable source pattern with its
  component role verified.
- **Probable:** one dominant slop signature or at least two independent slop signals within the same
  region.
- **Candidate:** missing rendered evidence, unresolved variables, incomplete component context, or a
  weak global signal.
- **Exempted:** the pattern communicates real meaning, follows the established brand, or serves a
  functional interaction.

Severity and confidence answer different questions. Severity describes user impact; confidence
describes evidential strength.

- **Critical:** blocks access or use, ships a broken asset, hides required content, or creates a major
  accessibility failure.
- **High:** affects a primary flow or dominates a page through a repeated slop cluster.
- **Medium:** affects a local component, secondary flow, or isolated slop signature.
- **Low:** cleanup with limited user impact. Keep unverified Candidates in their own section.

Accuracy rules:

- Quality findings can stand alone. Slop findings need a dominant signature or a local cluster.
- Weak global signals **T8, T9, C1, and C5 never stand alone**. Fonts and colors become evidence
  through their relationship with layout, type hierarchy, copy, and decoration.
- Count related symptoms once. An identical feature grid with icon tiles is one compositional cluster,
  with both rule IDs cited as supporting evidence.
- Follow variables, component variants, conditional classes, and shared tokens to their effective use.
- Use the rendered DOM for heading order when component composition changes source order.
- Trace localized strings and mapped components to their rendered role before applying copy or
  repetition rules.
- Treat demo pages that intentionally display bad UI as specimens. Preserve the demonstrated defect.
- Treat thresholds as screening values. Component role, physical size, language, density, and viewport
  determine the final judgment.

## Replacement principles

- **Structure follows content.** Comparable items suit tables or aligned lists. Sequences suit steps.
  Narrative content suits editorial flow. Interactive choices suit controls with clear boundaries.
- **Hierarchy uses a system.** Establish explicit roles for display, heading, body, label, and data.
  A single font family can support strong hierarchy through size, weight, width, optical size, and
  spacing. A second family earns its place through a clear role.
- **Color carries a job.** Assign colors to brand, action, status, emphasis, and surfaces. Repeated
  decorative gradients and glows dilute those jobs.
- **Spacing communicates relationship.** Related items sit close. Sections receive larger separation.
  Repeated spacing tokens remain useful when their semantic roles differ visibly.
- **Motion communicates state, continuity, or causality.** Default surfaces stay still. One meaningful
  transition carries more value than many ornamental effects.
- **Decoration carries meaning.** Domain artifacts, real product UI, data, photography, diagrams, and
  brand motifs provide specificity. Generic icons and blobs disappear when they carry no information.
- **Asymmetry follows priority.** Give more space to more important content. Avoid arbitrary card-size
  variation created solely to appear designed.

## The 46-rule catalog

The catalog preserves the reference split: 41 deterministic candidates, five Judgment rules, and
four provider-specific Opt-in modifiers.

### Visual details

| ID | Kind | Layer | Candidate and confirmation | Correction |
|---|---|---|---|---|
| **V1 Border accent on rounded element** | Slop | Source | Colored border `>= 2px` and radius `>= 12px` on the same generic card. Outlined controls and an established graphic style can earn it | Choose one edge strategy: neutral 1px border, lower radius, or no border |
| **V2 Glassmorphism everywhere** | Slop | Judgment | Repeated translucent cards and `backdrop-filter: blur` decorate static content. Functional overlays can retain blur | Use opaque surfaces and express hierarchy through contrast, spacing, and elevation |
| **V3 Side-tab accent border** | Slop | Source | One side of a card has a colored border `>= 3px`. Confirm whether it encodes status or category | Use a status dot, icon, label, or restrained tint when meaning exists; remove empty decoration |
| **V4 Hairline border with wide shadow** | Slop | Source + opt-in GPT | A 1px border and shadow blur `>= 20px` share one element | Keep the crisp edge or the soft elevation |
| **V5 Repeating-gradient stripes** | Slop | Source + opt-in GPT | `repeating-linear-gradient` or `repeating-conic-gradient` decorates a surface. Progress indicators and diagrams can earn the pattern | Use a solid surface or an existing brand texture |
| **V6 Extreme border radius** | Slop | Judgment | Radius `>= 24px` turns a small card, section, or input into a blob. Pills, tags, and large shaped panels are role-based exceptions | Use a role-based radius scale; common cards land around 8-16px |
| **V7 Amateurish hand-drawn SVG** | Slop | Judgment | A complex inline SVG scene or mascot has rough illustrative geometry. Icons, logos, diagrams, and data visualization are exempt | Use a real asset, simplify to a purposeful diagram, or remove the illustration |

### Typography

| ID | Kind | Layer | Candidate and confirmation | Correction |
|---|---|---|---|---|
| **T1 Flat type hierarchy** | Slop | Source | Adjacent roles differ by less than about 1.25x and also lack contrast in weight, family, spacing, or color | Define fewer roles with clearer combined contrast; use the ratio as a screening heuristic |
| **T2 Icon tile stacked above heading** | Slop | Source | Repeated feature cards use a rounded-square icon tile directly above a heading | Align icon and heading, place the icon in flow, or remove the container |
| **T3 Italic serif display headline** | Slop | Source | Serif italic `>= 32px` leads a generic startup hero. Editorial and fashion contexts can earn it | Use roman styling or a display treatment derived from the brand register |
| **T4 Hero eyebrow or pill chip** | Slop | Source | Tiny tracked uppercase text or a pill sits immediately above the hero heading. Breadcrumbs, status, and release metadata are functional exceptions | Fold the information into the heading, navigation context, or body copy |
| **T5 Repeated section kickers** | Slop | Source | Three or more sections repeat the same uppercase tracked mini-label | Let heading hierarchy, artifacts, and section-specific structure create navigation |
| **T6 Oversized hero headline** | Slop | Source | A heading with roughly eight or more words uses `>= 48px` or `text-5xl` styling | Shorten the claim or reduce the responsive size so supporting content remains visible |
| **T7 Crushed letter spacing** | Slop | Source | Display tracking is tighter than `-0.05em`; body text carries negative tracking | Restore character shapes; use modest optical tightening around `0` to `-0.02em` |
| **T8 Overused font** | Slop | Source, weak | Inter, Geist, Space Grotesk, or Instrument Serif appears as the default identity. Brand and system constraints are valid | Report only with other convergence signals; strengthen roles with existing fonts before proposing a new face |
| **T9 Single font for everything** | Slop | Source, weak | One family also uses nearly identical weight, width, spacing, and proportions across every role | Build contrast inside the family or add a second family with a defined display, body, or data role |
| **T10 All-caps body text** | Quality | Source | Paragraphs or long blocks around 20+ words use uppercase | Use sentence case; reserve uppercase for short labels |

### Color and contrast

| ID | Kind | Layer | Candidate and confirmation | Correction |
|---|---|---|---|---|
| **C1 AI color palette** | Slop | Source, weak | Purple/violet gradients or cyan-on-dark dominate without brand evidence | Report only as a cluster signal; derive action, status, surface, and accent colors from existing product context |
| **C2 Dark mode with glowing accents** | Slop | Source | Dark surfaces repeat colored box shadows or neon text shadows. Focus rings and meaningful state glows are exempt | Use neutral elevation and bounded state indicators |
| **C3 Gradient text** | Slop | Source | `background-clip: text` and transparent fill decorate headings, metrics, or many labels | Use solid text color and express emphasis through hierarchy |
| **C4 Gray text on colored background** | Quality | Source/Render | Neutral gray sits on a chromatic surface and loses contrast | Use a light or dark tint related to the surface hue and verify contrast |
| **C5 Cream or beige reflex** | Slop | Source, weak | Warm off-white becomes the whole page's generic tasteful surface without a supporting palette | Report only as a cluster signal; establish deliberate surface, ink, accent, and status colors |

### Layout and space

| ID | Kind | Layer | Candidate and confirmation | Correction |
|---|---|---|---|---|
| **L1 Hero metric layout** | Slop | Judgment | Hero centers a large number, tiny label, and supporting stats with generic accent treatment or unsupported claims | Lead with the product, artifact, or verified evidence; preserve only meaningful metrics |
| **L2 Identical card grids** | Slop | Judgment | Four or more siblings repeat icon, heading, and paragraph with identical sizing. Comparable interactive items can benefit from consistency | Choose a structure from the content: ranked layout, table, list, accordion, or genuinely uniform controls |
| **L3 Monotonous spacing** | Slop | Source | The same gap or padding token serves item, group, component, and section boundaries with no visible rhythm | Map spacing tokens to semantic relationships and create clear grouping contrast |
| **L4 Nested cards** | Slop | Source | Three or more nested levels repeat borders, fills, radii, or shadows. Semantic wrappers without repeated chrome are exempt | Remove redundant surfaces; group with spacing, headings, dividers, or one shared container |
| **L5 Numbered section markers** | Slop | Source | Display `01 / 02 / 03` labels decorate independent sections | Keep numbers for real sequences, timelines, ranks, or references |
| **L6 Line length too long** | Quality | Render | Running text exceeds about 80 characters per line. Code, tables, and deliberate data regions are exempt | Constrain prose to roughly `60ch-75ch` |
| **L7 Content overflowing its container** | Quality | Render | Text or media spills, clips, or creates accidental horizontal scroll | Wrap, constrain, truncate with an accessible affordance, or provide deliberate scrolling |
| **L8 Positioned child clipped by overflow container** | Quality | Render | A tooltip, menu, or popover is cut by an ancestor using `overflow: hidden` or `clip` | Move the layer outside the clipping context, use a portal, or change overflow where safe |

### Motion

| ID | Kind | Layer | Candidate and confirmation | Correction |
|---|---|---|---|---|
| **M1 Bounce or elastic easing** | Slop | Source | Dialogs, cards, and routine controls use overshoot curves or repeated spring effects. Playful or physical interactions can earn them | Use a restrained ease-out curve and shorter travel |
| **M2 Layout-property animation** | Quality | Source | Large or repeated transitions animate width, height, padding, margin, top, or left and cause reflow | Prefer transform and opacity; use a bounded disclosure pattern for necessary height changes |
| **M3 Image hover transform** | Slop | Source + opt-in Gemini | Generic cards repeatedly scale or rotate imagery on hover. Product zoom controls are functional exceptions | Keep imagery still or use a restrained overlay, caption, or border response |

### Copy

| ID | Kind | Layer | Candidate and confirmation | Correction |
|---|---|---|---|---|
| **P1 Em-dash overuse** | Slop | Source | A body block contains three or more `—` characters or repeated equivalent HTML entities. Apply language-aware judgment | Rewrite with sentence boundaries, commas, colons, or parentheses |
| **P2 Marketing buzzword** | Slop | Source | Generic claims such as `supercharge`, `streamline`, `empower`, `world-class`, `enterprise-grade`, `seamlessly`, or `unlock` lack a concrete object or outcome | Name the exact action, object, user, and result |
| **P3 Aphoristic cadence** | Slop | Source | Multiple sections repeat patterns such as `Not X. Y.` or `Less X. More Y.` | Replace the cadence with direct product facts and natural sentence rhythm |
| **P4 Theater framing copy** | Slop | Source + opt-in GPT | Marketing dismisses a category as `theater` without explaining the practical failure. Established domain terms such as security theater require context | State the behavior, limitation, or consequence directly |

### Imagery

| ID | Kind | Layer | Candidate and confirmation | Correction |
|---|---|---|---|---|
| **I1 Broken or placeholder image** | Quality | Source | Rendered image markup has missing or empty `src`, `#`, known placeholder services, or placeholder API paths. Confirm conditional branches | Use a real asset, a generated asset with authorization, a fallback, or remove the element |

### General quality

| ID | Kind | Layer | Candidate and confirmation | Correction |
|---|---|---|---|---|
| **Q1 Cramped padding** | Quality | Render | Text or controls sit within about 8px of a bordered or colored edge. Dense tables and tiny badges use role-specific spacing | Provide enough internal space for the component's role; 12-16px suits common controls and cards |
| **Q2 Body text touching viewport edge** | Quality | Render | Running text reaches the viewport edge, especially on mobile. Full-bleed media is exempt | Add a responsive content gutter, commonly at least 16px on narrow screens |
| **Q3 Justified text** | Quality | Source | Screen body copy uses `text-align: justify` without effective hyphenation and language support | Left-align body copy or enable tested hyphenation for an editorial use case |
| **Q4 Low contrast text** | Quality | Source/Render | Text misses WCAG AA: 4.5:1 for normal text and 3:1 for large text. Variables, alpha, gradients, and imagery require rendered verification | Adjust foreground, background, weight, or size and verify the computed result |
| **Q5 Skipped heading level** | Quality | Source/Render | The rendered outline jumps from `h1` to `h3` or similar | Restore sequential semantic levels and keep visual styling in classes |
| **Q6 Tight line height** | Quality | Source | Multi-line body text uses line height below about `1.3`. Display headings are role-based exceptions | Use roughly `1.45-1.7` according to typeface and measure |
| **Q7 Tiny body text** | Quality | Source | Running body text is below 12px; 12-13px body copy remains a readability risk. Captions and dense data labels need context | Use at least 14px for body copy; 16px is a strong default |
| **Q8 Wide letter spacing on body** | Quality | Source | Paragraphs use tracking above `0.05em` | Restore normal tracking; reserve wide tracking for short labels |

## Composition checks beyond the catalog

These page-level checks catch the synthetic specimens represented in the reference gallery:

- **X1 Motion saturation:** many elements enter, float, pulse, wiggle, or bounce. Keep motion tied to the
  single state change or spatial relationship that needs explanation.
- **X2 Decorative priority inversion:** icon containers, badges, or ornaments occupy more visual weight
  than the message they introduce. Reduce or remove them.
- **X3 Redundant UX writing:** label, sublabel, helper, placeholder, and hint repeat the same fact. Keep
  the shortest complete instruction and retain helper text that adds new information.
- **X4 Modal abuse:** a scrolling, multi-column, multi-section workflow lives inside a modal. Move
  sustained work to a page or panel and reserve the modal for a bounded decision.

## Fix order

Apply fixes in this sequence to prevent cosmetic churn:

1. Broken behavior, accessibility, overflow, and readability.
2. Information architecture and unsupported content.
3. Repeated page templates, card anatomy, and container depth.
4. Type hierarchy, spacing rhythm, and color roles.
5. Decorative borders, gradients, glows, radii, icons, and motion.
6. Copy cadence and redundant labels.

After each system-level change, rescan the page. One primitive edit can clear many local symptoms.

## Verification

- Inspect the final diff for swapped defaults, new dependencies, invented claims, and unrelated churn.
- Run the project's existing formatter, typecheck, tests, and build in proportion to the change.
- When rendering is available, check desktop and mobile widths, horizontal scroll, line measure,
  contrast, popover clipping, keyboard focus, reduced motion, and content expansion.
- When rendering is unavailable, list every Render-layer item as unverified. Do not present it as a
  confirmed defect.
- Apply four final tests:
  - **Swap test:** another product would require meaningful visual and content changes.
  - **Hierarchy test:** the most important content wins attention without decorative assistance.
  - **System test:** repeated values express consistent roles and deliberate exceptions.
  - **Restraint test:** every strong visual effect has a defined job.

## Reporting

For a review, list findings first in severity order with file and line references. For an edit, lead
with the implemented result and list the important changes. Use this structure when detail helps:

```text
DIRECTION
Internal logistics dashboard: dense, calm, utilitarian; operational data carries priority.

FINDINGS OR CHANGES
Location              | Rule    | Confidence | Evidence                    | Action
src/Form.tsx:31       | C4      | Confirmed  | gray text on blue surface   | use blue-tinted light text
src/Card.tsx:12       | V3      | Probable   | border-l-4 on status card   | replace with status dot
src/page.tsx:44       | L2/T2   | Probable   | six identical feature cards | use ranked comparison list

NEEDS RENDERED VERIFICATION
src/Popover.tsx:18    | L8      | Candidate  | clipped ancestor found      | verify open state at mobile width

EXEMPTIONS
src/Steps.tsx:9       | L5      | Exempted   | markers label a real sequence

VALIDATION
typecheck passed; mobile render checked; no horizontal overflow
```

Keep reports concise. Explain why a change belongs to this product. A list of removed classes provides
less value than the resulting design logic.