iT邦幫忙

2026 iThome 鐵人賽

DAY 3
0
Vibe Coding

神隊友.swift:30 天 Vibe Coding 打造育兒 iOS App 系列 第 3

[Day 3] Multi-agent 架構:問卷投票頁的 AI 分工與驗收流程

  • 分享至 

  • xImage
  •  

文章同步發表在我的個人 Blog

同時開兩個 coding agent,要怎麼分工才不會互相覆蓋?

這幾天我讓 Claude Code 和 Codex 一起做投票頁。結論是:分工的依據不是模型強弱,是「誰能驗證自己的產出」。

1. 專案底下的三份文件

開始分工之前,先講專案底下的三份文件。AI 每次開工都會先讀它們,所以它們決定了協作的品質。

PROJECT.md:做什麼。 產品目標(走進 3D 小孩房、找到白板投票)、題目與五個選項、視覺方向、MVP 原則(Playable > Data works > Pretty),以及明列不做的事,例如登入、多人連線、Dashboard。

CLAUDE.md:怎麼協作。 誰實作、誰驗收、每個 Stage 的驗收清單,以及只有我說 PASS 才能進下一關。

openspec/:規格。 用 Spectra 管理,proposal.md 寫為什麼做、design.md 寫技術決策、tasks.md 拆工作項目,specs/ 按功能各寫一份需求,例如投票、白板場景、答案審核。

CLAUDE.md 裡最關鍵的一段是驗收規則:

每個 Stage 完成後由 Claude 自行:
- run build
- run typecheck
- 檢查 runtime / console error
- 檢查是否符合該 Stage acceptance criteria
- 檢查是否實作超出 scope
完成後停止,等待人工驗收。
只有使用者明確說 PASS 才進下一 Stage。

規格的產生流程:Codex 用 $spectra-propose 產出第一版規格,需求改變時用 $spectra-ingest 併進去,每次改完跑 spectra validatespectra analyze 檢查一致性。

2. 誰做什麼

Multi-agent 分工

註:3D 這一塊交給 Codex,是因為想實際試試 gpt-6-astra 在 3D 與動畫上的表現。

這裡只有兩個工具:Claude Code 和 Codex。Codex 用同一個模型(gpt-6-astra)接了兩種工作,一個是規劃,一個是 3D 實作,差別只在工單內容和推理強度。

角色 職責
規劃 Codex 把我的需求拆成每個 Stage 的工單:範圍、驗收條件、禁止事項
主要實作 Claude Code(Opus / Sonnet) 寫程式、跑 build 與測試、開瀏覽器實測
3D 實作 Codex(gpt-6-astra,推理強度調高) 3D 場景、角色動作、互動這一塊
相互驗證 兩邊互相檢查 一方的產出由另一方跑測試與實測
最後決定 方向、範圍、視覺與手感;他們解不了才介入

為什麼規劃要獨立出來。 需求直接丟給實作端,它會一邊想一邊寫,寫到一半才發現範圍不對。先讓 Codex 產出工單,範圍、驗收條件、禁止事項都白紙黑字,後面實作和驗收才有依據。規劃的迭代次數少,額度花費也低。

為什麼實作分兩邊。 一般功能、資料流、API 這類交給 Claude Code;3D 場景和角色動畫交給 Codex。這一塊的判斷跟寫 CRUD 不同,需要處理相機、動畫狀態與效能,分開比較單純。

Codex 做 3D 用的是 Three.js 和 React Three Fiber,房間、家具和角色都是用基本幾何體組出來的,沒有模型檔,也沒有用 Blender。細節留到 Day 4 再講。

為什麼要互相驗證。 實作的一方最不容易看見自己的問題。所以一方交件後,另一方跑 build、跑測試、開瀏覽器實測、檢查有沒有做超出範圍。這樣多數問題在送到我面前之前就被攔下來。

我什麼時候才介入。 兩種情況:一是他們互相驗證還是解不掉,二是需要人眼判斷的事,像畫面好不好看、操作順不順、場景氣氛對不對。其他時間我只看結果,不看過程。

3. 從 Claude Code 呼叫 Codex

OpenAI 有官方的 Claude Code plugin:openai/codex-plugin-cc。裝好之後,大部分時候直接用講的就好

安裝步驟(在 Claude Code 裡執行):

# 1. Add marketplace
/plugin marketplace add openai/codex-plugin-cc

# 2. Install plugin
/plugin install codex@openai-codex

# 3. Reload
/reload-plugins

# 4. Check Codex is ready
/codex:setup

前置條件:ChatGPT 訂閱(免費方案也可以)或 OpenAI API key、Node.js 18.18 以上。用量會計入 Codex 的額度。

裝完之後,交辦任務用自然語言,例如:

請 Codex 幫我查為什麼手機打開會白屏,只要調查,不要改檔案

plugin 附了一個 codex-rescue 子代理,Claude Code 判斷要轉交時會自己呼叫它。

審查和管理背景任務則要手動輸入指令。我看了 plugin 的原始檔,這幾個指令被設定成不讓 Claude 自己觸發:

指令 用途
/codex:review 唯讀的程式碼審查,支援 --base main 比較分支
/codex:adversarial-review 針對特定決策或風險點做挑戰式審查
/codex:status/codex:result/codex:cancel 查進度、拿結果、取消
/codex:transfer 交接 session

我的理解是:會花額度、會跑很久的審查,留給人決定要不要跑

另外,這個專案的 Stage 工單我是用 CLI 的非互動模式送的,方便把工單存成檔案:

codex exec --cd <project> --sandbox workspace-write - < stage-prompt.txt

--sandbox workspace-write 限制它只能寫這個目錄。模型設定在 ~/.codex/config.toml,我用的是 gpt-6-astra

這幾天前後交辦 Codex 十幾次,包含規格、UI 原型和三個 Stage,其中兩次遇到模型滿載中斷,重送後接著做。Codex 在自己的環境裡能跑 npm installtscvite buildnode --test唯一做不到的是開瀏覽器,它自己也回報過「瀏覽器受沙箱限制未能啟動」。這一段就是 Claude Code 接手的地方。

4. 第一版:失敗的 3D 房間

第一版:Opus 5 做的 3D 房間

第一版 3D 房間是 Claude Code(Opus 5)做的。畫面能跑,但只是在靜態房間上點標籤,沒有角色、不能走動,跟我想要的「走進房間、找到白板投票」差很多。

問題不全在模型:當時我還沒把玩法寫清楚,只丟了一張參考圖就開始做。之後我把需求拆成 Stage 工單,3D 改交給 Codex,才有下面的結果。

5. Stage Gate 的實際結果

Stage 範圍 測試數 正式驗收時發現的問題
1 可走動的房間、WASD、碰撞、跟隨相機 7
2 白板互動、三票投票規則 12
3 自訂便利貼、輸入驗證 17

Claude 驗收時實際做的事:在瀏覽器裡按住 W 走到白板前、按 E 打開面板、連點便利貼確認第 4 票的按鈕會變成停用、按 Esc 離開再回來確認票數還在、在輸入框貼上 HTML 確認不會被執行。

6. 目前為止的觀察

  • 分工的關鍵是驗證能力,不是模型排名
  • 三份文件(PROJECT.mdCLAUDE.mdopenspec/)決定協作品質,比每次的 prompt 更重要
  • Scope 控制要寫成清單,寫在工單裡才有效
  • 需要開瀏覽器驗證的部分,由能開瀏覽器的一方負責
  • 模型滿載是真實限制,流程要能中斷後接著做

明天

Day 4 分享問卷投票頁的實作經驗:架構怎麼組、資料怎麼存、3D 用了哪些工具,以及交給 AI 的 prompt 怎麼寫、踩過哪些坑。


上一篇
[Day 2] 把「你怎麼沒跟我說」變成一份問卷:我怎麼設計這一題
系列文
神隊友.swift:30 天 Vibe Coding 打造育兒 iOS App 3
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言