# Design Review

> 3-phase design review with structured checklists — pre-design, component audit, and final review. Run before shipping any UI.

- Skill: `nulightjens/design-review` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nulightjens/design-review`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nulightjens/design-review/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: nulightjens (https://skillmd.com/u/nulightjens)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nulightjens/design-review

---


# Design Review — Structured Quality Gate

Three phase-specific checklists that catch what your eyes skip after staring at the same screen for hours. Run all three before shipping.

## Usage

Invoke `/design-review` when you're ready to audit a UI. The skill walks through all three phases in order and reports findings.

---

## Phase 1: Pre-Design Audit

Run this before writing any UI code. If these aren't satisfied, the design has structural problems that no amount of polish will fix.

### User Intent
- [ ] Primary user intent defined (what they came to accomplish)
- [ ] Secondary intents identified (browsing, comparing, exploring)
- [ ] User flow mapped (entry -> objective -> completion)
- [ ] Every UI element serves a defined intent (nothing decorative without purpose)

### Content
- [ ] Content decisions made: what to show vs what to hide
- [ ] Real content written (not lorem ipsum)
- [ ] Edge cases identified: long text, missing images, empty states, error states
- [ ] Truncation strategy for long content

### Layout
- [ ] Information flows top-to-bottom, left-to-right
- [ ] Navigation placement decided (top for web, bottom tab bar for mobile)
- [ ] CTA placement planned (eye-catching, easy to find)
- [ ] Reference designs collected from real products

### System
- [ ] One font family chosen (distinctive, not Inter/Roboto for production)
- [ ] Color palette defined (primary + semantic colors, 60-30-10 ratio)
- [ ] Spacing system set (4pt or 8pt grid)
- [ ] Corner radius chosen (one value for similar components)
- [ ] Icon library selected (Lucide, Phosphor, or Feather)
- [ ] Responsive breakpoints planned (12 desktop / 8 tablet / 4 mobile)

---

## Phase 2: Component Audit

Run this after building components but before assembling full pages. Catches inconsistency and missing states.

### Typography
- [ ] Max 4-6 font sizes used (4 for dashboards, 6 for landing)
- [ ] Max 2-3 font weights
- [ ] Headers have tightened letter-spacing (-2% to -3%)
- [ ] Headers have reduced line-height (110-120%)
- [ ] Body text at 18px baseline with 140-160% line-height
- [ ] Numbers use monospace or tabular-nums

### Color
- [ ] 60-30-10 ratio maintained (neutral / complementary / brand)
- [ ] Semantic colors assigned correctly (blue=info, red=error, yellow=warning, green=success)
- [ ] Brand color reserved for the 10% that matters
- [ ] All text meets WCAG AA contrast (4.5:1 normal, 3:1 large)
- [ ] No hardcoded hex values in components (use tokens)

### Spacing
- [ ] All values on 4/8-point grid (no random pixel values)
- [ ] Related elements grouped with tighter spacing
- [ ] Separate groups distinguished with wider spacing
- [ ] Mobile has more spacing than desktop

### Consistency
- [ ] One corner radius for all similar-sized components
- [ ] Icons from one library, one style, one line weight
- [ ] Icon size matches font line-height
- [ ] Paired components (back/skip, search bars) are identical except content
- [ ] No "similar but slightly different" components

### Interactive States
- [ ] Buttons: default, hover, active, focus, disabled, loading
- [ ] Inputs: default, focus, filled, error, warning, disabled
- [ ] Empty states designed (no data yet)
- [ ] Loading states designed (skeletons or spinners)
- [ ] Error states designed (what went wrong + how to fix)
- [ ] Success states designed (confirmation feedback)

### Shadows
- [ ] Shadow color is light gray (not black at low opacity)
- [ ] Blur is generous (soft, not sharp)
- [ ] Cards subtle; popovers moderate; modals strong
- [ ] Shadow is NOT the first thing noticed
- [ ] Dark mode uses background lightness, not shadows

### Buttons
- [ ] Padding ratio approximately 2:1 width to height
- [ ] Primary CTA is filled; secondary is ghost
- [ ] Small transition animation on hover/click
- [ ] CTA labels are verb + noun ("Send Message"), not generic ("Submit")

### Icons
- [ ] Well-known icons (home, search, profile) have no label
- [ ] Non-obvious icons have tooltips or labels
- [ ] No emojis used as functional icons
- [ ] No mismatched fill/line-weight in the same section

---

## Phase 3: Final Review

Run this before shipping to production. The last gate before users see it.

### Fundamentals
- [ ] Visual hierarchy is clear (new user can tell what's most important in 2 seconds)
- [ ] No random spacing values — all on grid
- [ ] Font sizes reduced to minimum necessary
- [ ] Color follows 60-30-10 ratio
- [ ] Consistency across all similar components

### Content Resilience
- [ ] Tested with long strings (names, titles, descriptions)
- [ ] Tested with missing images (fallback in place)
- [ ] Tested with empty data (empty states designed)
- [ ] Copy is clear, short, and non-redundant
- [ ] No lorem ipsum remaining
- [ ] Error messages tell the user what broke AND how to fix it
- [ ] Empty states explain what will appear AND give action to populate

### Interactive Quality
- [ ] Every button has hover + active + disabled states
- [ ] Every input has focus + error states
- [ ] Loading states exist for all async operations
- [ ] Success/error feedback for user actions
- [ ] Micro interactions confirm important actions (save, copy, submit)

### Visual Polish
- [ ] Shadows are subtle (not the first thing noticed)
- [ ] Gradients use same-hue variations (or removed)
- [ ] No redundant elements (unnecessary arrows, strokes, decorations)
- [ ] Charts readable with axes and matching bar counts
- [ ] Icons consistent (one library, one style)

### Dark Mode (if applicable)
- [ ] Cards lighter than background
- [ ] No shadows for depth
- [ ] Borders dimmed or removed
- [ ] Saturated colors reduced
- [ ] Not pure black (#000)

### Animation
- [ ] Every animation serves clarity or functionality
- [ ] No scroll-jacking
- [ ] No animations that delay content visibility
- [ ] Button transitions present
- [ ] Progressive disclosure where appropriate

### Accessibility
- [ ] Text contrast meets WCAG AA (4.5:1)
- [ ] Large text contrast meets WCAG AA (3:1)
- [ ] Touch targets 44px+ on mobile
- [ ] Focus states visible for keyboard navigation
- [ ] Labels on non-obvious icons

### Responsive
- [ ] Works at desktop (1280px+)
- [ ] Works at tablet (768px)
- [ ] Works at mobile (375px)
- [ ] Mobile has increased spacing
- [ ] Navigation collapses appropriately

### AI Slop Check
- [ ] Font is not Inter/Roboto (for production UIs)
- [ ] No emojis as icons
- [ ] No evenly-distributed timid color palette
- [ ] No redundant KPI cards
- [ ] No stock gradients
- [ ] Real product screenshots on landing pages (not generic icons)

### The Final Test
- [ ] Show someone unfamiliar — can they use it without explanation?
- [ ] The UI signifies how things work through containers, states, and hover effects
- [ ] No "Submit" buttons, "No data found" empty states, or "Something went wrong" errors remain