design

Original：🇺🇸 English

Translated

Use when making UI/UX decisions, building components, choosing colors, layouts, typography, or reviewing any visual design — enforces anti-slop standards against generic AI aesthetics

2installs

Sourceiankiku/forwward-teams

Added on2026-03-24

NPX Install

npx skill4agent add iankiku/forwward-teams design

SKILL.md Content

View Translation Comparison →

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.