HCodeFlow

主题

动手练习 ​

3 个递进式练习，从轻量到全栈，每步有验证标准。 前提：已完成 快速入门。

练习 1：轻量流程（Q0 模式，15 分钟） ​

目标：体验 Q0 轻量模式，理解 Intake → Spec → 审批 → 执行 的基本节奏。

任务描述 ​

在项目中找一个已有的页面，修改一处文案或添加一个简单的显示元素。例如：

  • 在某个列表页添加一列显示
  • 修改一个按钮的文本
  • 在页面底部添加一行说明文字

操作步骤 ​

  1. 打开 Claude Code，进入项目目录
  2. 输入需求，例如：
    在用户列表页的表格中添加一列显示"最后登录时间"
  3. 观察 AI 的响应：
    • AI 会执行 Intake 三问（目标、边界、验收标准）
    • 回答三问后，AI 判断为 Q0 轻量模式
    • AI 产出简要 Spec → 你审批 → AI 执行代码修改

验证标准 ​

  • [ ] AI 执行了 Intake 三问
  • [ ] AI 产出了简要的 Spec 描述
  • [ ] 你审批后 AI 才开始改代码
  • [ ] 代码修改完成，功能正常
  • [ ] Spec 被写回到 .claude/specs/ 目录

关键学习点 ​

  • Intake 三问是所有需求的入口，即使是小改动也会走这个流程
  • 审批门控：AI 不会未经你同意就改代码
  • Q0 模式下 Spec 是轻量的（几句话），不需要完整的多角色工作流

练习 2：纯后端任务（工作流 A，30 分钟） ​

目标：体验完整的 PM → Arch → Dev → QA 工作流，理解 Spec 链条。

任务描述 ​

为项目中一张已有的数据库表新增一个查询接口。例如：

  • 新增一个按条件查询的 API
  • 新增一个统计接口
  • 新增一个简单的导出接口

操作步骤 ​

  1. 输入需求，例如：
    为 XXX 表新增一个按创建时间范围查询的 API，支持分页
  2. PM 阶段：
    • PM Agent 产出 01_requirement.md
    • 阅读需求文档，确认接口能力、参数、返回格式
    • 回复"确认"进入下一阶段
  3. Arch 阶段：
    • Arch Agent 调研现有代码，产出 02_technical_design.md
    • 阅读技术设计，确认 API 路径、SQL 逻辑、错误处理
    • 回复"确认"进入实现
  4. Dev 阶段：
    • Dev Agent 自动创建 feature 分支、编写代码、自测
    • 产出 03_impl_backend.md 和测试证据
  5. QA 阶段：
    • QA Agent 执行独立审查
    • 如果 PASS → 进入合并；如果 FAIL → 查看问题并修复
  6. 合并：确认结果后合并代码

验证标准 ​

  • [ ] .claude/specs/ 下有完整的 Spec 目录（01 + 02 + 03 + evidences）
  • [ ] 你审批了 01_requirement.md
  • [ ] 你审批了 02_technical_design.md
  • [ ] 代码已提交到 feature 分支
  • [ ] QA 审查结论为 PASS（或有具体的 FAIL 原因）
  • [ ] 新增 API 可以正常调用

关键学习点 ​

  • Spec 链条：01（需求）→ 02（设计）→ 03（实现日志）是核心信息传递路径
  • 审批门控：01 和 02 必须你审批后才进入下一步
  • QA 独立审查：QA Agent 不写代码，只审查代码，保证客观性
  • feature 分支：代码在独立分支开发，合并前通过所有检查

练习 3：前后端联动（工作流 C，45 分钟） ​

目标：体验最复杂的工作流 C，理解 worktree 并行开发。

任务描述 ​

为项目中一张已有的数据库表新增完整的管理页面（列表 + 新增 + 编辑 + 删除）。例如：

  • 已有 config 表 → 新增配置管理页面
  • 已有 log 表 → 新增日志查看页面
  • 已有 category 表 → 新增分类管理页面

操作步骤 ​

  1. 输入需求，例如：
    为 XXX 表新增一个管理页面，支持列表查询、新增、编辑、删除功能
  2. PM 阶段：审查全栈需求文档（含后端 API + 前端页面结构）
  3. 原型阶段（可选）：
    • Prototype Agent 生成可运行的前端原型
    • 在浏览器预览原型，提供反馈
    • 确认原型后进入设计
  4. Arch 阶段：审查全栈技术设计（API Contract + DB Schema + 前端架构）
  5. 并行实现：
    • Dev Agent 在 worktree feature/xxx-backend 实现后端
    • FE Agent 在 worktree feature/xxx-frontend 实现前端
    • 两者并行，互不阻塞
  6. 合并与 QA：
    • 主对话合并两个 worktree
    • QA Agent 执行五轴审查（比工作流 A 多一轴：API 契约一致性）
  7. 联调验证：后端 API 自动测试 + 前端浏览器验证

验证标准 ​

  • [ ] Spec 链完整（01 + 02 + 03_backend + 03_frontend + evidences）
  • [ ] 后端 API 通过自动测试
  • [ ] 前端页面可正常访问和操作
  • [ ] 前后端联调正常（数据流通）
  • [ ] QA 五轴审查通过
  • [ ] 代码合并到 develop

关键学习点 ​

  • worktree 并行：前后端在独立 worktree 并行开发，互不影响
  • 五轴审查：工作流 C 比 A/B 多了"API 契约一致性"审查轴
  • 原型先行：原型让需求对齐更高效，改原型比改代码成本低 10 倍
  • 合并顺序：先后端后前端，减少冲突

真实案例参考 ​

完成练习前，推荐先阅读 Demo 项目工作流演练，看看 Q0 / 工作流 A / 工作流 B 的真实运行记录和 Spec 产出，建立直观认知后再动手练习。

进阶练习 ​

完成以上 3 个练习后，可以尝试：

  1. 踩坑修复：故意在 Spec 中留一个模糊点，看 QA 能否发现
  2. Spec 迭代：在 Arch 审批时提出修改意见，观察 AI 如何重新设计
  3. 跨会话记忆：关掉 Claude Code，重新打开后问"上次做了什么"，看 Memory 如何工作
  4. 自定义 Skill：在 .claude/skills/ 下创建一个新的领域知识库

常见问题 ​

Q: 练习中 AI 不走 Intake 直接改代码了怎么办？

检查 .claude/rules/project_rule.md 是否被正确加载。如果文件存在但 AI 忽略了规则，重新启动 Claude Code 会话。

Q: Spec 产出质量不好怎么办？

检查 .claude/skills/domain-ontology/SKILL.md 是否已填充业务词典。业务词典越完整，PM 和 Arch 的产出质量越高。

Q: 练习中遇到其他问题？

查看 常见问题 和 故障排查指南。

Copyright ©️ 2026, CodeFlow Contributors