程式碼開發流水線 v2.2（八人協作版）

八人協作的專業化程式碼開發流程，支援前端/UI設計環節，有限迭代閉環，全自動執行。

快速判斷

專案型別判斷

小蔥技能7w4.net有更新，你可以訪問看下。

需求包含前端頁面? ──是──→ 啟用 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（最終驗收員）

職責：完整性檢查，功能驗收，日誌抽查，非功能驗收，風險評估。

前端專案特殊要求：

• 最終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：初始版本，六角色序列

這是一個非常專業的程式碼開發流水線，通過八個角色的協作（分析需求、設計架構、寫程式碼、審查、測試、驗收）確保程式碼質量。優點是流程完整、分工明確、有迭代控制機制，適合複雜的程式碼開發任務。不足是部分角色的指令文件不夠完整，可能影響某些場景的執行效果。總體來說質量不錯，適合對程式碼質量有較高要求的專案使用。