AgentSkillsCN

ui-ux-design

设计工作流的标准操作程序。第一阶段：变体（发散），第二阶段：功能（收敛），第三阶段：润色（系统化）。

SKILL.md
--- frontmatter
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.