nulightjens 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