這篇文章，是我給未來某個跟我一樣「不會寫程式、但想解決問題」的你。
專案起點：從馬祖路跑報名的煩惱開始
一年一度的馬祖路跑即將開始，負責報名的我又得整理隊員們的個資。雖然馬祖路跑小隊已經成軍三年了，過去也有一些資料留存，但報名所需要的資料太多，手上的資料還是不夠齊全。而報名的資料中還有姓名、身分證字號等機敏資訊，如果直接請大家開啟共用的 Notion 編輯，那幾十個人就都能看到彼此的資料，對我來說曝露的程度和風險又有點高了，若是請大家私訊確認補資料，一次要追 10 個人，又好麻煩，這個煩惱，成為我開啟這次 Vibe Coding Side Project 的動機。
我能不能做一個只讓使用者看到自己資料的小工具，讓他們自己來更新？
解決思路：用 AI + 自動化工具做出自己的「資料驗證與更新工具」
以下是我原本就有在使用的 AI 工具，因為原本就有在使用，所以不算是這次開發的專案成本。
- ChatGPT Plus
- Claude Pro
- Zeabur 開發者版本（之前在講義活動時還得到了 5 美金的折扣碼，Zeaber 真的簡單好用，推推）
- n8n
- Noion Plus
在與 AI 討論之後，決定了以下的工具以及用途
- Notion Database：作為後端資料儲存
- n8n：處理資料比對與身份驗證流程
- Zeabur：佈署前端頁面
- ChatGPT + Claude：協助我撰寫程式、規劃架構與 Debug
在正式 Vibe Coding 實作之前，我做了什麼？
我完全沒有 PM 經驗，沒有實際進行過產品設計以及產品開發，若真說要有一點產品經驗的話，在幾年前參加過商業思維學院的產品經理學習營，也上完產品經理學程，過程當中對於產品有一點基礎的認識。
第一步很產品經理：盤點資源，搭建專案架構
如果需要一個方法論的話，我會說，請釐清以下三件事情
- 你想做的事情是什麼，你希望使用者怎麼用這個工具 (user flow)
- 你的能力到哪裡、目前有什麼工具可以使用
- 在這個專案當中，有什麼事情是絕對不可以退讓犧牲的
我個人覺得第 3 點尤其重要，發現 AI 如果不記得了，也要常常提醒他。以這個專案來說，就是「資訊安全」。
如何用 ChatGPT／Claude 開始 Vibe Coding？
在搭建專案架構的時候，我非常推薦使用 ChatGPT 而不是 Claude。如果平常大量使用 ChatGPT 時，在搭建架構以及技術規格時，ChatGPT 還能依據過往的記憶，推薦出比較適合的作法，非常貼心。
確認好架構、資源後，就能開始扮演甲方角色，請 ChatGPT 提案，只要用自然語言描述想要達成的產出就可以了。我一開始的 Prompt 也就只有：
我有一個 Notion Database，裡面有成員的基本資料。
我希望有一個介面，可以讓成員輸入姓名和身分證字號驗證之後，
確認資料是否正確，並補齊沒有填完的資料。
請給我幾種解法，說明每種所需工具與優劣比較。
此時 AI 會像 PM 一樣提 A、B、C 三種方案，記得請他說明
- 需要有什麼能力
- 簡述作法（我有說我不會寫程式，請用大學生的角度說明）
- 優點與缺點
記得，這時候都不要開始寫程式，先把 要怎麼做 搞清楚，後面會順利很多。
在 ChatGPT 提出做法，清楚說明各方案需要的技術、操作方式與風險之後，視自己的能力或需求，選擇合適的方案走下去，就可以了。當時我的 prompt 是：
我想試試方案三，我有 Zeabur，可以佈署網頁。你可以幫我規劃架構嗎？
這時，ChatGPT 神奇地記得我會用 n8n，還主動建議把驗證邏輯放在那裡，讓前端不碰敏感資料，完美！
在 AI 給架構之後
不要直接相信 ChatGPT！！
這個階段要從甲方的角色轉變為 PM 角色，和 ChatGPT 一起開發。對話當中所有看不懂、無法理解為什麼的東西或流程, 一定要請他用各種方式解釋清楚，就算用童書繪本風格也可以。身為 PM 你一定要知道你要去哪，要怎麼去，不然 AI 工程師只會做白日夢，開始胡言亂語。
一切都沒有問題之後，按照他的步驟執行（或者你請他給流程清單，就一步步照做）。
以這個 side project 來說，要進行的步驟就是
- 設定 Notion API，並且在資料庫中 integrate
- 設定 n8n
- 在 Zeabur 佈署前端網頁
從網路上的分享還有我自己的經驗， ChatGPT 寫網頁很醜，所以我打算先從後台開始，前台打算之後轉移到 Claude 繼續。
記得每一個節點都要設測試，避免 AI 幻覺，不然做到最後發現他在胡說八道導致白做工，真的是會很生氣。
中間不斷地 設定→測試→修正，到都完成的時候，和 ChatGPT 說
整理一下目前的討論，我想換到 claude 上請他繼續
就能順利轉移了。
以 ChatGPT + Claude 完成首個 Vibe Coding 專案
這個月因為工作的關係付了一個月的 Claude 訂閱，終於可以吃大一點的檔案，Claude 對話窗的長度沒有短到像明天就要世界末日，說完需求後直接生出一個改都不用改的 html 檔，超神！（我額外有給 n8n workflow 的 json 檔，但好像沒有用到）
但這也是如果使用免費版開發上的限制，雖然 Claude 的程式碼品質非常好，但一個對話窗能夠使用的額度太低，加上還要幫新對話補充專案資訊，常常兩三次來回之後就要另開新對話。
後期因為後來額外想顯示資料庫的資料，讓大家可以用核對而不是新增的方式確認，也是在 Claude 上就 n8n 的設定又來回了一陣子。
和上一段的過程差不多，但明顯 Claude 雖然也有亂講話的問題，但他給的內容的正確性很高，所以解決得都蠻快的
最後測試一下，無論是測試帳號還是我自己的資料都可以正常使用
完成！
後續延伸應用與反思
目前這個專案已功成身退，畢竟就只是讓隊友們對一下報名資料而已。不過後來想想，不管是課程系統、預約系統
好像後續都可以再繼續發展下去。
於我自己來說，有另外一個新的目標想做，沒有什麼特別的契機的話，這 side project 就這樣結束。
在做完這個專案之後，和朋友們討論了一下 Vibing Coding 對我而言是什麼。我一開始其實覺得蠻新奇有趣的，看著很多人的成品覺得原來是有機會做到這件事，然後覺得很有趣！有機會也想來試試看。
在這次的 side project 之後，更像是覺得取得一個「自己做小工具來解決自己的問題」的能力，不是要取代工程師，而且多了一種解決問題的方法，覺得自己又多會了一點點東西，這種能夠實現自己的想像的感覺很好。
我不會說需要什麼才能開始，也不會說我 AI 玩得多厲害，關於如何學習 Vibe Coding 這件事，有大神幫我說完了
如果問我，如何能夠走出這一小步，除了自己喜歡玩玩具之外，不可獲缺的是案例，各式各樣、各行各業的案例，這也是為什麼每一次我都想在 Facebook 記下自己 side project 過程的原因。我不是一個有創新能力的人，但我是一個抄作業抄得很好的執行者，也希望我稱之為還在 #VibeCoding 危樓的程度下的經驗，成為未來某人的養份。
