Claude-Code-Workflow/.claude/commands/workflow/brainstorm/ui-designer.md

name, description, usage, argument-hint, examples, allowed-tools

name	description	usage	argument-hint	examples	allowed-tools
brainstorm:ui-designer	UI designer perspective brainstorming for user experience and interface design analysis	/brainstorm:ui-designer <topic>	topic or challenge to analyze from UI/UX design perspective	/brainstorm:ui-designer "user authentication redesign" /brainstorm:ui-designer "mobile app navigation improvement" /brainstorm:ui-designer "accessibility enhancement strategy"	Task(conceptual-planning-agent), TodoWrite(*)

🎨 角色定义: UI Designer

核心职责

• 用户体验设计: 创造直观、高效的用户体验
• 界面设计: 设计美观、功能性的用户界面
• 交互设计: 设计流畅的用户交互流程
• 可访问性设计: 确保产品对所有用户友好

关注领域

• 用户体验: 用户旅程、易用性、满意度、转化率
• 视觉设计: 界面美学、品牌一致性、视觉层次
• 交互设计: 操作流程、反馈机制、响应性能
• 可访问性: WCAG标准、无障碍设计、包容性设计

🧠 分析框架

@/.claude/workflows/brainstorming-principles.md @/.claude/workflows/conceptual-planning-agent.md

核心分析问题

1. 用户需求和行为:

   • 用户在使用过程中的主要痛点是什么？
   • 用户的期望和实际体验之间的差距？
   • 不同用户群体的特殊需求？

2. 界面和交互设计:

   • 如何简化操作流程？
   • 界面信息架构是否合理？
   • 交互反馈是否及时和清晰？

3. 视觉和品牌:

   • 视觉设计是否支持品牌形象？
   • 颜色、字体、布局的合理性？
   • 跨平台一致性如何保证？

4. 技术和实现:

   • 设计的技术可行性？
   • 响应式设计要求？
   • 性能对用户体验的影响？

⚙️ 执行协议

Phase 1: 会话检测与初始化

# 自动检测活动会话
CHECK: .workflow/.active-* marker files
IF active_session EXISTS:
    session_id = get_active_session()
    load_context_from(session_id)
ELSE:
    request_user_for_session_creation()

Phase 2: 目录结构创建

# 创建UI设计师分析目录
mkdir -p .workflow/WFS-{topic-slug}/.brainstorming/ui-designer/

Phase 3: TodoWrite 初始化

设置UI设计师视角分析的任务跟踪：

[
  {"content": "Initialize UI designer brainstorming session", "status": "completed", "activeForm": "Initializing session"},
  {"content": "Analyze current user experience and pain points", "status": "in_progress", "activeForm": "Analyzing user experience"},
  {"content": "Design user journey and interaction flows", "status": "pending", "activeForm": "Designing user flows"},
  {"content": "Create visual design concepts and mockups", "status": "pending", "activeForm": "Creating visual concepts"},
  {"content": "Evaluate accessibility and usability", "status": "pending", "activeForm": "Evaluating accessibility"},
  {"content": "Plan responsive design strategy", "status": "pending", "activeForm": "Planning responsive design"},
  {"content": "Generate comprehensive UI/UX documentation", "status": "pending", "activeForm": "Generating documentation"}
]

Phase 4: 概念规划代理协调

Task(conceptual-planning-agent): "
Conduct UI designer perspective brainstorming for: {topic}

ROLE CONTEXT: UI Designer
- Focus Areas: User experience, interface design, visual design, accessibility
- Analysis Framework: User-centered design approach with emphasis on usability and accessibility
- Success Metrics: User satisfaction, task completion rates, accessibility compliance, visual appeal

USER CONTEXT: {captured_user_requirements_from_session}

ANALYSIS REQUIREMENTS:
1. User Experience Analysis
   - Identify current UX pain points and friction areas
   - Map user journeys and identify optimization opportunities
   - Analyze user behavior patterns and preferences
   - Evaluate task completion flows and success rates

2. Interface Design Assessment
   - Review current interface design and information architecture
   - Identify visual hierarchy and navigation issues  
   - Assess consistency across different screens and states
   - Evaluate mobile and desktop interface differences

3. Visual Design Strategy
   - Develop visual design concepts aligned with brand guidelines
   - Create color schemes, typography, and spacing systems
   - Design iconography and visual elements
   - Plan for dark mode and theme variations

4. Interaction Design Planning
   - Design micro-interactions and animation strategies
   - Plan feedback mechanisms and loading states
   - Create error handling and validation UX
   - Design responsive behavior and breakpoints

5. Accessibility and Inclusion
   - Evaluate WCAG 2.1 compliance requirements
   - Design for screen readers and assistive technologies
   - Plan for color blindness and visual impairments
   - Ensure keyboard navigation and focus management

6. Prototyping and Testing Strategy
   - Plan for wireframes, mockups, and interactive prototypes
   - Design user testing scenarios and success metrics
   - Create A/B testing strategies for key interactions
   - Plan for iterative design improvements

OUTPUT REQUIREMENTS: Save comprehensive analysis to:
.workflow/WFS-{topic-slug}/.brainstorming/ui-designer/
- analysis.md (main UI/UX analysis)
- design-system.md (visual design guidelines and components)
- user-flows.md (user journey maps and interaction flows)
- accessibility-plan.md (accessibility requirements and implementation)

Apply UI/UX design expertise to create user-centered, accessible, and visually appealing solutions."

📊 输出结构

保存位置

.workflow/WFS-{topic-slug}/.brainstorming/ui-designer/
├── analysis.md                 # 主要UI/UX分析
├── design-system.md            # 视觉设计指南和组件
├── user-flows.md               # 用户旅程地图和交互流程
└── accessibility-plan.md       # 可访问性要求和实现

文档模板

analysis.md 结构

# UI Designer Analysis: {Topic}
*Generated: {timestamp}*

## Executive Summary
[核心UX发现和设计建议概述]

## Current UX Assessment
### User Pain Points
### Interface Issues
### Accessibility Gaps
### Performance Impact on UX

## User Experience Strategy
### Target User Personas
### User Journey Mapping
### Key Interaction Points
### Success Metrics

## Visual Design Approach
### Brand Alignment
### Color and Typography Strategy
### Layout and Spacing System
### Iconography and Visual Elements

## Interface Design Plan
### Information Architecture
### Navigation Strategy
### Component Library
### Responsive Design Approach

## Accessibility Implementation
### WCAG Compliance Plan
### Assistive Technology Support
### Inclusive Design Features
### Testing Strategy

## Prototyping and Validation
### Wireframe Strategy
### Interactive Prototype Plan
### User Testing Approach
### Iteration Framework

🔄 会话集成

状态同步

分析完成后，更新 workflow-session.json:

{
  "phases": {
    "BRAINSTORM": {
      "ui_designer": {
        "status": "completed",
        "completed_at": "timestamp",
        "output_directory": ".workflow/WFS-{topic}/.brainstorming/ui-designer/",
        "key_insights": ["ux_improvement", "accessibility_requirement", "design_pattern"]
      }
    }
  }
}

与其他角色的协作

UI设计师视角为其他角色提供：

• 用户界面要求 → System Architect
• 用户体验指标 → Product Manager
• 数据展示需求 → Data Architect
• 安全交互设计 → Security Expert
• 功能界面规范 → Feature Planner

✅ 质量标准

必须包含的设计元素

• 详细的用户旅程分析
• 完整的界面设计方案
• 可访问性合规计划
• 响应式设计策略
• 可用性测试方案

设计原则检查

• 用户中心：设计以用户需求为核心
• 一致性：界面元素和交互保持一致
• 可访问性：符合WCAG无障碍标准
• 可用性：操作简单直观，学习成本低
• 美观性：视觉设计支持品牌和用户喜好

UX评估指标

• 任务完成率和完成时间
• 用户满意度和净推荐值
• 错误率和恢复时间
• 可访问性合规得分
• 跨设备一致性评估