Anti Ai Slop

Anti AI Slop

Overview

AI-generated UI has recognizable tells. Scan for them before shipping; fix with tokens and purpose-driven layout.

When to Use

• Before finishing any /ui build
• During /design audits
• When visual output looks generic or template-like

Workflow

1. Scan for the patterns below (and detail in references/anti-patterns.md)
2. Fix using design tokens and content-first layout
3. Re-scan before marking work done

Pattern Table

| Pattern | Detection | Fix | |---------|-----------|-----| | Purple/indigo defaults | #7c3aed, bg-purple-*, text-indigo-* | Token colors only (via decision tree — never invent purple token file) | | Excessive gradients | bg-gradient-to-*, linear-gradient | Flat token colors | | Rounded everything | rounded-2xl / rounded-3xl everywhere | Token --radius | | Generic hero | Template layout, no content connection | Content-first layout | | Hero-only landing | Plasma/hero + thin footer, no section stack | marketing-landing recipe (logo cloud → features → … → CTA) | | Block-registry default | “Install @tailark / shadcn blocks” as first answer | Hand-roll from landing-sections.md (same as motion vocabulary) | | Lorem ipsum | Placeholder copy | Realistic content | | Oversized padding | p-8/p-12 on everything | Spacing hierarchy | | Stock card grids | Uniform grids, no priority | Purpose-driven layout | | Shadow-heavy | Layered competing shadows | Subtle or no shadow | | Loud nav “active bar” | Thick left/right accent stripe on selected items | Quiet fill + weight/contrast only | | Theme under sidebar | Labeled Dark mode in sidebar footer | Topbar moon/sun icon | | Header account meta | Always-on name + email in topbar | Avatar → account menu | | Native filter ` | OS chrome / cramped caret on dashboards | Custom select / combobox | | Decorative motion spam | Hero+3D+Text+Spotlight+Carousel stacked; typewriter on forms | ≤2 families / ≤2–3 motions; see motion-families.md` |

Checklist

• [ ] No purple/indigo outside the chosen token source (scored / explicit / hard-gate / project system — not a vibe-picked purple file)
• [ ] No loud left-accent “selected” bars on nav (prefer quiet fill + type weight)
• [ ] No unjustified gradients
• [ ] Radius consistent with tokens
• [ ] No Lorem ipsum
• [ ] Spacing hierarchy present (not equal generous padding)
• [ ] Layout serves content, not a stock template
• [ ] Motion not decorative spam (≤2–3 intentional motions / viewport)

Depth

Full catalog and fixes: references/anti-patterns.md. Token source: references/token-preset-scoring.md (Plasma/neutral-purple only with brand cue). Motion vocabulary: references/motion-families.md.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: sukirman1901
• Source: sukirman1901/frontend-expert
• License: MIT
• Homepage: https://github.com/sukirman1901/frontend-expert

Install and usage instructions live in the source repository linked above.