AI Collaboration Workflow（UI 生成 → 前端 SDD）

文件治理欄位

• 文件名稱：ai-collaboration-workflow.md
• 文件用途：定義 AI 在 UI 生成、規格展開、前端 handoff 的介入方式與關卡
• 適用對象：PM、SA、前端工程、交付協作者
• 適用範圍：內部需求轉規格流程
• 可見性等級：internal
• 是否為 SSOT：否（流程指南）
• 上游依據文件：
• docs/governance/prototype-governance-summary.md
• docs/governance/naming-rules.md
• 下游引用文件：
• templates/frontend-sdd/screen-package-template.md
• templates/frontend-sdd/fields-template.md
• templates/frontend-sdd/actions-template.md
• templates/frontend-sdd/api-map-template.md
• templates/frontend-sdd/acceptance-template.md
• templates/frontend-sdd/frontend-handoff-structure.md
• .cursor/skills/frontend-sdd-coach/SKILL.md
• 待確認事項：是否在所有專案強制執行 Field Alignment Gate

---

1) Workflow 階段

1. Intake：輸入訪談、舊畫面、業務規則、既有 API。
2. Normalize：AI 整理為 screen context 與欄位清單。
3. Field Alignment Gate：標示 confirmed/proposed/pending。
4. UI Template Selection：先選 HTML 範型（single/multi/settings/batch/modal）。
5. Spec Expansion：展開 screen package、欄位、action、API map、acceptance。
6. SDD Handoff：輸出前端交付結構與開工清單。
7. Readiness：檢查缺件、風險、依賴與責任歸屬。

2) AI 介入分工

• document-governor：決定文件類型、路徑、可見性。
• frontend-sdd-coach：從 UI 討論內容生成前端規格與 handoff。
• delivery-package-readiness-checker：單包就緒檢查。
• delivery-readiness-auditor：模組/多包整體稽核（選配）。

3) 中文引導啟動（降低英文門檻）

• 幫我把訪談轉成畫面規格
• 幫我整理欄位跟按鈕規則
• 幫我補 API 對照
• 幫我整理 Given/When/Then 驗收
• 幫我整理前端 handoff

上述語句可直接觸發 frontend-sdd-coach，輸出仍落固定英文檔名。

4) 輔導確認標準（前端）

Gate A：畫面理解完整

• 區塊與操作路徑已定義。
• 欄位來源已標記（含開窗/第三方）。

Gate B：規格可開工

• 欄位規格（型別、必填、驗證、隱私）完整。
• Action 規則（前置、成功/失敗、權限）完整。
• API map 明確區分沿用/新建。

Gate C：交付可追蹤

• 工程 handoff 結構完整。
• 待確認事項具責任人與期程。
• 驗收條件可測（Given/When/Then）。

5) 推薦輸出目錄

• 治理文件：docs/governance/
• 協作流程：docs/operations/
• 前端模板：templates/frontend-sdd/
• UI HTML 範型：templates/frontend-sdd/html/
• Skill：.cursor/skills/frontend-sdd-coach/