UI/UX Pro Max

Overview

Phase 1: Requirements Gathering

1. Identify the product type and target audience
2. Determine platform(s) (web, mobile, desktop)
3. Assess existing brand guidelines or design system
4. Define accessibility requirements
5. Set performance budgets

Priority Hierarchy (Non-Negotiable Order)

1. Accessibility — WCAG 2.1 AA minimum, AAA preferred
   • Contrast ratio: 4.5:1 for normal text, 3:1 for large text
   • Keyboard navigation: all interactive elements focusable, visible focus ring
   • ARIA labels on all non-text controls
   • Screen reader announcements for dynamic content
   • Reduced motion: respect

     prefers-reduced-motion

2. Touch Targets — 44x44px minimum (Apple HIG / WCAG 2.5.5)
   • Spacing between targets: minimum 8px
   • Clickable area may exceed visual bounds via padding
3. Performance
   • Images: WebP with AVIF fallback, lazy loading below fold
   • CLS < 0.1, LCP < 2.5s, FID < 100ms
   • Font loading:

     font-display: swap

     , preload critical fonts
   • Bundle: code-split routes, tree-shake unused components
4. Style — Applied only after 1-3 are satisfied
5. Layout — Composition and spacing applied last

Phase 2: Style Selection

Style Selection Decision Table

Style Reference (Key Categories)

• Glassmorphism:

  backdrop-filter: blur(10px)

  , semi-transparent backgrounds, subtle border
• Frosted Glass: heavier blur (20px+), lower opacity, works on busy backgrounds
• Acrylic (Fluent Design): noise texture overlay + blur

• Minimalism: maximum whitespace, single accent color, limited element count
• Swiss Design: grid-based, Helvetica/Grotesk, asymmetric balance
• Japandi: warm neutrals, organic shapes, hidden complexity

• Brutalism: raw, exposed structure, system fonts, harsh borders, no border-radius
• Neo-Brutalism: brutalism + bright accent colors + drop shadows
• Maximalism: layered textures, mixed fonts, dense information

• Neumorphism: soft inner/outer shadows on same-color backgrounds
• Material Design 3: elevation tokens, tonal surfaces, dynamic color
• Claymorphism: inflated 3D look, pastel colors, inner shadows

• Dark Mode: OLED-safe (#000 backgrounds), muted primaries, reduced brightness
• Cyberpunk: neon on dark, glitch effects, monospace accents
• Noir: high contrast, grayscale with single accent

Phase 3: Color and Typography

Color Palette Selection Rules

Color Token Rules

• Primary: brand identity color, used for CTAs and key actions
• Secondary: complementary, used for secondary actions and accents
• Neutral: gray scale for text, borders, backgrounds (minimum 9 shades)
• Semantic: success (#22C55E), warning (#F59E0B), error (#EF4444), info (#3B82F6)
• Always define as semantic tokens:

  --color-action-primary

  , not

  --color-blue-500

Dark Mode Palette Rules

Font Pairings (Top 10)

Typography Scale (Default)

--text-xs: 0.75rem / 1rem
--text-sm: 0.875rem / 1.25rem
--text-base: 1rem / 1.5rem
--text-lg: 1.125rem / 1.75rem
--text-xl: 1.25rem / 1.75rem
--text-2xl: 1.5rem / 2rem
--text-3xl: 1.875rem / 2.25rem
--text-4xl: 2.25rem / 2.5rem

Phase 4: UX Guidelines Application

Navigation Rules

1. Primary navigation: maximum 7 items (Miller's Law)
2. Current location always indicated (breadcrumb or active state)
3. Back button must always work as expected
4. Search available on every page for content-heavy apps

Form Rules

1. Labels above inputs, never placeholder-only
2. Inline validation on blur, not on keystroke
3. Error messages: specific, actionable, adjacent to field
4. Auto-focus first field on page load
5. Submit button disabled until form valid (with explanation)
6. Progress indicator for multi-step forms

Feedback Rules

1. Loading states for any action > 300ms
2. Skeleton screens over spinners for content loading
3. Toast notifications: auto-dismiss success (3s), persist errors
4. Tap feedback: 80-150ms response time
5. Optimistic UI for low-risk actions

Content Layout Rules

1. F-pattern for text-heavy pages
2. Z-pattern for landing pages
3. Above-the-fold: value proposition + primary CTA
4. One primary CTA per viewport

Mobile Rules

1. Bottom navigation for primary actions (thumb zone)
2. Pull-to-refresh for feed content
3. Swipe gestures with visual affordance

Phase 5: Implementation

Chart Type Selection Decision Table

Supported Stacks

<script setup>

Design Token Architecture

master.tokens.json    -> Primitive values (colors, spacing, fonts)
semantic.tokens.json  -> Mapped meanings (action-primary, surface-elevated)
component.tokens.json -> Component-specific (button-padding, card-radius)
overrides/
  brand-a.tokens.json -> Brand-specific overrides
  dark.tokens.json    -> Dark mode overrides

• Master tokens are read-only defaults
• Overrides are shallow-merged at runtime
• Component tokens reference semantic tokens only
• Never reference primitive tokens in components

Quick Wins Checklist

• No emoji as icons — use Lucide React or Heroicons
• Tap feedback delay: 80-150ms
• Semantic color tokens (not raw hex values)
• 8dp spacing rhythm (4, 8, 12, 16, 24, 32, 48, 64)

• prefers-color-scheme

  media query for dark mode

• prefers-reduced-motion

  for animations

• :focus-visible

  instead of

  :focus

  for keyboard-only focus
• Image aspect ratios set to prevent CLS
• Font preloading for above-the-fold text

• loading="lazy"

  on below-fold images

Anti-Patterns / Common Mistakes

opacity

Integration Points

ui-design-system

canvas-design

mobile-design

ux-researcher-designer

artifacts-builder

senior-frontend

accessibility

Skill Type