# Oxie Portfolio Cms Project UI UX Design

> UI/UX Design: Standard Operating Procedure

- Skill: `tomevault-io/oxie-portfolio-cms-project-ui-ux-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/oxie-portfolio-cms-project-ui-ux-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/oxie-portfolio-cms-project-ui-ux-design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/oxie-portfolio-cms-project-ui-ux-design

---


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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/oxie) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->