親身體驗 Vibe Coding

最近大家都很喜歡說 vibe coding，就是不用親手去打程式碼，一切寫程式都交由 AI 處理，將你的靈感想法實現。然後見到不少 developer 分享 MCP server 的威力， developer 是否已經世界末日？

引起 Vibe Coding 爆紅的遊戲

外國有 Developer 用 AI 花將小時寫了隻飛機遊戲因此爆紅，也成為了 vibe coding 的始祖，當然在寫了遊戲出來後他也花了一些時間去再行修改及推廣，不過引起了 Elon Musk 注意及大讚才是他爆紅的主因。

然後我也見到了這新聞，停止了沒什麼進展的圖片生成研究，投入 AI 寫遊戲的研究當中，花了好幾個月還沒有遊戲出來（笑），就寫下這篇文章先作為初步研究結果發表，以証明我還是有努力學習 AI 哦！

早期的 Vibe Code

最早期的 Vibe Code 除了使用 Code Copilot 外，都需要做搬運工，就是問 ChatGPT 一句，他給你一段程式碼，再人手 copy 到適當位置，一切都很花時間，而且沒有 context 之下 ChatGPT 也不能準確判斷你的修改，修改的 reference 多數是由 Github 找回來的文件或答案，只能做到一個文件內可以處理的事情。

Code Copilot

最早跟 VS Code 合而為一的 AI Tools，早期做到的跟 intellisense 差不多的東西，就是強化版，本來 intellisense 是提示一句半句的 function / api 之類，變成可以由你的 function name 去猜你想做什麼，如你一整個 function，雖然不一定是對的，但也有很多情況下節省了你寫整個 function 的時間。

Cursor

最早備受觸目的 AI Code Editor，的確是有很多人由 Cursor 開始發現了可以 vibe coding，因為他將整個 AI Agent 融合到 Code Editor 中，大家既不用做搬運工，也不受 VS Code 限制只能用 Code Copilot，而且不再問一樣東西改一樣，而是會幫你安裝 package，建立文件，寫程式做測試。所有步驟都會告訴你等你批准再進行修改，不就是開發流程中的 Codeing，Testing，Review。不過你變成只需要 review 批准修改就可以。

Windsurf

另一個跟 Cursor 差不多時間推出的 AI Editor，雖然沒 Cursor 般爆紅，但普遍認為比 Cursor 更好的 AI Editor，也成為了 Open AI 希望收購的對像。因為 Windsurf 有更強的上下文處理能力，不像 Cursor 你要指明在什麼資料夾/文件工作，最重要的是收費比 Cursor 便宜！

VS Code

其實有用過 Cursor 跟 Windsurf 的人都會發現，他們跟 VS Code 長得一模一樣。沒錯，他們就是使用了開源的 VS Code 來做 Editor 加上 AI 功能，所以 VS Code 很快就跟進了 AI 功能，讓 VS Code 右邊顯示 Code Copilot （背後是 ChatGPT）的對答視窗，後來更強化成 AI Agent 可以代理使用者修改生成檔案。雖然暫時還比不上 Cursor/Windsurf，但是 VS Code 每日也有免費限額可以使用（而且數量不少），而且以 MicroSoft 的資源要追近也不是不可能的事。

MCP Server (Model Context Protocol)

由於 Cursor 要運作就必須花錢做會員，但有很多人已經花錢在 subscribe 其他 AI，同時 subscribe 幾個不同的 AI 的開支也不少，特別是花了錢又不能轉化成收入的時候。有開發者為 Claude Desktop 開發了 MCP 連接 Blender 或 Unity 等軟件，令 AI Agent 進一步擴展到軟件層面，除了寫 Code 外也能控制其他軟件工作。

而 MCP Server 的出現某程度上令你可以在不同的地方也使用同一個 AI 的 API 去進行，在某些情況下更可以使用免費的 LLM e.g. Gemma/Llama/DeepSeek 來運作，雖然還未非常普及，但此做法大大減低運作了成本。

Vibe Coding 比較

我的目標是 vibe coding 寫 Game，先看簡單比較一下，我會再詳細說明寫 Game 是遇到的問題。

ChatGPT

最開始時我是用 ChatGPT 生成 code 給我寫隻 web game，從一開始討論要寫遊戲的方向，遊戲的設計及玩法，ChatGPT 建議了我用 Phaser 作為遊戲引擎。然後開始實現階段就要我自己去先設置一個 project，安裝 package 及 copy & paste code ，搬運工作當然累人，經常要重提我在使用什麼版本的 package，否則常常會給我版本不對的內容。除錯的過程他總是給同一個 error message 給同一個答案，我說他的修改沒用，過一段時間就好像忘了之前給我的 code，重重複複幾十次也不能完成，最後我轉去 Cursor 試試看。

Cursor

Cursor 一開始接收 ChatGPT 的爛攤子也搞不定，我果斷 delete 了整個 project 重新來一次，同時把之前說給 ChatGPT 的重點都 copy 給 Cursor。Cursor 好像一個急著開始寫 code 的 developer，不會跟 ChatGPT 跟你討論一下就馬上開始 coding。

在首輪開始是很美好，一次過就成形，馬上到能玩的程度，但當我不斷新增功能及遊戲內容時問題就浮現，Cursor 不會主動將內容分拆成不同檔案，除非你一開始先說明了檔案架構，如果我是不會 coding 的人說不會自己分析架構吧。然後功能都在同一個檔案時，他修改 A 功能是也會改一下 B 功能，大家都知 development 的原則是 『沒事的程式就別碰』，Cursor 總是愛亂碰！

如果你把功能分到不同檔案後，他又要你指定那些文件有關連，否則又會忘了。由於我沒有做 version control，結果在他亂改的情況下，能玩的遊戲也變成不能玩，只能怪我太多要求了。

Windsurf

在 Cursor 搞不好的情況下，我再將爛攤子交給 Windsurf，Windsurf 不用我再半人手指定檔案 debug，將遊戲修到能動的樣子，但我已經完全放棄使用 Phaser，原因是我本來以為是輕輕鬆鬆的事，搞得比我自己寫還累，而且 Phaser 也太不方便開發，這時我發現了 Unity MCP。

Unity MCP

經過同 ChatGPT 討論後，還是確實地使用遊戲引擎來開發遊戲比較實在，所以轉為用極多遊戲使用的 Unity 6 作為開發平台，還順道跟 ChatGPT 一起構思了更完整的遊戲設定作為日後使用。

由於 Uniy MCP 需要安裝很多東西，也花了我不少時間，總之最終也成功安裝 Claude Desktop 及 Unity MCP，也學別人一樣給 Claude 一些指令去控制 Unity，但事情沒這麼簡單...

我發現的是 Unity MCP 能控制的事情不多，生成一些幾何圖形，定義那些圖形的顏色大小，加一點 code 到那些圖形上，因為幾何圖形都是很粗糙，出來的質量可能會比你廣告見到的遊戲還要糟。

有些位置還是需要你手動在 Unity Editor 上修改設定，我這個還沒有用過 Unity 的人花半天才找到那些小按鈕在那兒！令原本方便 developer 的工具變成一種障礙，就是你本身要熟悉 Unity 的用法才能使用。而且 Unity MCP 的 function 也是有限，就是能做到一些工作，特別是重複性的工作會做的比較好，但是你用語言形容得不夠清楚的事就很難做得好，如果想準確下達指令，你必須知道 Unity 的專有名詞。

由於每次修改也會自動測試及 debug，而每次也要回傳大量設定資訊回 Claude，所以 token 消耗量極大，我第一天只用一個指令自動來來回回 debug 幾十次就耗光了 Claude 3.7 的 token，所以一定要訂閱 Claude 才能正常使用。

總結

總結一下我的心得就是，Vibe Coding 還是只能在些個人小 project 中或 prototype 中使用比較好，因為他一次性的 coding 能力還是有的，Web/Html 方面由於 source 比較多所以效果會比較好，但一定要跟你的 AI 提及使用 package 的版本。

在一些情況下 AI 的 coding 能力會比較弱：

1. 使用 package 的版本太新，新版本同時有重大更新但沒有太多教學，會令 AI 經常使用舊版本的方式來 coding。
2. 使用的 package 太冷門，AI 對一些冷門 package 不太熟悉，甚至把 Github link send 給他他也不會用，只有熱門而且多人討論的 package 才能運用的好。
3. Project 太大，如果 project 太多檔案，AI 很多時不能兼及所有文件，context 的讀取也是有限度的，所以只能在小 project 中使用。

追加

剛剛試了 Grok Studio，我就直接在 Grok 說了一句 我想要寫一隻遊戲，他就馬上用 html 寫了一隻 web game 並即時在右邊 preview 可以試玩，整個過程就一句說語及數十秒，可以說是最佳 vibe coding 體驗，難怪 Elon Musk 會說 AI 遊戲是未來。