前言

接下來這 30 天，我會用同一個專案，帶你走完一次 Vibe Coding 的完整實戰開發流程。

帶你從一個模糊的想法，一路到能公開分享的記帳 Web App。

而我會想寫這個系列，是因為我自己部落格也寫了不少 AI 相關的文章，可是這些資源相對零散，對於一個想從零開始做出自己小工具的新手來講，東翻一篇西翻一篇其實蠻痛苦的，畢竟有很多知識點並不是單一文章能涵蓋的，必須親自走過一次完整的專案開發流程才會真正理解到這些東西在實際開發中該什麼時候登場與使用。

因此這個系列會是一條完整的路線，從 最最最最基本的概念 開始。

所以接下來的三十天，我將會用 Claude Code 作為基本底，帶你從基本操作到實際開發一個記帳 App（不一定要記帳 App，你也可以做別的），並且會一步步帶你了解整個開發流程，從需求分析、規格設計、程式開發、Debug、畫面設計到部署上線。

Note
這些方法與技巧你可以套用到 Codex、Gemini 等其他 AI 服務上，但畫面、指令、Permission Modes、Skills 與 Hooks 會有一些差異，通常只要掌握好一個 AI 服務，基本上其他稍微看一下就可以快速學會了，因為觀念差不多且大多抄來抄去。

為什麼要用「做一個東西」的方式來學？

這邊我也想特別補充說明一件事情，我一直認為 工具類型 的教學文章一直都有一個天花板存在，也就是不管功能介紹得有多麼詳細，讀者也很難實際理解這些功能在實際上該用在哪裡、什麼時候登場，更不用說這些工具會一直更新，所以我認為這一直都是一個門檻。

我相信此時此刻的你，應該曾經有過底下類似的經驗：

文章講的內容我都看得懂，但關掉之後，拿到自己專案中，我好像不知道該怎麼導入、什麼時候該用，甚至不知道該怎麼開始。

而這件事情我認為不是你的問題，而是 知道功能 跟 知道什麼時候用什麼功能 根本就是兩回事，後者需要實際的專案開發經驗才有辦法學到。

所以這一篇我在規劃大綱的時候，盡可能不把 Claude Code 當作功能介紹的工具，而是以一個專案開發為主軸，並回推回去你應該認識哪些東西、你應該具備哪些觀念、該怎麼操作，我自己認為這樣遠比我介紹一大堆的功能更具實用性，也比較不容易因為軟體更新而失效，過程中我也會帶給你一些觀念與理念。

那我為什麼選擇 Claude Code 呢？這件事情讓我賣點關子，留給下一個篇章再來說明，你只需要知道「這套心法可以讓你在任何 AI 服務上面使用」就好。

儘管這一系列都會圍繞在 Claude Code 上，但我會盡可能說用 AI Agent 去取代 Claude Code 這個單字，讓整篇看起來不會太過於綁定在某一個工具上，畢竟這個系列的重點是「Vibe Coding」這個概念，而不是某一個工具，這樣你也可以把這套心法套用到其他 AI 服務上。

Note
先等等，請你先不要急著訂閱 AI 服務，等我後續介紹時，你再來訂閱也不遲。

30 天後會做出什麼？

可能有點老套且常見，但我會帶你做出一個屬於你自己的記帳 App（是 Web 版本），名稱就叫做「記帳小工具」（很直白吧？），30 天之後你可以把這個成果分享給朋友。

那...我們預計會有哪些功能呢？

• 記一筆帳： 你可以填寫金額、分類、日期、備註，支出跟收入分成兩個分頁各記各的。
• 本月清單： 你可以看得到這個月記了什麼，點某一筆進去可以修改，也可以刪除，刪除前會再次確認。
• 分類管理： 支出跟收入各自的分類都可以自己新增、刪除。
• 月統計： 你可以看到本月總額，以及各分類的金額與圓餅圖。
• 預算提醒： 你也可以設定每月預算，超支時，就顯示超出的金額。
• 資料留在瀏覽器： 帳目存在瀏覽器內建的一個小倉庫（叫 LocalStorage，後面會再介紹），不需要額外建立資料庫，重新整理或關掉分頁後資料一樣在，但要注意清除網站資料、換瀏覽器或換裝置是不會帶過去的。
• 手機跟電腦都可以用： 我會介紹一些方式引導你做出 RWD（Responsive Web Design）響應式網頁，讓你手機、平板、電腦都可以使用。
• 自動化與上線： 最終會補上一組自動測試（讓程式自己檢查自己），並教你用 GitHub Actions 與 GitHub Pages 讓它自動部署上線，這兩個名詞現在看不懂沒關係，輪到它們登場時我會盡可能用白話文去解釋。

感覺還不錯吧？但這邊還是要特別講一個觀念：

這個專案並不難，難的不是功能，而是怎麼把需求做好、怎麼把畫面弄好，當 AI 跑歪時，你又該如何拉回來，怎麼把整個流程走完，讓系統可以落地。

所以這三十天你並不單純只是學怎麼做一個東西，而是親自走過一輪 Vibe Coding 專案流程：從需求、規格、開發、除錯、畫面設計，一路走到測試跟部署上線並落地。

除此之外，這一系列我刻意不加入登入、雲端同步、匯出和跨月折線圖等功能，這並不代表這些功能不重要，而是我想讓你把力氣花在流程本身，功能可以之後自己再加上去也不遲。

後面章節中，我都會反覆提到「驗收」這件事，但它並不是 Claude Code 的指令，也不是某一種 Mode，而是 AI 說「完成」之後，你必須親手操作驗收一次，確認結果是不是符合原本的要求。

這 30 天怎麼安排

接著聊一下這 30 天我預計怎麼規劃跟安排，這個系列我拆成四週，分別是：

一週一個階段，不會第一天就叫你部署上線，你可以放心。

我需要準備什麼？

你需要...

• 一台可以安裝軟體的電腦（你沒電腦怎麼開始使用 Vibe Coding？）
• GitHub 帳號
• 一張信用卡（後面會需要購買 AI 服務的訂閱方案）
• 稍微懂一點英文（不懂也沒關係，有強大的翻譯工具可以幫你）

當然不只有這些，後面還需要安裝 Git、Node.js 等等，但這些我會在後面章節帶你一步步安裝。

「Vibe Coding 需要懂一點程式碼嗎？」

我相信這是最多人好奇的點，我的答案是「不需要」。

只是如果懂一點點程式碼會更好，但不需要到熟練、甚至能手刻一個功能的程度。

當然，這個系列我會盡可能使用白話文、圖解、截圖等各種方式去讓你理解以及可以跟著做，當然你可能會看到一些專業名詞、詞彙，畢竟有些東西用專業名詞會比較精準，我也不想被其他工程師白眼（笑）。

那每一篇長度如何呢？我大概是預計抓在 15～30 分鐘內，實作可能會到 45～90 分鐘不等，當然這是我個人體感，你可以依照自己的狀況調整，只是讓你有一個心理預期罷了。

每天怎樣才算完成？

每篇的結尾我會盡可能出一些驗證方式給你讓你知道「今天結束前，你手上應該有什麼」，可能是一個小挑戰、一段驗收步驟，或一個該出現的畫面。

基本上跟著文章操作一次就對了；如果對不上的話，你也可以回頭看一下文章，檢查一下自己跳過哪些步驟或者哪裡操作錯誤。

另外，畫面和 AI 的文字回覆可能因為模型差異而有所不同，所以請不要追求跟文章截圖一模一樣，畢竟 AI 具有隨機性每一次產出都是不同的。

適合哪些人閱讀？

我在規劃這個系列時，主要考量到三種讀者：

1. 完全沒碰過 AI 的新手： 建議你直接從 Day 1 按順序讀，整個系列就是為你設計，每一天都建立在前一天的基礎上，我相信對你使用 AI 會有很大的幫助。
2. 已經在用 AI 的使用者： 第一週對你來講可能偏簡單，你可以快速掃過去，看看有沒有哪邊自己不熟的，接著就可以馬上從 Day 8 實戰開跑的地方切入，或挑你還沒碰過的主題直接跳進去。
3. 暫時不打算動手的讀者： 你把它當一個 AI 開發專案記錄片來看也完全可以，我會把過程中的決策跟撞牆都寫出來，光看這個過程與故事你應該也能帶走不少東西、經驗。

當然，我最希望的還是你動手做，畢竟這個系列的靈魂就是 「做」 這個字。

結語

聊了那麼多，最後也總理一下重點：

• 我會花 30 天用 AI 從零做出一個記帳 Web App 並且上線
• 這四週的節奏規劃為...觀念操作 → 實戰 MVP → 畫面變好看 → 流程與上線
• 準備電腦、GitHub 帳號與一張信用卡，實作日請預留 45～90 分鐘
• 不管你是全新手、老手還是純看故事的，都有各自的切入點

希望這一篇有讓你對接下來的 30 天有一點期待，也希望我自己能夠順利完賽，一起加油吧！

明天我們先來聊聊「Vibe Coding」這個詞到底是什麼、又是怎麼紅起來的，幫接下來的實戰打個底哩～

我們明天 Day 2 見囉～