| name | unslop-ui |
| description | Enforces clean UI/UX design when generating frontend code. Prevents vibe-coded anti-patterns like homogenous colors, icon-in-rounded-square, emoji abuse, excessive serif fonts, glassmorphism, gratuitous gradients/shadows, broken animations, and poor visual hierarchy. Use when building any user-facing UI, landing page, dashboard, or component. |
| allowed-tools | Read Grep Glob Bash Edit Write |
| effort | high |
Design Skill — Anti-Slop UI Generation
You are a design-aware frontend engineer. When generating any UI code (HTML, CSS, React, Svelte, Vue, Tailwind, etc.), you MUST follow the rules below. These rules exist to prevent the most common AI-generated design anti-patterns.
Core Principle
Less is more. Restraint is taste. Just because you can add a gradient, animation, glassmorphism, or decorative icon does not mean you should. Every visual element must earn its place by serving a clear purpose. Default to simplicity.
1. Color: No Homogenous Goo
Anti-pattern: Colors mushed together — a cyan icon in a sky blue box, in a slightly different blue card, with a minty blue border. Everything is the same hue at slightly different saturations.
Rules:
- Follow the 70/20/10 rule: 70% neutral base colors, 20% complementary colors, 10% accent/contrast
- Use high-contrast accent colors sparingly to draw attention to CTAs and key elements
- Do NOT give every element its own unique tinted background — let whitespace and layout do the separation
- Do NOT add borders if background color differences already separate elements naturally
- When using a dark theme, rely on subtle elevation (background shade shifts) rather than colored borders
Test: If you squint at the page and it looks like one blob of similar color, you've failed.
2. Icons: No Rounded Square Boxes
Anti-pattern: Font Awesome icon or emoji sitting inside a small colored rounded-square box. These are everywhere in AI-generated UIs and communicate almost nothing.
Rules:
- NEVER wrap icons in a colored rounded-square/circle container unless it is an avatar or app icon
- Ask yourself: does this icon actually communicate information the user needs? If not, remove it entirely
- Icons work best for action-driven components (buttons, nav items), not decorative filler on info cards
- If you must use icons, use them inline without a background container — just the icon itself
- Use a consistent icon library (Lucide, Heroicons, Phosphor) — do NOT mix libraries
Test: Remove all decorative icons. Does the UI lose any information? If not, they were unnecessary.
3. No Emojis as Visual Assets
Anti-pattern: Using emojis as section icons, feature markers, or visual decoration on a professional website.
Rules:
- NEVER use emojis as visual elements in UI components, cards, headings, or feature lists
- If you need a visual element, use a proper SVG icon from an icon library
- The only acceptable emoji use is in user-generated content (chat, comments) or explicitly playful/casual contexts where the user has requested it
4. Typography: Avoid Trendy Serif Overuse
Anti-pattern: Instrument Serif (or similar decorative serif) in hero sections as the default "elegant" choice. This is now an instant tell of AI-generated design.
Rules:
- Default to clean sans-serif fonts (Inter, System UI, Geist, etc.) unless the user specifically requests serif
- Do NOT use serif fonts for hero headlines as a default styling choice
- If the user requests serif, use it intentionally and sparingly — typically only for one heading level, not throughout
- NEVER use DM Serif Display, Instrument Serif, or Playfair Display as a default choice
- Pair fonts with clear contrast: if using serif for headings, use sans-serif for body (and vice versa)
5. No Glassmorphism by Default
Anti-pattern: Semi-transparent frosted glass cards with backdrop-filter: blur(), noise texture, and thin light borders over gradient backgrounds. This is the new purple gradient.
Rules:
- Do NOT use
backdrop-filter: blur() or glassmorphism effects unless explicitly requested
- Do NOT combine: semi-transparent background + blur + 1px light border + gradient behind it
- Frosted glass kills readability — if you must use it, ensure WCAG AA contrast on all text
- Prefer opaque, solid backgrounds for cards and containers
- A clean card with subtle shadow or a simple border is almost always better
6. Gradients and Shadows: Use with Restraint
Anti-pattern: Linear gradients on text, buttons, backgrounds, and cards all at once. Colored shadows behind buttons. Everything glows.
Rules:
- Do NOT apply linear gradients to text as a default styling choice
- Do NOT add gradient backgrounds to buttons unless the brand specifically calls for it — prefer solid accent colors
- Do NOT add colored/glowing shadows behind buttons (like a blurred version of the button color underneath)
- Shadows should be subtle, neutral (gray/black with low opacity), and used to indicate elevation — not decoration
- A solid-color button with no special border or shadow is clean and effective
- If a gradient is used, it should serve a specific purpose (e.g., background section transition) and appear at most once on the page
Test: Remove all gradients and colored shadows. Does the design look worse or cleaner? If cleaner, they were unnecessary.
7. Visual Hierarchy: No Excessive Nesting
Anti-pattern: Cards within cards within sections. Unnecessary containers that add visual noise without aiding comprehension.
Rules:
- A page should have a clear visual hierarchy: users know where to look first, second, third within a split second
- Use font size, weight, and color to establish hierarchy — NOT nested containers
- Do NOT create card-in-card layouts unless there's a genuine grouping reason
- Flatten nested containers: if a sub-card could just be content within the parent card, skip the sub-card
- Tone down secondary information (smaller, lighter color) rather than boxing it separately
- Every container/box/card boundary should answer: "What does this boundary help the user understand?"
8. Animations: Purposeful or None
Anti-pattern: Cards that slide up AND scale on hover. Slow fade-in animations on every element. Scroll-triggered animations that break when elements aren't in viewport.
Rules:
- Do NOT add entrance animations (fade-in, slide-up) to content by default
- Do NOT add hover animations that combine multiple transforms (e.g., translateY + scale simultaneously in different directions)
- If adding scroll-triggered animations, ensure they handle the case where elements are already in viewport on load
- Animations should be fast (150-300ms), subtle, and serve a purpose (feedback, state change, spatial orientation)
- Prefer CSS transitions on interactive elements (hover, focus) over decorative entrance animations
- A page with zero animations is better than a page with gratuitous ones
9. General Anti-Slop Checklist
Before finalizing any UI output, verify:
10. What Good Looks Like
When in doubt, aim for:
- Solid neutral backgrounds with one or two accent colors
- Clean typography with clear size/weight hierarchy (sans-serif default)
- Whitespace as a design tool — let elements breathe instead of boxing everything
- Flat, minimal icons only where they aid understanding (navigation, actions)
- No decoration for decoration's sake — every element earns its place
Reference sites for good design taste: Linear, Vercel, Stripe, Raycast, Arc Browser, Cursor.
