ui-ux-design

marcusgoll's avatarfrom marcusgoll

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

⭐0stars🔀0forks📁View on GitHub🕐Updated Nov 24, 2025
[Visual Content Workflows]

When & Why to Use This Skill

This Claude skill provides a structured UI/UX Design Standard Operating Procedure (SOP) designed to streamline the creative process from ideation to production. It guides users through a rigorous three-phase workflow—Variations, Functional, and Polish—ensuring that digital interfaces are not only aesthetically pleasing but also functionally sound, accessible, and aligned with brand systems.

Use Cases

  • Rapid Concept Exploration: Generating 3-5 grayscale layout variations to quickly iterate on UI structures and user flows without being distracted by visual styling.
  • Accessibility-First Prototyping: Developing functional prototypes that integrate ARIA standards and keyboard navigation early in the design phase to ensure inclusivity.
  • Design System Implementation: Systematizing raw designs by applying brand tokens, optimizing asset performance, and conducting final quality audits for developer handoff.
nameui-ux-design
description"Standard Operating Procedure for design workflow. Phase 1: Variations (diverge), Phase 2: Functional (converge), Phase 3: Polish (systemize)."
allowed-toolsRead, 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.