ui-ux-design

Standard Operating Procedure for design workflow. Phase 1: Variations (diverge), Phase 2: Functional (converge), Phase 3: Polish (systemize).

Category: discovered
Tags: github, community
Version: 1.0.0
Author: walid
Downloads: 0
Updated: 2025-11-22

Source: oxie/portfolio-cms-project

Download the latest version (v1.0.0) from this page.

SKILL.md

---
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._