AI 協作流實戰：我如何用 Claude、Codex、Gemini 做出辦公室遊戲

昨天我在 Threads 發了一個「遊戲」畫面，是我用三個 AI 一起做出來的。

這篇想拆的不是單一工具教學，而是一個很實際的 AI 協作流：什麼情境交給 Claude，什麼事情交給 Codex，什麼細節再交給 Gemini。

有人可能會想問：為什麼不都用 Claude 就好？

這半年來，Claude 的熱門程度超乎想像，大家一窩蜂地湧入 Claude。隨之而來的就是 Token 越來越貴，沒有一點財力還真的用不起。

其實不一定是所有事情都要交給 Claude：

1. Codex：像是最近興起、由 OpenAI 推出的 Codex，就是一個強勁的競爭對手。
2. Gemini：另外，雖然說 Gemini 已經沒落半年多了，不過它在 UI 美感方面其實還是無人能及。

所以說，我現在平常的工作流程不只用 Claude，而是 Codex、Gemini 都有用。

他們各自的強項不同，正好能夠來分擔 Claude token 的使用。

那我是「在什麼情境會用什麼工具，以及我會怎麼用它」呢？就用我接下來這個案例來分享。

一、AI 協作流的實際案例：AI 辦公室

我最近在做一個 AI 入門學習的專案，希望能夠打造一個課程或產品，讓更多人能夠快速掌握 AI 的全貌。

如果你有興趣，也可以加入等候清單

因為很多人覺得 AI 要學的內容太多了，不知道該從哪裡學起。我就想說，可以利用我這個資訊整理的能力，把它變成一個 App 之類的工具，讓大家更輕鬆地去了解需要學哪些，以及該怎麼開始學習。

這個產品模式我想了非常久，中間嘗試過幾種不同的呈現方式。

第一種是類似筆記軟體的白板。後來發現這樣對新手來說，負擔有點太重了。

第二種是宇宙飛航的呈現方式。雖然很酷炫，但是內容有點散，一樣會讓新手不知道該從哪裡開始。

後來想一想，新手遇到最大的問題就是太雜、太複雜了，讓人不想看下去。

那如果我把它打造成遊戲的樣子呢？

因此，我跟 AI 提出了一個「AI 辦公室遊戲」的構想，並且開始著手製作。

二、Claude 在 AI 協作流裡負責規劃與骨架

最開始我是趁 Claude Fable 5 還在的時候，請它幫我規劃這個專案。

我直接拿我的課程內容大綱跟它說：

這是我的課程大綱。

那我想把它變成一個辦公室的遊戲（比如對話、場景等等的）。請你幫我寫規劃文件，要包含實作細節以及技術選型。

當我把 plan 文件建立好之後，我還請它幫我建立一個素材管理與建立的 skill，讓 Codex 準備可以透過這個 skill 來接手素材的生成。

要說也很簡單，目的先行。

我想建立一個 SKILL，讓 Codex 之後生圖片的時候能夠更有規範，以生成我們所需要的所有圖片。請幫我建立這個 SKILL。

SKILL 也建立完成後，一方面請 Claude 幫我生成這個介面的骨架。

我一開始是請它生成一個 HTML 檔案，用來規劃這個介面該怎麼呈現，因為這樣的試錯成本最低、修改最快。

在它進行這個框架生成的同時，我也請 Codex 根據我剛讓 Claude 幫我生成的 skill，去幫我建立素材，包含辦公室的場景或是人物等等。

三、Codex 在 AI 協作流裡負責繪製圖片

當前面的 skill 建立好之後，我們就只要跟它說「參考這個 skill 開始製作圖片」就好了，因為整個流程它已經幫我們制定。

不過還有件事，就是風格要怎麼定？

一開始呢，我先給它了我小時候玩過一個叫「奶糖城」的遊戲，大概是那樣的等距視角，並且跟它說要生成點陣風格。

它生是幫我生了，不過我覺得有點雜。

因此後來我想到，我之前看過一個遊戲的質感畫面是我比較希望的，所以我就上網查那個遊戲，並且截了它的遊戲畫面給 Codex 看，跟它說：

請幫我從點陣風格改成這種溫潤的風格。

好，它改出來了，我覺得滿意多了。

所以我就把這個風格設定為定稿，並且請 Codex 給它引進 Skill 裡面，讓未來的物件和人物都根據這個風格去生成。

當圖片建立好之後，剛好 Claude 的骨架也差不多建立好了，剩下圖片要替換進去，因此我就請它幫我把圖片給換進去。

它原先的骨架是建立 HTML，我體驗了一下，感覺是有到，不過有些介面互動的地方還是有點差強人意。

而且我覺得請 Claude 來改 UI 實在有點大材小用、浪費 Token，因此我就轉交給 UI 小能手 Gemini 去做介面的優化。

四、Gemini 在 AI 協作流裡負責介面優化

老實說，Claude Fable 5 建出來的 UI 就已經蠻不錯的了。

不過在一些細節的地方，它還是沒有到很到位，比如說這個卡片的邊距大小、字體的樣式等等，都只是堪用而已。

所以我就開啟我的 Antigravity，然後用最新的 Gemini 3.5 flash(high) 模型，跟它說：

請幫我優化這個介面，讓它更好看。

沒錯，我就是這樣說。

因為我們已經有這個介面風格的基底了，只是有些細節沒到位，因此 Gemini 就會用它內建的美感來幫我做這個調整。

在過程中有一些無論怎麼說都沒有到位的介面調整。

因為語言總是有模糊性，因此我就開啟 Figma，用非常簡陋的截圖或是用色塊的方式，來跟 Gemini 說我理想中的遊戲畫面大概是怎樣。

它也成功地做出來了。

五、重構階段再交回 Claude

還記得我們前面說的嗎？

我們這些場景都只是 HTML 的骨架，就是單張單張的。雖然它改得快，但是假如你的架構要長大的話，你就不能用這個，你需要改成更合適的架構。

因此，當我這些介面機制差不多覺得已經有模有樣了，我就可以先請 Claude 幫我進行重構，把它變成 Figma 的形式。

這樣以後你的元件複用或者資料流，都可以變得更加穩固。

六、三 AI 協作流該怎麼分工？

還記得我開始深入使用 Claude 的時候，我無論大小事都交給 Claude 做，但這樣就會遇到一些瓶頸。

像介面怎麼改都改不好：因為它的美感天生就不如 Gemini，所以與其讓它改，不如讓 Gemini 來改。

另外現在 Token 消耗很快，所以我們可以用其他的模型，來分擔一些在規劃之外的任務。尤其現在這個 Fable 最強但很費錢的大腦出現之後，這樣去分工就變得更重要了。

我現在的用法是：

工具	最適合負責的事	我在這次案例中的用法
Claude	規劃、架構、重構、複雜度高的任務	先寫產品規劃、技術選型、HTML 骨架，最後再協助重構
Codex	雜事、素材生成、依照規格批次執行	根據 Claude 產出的 skill，生成場景、人物與風格素材
Gemini	UI 美感、視覺調整、介面細節	接手 HTML 畫面，優化卡片、間距、字體與整體氛圍

有一個方法是，你可以讓 Claude 去接入 Codex CLI 或是 Antigravity CLI，這樣它就可以在過程中去指揮其他 AI 來做事。

不過呢，因為我覺得這樣還是會有 Token 的損耗，所以我就選擇手動去開其他的 App 來進行操作。

這樣的話雖然麻煩一點點，不過也是在 Claude 額度上限之後才去做事，所以不會浪費我用 Claude 的時間。

如果你想把這種分工變成可重複的流程，可以看我的 AI Agent 工作術。那裡講的就是如何把任務拆成規格、流程和可執行的 AI 協作方式。

七、AI 協作流一分鐘整理

• 不需要所有任務都交給 Claude。Claude 很適合做規劃與複雜判斷，但不是每個細節都值得消耗它的 token。
• Codex 很適合接「規格明確」的工作。先讓 Claude 建好 skill 或規範，再讓 Codex 依規格批次生成素材，效果會穩很多。
• Gemini 很適合接 UI 美感與介面微調。當你已經有基礎畫面，只差細節時，它通常能很快把質感拉起來。
• 文字描述不清楚時，就用 Figma 或截圖輔助溝通。視覺問題不要只靠語言硬講，直接畫給 AI 看會更快。
• 這套 AI 協作流的核心不是「誰最強」，而是「誰最適合做這件事」。分工對了，成本、速度和品質都會比較好。

以上就是我用三個 AI 協作、各取所需所得到的結果啦。

如果你是 AI 初學者，想要更全面地學習 AI，我最近也在建構一個 AI 學習藍圖的專案。它不一定會是現在辦公室遊戲的形式，不過我的目的就是讓大家能夠用更短的時間，全面瞭解 AI 並且取用自己需要的部分。

如果你有興趣，可以加入等候清單。

那我們下篇文見！