discountry 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
- 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.
- Write the direction. State one sentence before editing:
[product/audience] should feel [qualities]; [content] has priority; [constraints] shape the UI. - Scan in three passes. Check quality failures, catalogued slop signals, then composition-level repetition across the whole page.
- Classify the evidence. Assign layer, confidence, and context. Record earned exemptions.
- Fix the highest-leverage cause. Correct shared tokens and repeated structures before isolated selectors. Let content hierarchy determine layout, emphasis, and rhythm.
- Verify. Inspect the diff, run existing checks, and perform rendered checks when a browser or preview is available.
- 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:
- Broken behavior, accessibility, overflow, and readability.
- Information architecture and unsupported content.
- Repeated page templates, card anatomy, and container depth.
- Type hierarchy, spacing rhythm, and color roles.
- Decorative borders, gradients, glows, radii, icons, and motion.
- 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.