Claude-Code-Workflow/.claude/skills/command-guide/guides/workflow-patterns.md

常见工作流模式

学习如何组合命令完成复杂任务，提升开发效率

🎯 什么是工作流？

工作流是一系列命令的组合，用于完成特定的开发目标。Claude DMS3 提供了多种工作流模式，覆盖从规划到测试的完整开发周期。

核心概念：

• 工作流（Workflow）：一组相关任务的集合
• 任务（Task）：独立的工作单元，有明确的输入和输出
• Session：工作流的执行实例，记录所有任务状态
• 上下文（Context）：任务执行所需的代码、文档、配置等信息

---

📋 Pattern 1: 规划→执行（最常用）

适用场景：实现新功能、新模块

流程：规划 → 执行 → 查看状态

完整示例

# 步骤 1：规划任务
/workflow:plan --agent "实现用户认证模块"

# 系统输出：
# ✅ 规划完成
# 📁 Session: WFS-20251106-123456
# 📋 生成 5 个任务

# 步骤 2：执行任务
/workflow:execute

# 系统输出：
# ⏳ 执行 task-001-user-model...
# ✅ task-001 完成
# ⏳ 执行 task-002-login-api...
# ...

# 步骤 3：查看状态
/workflow:status

# 系统输出：
# Session: WFS-20251106-123456
# Total: 5 | Completed: 5 | Pending: 0

关键点：

• --agent 参数使用 AI 生成更详细的计划
• 系统自动发现最新 session，无需手动指定
• 所有任务按依赖顺序自动执行

---

🧪 Pattern 2: TDD测试驱动开发

适用场景：需要高质量代码和测试覆盖

流程：TDD规划 → 执行（红→绿→重构）→ 验证

完整示例

# 步骤 1：TDD 规划
/workflow:tdd-plan --agent "实现购物车功能"

# 系统输出：
# ✅ TDD 任务链生成
# 📋 Red-Green-Refactor 周期：
#   - task-001-cart-tests (RED)
#   - task-002-cart-implement (GREEN)
#   - task-003-cart-refactor (REFACTOR)

# 步骤 2：执行 TDD 周期
/workflow:execute

# 系统会自动：
# 1. 生成失败的测试（RED）
# 2. 实现代码让测试通过（GREEN）
# 3. 重构代码（REFACTOR）

# 步骤 3：验证 TDD 合规性
/workflow:tdd-verify

# 系统输出：
# ✅ TDD 周期完整
# ✅ 测试覆盖率: 95%
# ✅ Red-Green-Refactor 合规

关键点：

• TDD 模式自动生成测试优先的任务链
• 每个任务有依赖关系，确保正确的顺序
• 验证命令检查 TDD 合规性

---

🔄 Pattern 3: 测试生成

适用场景：已有代码，需要生成测试

流程：分析代码 → 生成测试策略 → 执行测试生成

完整示例

# 步骤 1：实现功能（已完成）
# 假设已经完成实现，session 为 WFS-20251106-123456

# 步骤 2：生成测试
/workflow:test-gen WFS-20251106-123456

# 系统输出：
# ✅ 分析实现代码
# ✅ 生成测试策略
# 📋 创建测试任务：WFS-test-20251106-789

# 步骤 3：执行测试生成
/workflow:test-cycle-execute --resume-session WFS-test-20251106-789

# 系统输出：
# ⏳ 生成测试用例...
# ⏳ 执行测试...
# ❌ 3 tests failed
# ⏳ 修复失败测试...
# ✅ All tests passed

关键点：

• test-gen 分析现有代码生成测试
• test-cycle-execute 自动生成→测试→修复循环
• 最多迭代 N 次直到所有测试通过

---

🎨 Pattern 4: UI 设计工作流

适用场景：基于设计稿或现有网站实现 UI

流程：提取样式 → 提取布局 → 生成原型 → 更新

完整示例

# 步骤 1：提取设计样式
/workflow:ui-design:style-extract \
  --images "design/*.png" \
  --mode imitate \
  --variants 3

# 系统输出：
# ✅ 提取颜色系统
# ✅ 提取字体系统
# ✅ 生成 3 个样式变体

# 步骤 2：提取页面布局
/workflow:ui-design:layout-extract \
  --urls "https://example.com/dashboard" \
  --device-type responsive

# 系统输出：
# ✅ 提取布局结构
# ✅ 识别组件层次
# ✅ 生成响应式布局

# 步骤 3：生成 UI 原型
/workflow:ui-design:generate \
  --style-variants 2 \
  --layout-variants 2

# 系统输出：
# ✅ 生成 4 个原型组合
# 📁 输出：.workflow/ui-design/prototypes/

# 步骤 4：更新最终版本
/workflow:ui-design:update \
  --session ui-session-id \
  --selected-prototypes "proto-1,proto-3"

# 系统输出：
# ✅ 应用最终设计系统
# ✅ 更新所有原型

关键点：

• 支持从图片或 URL 提取设计
• 可生成多个变体供选择
• 最终更新使用确定的设计系统

---

🔍 Pattern 5: 代码分析→重构

适用场景：优化现有代码，提高可维护性

流程：分析现状 → 制定计划 → 执行重构 → 生成测试

完整示例

# 步骤 1：分析代码质量
/cli:analyze --tool gemini --cd src/auth \
  "评估认证模块的代码质量、可维护性和潜在问题"

# 系统输出：
# ✅ 识别 3 个设计问题
# ✅ 发现 5 个性能瓶颈
# ✅ 建议 7 项改进

# 步骤 2：制定重构计划
/cli:mode:plan --tool gemini --cd src/auth \
  "基于上述分析，制定认证模块重构方案"

# 系统输出：
# ✅ 重构计划生成
# 📋 包含 8 个重构任务

# 步骤 3：执行重构
/cli:execute --tool codex \
  "按照重构计划执行认证模块重构"

# 步骤 4：生成测试确保正确性
/workflow:test-gen WFS-refactor-session-id

关键点：

• Gemini 用于分析和规划（理解）
• Codex 用于执行实现（重构）
• 重构后必须生成测试验证

---

📚 Pattern 6: 文档生成

适用场景：为项目或模块生成文档

流程：分析代码 → 生成文档 → 更新索引

完整示例

# 方式 1：为单个模块生成文档
/memory:docs src/auth --tool gemini --mode full

# 系统输出：
# ✅ 分析模块结构
# ✅ 生成 CLAUDE.md
# ✅ 生成 API 文档
# ✅ 生成使用指南

# 方式 2：更新所有模块文档
/memory:update-full --tool gemini

# 系统输出：
# ⏳ 按层级更新文档...
# ✅ Layer 3: 12 modules updated
# ✅ Layer 2: 5 modules updated
# ✅ Layer 1: 2 modules updated

# 方式 3：只更新修改过的模块
/memory:update-related --tool gemini

# 系统输出：
# ✅ 检测 git 变更
# ✅ 更新 3 个相关模块

关键点：

• --mode full 生成完整文档
• update-full 适用于初始化或大规模更新
• update-related 适用于日常增量更新

---

🔄 Pattern 7: 恢复和继续

适用场景：中断后继续工作，或修复失败的任务

流程：查看状态 → 恢复 session → 继续执行

完整示例

# 步骤 1：查看所有 session
/workflow:status

# 系统输出：
# Session: WFS-20251106-123456 (5/10 completed)
# Session: WFS-20251105-234567 (10/10 completed)

# 步骤 2：恢复特定 session
/workflow:resume WFS-20251106-123456

# 系统输出：
# ✅ Session 恢复
# 📋 5/10 tasks completed
# ⏳ 待执行: task-006, task-007, ...

# 步骤 3：继续执行
/workflow:execute --resume-session WFS-20251106-123456

# 系统输出：
# ⏳ 继续执行 task-006...
# ✅ task-006 完成
# ...

关键点：

• 所有 session 状态都被保存
• 可以随时恢复中断的工作流
• 恢复时自动分析进度和待办任务

---

🎯 Pattern 8: 快速实现（Codex YOLO）

适用场景：快速实现简单功能，跳过规划

流程：直接执行 → 完成

完整示例

# 一键实现功能
/cli:codex-execute --verify-git \
  "实现用户头像上传功能：
  - 支持 jpg/png 格式
  - 自动裁剪为 200x200
  - 压缩到 100KB 以下
  - 上传到 OSS
  "

# 系统输出：
# ⏳ 分析需求...
# ⏳ 生成代码...
# ⏳ 集成现有代码...
# ✅ 功能实现完成
# 📁 修改文件:
#   - src/api/upload.ts
#   - src/utils/image.ts

关键点：

• 适合简单、独立的功能
• --verify-git 确保 git 状态干净
• 自动分析需求并完整实现

---

🤝 Pattern 9: 多工具协作

适用场景：复杂任务需要多个 AI 工具配合

流程：Gemini 分析 → Gemini/Qwen 规划 → Codex 实现

完整示例

# 步骤 1：Gemini 深度分析
/cli:analyze --tool gemini \
  "分析支付模块的安全性和性能问题"

# 步骤 2：多工具讨论方案
/cli:discuss-plan --topic "支付模块重构方案" --rounds 3

# 系统输出：
# Round 1:
#   Gemini: 建议方案 A（关注安全）
#   Codex: 建议方案 B（关注性能）
# Round 2:
#   Gemini: 综合分析...
#   Codex: 技术实现评估...
# Round 3:
#   最终方案: 方案 C（安全+性能）

# 步骤 3：Codex 执行实现
/cli:execute --tool codex "按照方案 C 重构支付模块"

关键点：

• discuss-plan 让多个 AI 讨论方案
• 每个工具贡献自己的专长
• 最终选择综合最优方案

---

📊 工作流选择指南

graph TD
    A[我要做什么?] --> B{任务类型?}

    B -->|新功能| C[规划→执行]
    B -->|需要测试| D{代码是否存在?}
    B -->|UI开发| E[UI设计工作流]
    B -->|代码优化| F[分析→重构]
    B -->|生成文档| G[文档生成]
    B -->|快速实现| H[Codex YOLO]

    D -->|不存在| I[TDD工作流]
    D -->|已存在| J[测试生成]

    C --> K[/workflow:plan<br/>↓<br/>/workflow:execute]
    I --> L[/workflow:tdd-plan<br/>↓<br/>/workflow:execute]
    J --> M[/workflow:test-gen<br/>↓<br/>/workflow:test-cycle-execute]
    E --> N[/workflow:ui-design:*]
    F --> O[/cli:analyze<br/>↓<br/>/cli:mode:plan<br/>↓<br/>/cli:execute]
    G --> P[/memory:docs]
    H --> Q[/cli:codex-execute]

---

💡 最佳实践

✅ 推荐做法

1. 复杂任务使用完整工作流

   /workflow:plan → /workflow:execute → /workflow:test-gen
   

2. 简单任务使用 Codex YOLO

   /cli:codex-execute "快速实现xxx"
   

3. 重要代码使用 TDD

   /workflow:tdd-plan → /workflow:execute → /workflow:tdd-verify
   

4. 定期更新文档

   /memory:update-related  # 每次提交前
   

5. 善用恢复功能

   /workflow:status → /workflow:resume
   

---

❌ 避免做法

1. 不要跳过规划直接执行复杂任务

   • ❌ 直接 /cli:execute 实现复杂功能
   • ✅ 先 /workflow:plan 再 /workflow:execute

2. 不要忽略测试

   • ❌ 实现完成后不生成测试
   • ✅ 使用 /workflow:test-gen 生成测试

3. 不要遗忘文档

   • ❌ 代码实现后忘记更新文档
   • ✅ 使用 /memory:update-related 自动更新

---

🎨 Pattern 7: UI设计工作流

适用场景：前端UI设计和原型开发

流程：探索设计 / 模仿设计 / 代码导入 → 生成原型 → 集成

三种子模式

7.1 探索式设计（新概念）

# 从提示词创建多个设计方案
/workflow:ui-design:explore-auto \
  --prompt "现代化SaaS着陆页，包含英雄区、特性、定价" \
  --style-variants 3 \
  --layout-variants 2

# 输出：
# - 3个风格变体 × 2个布局变体 = 6个原型
# - design-tokens-v1/v2/v3.json
# - layout-templates-v1/v2.json
# - compare.html（对比页面）

7.2 模仿式设计（复制现有网站）

# 高保真克隆目标网站
/workflow:ui-design:imitate-auto \
  --url-map "首页:https://example.com, 定价:https://example.com/pricing"

# 输出：
# - 统一的设计系统（design-tokens.json）
# - 页面结构（layout-templates.json）
# - 重建的HTML原型

7.3 代码优先导入

# 从现有代码库提取设计系统
/workflow:ui-design:import-from-code \
  --base-path ./src/components

# 输出：
# - 提取的设计令牌
# - 完整性报告
# - 改进建议

关键概念：

• 关注点分离：样式（design-tokens）、结构（layout-templates）、动画（animation-tokens）独立
• 令牌优先：使用CSS变量而非硬编码
• 可重用性：设计系统可跨项目复用

详细指南：参见 UI Design Workflow Guide

---

🔗 相关资源

• 快速入门：Getting Started - 5分钟上手
• CLI 工具：CLI Tools Guide - Gemini/Qwen/Codex 详解
• UI设计工作流：UI Design Workflow Guide - UI设计完整指南
• 问题排查：Troubleshooting - 常见问题解决
• 完整命令列表：查看 index/all-commands.json

---

最后更新: 2025-11-06

记住：选择合适的工作流模式，事半功倍！不确定用哪个？使用 ccw 询问 Command Guide！