代码开发流水线 v2.2（八人协作版）

八人协作的专业化代码开发流程，支持前端/UI设计环节，有限迭代闭环，全自动执行。

快速判断

项目类型判断

需求包含前端页面? ──是──→ 启用 UI Designer
       │否
       ↓
    跳过 UI Designer 环节

前端项目特征：

• 涉及 HTML/CSS/JavaScript
• React/Vue/Angular 等前端框架
• 需要用户界面设计
• 移动端H5页面
• 管理后台界面
• 任何需要视觉呈现的代码

角色配置模式

模式选择

紧急Bug修复? ──是──→ 维护模式
       │否
       ↓
新功能/重大变更? ──是──→ 完整模式
       │否
       ↓
    快速模式

工作流程

标准流程（非前端项目）

用户/环境反馈
       ↓
[Coordinator] 生成迭代需求单（确定模式、预算、MoSCoW优先级）
       ↓
[Analyst] 需求文档（快速/维护模式可跳过）
       ↓
[Architect] 架构方案（含日志规范、非功能需求）
       ↓
[Coder] 编码并自测（含日志埋点、环境配置）
       ↓
[Reviewer] 代码审查 ←──────┐
       ↓ 通过              │ 不通过（预算内）
       ↓                   │
[Coder] 修改 ──────────────┘
       ↓
[Tester] 测试验证 ←────────┐
       ↓ 通过              │ 发现bug（预算内）
       ↓                   │
[Coder] 修复 ──────────────┘
       ↓
[Validator] 最终验收 ←─────┐
       ↓ 通过              │ 不通过（预算内）
       ↓                   │
[Coder] 调整 ──────────────┘
       ↓
Validator 输出验收报告（含技术债务清单）
       ↓
报告回到 Coordinator，更新基线，决策下一轮

前端项目流程（启用UI Designer）

用户/环境反馈
       ↓
[Coordinator] 生成迭代需求单（确定模式、预算、MoSCoW优先级，标记前端项目）
       ↓
[Analyst] 需求文档（包含交互需求、用户流程）
       ↓
[Architect] 架构方案（含技术栈、组件选型、日志规范、非功能需求）
       ↓
[UIDesigner] UI/UX设计（使用 ui-ux-pro-max skill）
       ↓
[Coder] 编码并自测（按设计稿实现，含日志埋点、环境配置）
       ↓
[Reviewer] 代码审查 ←──────┐
       ↓ 通过              │ 不通过（预算内）
       ↓                   │
[Coder] 修改 ──────────────┘
       ↓
[Tester] 测试验证 ←────────┐
       ↓ 通过              │ 发现bug（预算内）
       ↓                   │
[Coder] 修复 ──────────────┘
       ↓
[Validator] 最终验收 ←─────┐
       ↓ 通过              │ 不通过（预算内）
       ↓                   │
[Coder] 调整 ──────────────┘
       ↓
Validator 输出验收报告（含技术债务清单）
       ↓
报告回到 Coordinator，更新基线，决策下一轮

迭代预算制

• 默认预算：完整5次 / 快速3次 / 维护2次
• 动态调整：Coordinator 可按时间设定（如"2小时内"）
• 超预算：标记为技术债务，继续流程但记录风险
• UI设计环节：如需 redesign，从 UI Designer 重新开始，消耗1次预算

八角色定义

【1】Coordinator（协调员）

职责：监听输入，决策优先级，确定模式与预算，生成迭代需求单，管理知识库，维护版本基线。

决策参考（MoSCoW）：

• Must have - 必须有
• Should have - 应该有
• Could have - 可以有
• Won't have - 不会有

前端项目识别：

• 检查需求是否包含：页面、界面、UI、HTML、CSS、React、Vue、Angular、H5等关键词
• 向用户确认："这个项目需要前端页面/UI设计吗？"
• 在迭代需求单中标记：frontend_project: true/false

输出：迭代需求单、版本基线记录

【2】Analyst（需求分析师）

职责：理解需求，转化为结构化文档，识别边界条件。

前端项目特殊要求：

• 明确用户交互流程
• 定义关键页面和跳转逻辑
• 列出需要设计的界面清单
• 确定响应式/多端适配需求

输出：需求规格说明书（功能需求 FR、边界条件 EC、验收标准、界面清单）

【3】Architect（架构师）

职责：设计架构，选择技术栈，定义模块接口，制定日志规范和非功能需求。

前端项目特殊要求：

• 推荐前端框架（React/Vue/Angular/原生）
• 确定UI组件库（Ant Design/Element/Material等）
• 定义前后端接口规范
• 确定状态管理方案

日志规范：

• 必须记录：对外接口调用（输入/输出/耗时）、核心业务逻辑（状态变化）、错误异常
• 日志级别：ERROR/WARN/INFO/DEBUG
• 禁止：每行代码都打日志、循环内打DEBUG、记录敏感信息

非功能需求：

• 性能指标（响应时间、并发量、首屏加载时间）
• 安全要求（输入验证、SQL注入防护、XSS防护、CSRF防护）
• 可扩展性、浏览器兼容性

输出：架构设计文档（含前端技术选型说明）

【4】UIDesigner（UI设计师）⭐ 新增

触发条件：前端项目（frontend_project: true）

职责：使用 ui-ux-pro-max skill 进行界面设计，输出设计规范和原型。

工作流程：

1. 读取 Analyst 的需求文档和界面清单
2. 读取 Architect 的技术选型（确定设计约束）
3. 使用 ui-ux-pro-max skill 进行设计
4. 输出设计交付物

设计范围：

• 页面布局和视觉设计
• 组件设计规范（颜色、字体、间距、圆角等）
• 交互流程和动效说明
• 响应式适配方案
• 设计系统（Design System）

输出：

• UI设计稿（文字描述或HTML原型）
• 设计规范文档（颜色、字体、组件规范）
• 交互说明文档

与 Coder 的协作：

• Coder 必须按设计稿实现
• 实现偏差需与 UI Designer 确认
• UI Designer 可要求调整（预算内）

【5】Coder（代码编写员）

职责：按架构和设计实现代码，日志埋点，自测，环境复现配置。

前端项目特殊要求：

• 严格按照 UI Designer 的设计稿实现
• 确保像素级还原设计（颜色、间距、字体一致）
• 实现响应式布局和动画效果
• 自测浏览器兼容性

自测要求：

• 运行至少一个 Happy Path 场景
• 前端项目：在至少2种浏览器中测试
• 必须编写单元测试，覆盖率须达到 80% 以上（未达到需补充测试或提供理由）
• 记录运行命令、日志摘要、测试结果、覆盖率报告

环境复现：

• 依赖文件（requirements.txt, package.json）
• 运行命令
• 环境变量说明
• 不强制容器化

输出：完整代码、自测说明、环境配置、单元测试覆盖率报告

【6】Reviewer（代码审查员）

职责：需求覆盖检查、架构符合性、代码质量、日志审查、非功能设计审查、单元测试覆盖率审查。

前端项目特殊要求：

• 检查UI还原度（与设计稿对比）
• 检查组件化实现
• 检查CSS规范（BEM命名、避免全局污染）
• 检查响应式实现

审查要点：

• 需求覆盖：所有 Must have 需求已实现
• 架构符合：符合 Architect 定义的架构方案
• 代码质量：可读性、命名规范、复杂度控制
• 日志审查：符合日志规范（关键路径有日志，无冗余日志）
• 非功能需求：符合 Architect 定义的非功能需求
• 单元测试覆盖率：必须达到 80% 以上，否则不通过

输出格式：

【通过】或【不通过】

- {问题类型}: {位置} - {建议}

覆盖率不达标示例：

【不通过】

- 单元测试覆盖率不足: src/utils.py - 当前覆盖率 65%，需补充边界条件测试用例

【7】Tester（测试验证员）

职责：设计测试用例（正常+异常），功能测试，日志验证，非功能测试（抽样）。

前端项目特殊要求：

• 跨浏览器测试（Chrome/Firefox/Safari至少2种）
• 响应式测试（桌面端/平板/手机）
• 交互流程测试
• 视觉回归测试（与设计稿对比）

输出格式：

【通过】或【发现bug】

- 用例执行情况
- 日志验证结果
- Bug描述及复现步骤
- 浏览器兼容性结果

【8】Validator（最终验收员）

7w4.net小葱技能。

职责：完整性检查，功能验收，日志抽查，非功能验收，风险评估。

前端项目特殊要求：

• 最终UI还原度确认
• 用户体验走查
• 性能指标验证（首屏加载时间等）

输出格式：

【通过】或【不通过】

- 需求覆盖情况
- 验收测试摘要
- 技术债务清单
- UI还原度评估

关键设计要点

1. Coder 是核心枢纽 - 接收三方反馈（Reviewer、Tester、Validator），在预算内修改
2. UI Designer 是前端项目的关键路径 - 设计质量直接影响最终产品体验
3. 明确通过/不通过标记 - Reviewer/Tester/Validator 第一行必须是【通过】或【不通过】/【发现bug】
4. 结构化打回反馈 - 必须附带问题类型、位置、建议
5. 日志规范与验证 - Architect 定义，Coder 实现，Reviewer 审查，Tester/Validator 验证
6. 非功能需求贯穿全程 - Architect 定义，Reviewer 审查，Tester 测试，Validator 验收
7. 迭代历史全保留 - 最终报告包含所有轮次记录
8. 超预算标记技术债务 - 继续流程但记录风险，由 Coordinator 纳入后续计划
9. 知识库与版本管理 - 所有产出存入知识库，Coordinator 维护版本基线
10. 前端项目设计先行 - UI Designer 必须在 Coder 之前完成设计

最终产出

必须保留：

1. 最终代码（附自测说明和环境配置）
2. 单元测试及覆盖率报告（覆盖率须 ≥80%）
3. 最终验收报告（含技术债务清单）

前端项目额外产出：

4. UI设计稿和规范文档
5. 浏览器兼容性报告

建议保留（可合并/增量更新）：

• 需求规格说明书
• 架构设计文档
• UI设计文档（前端项目）
• 代码审查报告
• 测试验证报告
• 技术债务清单

使用 ui-ux-pro-max skill

当启用 UI Designer 角色时，按照以下方式使用 ui-ux-pro-max skill：

1. 确保 ui-ux-pro-max skill 已安装
2. UI Designer 读取需求文档和界面清单
3. 调用 ui-ux-pro-max 进行设计
4. 输出设计稿和规范文档
5. 将设计交付物传递给 Coder

设计交付物格式：

• 文字描述型设计说明
• HTML/CSS 原型代码
• 组件使用规范
• 响应式断点定义

版本历史

• v2.3：新增单元测试覆盖率硬性要求（Coder/Reviewer 须确保 ≥80%）
• v2.2：新增 UI Designer 角色，支持前端项目UI设计环节
• v2.1：整合 v1.2 特性，精简为 OpenClaw skill 格式
• v1.2：有限迭代版，角色配置灵活性、迭代预算制、日志细化、非功能验证、MoSCoW 决策
• v1.1：新增 Coordinator，形成闭环
• v1.0：初始版本，六角色串行

这是一个非常专业的代码开发流水线，通过八个角色的协作（分析需求、设计架构、写代码、审查、测试、验收）确保代码质量。优点是流程完整、分工明确、有迭代控制机制，适合复杂的代码开发任务。不足是部分角色的指令文档不够完整，可能影响某些场景的执行效果。总体来说质量不错，适合对代码质量有较高要求的项目使用。