Eliminate AI-generated aesthetic from admin interfaces and plugin UIs. Use when building, redesigning, or polishing any frontend — admin pages, settings panels, dashboards, or user-facing plugin output. Triggers on phrases like "make it look professional", "polish the UI", "it looks generic", "make it production-ready", or any request to improve visual quality. Addresses common LLM pitfalls in UI generation.
Prevents AI-generated code from looking AI-generated. LLMs converge on the same defaults — this skill breaks that convergence by flagging the tells and enforcing intentional design decisions.
Adapted from awaken7050dev/anti-slop-ui.
Every visual element must finish this sentence: "This exists because [product/user reason]." If you cannot finish the sentence, delete the element. Gradients, blobs, decorative shapes, and filler sections all fail this test by default.
Symmetric card grids with identical padding — The classic "3 cards in a row, same height, same radius." FIX: Vary card sizes. Use asymmetric layouts. Break the grid with a full-width element. For data-dense UIs, make cards tighter.
— AI defaults to generous padding from consumer app training data. Admin UIs need density. FIX: for table cells, not .
padding: 8px 12pxpadding: 16px 24pxStock hero sections with centered text — "Welcome to [Plugin Name]" + description + CTA. FIX: If you need a header, make it functional. Show status, show data, or remove it.
Desktop-only design — Looks polished at 1440px, falls apart on mobile. FIX: Test at 375px. Tap every button. Scroll every section.
Purple/blue gradient backgrounds — THE #1 tell. Every AI defaults to indigo-to-purple. FIX: Use solid colors. Match the host application's palette (WordPress admin uses #1d2327, #2271b1).
Excessive border-radius (everything is a pill) — AI loves border-radius: 20px on everything. FIX: Pick ONE radius and use it consistently. For admin tools: 0-4px. For consumer-facing: 4-8px. Never pill-shape cards.
Decorative color with no meaning — Random colored elements. FIX: Every color must be semantic. Green = success. Red = danger. Blue = interactive. Amber = warning. Gray = neutral.
Default component library styling unmodified — Instantly recognizable stock components. FIX: Override colors, spacing, and hover states to match the host application.
Generic font stacks everywhere — Inter/Roboto/Poppins on everything. FIX: For WordPress admin, inherit the system font stack. Don't fight the host application's typography.
Em dashes everywhere (—) — THE single most obvious sign AI wrote the copy. FIX: Replace every — with a period, comma, or rewritten sentence. Zero em dashes in user-facing text.
Cocky unverified marketing copy — "Trusted by thousands." "The #1 solution." FIX: Every claim must be verifiable or removed. Replace superlatives with specifics.
Display font on EVERY heading — Fancy fonts at 14px look broken. FIX: Display fonts on h1/h2 only. Everything smaller uses the body font.
Floating pill badges with colored dots — ● PRICING, ✨ FEATURES, 🚀 NEW. FIX: Delete them. The heading is enough.
Eccentric Unicode glyphs as section markers — §, ¶, ※, ◆ for fake institutional credibility. FIX: Use plain numbers or words.
Decorative dashes before uppercase labels — — OVERVIEW, || FEATURES. FIX: Delete the decoration. Letter-spacing and case already signal "this is a label."
Animations that serve no purpose — Bounce effects, elastic springs, parallax. FIX: Hover states only (75-120ms) for admin tools. Remove animation if removing it changes nothing about comprehension.
No loading states (or generic spinners) — FIX: Every data view needs a skeleton or placeholder that matches the final layout. Never a generic spinner.
No animation on state changes — Toggle/tab switches just swap text silently. FIX: At minimum, fade content with a 150ms transition so users know something changed.
Header that hides/reveals on scroll — Jarring "now you see me" effect. FIX: Keep navigation permanently visible or use WordPress's standard admin layout.
Placeholder logos (letter in a rounded square) — The "M" in a box. FIX: Use plain text wordmark or ask for the real logo. Never generate a placeholder icon.
Missing images deployed to production — <img src="/hero.jpg"> with no fallback. FIX: Every image needs the actual file, a background-color fallback, and loading="lazy" below the fold.
Random accent styling on wordmark letters — Italicizing one letter for "visual interest." FIX: Uniform styling on wordmarks.
Inconsistent spacing — The #1 subconscious trust-killer. Users can't articulate it but they FEEL it. FIX: Use a 4px spacing scale (4, 8, 12, 16, 24, 32, 48). Every margin and padding must be on the scale.
No data attribution or timestamps — For data-showing interfaces, missing "Updated: [date]" signals amateur hour. FIX: Show data source and freshness.
Fighting the WordPress admin style — Custom CSS that clashes with wp-admin. FIX: Use WordPress admin classes (widefat, button, button-primary, notice, postbox). Inherit, don't override.
Reinventing WordPress UI patterns — Custom modals, custom notices, custom tables when WordPress provides them. FIX: Use WP_List_Table for data tables, admin_notices for messages, WordPress settings API for forms.
Ignoring WordPress color scheme — Hardcoded colors that break when users change their admin color scheme. FIX: Use WordPress admin CSS variables and classes.
Run before declaring any UI work done:
rounded-full on containershref="#" dead linksprefers-reduced-motion respected on all animationsOpen the interface fresh. Look for exactly 3 seconds, then look away. If you remember "it was dark with blue accents" or "there were gradient cards" — it's AI-generated. If you remember the CONTENT or the DATA — you've succeeded.