Design — Anti-Slop UI/UX
You have taste. Generic AI design is the enemy — purple gradients, stock-photo heroes, rounded-everything, glassmorphism-for-no-reason. Build interfaces that look like a human designer made them.
The Anti-Slop Checklist
Before shipping any design, verify NONE of these are present:
| AI Slop Signal |
Fix |
| Purple/blue gradient backgrounds |
Use brand colors or neutral tones with purpose |
| Generic hero with "Welcome to [Product]" |
Lead with the user's first action or key metric |
| Rounded cards with drop shadows everywhere |
Pick one elevation system and be consistent |
| Stock illustration style (Humaaans, unDraw) |
Use real screenshots, data, or nothing |
| Glassmorphism / aurora effects |
Only if your brand demands it — otherwise, stop |
| 47 different font sizes |
Max 4 sizes per page. Type scale or nothing. |
| Rainbow of accent colors |
1 primary, 1 secondary, 1 destructive. Done. |
| Decorative icons on every feature |
Icons should aid comprehension, not fill space |
| "Powered by AI" badges everywhere |
Users don't care how it works, they care that it works |
Design Principles
- Clarity over decoration. Every element earns its pixels. If it doesn't help the user, remove it.
- Hierarchy is everything. One primary action per screen. One thing the eye hits first.
- Density where it matters. Dashboards should be dense. Onboarding should breathe. Know the difference.
- Consistency beats novelty. Reuse patterns. Surprise is a bug in UI.
- Design for real data. Names are 3-40 chars. Tables have 200 rows. Empty states exist.
Color
Background: neutral-50 or white (light) / neutral-900+ (dark)
Surface: neutral-100 / neutral-800
Border: neutral-200 / neutral-700
Text primary: neutral-900 / neutral-50
Text secondary: neutral-500 / neutral-400
Primary: ONE saturated color from your brand
Destructive: red-600
Success: green-600
Warning: amber-500
Rules:
- Never use color as the only indicator — add icons or text for accessibility
- Test contrast ratios: 4.5:1 minimum for text (WCAG AA)
- Dark mode is not "invert everything" — it's a separate intentional palette
Typography
| Role |
Size |
Weight |
| Page title |
24-30px |
600-700 |
| Section heading |
18-20px |
600 |
| Body |
14-16px |
400 |
| Caption / helper |
12-13px |
400 |
- One typeface for UI (Inter, system-ui, or your brand font)
- Second typeface only for marketing pages, if at all
- Line height: 1.5 for body, 1.2 for headings
Layout
- Max content width: 1280px for apps, 720px for text-heavy pages
- Spacing scale: 4px base (4, 8, 12, 16, 24, 32, 48, 64)
- Grid: 12-column for dashboards, single-column for forms
- Mobile-first: Design the constrained version first, then expand
Component Patterns
Every component needs:
- Default state — normal appearance
- Hover/focus — interactive feedback
- Loading — skeleton or spinner
- Empty — helpful message + action
- Error — what went wrong + how to fix
- Disabled — visually muted, cursor not-allowed
Navigation
- Top nav for < 5 items
- Sidebar for 5+ items or deep hierarchy
- Never both simultaneously (pick one)
Forms
- Labels above inputs (not inside as placeholder)
- Inline validation on blur, not on every keystroke
- Error messages next to the field, not in a toast
- Primary action on the right (or full-width on mobile)
Review Checklist
When reviewing any UI:
- Squint test — Can you tell what's important with blurred vision?
- 5-second test — Can a new user identify the primary action in 5 seconds?
- Real data test — Does it work with long names, empty states, 500 items?
- Accessibility — Keyboard navigable? Screen reader labels? Contrast ratios?
- Slop check — Would this look at home in a generic AI template gallery? If yes, redesign.
1---2name: design3description: (forwward) Enforces anti-slop UI/UX standards with deliberate choices for color, typography, layout, and components — fights generic AI aesthetics. Triggers on UI/UX decisions, component design, color choices, layouts, typography, or visual design review.4---56# Design — Anti-Slop UI/UX78You have taste. Generic AI design is the enemy — purple gradients, stock-photo heroes, rounded-everything, glassmorphism-for-no-reason. Build interfaces that look like a human designer made them.910## The Anti-Slop Checklist1112Before shipping any design, verify NONE of these are present:1314| AI Slop Signal | Fix |15|----------------|-----|16| Purple/blue gradient backgrounds | Use brand colors or neutral tones with purpose |17| Generic hero with "Welcome to [Product]" | Lead with the user's first action or key metric |18| Rounded cards with drop shadows everywhere | Pick one elevation system and be consistent |19| Stock illustration style (Humaaans, unDraw) | Use real screenshots, data, or nothing |20| Glassmorphism / aurora effects | Only if your brand demands it — otherwise, stop |21| 47 different font sizes | Max 4 sizes per page. Type scale or nothing. |22| Rainbow of accent colors | 1 primary, 1 secondary, 1 destructive. Done. |23| Decorative icons on every feature | Icons should aid comprehension, not fill space |24| "Powered by AI" badges everywhere | Users don't care how it works, they care that it works |2526## Design Principles27281. **Clarity over decoration.** Every element earns its pixels. If it doesn't help the user, remove it.292. **Hierarchy is everything.** One primary action per screen. One thing the eye hits first.303. **Density where it matters.** Dashboards should be dense. Onboarding should breathe. Know the difference.314. **Consistency beats novelty.** Reuse patterns. Surprise is a bug in UI.325. **Design for real data.** Names are 3-40 chars. Tables have 200 rows. Empty states exist.3334## Color3536```37Background: neutral-50 or white (light) / neutral-900+ (dark)38Surface: neutral-100 / neutral-80039Border: neutral-200 / neutral-70040Text primary: neutral-900 / neutral-5041Text secondary: neutral-500 / neutral-40042Primary: ONE saturated color from your brand43Destructive: red-60044Success: green-60045Warning: amber-50046```4748**Rules:**49- Never use color as the only indicator — add icons or text for accessibility50- Test contrast ratios: 4.5:1 minimum for text (WCAG AA)51- Dark mode is not "invert everything" — it's a separate intentional palette5253## Typography5455| Role | Size | Weight |56|------|------|--------|57| Page title | 24-30px | 600-700 |58| Section heading | 18-20px | 600 |59| Body | 14-16px | 400 |60| Caption / helper | 12-13px | 400 |6162- One typeface for UI (Inter, system-ui, or your brand font)63- Second typeface only for marketing pages, if at all64- Line height: 1.5 for body, 1.2 for headings6566## Layout6768- **Max content width:** 1280px for apps, 720px for text-heavy pages69- **Spacing scale:** 4px base (4, 8, 12, 16, 24, 32, 48, 64)70- **Grid:** 12-column for dashboards, single-column for forms71- **Mobile-first:** Design the constrained version first, then expand7273## Component Patterns7475### Every component needs:761. **Default state** — normal appearance772. **Hover/focus** — interactive feedback783. **Loading** — skeleton or spinner794. **Empty** — helpful message + action805. **Error** — what went wrong + how to fix816. **Disabled** — visually muted, cursor not-allowed8283### Navigation84- Top nav for < 5 items85- Sidebar for 5+ items or deep hierarchy86- Never both simultaneously (pick one)8788### Forms89- Labels above inputs (not inside as placeholder)90- Inline validation on blur, not on every keystroke91- Error messages next to the field, not in a toast92- Primary action on the right (or full-width on mobile)9394## Review Checklist9596When reviewing any UI:97981. **Squint test** — Can you tell what's important with blurred vision?992. **5-second test** — Can a new user identify the primary action in 5 seconds?1003. **Real data test** — Does it work with long names, empty states, 500 items?1014. **Accessibility** — Keyboard navigable? Screen reader labels? Contrast ratios?1025. **Slop check** — Would this look at home in a generic AI template gallery? If yes, redesign.
iankiku