| name | ui-ux-design |
| description | Standard Operating Procedure for design workflow. Phase 1: Variations (diverge), Phase 2: Functional (converge), Phase 3: Polish (systemize). |
| allowed-tools | Read, Write, Edit |
UI/UX Design: Standard Operating Procedure
Training Guide: Three-phase design workflow for UI features.
Phase Overview
Purpose: Generate UI designs through diverge → converge → polish workflow Phases:
- Variations (3-5 grayscale mockups, diverge fast)
- Functional (merge selected variant → functional prototype with a11y + tests)
- Polish (apply brand tokens + performance optimization)
Expected duration: 2-4 hours per phase
Execution Steps
Phase 1: Design Variations
- Create 3-5 grayscale UI variants
- Focus on layout/structure (no colors yet)
- Explore different approaches
- Get stakeholder feedback
Phase 2: Design Functional
- Select best variant
- Make it functional (working prototype)
- Add accessibility (ARIA, keyboard nav)
- Add component tests
- Verify user flows work
Phase 3: Design Polish
- Apply brand design system (colors, fonts, spacing)
- Optimize performance (lazy loading, image compression)
- Refine animations
- Final accessibility audit
Common Mistakes
- Too many variants (>5)
- Design system violations
- Variants not cleaned up
- Accessibility failures
Completion Criteria
- Variants created (3-5 max)
- Functional prototype working
- Design system applied
- Accessibility score ≥95
This SOP guides UI/UX design workflow.