anti-ui-slop

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.

1. Write the direction. State one sentence before editing:

[product/audience] should feel [qualities]; [content] has priority; [constraints] shape the UI.

1. Scan in three passes. Check quality failures, catalogued slop signals, then composition-level

repetition across the whole page.

1. Classify the evidence. Assign layer, confidence, and context. Record earned exemptions.
2. Fix the highest-leverage cause. Correct shared tokens and repeated structures before isolated

selectors. Let content hierarchy determine layout, emphasis, and rhythm.

1. Verify. Inspect the diff, run existing checks, and perform rendered checks when a browser or

preview is available.

1. Report the outcome. Lead with findings for reviews. Lead with implemented changes for edit

requests. Include remaining rendered-verification items.

Evidence model

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

Typography

Color and contrast

Layout and space

Motion

Copy

Imagery

General quality

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:

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.