Vibe Coding 的十月

從九月底的中秋連假開始一直到整個十月，突然一口氣做了好幾個 Vibe Coding 的專案，想要介紹一下這些專案，也分享一些心得。

Scratch: Agent Canvas

現在很多筆記軟體都有提供「白板」的功能，例如 Heptabase 的 Whiteboard，Obsidian 的 Canvas，抑或是老牌的 Miro，就連 Apple 現在也有內建 Freeform。所以一開始我只是想，假如可以把 coding agent 也放在白板裡，一定很方便。現在的軟體工程師，在公司往往得一次開好幾個 coding agent，同時負責不同的專案任務，agent 一多，要怎麼管理它們就變得很重要，cmux 和 herdr 都是不錯的選擇，我也都使用過一段時間，但它們感覺還是像傳統的終端機，我用一用還是會忍不住想：假如有一個白板，我可以在上面擺上 coding agent，加一些線條描述它們彼此間的關係，或是在 agent 旁邊放個便條紙，快速記個筆記等等，一定會很方便。

就像這樣：

其實我一開始完全沒有想要做自己的專案，我是先跟 ChatGPT 聊這個想法，然後叫它去找有沒有已經有人寫好的，讓我可以直接用，它雖然列了幾個選項給我，但我感覺都不對，聊到最後，突然覺得，不然我來 Vibe Coding 一個好了。

過程遠比我想的還要順利，中秋連假之後，我就有了一個成品，而且我之後就完全只使用這個自己的工具來使用 agent，不論是在公司電腦或是自己私人電腦，都只使用這個工具。

之後我又加入了卡片盒筆記的設計，所以也可以承擔部分筆記軟體的功能。

Boba 🧋: Open Browser Agent

Boba 是一個利用 userscript 載入，跑在網頁裡的 agent，所以它可以直接讀取網頁的 DOM，然後執行 JavaScript 去修改網頁，修改完之後，還可以叫 agent 直接產出對應的 userscript，下次再載入同個網頁時就直接執行。以前很羨慕網頁高手，可以自己寫 userscript 去改造網站，有了 Boba 之後，我也可以利用 agent 的能力，做到類似的事情。

目前我用 Boba 來翻譯網頁，下載多媒體資源，產生 userscript 去阻擋 Facebook 的 Reels 等等。

題外話，Facebook 的 Reels 推薦演算法根本噁心，不是根據我的興趣，不是根據我的追蹤對象，根本就只依據我的性別而已啊？Reddit 也有人提到這個問題，所以把 Reels 擋掉真的清靜多了。

個人 On Demand VPN

當自己需要外國 IP 的時候，利用 VPS 提供商的 API，開啟一台 VM，裝好 VPN 服務，然後再從我 local 的電腦連過去，我想概念是很簡單的，但做起來也是很麻煩，但透過 AI，大概一天就做好了。

Snipper: Local OCR

其實就是用 Apple Vision Framework 辨識螢幕上的文字，再將文字傳給 LLM 做翻譯，所以即使是影片或遊戲裡的文字無法複製，利用這個方法也能快速瞭解意思。

個人 RSS Reader

也是一個概念上不難，但要做得好也是需要注意很多細節的專案，雖然有想過自己試著寫，但一直不敢動手，結果 agent 一個晚上就做出來了。

做太快，我只好抽問幾個我知道的技術細節，當然是全對，人類還是別寫程式了。

心得感想

Good Artists Copy; Great Artists Steal

也不是自己偷，叫 Agent 去偷。

在做 Scratch 的時候，我叫 Agent 去參考 herdr 的原始碼，瞭解 herdr 是怎麼在 agent 結束一段工作後發出通知的；也模仿它讓 agent 彼此可以互傳訊息的功能。另外，白板的操作，我則是盡量從 Heptabase 學習，讓不論是使用觸控板，或是使用滑鼠，都可以得到不錯的使用體驗。

Boba 的話，基本的 agent 概念，我是從台大李宏毅教授的 YouTube 影片 學到的。實作方面，我則是讓 Agent 去讀 Pi agent 的原始碼，盡量設計出合理的 tool，跟精簡的 agent 迴圈。

IKEA Effect

我發現自己更愛用自己做的東西，其實有很多小問題，反應速度也沒有成熟的產品那麼快，但我卻更喜歡用。

小問題假如是自己還可以接受的就不修，受不了的話就叫 agent 檢查一下；假如看到其他的軟體有什麼好用的功能，就也嘗試加到自己的專案裡面，該怎麼說呢，有種自由的感覺。不用等待別人修 bug，想加什麼功能就嘗試加看看，難道這就是軟體的新時代？