主题
Claude Code 各角色工作流指南
覆盖范围：产品 → 设计 → 研发 → 测试，聚焦 Claude Code 生态（Skills + MCP）的实际使用方式。 每个角色按「什么时间 · 用什么工具 · 做什么事情 · 交付什么」展开。
全链路流程概览
一、产品（Product）
角色职责
负责需求调研、功能规划、PRD 编写、与各方对齐，确保研发交付符合业务目标。
工作流程
阶段 1：需求探索
时间节点：接到需求或产生想法时
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/brainstorming | Skill | superpowers | 与 Claude 对话探索需求，发散方案，形成初步设计决策 |
做什么：
- 用
/brainstorming梳理用户问题、目标用户、核心场景 - Claude 会主动提出 2-3 个方案供对比，形成设计决策
交付物：设计决策记录、初步方案选型
阶段 2：PRD 编写
时间节点：方案确定后
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/writing-plans | Skill | superpowers | 将需求拆解为结构化的功能模块和用户故事 |
做什么：
- 用
/writing-plans将功能需求拆解为可执行的用户故事（含验收标准） - 每个故事明确：用户角色、操作路径、预期结果、边界条件
交付物：PRD 文档、用户故事列表（含验收标准）
二、设计（Design）
角色职责
负责交互流程设计和 UI 视觉设计，输出可供研发实现的设计规范和组件库。
工作流程
阶段 1：交互设计
时间节点：拿到 PRD 后
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/brainstorming | Skill | superpowers | 围绕用户故事探讨交互方案，生成流程图思路 |
做什么：
- 用
/brainstorming梳理各页面的信息架构和操作流程 - 识别复杂交互场景，提前与产品对齐
交付物：交互流程图、信息架构图
阶段 2：UI 设计
时间节点：交互方案确认后
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/frontend-design | Skill | frontend-design | 生成高质量 UI 组件代码，验证设计可实现性 |
mastergo-magic-mcp | MCP | — | 读取/操作 MasterGo 设计稿，同步设计 token |
browser-tools-mcp | MCP | — | 在浏览器中预览和验证 UI 效果 |
做什么：
- 在 MasterGo 完成视觉稿，用
mastergo-magic-mcp管理设计变量（颜色、间距、字体） - 用
/frontend-design生成关键组件的参考代码，与研发对齐实现方式 - 用
browser-tools-mcp实时预览 UI 在浏览器中的效果
交付物：UI 视觉稿、设计规范文档、组件参考代码
阶段 3：设计交付
时间节点：视觉稿完成后
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
mastergo-magic-mcp | MCP | — | 导出切图、标注尺寸、发布设计链接 |
做什么：
- 通过 MasterGo MCP 导出资源，生成标注文档
- 通知研发设计已就绪
交付物：切图资源、设计标注、组件规范
三、研发（Development）
角色职责
负责功能实现、代码质量、技术架构，交付可测试的代码和 PR。
工作流程
阶段 0：CLAUDE.md 维护
时间节点：接手新项目时初次创建；每次会话结束后更新；代码规范/架构变更后审查
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/init | 内置命令 | — | 扫描项目结构，生成初始 CLAUDE.md |
/revise-claude-md | Skill | claude-md-management | 会话结束后自动提取新发现的约定、命令、注意事项并追加 |
/claude-md-improver | Skill | claude-md-management | 对 CLAUDE.md 进行质量评分（A-F）并提出改进建议 |
做什么：
初次创建：运行 /init，Claude 扫描项目结构自动生成初始 CLAUDE.md。推荐包含以下内容（只写项目特有的，不写通用最佳实践）：
markdown
## Commands
- 构建：`npm run build`
- 测试：`npm test`
- 开发：`npm run dev`
## Architecture
src/
├── api/ # REST 接口层
├── services/ # 业务逻辑
└── models/ # 数据模型
## Gotchas
- 所有接口返回统一包裹格式 { code, data, message }
- 环境变量必须在 .env.local 中配置，不要提交持续维护：每次会话结束后运行 /revise-claude-md，Claude 自动追加本次发现的新内容
定期审查：再次运行 /claude-md-improver，根据评分报告（A-F）修复过期或缺失的内容
交付物：项目根目录的 CLAUDE.md
阶段 1：功能开发
时间节点：拿到用户故事后
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/brainstorming | Skill | superpowers | 技术方案设计，评估实现路径（有设计决策时才用） |
/writing-plans | Skill | superpowers | 将功能拆解为 2-5 分钟粒度的实现任务 |
/using-git-worktrees | Skill | superpowers | 创建独立 worktree，隔离开发环境 |
/subagent-driven-development | Skill | superpowers | 用子 Agent 并行执行各任务 |
/test-driven-development | Skill | superpowers | 先写测试再写实现（Red-Green-Refactor） |
/verification-before-completion | Skill | superpowers | 完成后验证：测试通过、符合需求、无回归 |
/finishing-a-development-branch | Skill | superpowers | 分支收尾：整理提交历史、准备合并 |
mastergo-magic-mcp | MCP | — | 读取设计稿参数（颜色、间距等） |
playwright | MCP | — | 验证 UI 功能的 E2E 行为 |
context7 | MCP | — | 查询框架最新文档 |
做什么：
- 复杂功能先用
/brainstorming敲定技术方案 - 用
/writing-plans生成详细任务清单（含具体文件路径和代码示例） - 开 worktree 隔离，用
/subagent-driven-development逐任务执行 - 每个任务严格遵循
/test-driven-development：先写失败测试，再写实现 - 完成后用
/verification-before-completion核查所有验收标准
交付物：功能代码、单元测试、集成测试、PR
阶段 2：Bug 修复
时间节点：收到 bug 报告时
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/systematic-debugging | Skill | superpowers | 结构化排查：隔离问题、提假设、验证 |
/test-driven-development | Skill | superpowers | 先写能复现 bug 的失败测试 |
/verification-before-completion | Skill | superpowers | 验证修复有效且无新增回归 |
playwright | MCP | — | 复现 UI 层面的 bug |
browser-tools-mcp | MCP | — | 在浏览器中观察运行时行为 |
做什么：
- 用
/systematic-debugging定位根因（不要直接猜测修复） - 先写能稳定复现 bug 的测试（让测试红起来）
- 修复代码使测试变绿
- 用
/verification-before-completion确认修复
交付物：修复代码、复现测试、PR
阶段 3：代码重构
时间节点：技术债清理或架构优化时
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/brainstorming | Skill | superpowers | 评估重构范围，讨论方案利弊 |
/writing-plans | Skill | superpowers | 拆解重构步骤，保证每步可测 |
/test-driven-development | Skill | superpowers | 重构前先补测试，保证行为不变 |
/requesting-code-review | Skill | superpowers | 提交前发起 Code Review |
/simplify | Skill | code-simplifier | 检查代码质量，消除冗余 |
做什么：
- 用
/brainstorming明确重构边界和风险 - 先补全覆盖当前行为的测试（安全网）
- 按
/writing-plans的步骤小步重构，每步保持测试绿色 - 用
/simplify做最终代码审查
交付物：重构后代码、测试覆盖报告、PR
阶段 4：Code Review
时间节点：提交 PR 后 / 收到 Review 评论时
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/requesting-code-review | Skill | superpowers | 发起 Review 前的自检和格式化请求 |
/receiving-code-review | Skill | superpowers | 收到评论后，系统性处理反馈 |
做什么：
- 提交前用
/requesting-code-review自查：符合规范、测试完整、无遗漏 - 收到评论后用
/receiving-code-review逐条分析，避免误改或漏改
交付物：合并就绪的 PR
四、测试（Testing）
角色职责
负责测试规划、用例设计、自动化测试实现和验收回归，确保交付质量。
工作流程
阶段 1：测试规划
时间节点：拿到 PRD 和设计稿后，研发开始前
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/brainstorming | Skill | superpowers | 分析测试范围、识别高风险场景、设计测试策略 |
做什么：
- 用
/brainstorming梳理测试分层（单元 / 集成 / E2E / 验收） - 识别核心路径和边界条件，确定自动化优先级
交付物：测试计划、测试用例清单
阶段 2：自动化测试编写
时间节点：研发提测后 / 与研发并行
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/test-driven-development | Skill | superpowers | 按 TDD 节奏编写测试 |
/writing-plans | Skill | superpowers | 拆解自动化测试任务 |
playwright | MCP | — | 编写和执行 E2E 测试脚本 |
browser-tools-mcp | MCP | — | 在浏览器中探索页面结构，辅助定位元素 |
做什么：
- 优先写 E2E 核心路径测试（用
playwrightMCP） - 用
browser-tools-mcp辅助定位 DOM 元素，确保选择器稳定 - 用
/writing-plans拆解复杂测试场景的实现步骤
交付物：E2E 测试脚本、单元测试补充
阶段 3：缺陷排查
时间节点：发现测试失败 / 功能异常时
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/systematic-debugging | Skill | superpowers | 结构化分析失败原因 |
playwright | MCP | — | 重放失败场景，截图/录制复现过程 |
browser-tools-mcp | MCP | — | 在浏览器中观察运行时状态 |
excel | MCP | — | 统计缺陷数据，生成质量报告 |
做什么：
- 用
/systematic-debugging判断是测试脚本问题还是真实 bug - 用
playwright截图/录制复现步骤，提供给研发 - 用
excelMCP 汇总缺陷统计，输出质量报告
交付物：缺陷报告、复现录制、质量统计
阶段 4：验收回归
时间节点：研发修复后 / 发布前
| 工具 | 类型 | 来源 | 用途 |
|---|---|---|---|
/verification-before-completion | Skill | superpowers | 系统验证：所有用例通过、无回归、符合验收标准 |
playwright | MCP | — | 执行全量 E2E 回归 |
做什么：
- 用
/verification-before-completion逐一核查验收标准 - 执行全量 E2E 回归，确认无新增失败
- 同步测试结论，通知产品和研发
交付物：验收报告、回归测试结果、发布许可
附录 A：Skills 速查表
| Skill | 类型 | 来源 | 适用角色 | 核心用途 |
|---|---|---|---|---|
/brainstorming | Skill | superpowers | 全员 | 方案探索、设计决策、测试策略 |
/writing-plans | Skill | superpowers | 产品、研发、测试 | 任务拆解、实现计划 |
/subagent-driven-development | Skill | superpowers | 研发 | 并行执行多任务 |
/test-driven-development | Skill | superpowers | 研发、测试 | TDD 开发节奏 |
/systematic-debugging | Skill | superpowers | 研发、测试 | 结构化排查问题 |
/verification-before-completion | Skill | superpowers | 研发、测试 | 完成前的系统验证 |
/finishing-a-development-branch | Skill | superpowers | 研发 | 分支合并前收尾 |
/requesting-code-review | Skill | superpowers | 研发 | Code Review 发起 |
/receiving-code-review | Skill | superpowers | 研发 | Code Review 响应 |
/using-git-worktrees | Skill | superpowers | 研发 | 并行分支隔离开发 |
/revise-claude-md | Skill | claude-md-management | 研发 | 会话结束后追加新约定 |
/claude-md-improver | Skill | claude-md-management | 研发 | CLAUDE.md 质量审查 |
/frontend-design | Skill | frontend-design | 设计、研发 | UI 组件生成与验证 |
/simplify | Skill | code-simplifier | 研发 | 代码质量审查 |
附录 B：MCP 速查表
| MCP | 适用角色 | 核心用途 |
|---|---|---|
mastergo-magic-mcp | 设计、研发 | MasterGo 设计稿读取与变量同步 |
playwright | 研发、测试 | E2E 测试编写与执行 |
browser-tools-mcp | 设计、研发、测试 | 浏览器运行时观察与自动化 |
filesystem | 研发 | 项目文件浏览 |
context7 | 研发 | 获取框架/库最新官方文档 |
excel | 测试、产品 | 数据统计与报告生成 |