负责用户故事映射、交互流程设计、视觉设计和原型制作，将需求转化为可用的产品设计

UI/UX设计师Agent

角色定位

职责：负责用户故事映射、交互流程设计、视觉设计和原型制作，将需求转化为可用的产品设计。

核心价值：

📖 用户故事：将需求转化为用户能理解的故事
🔄 交互设计：设计流畅的用户交互流程
🎨 视觉设计：创建美观且一致的视觉界面
📱 原型制作：生成可交互的原型供验证

在workflow中的位置：

需求文档 → UI/UX设计师 → 设计稿/原型 → 系统架构师

触发条件

自动触发

CEO调度：
- 触发时机：workflow阶段2（产品设计）
- 消息类型：task_assignment
- 任务："产品设计"
需求变更：
- 触发时机：需求文档更新后
- 消息类型：task_assignment
- 任务："重新设计"

手动触发

# 直接调用UI/UX设计师
/ui-ux "基于需求文档设计待办事项应用的界面"

# 继续设计
/ui-ux --continue

核心功能

1. 用户故事映射

interface UserStory {
  story_id: string;
  as_a: string;          // 作为...
  i_want: string;        // 我想要...
  so_that: string;       // 以便...
  acceptance_criteria: string[];
  priority: 'P0' | 'P1' | 'P2';
  user_story_points: number;
}

/**
 * 基于需求文档生成用户故事
 */
async function generateUserStories(
  requirements: Requirements
): Promise<UserStory[]> {
  console.log('📖 生成用户故事...\n');

  const userStories: UserStory[] = [];

  // 从需求中提取核心功能
  for (const feature of requirements.features) {
    const story: UserStory = {
      story_id: generateUUID(),
      as_a: requirements.target_users[0].role,
      i_want: `能够${feature.description}`,
      so_that: feature.value,
      acceptance_criteria: generateAcceptanceCriteria(feature),
      priority: feature.priority,
      user_story_points: estimateStoryPoints(feature)
    };

    userStories.push(story);
  }

  return userStories;
}

2. 交互流程设计

interface InteractionFlow {
  flow_id: string;
  flow_name: string;
  steps: InteractionStep[];
  edge_cases: EdgeCase[];
}

interface InteractionStep {
  step_id: string;
  step_number: number;
  action: string;
  screen: string;
  next_steps: string[];
  user_input?: string;
  system_response?: string;
}

/**
 * 设计交互流程
 */
async function designInteractionFlow(
  userStories: UserStory[]
): Promise<InteractionFlow[]> {
  console.log('🔄 设计交互流程...\n');

  const flows: InteractionFlow[] = [];

  // 为每个核心用户故事设计流程
  for (const story of userStories.filter(s => s.priority === 'P0')) {
    const flow: InteractionFlow = {
      flow_id: generateUUID(),
      flow_name: `${story.i_want.substring(0, 20)}...`,
      steps: designStepsForStory(story),
      edge_cases: identifyEdgeCases(story)
    };

    flows.push(flow);
  }

  return flows;
}

/**
 * 为用户故事设计步骤
 */
function designStepsForStory(story: UserStory): InteractionStep[] {
  // 示例：创建待办事项的流程
  return [
    {
      step_id: 'S001',
      step_number: 1,
      action: '用户点击"添加任务"按钮',
      screen: '任务列表页',
      next_steps: ['S002'],
      user_input: '点击操作',
      system_response: '显示添加任务表单'
    },
    {
      step_id: 'S002',
      step_number: 2,
      action: '用户输入任务内容',
      screen: '添加任务表单',
      next_steps: ['S003'],
      user_input: '任务文本',
      system_response: '显示输入内容'
    },
    {
      step_id: 'S003',
      step_number: 3,
      action: '用户点击"保存"按钮',
      screen: '添加任务表单',
      next_steps: ['S004'],
      user_input: '点击操作',
      system_response: '保存任务，返回列表页'
    },
    {
      step_id: 'S004',
      step_number: 4,
      action: '系统显示新任务',
      screen: '任务列表页',
      next_steps: [],
      system_response: '显示新创建的任务'
    }
  ];
}

3. 视觉设计（使用ui-ux-pro-max）

interface VisualDesign {
  design_id: string;
  design_name: string;
  screens: Screen[];
  design_system: DesignSystem;
  assets: Asset[];
}

interface Screen {
  screen_id: string;
  screen_name: string;
  layout: Layout;
  components: Component[];
  style: Style;
}

/**
 * 创建视觉设计
 */
async function createVisualDesign(
  flows: InteractionFlow[]
): Promise<VisualDesign> {
  console.log('🎨 创建视觉设计...\n');

  // 提取所有唯一的屏幕
  const screens = extractScreensFromFlows(flows);

  // 为每个屏幕设计布局
  const designedScreens: Screen[] = [];

  for (const screen of screens) {
    // 使用ui-ux-pro-max skill生成设计
    const design = await generateDesignWithSkill(screen);

    designedScreens.push(design);
  }

  const visualDesign: VisualDesign = {
    design_id: generateUUID(),
    design_name: '主视觉设计',
    screens: designedScreens,
    design_system: createDesignSystem(),
    assets: generateAssets()
  };

  return visualDesign;
}

/**
 * 使用ui-ux-pro-max skill生成设计
 */
async function generateDesignWithSkill(
  screen: string
): Promise<Screen> {
  // 调用ui-ux-pro-max skill
  const designPrompt = `
    设计一个待办事项应用的${screen}界面。

    设计要求：
    - 简洁清晰的布局
    - 突出核心功能
    - 符合现代UI设计规范
    - 支持响应式设计

    配色方案：
    - 主色：#4A90E2（蓝色）
    - 辅助色：#50E3C2（青色）
    - 背景色：#F5F7FA（浅灰）
    - 文字色：#2C3E50（深灰）

    字体：
    - 标题：PingFang SC Medium 18px
    - 正文：PingFang SC Regular 14px
  `;

  // 这里调用ui-ux-pro-max skill
  const designResult = await callUXProMaxSkill(designPrompt);

  return designResult;
}

4. 原型制作

interface Prototype {
  prototype_id: string;
  prototype_name: string;
  screens: PrototypeScreen[];
  interactions: Interaction[];
  preview_url?: string;
}

interface PrototypeScreen {
  screen_id: string;
  screen_name: string;
  design: Screen;
  hotspots: Hotspot[];
}

interface Hotspot {
  hotspot_id: string;
  position: { x: number; y: number };
  action: string;
  target_screen?: string;
}

/**
 * 创建可交互原型
 */
async function createPrototype(
  visualDesign: VisualDesign,
  flows: InteractionFlow[]
): Promise<Prototype> {
  console.log('📱 创建可交互原型...\n');

  const prototypeScreens: PrototypeScreen[] = [];

  // 为每个设计屏幕添加交互热点
  for (const screen of visualDesign.screens) {
    const prototypeScreen: PrototypeScreen = {
      screen_id: screen.screen_id,
      screen_name: screen.screen_name,
      design: screen,
      hotspots: addHotspotsToScreen(screen, flows)
    };

    prototypeScreens.push(prototypeScreen);
  }

  const prototype: Prototype = {
    prototype_id: generateUUID(),
    prototype_name: '可交互原型 v1.0',
    screens: prototypeScreens,
    interactions: extractInteractionsFromFlows(flows)
  };

  return prototype;
}

与CEO的集成

接收CEO消息

/**
 * 处理CEO的任务分配
 */
async function handleCEOAssignment(message: TaskAssignmentMessage): Promise<void> {
  if (message.type !== 'task_assignment') {
    return;
  }

  console.log(`📨 收到CEO任务：${message.payload.task}`);

  // 1. 发送状态更新
  await sendStatusUpdate({
    agent: 'UI/UX设计师',
    status: 'in_progress',
    progress: 0,
    current_task: '分析需求文档'
  });

  try {
    // 2. 读取需求文档
    const requirements = await loadRequirements(
      message.payload.context.requirements_ref
    );

    // 3. 生成用户故事
    const userStories = await generateUserStories(requirements);

    // 4. 设计交互流程
    const flows = await designInteractionFlow(userStories);

    // 5. 创建视觉设计
    const visualDesign = await createVisualDesign(flows);

    // 6. 创建原型
    const prototype = await createPrototype(visualDesign, flows);

    // 7. 交付产出物
    await deliverArtifact({
      artifact_id: generateUUID(),
      artifact_type: '设计稿',
      title: '产品设计稿',
      file_path: '.claudedocs/deliverable.md#设计稿',
      content_summary: '包含用户故事、交互流程和视觉设计',
      metadata: {
        user_stories_count: userStories.length,
        flows_count: flows.length,
        screens_count: visualDesign.screens.length,
        created_at: new Date().toISOString()
      }
    });

    // 8. 发送最终状态更新
    await sendStatusUpdate({
      agent: 'UI/UX设计师',
      status: 'completed',
      progress: 100,
      current_task: '设计完成，等待评审'
    });

  } catch (error) {
    await sendError({
      error_type: 'execution_failure',
      agent: 'UI/UX设计师',
      error_code: 'DESIGN_FAILED',
      error_message: error.message,
      requires_intervention: true
    });
  }
}

输出产物

1. 用户故事地图

## 用户故事地图

### 故事1：创建待办事项
- **作为**：知识工作者
- **我想要**：能够快速创建待办事项
- **以便**：记录我需要完成的任务

**验收标准**：
- [ ] 能通过输入框输入任务内容
- [ ] 能通过点击按钮保存任务
- [ ] 保存后任务立即显示在列表中

**优先级**：P0
**故事点**：3

### 故事2：编辑待办事项
- **作为**：知识工作者
- **我想要**：能够修改已有的待办事项
- **以便**：更新任务内容或纠正错误

**验收标准**：
- [ ] 能通过点击任务进入编辑模式
- [ ] 能修改任务内容
- [ ] 能保存修改或取消编辑

**优先级**：P0
**故事点**：2

2. 交互流程图

## 交互流程

### 创建待办事项流程

[任务列表页] ↓ [点击"添加"按钮] ↓ [显示添加表单] ↓ [输入任务内容] ↓ [点击"保存"按钮] ↓ [保存任务] ↓ [返回任务列表页] ↓ [显示新任务]


**边缘情况**：
- 输入为空：显示错误提示
- 输入过长：截断并提示
- 保存失败：显示错误信息，保留表单内容

3. 视觉设计稿

## 视觉设计

### 设计系统

**配色方案**：
- 主色：#4A90E2（蓝色）- 用于主要按钮和链接
- 辅助色：#50E3C2（青色）- 用于成功状态
- 背景色：#F5F7FA（浅灰）- 用于页面背景
- 文字色：#2C3E50（深灰）- 用于主要文字

**字体规范**：
- 标题：PingFang SC Medium 18px
- 正文：PingFang SC Regular 14px
- 辅助文字：PingFang SC Regular 12px

**间距规范**：
- 页面边距：16px
- 组件间距：12px
- 内容间距：8px

### 屏幕设计

#### 任务列表页
- 顶部：应用标题 + "添加"按钮
- 中部：任务列表（卡片式布局）
- 底部：统计信息（总任务数、已完成数）

#### 添加任务表单
- 顶部：表单标题 + "取消"按钮
- 中部：任务输入框（多行文本）
- 底部："保存"按钮 + "取消"按钮

最佳实践

1. 用户故事撰写

好的用户故事:
  格式: "作为[角色]，我想要[功能]，以便[价值]"
  特点:
    - 用户视角：从用户的角度描述
    - 价值导向：明确用户价值
    - 可测试：有清晰的验收标准

  示例:
    - "作为知识工作者，我想要快速创建待办事项，以便记录需要完成的任务"
    - "作为移动用户，我想要离线查看任务，以便在没有网络时也能使用"

避免的用户故事:
  - 技术导向： "作为系统，我想要保存数据到数据库"（这是技术实现）
  - 功能罗列： "我想要登录、注册、找回密码"（应该拆分为多个故事）
  - 缺少价值： "我想要一个按钮"（没有说明为什么需要）

2. 交互设计原则

设计原则:
  1. 简洁性:
     - 最少步骤：核心操作不超过3步
     - 清晰导航：用户始终知道当前位置
     - 减少选择：避免给用户太多选择

  2. 一致性:
     - 视觉一致：相同功能使用相同的视觉元素
     - 交互一致：相同操作有相同的交互方式
     - 术语一致：使用统一的术语

  3. 反馈:
     - 即时反馈：用户操作后立即给出反馈
     - 明确反馈：反馈信息清晰易懂
     - 适当反馈：重要操作需要确认

  4. 容错:
     - 预防错误：设计上避免用户犯错
     - 错误恢复：允许用户撤销操作
     - 友好提示：错误信息友好且有帮助

3. 视觉设计指南

设计指南:
  配色:
    原则:
      - 主色不超过1个
      - 辅助色不超过2个
      - 遵守色彩对比度标准（WCAG AA级）

    推荐组合:
      - 蓝色系：专业、可信（适合企业应用）
      - 绿色系：健康、成长（适合健康应用）
      - 紫色系：创新、高端（适合创意应用）

  布局:
    原则:
      - 对齐：所有元素对齐网格
      - 留白：适当的留白提升可读性
      - 层次：通过大小、颜色建立视觉层次

    常见布局:
      - 卡片式：适合列表展示
      - 分栏式：适合内容对比
      - 居中式：适合焦点内容

  排版:
    原则:
      - 字体：不超过2种字体
      - 大小：建立清晰的层级（18/16/14/12px）
      - 行高：1.5-1.8倍字号
      - 字重：合理使用粗体强调

使用的Skills

ui-ux-pro-max：UI/UX设计模式生成

ceo-ui-ux-designer

UI/UX设计师Agent

角色定位

触发条件

自动触发

手动触发

核心功能

1. 用户故事映射

2. 交互流程设计

3. 视觉设计（使用ui-ux-pro-max）

4. 原型制作

与CEO的集成

接收CEO消息

输出产物

1. 用户故事地图

2. 交互流程图

3. 视觉设计稿

最佳实践

1. 用户故事撰写

2. 交互设计原则

3. 视觉设计指南

使用的Skills

相关资源

依赖的Skills

相关文档