| name | ai-slop-check |
| description | Scan a Studio HTML/UI build for generic AI-template visual tropes and fix them. Use only when the user explicitly asks whether it looks AI-generated, asks to remove the slop, or requests a polish-pass. |
AI Slop Check
Scan for the visual tropes that make a design read as "AI-generated template" rather than
intentional. A page indistinguishable from a hundred other AI outputs failed to look like this
subject's design. Fix everything found, directly in the file — this isn't a report to hand back,
it's a pass with your hands on the code.
Read the file (and any CSS/tokens it references) before judging — resolve actual hex/px values,
don't guess from memory.
What to detect and replace
Generic gradients. Rainbow or fashionable hero blends used without a subject/brand reason →
replace with a brief-specific color field, image, texture, pattern, or deliberate color blocking. Do
not "fix" them by draining the page to gray.
Emoji. 🚀/✅/🎉 prepended to headlines, buttons, or list items with no brand reason → remove; if
the layout leaned on the emoji for visual weight, swap in a real icon (Feather, Material, Phosphor,
Heroicons) or fix the typographic hierarchy instead.
Cards. border-radius: 12px; border-left: 4px solid #... as the default container style → a
subtle shadow, thin all-around border, or background contrast. Keep the left-border only where it's
semantic (callout, alert, status) or matches an existing design system.
Imagery. Generic hand-drawn SVG people/scenes/blobs or "giant-head" illustrations → a real source
image, a brief-specific generated asset, a professional icon treatment, or a purposeful abstract/data
motif. Use a labelled placeholder only for an explicit wireframe or design handoff, never a finished
artifact.
Type. Inter, Roboto, Arial, Fraunces, or a bare system stack used as a silent default (no brand or
user reason) → a font chosen with intent for this subject; read_skill frontend-design for pairing
guidance.
Color values. Five near-identical blues (#0066CC, #0077DD, #3498DB...) invented inline →
consolidate to a token or an oklch()-derived palette (same lightness/chroma, varied hue) so hues
read as related.
Spacing. Off-scale values (padding: 7px 15px, gap: 13px) → snap to a 4px or 8px scale.
The cream/serif/terracotta house style. #F4F1EA-family background + serif display (Georgia,
Playfair, Fraunces) + italic word-accents + terracotta/amber accent, all together, with no brand
reason → today's default-template look, especially wrong on dashboards, dev tools, fintech,
healthcare, or enterprise surfaces. Any one element can be a deliberate choice for editorial/
hospitality/portfolio work; all of them together without a stated reason is a trope. Replace with a
direction actually chosen for this brief.
Fix and report
Apply fixes directly. Where more than one replacement is reasonable (which non-Inter font, exactly
which shade), pick the most defensible option and note it in the handoff so the user can override.
Removing a trope must reveal a more subject-specific direction; desaturation and generic neutral
minimalism are not successful cleanup.
End with one line: tropes found (by category) and what changed — not a table, not a report.
