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:

1. Variations (3-5 grayscale mockups, diverge fast)
2. Functional (merge selected variant → functional prototype with a11y + tests)
3. Polish (apply brand tokens + performance optimization)

Expected duration: 2-4 hours per phase

Execution Steps

Phase 1: Design Variations

1. Create 3-5 grayscale UI variants
2. Focus on layout/structure (no colors yet)
3. Explore different approaches
4. Get stakeholder feedback

Phase 2: Design Functional

1. Select best variant
2. Make it functional (working prototype)
3. Add accessibility (ARIA, keyboard nav)
4. Add component tests
5. Verify user flows work

Phase 3: Design Polish

1. Apply brand design system (colors, fonts, spacing)
2. Optimize performance (lazy loading, image compression)
3. Refine animations
4. 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.