Day 1: 【啟程】嘿，AI！我們來做個網站，但這次，我們約法三章

Day 0: 【啟程】嘿，AI！我們來做個網站，但這次，我們約法三章

嘿，大家好啊！我是 ChiYu，也可以叫我 Eric。

寫了五年的 Code，平常都在跟 .Net 還有 Azure 打交道。簡單說，就是個靠鍵盤吃飯的工程師啦。去年有參賽，但中途忘記發文中斷!!! 希望今年能培養好習慣每天準時一篇不斷更!!!

這趟旅程，是為誰準備的？

在開始之前，我想先說說，這系列文章是為誰而寫的。

你可能完全沒有程式背景，但對現在最紅的 Vibe Coding 充滿好奇嗎？你是不是也想跟上這波 AI 浪潮，試著自己動手做點東西，甚至想成為一名開發者呢？

如果答案是「YES」，那這系列文章就是為你量身打造的！

我們不只玩 Vibe Coding，我更希望在過程中，帶你認識一些重要的「開發觀念」。像是什麼是「前端」、「後端」？什麼是「API」？版本要怎麼控制？這些在專業開發中一定會用到的術語和工作流程，我會用最白話的方式，融入到我們的實作裡。

所以，別擔心自己是「程式小白」。跟著我，我們一步一步來，不只做出一個酷專案，更要幫你打下成為開發者的堅實基礎。

那個…我只是想要一台腳踏車，你給我一艘航空母艦幹嘛？

身為工程師，有新玩具當然會想要跟著玩看看，但純粹的 Vibe Coding 下去，到底會得到什麼？

我的故事是這樣的：我想說來做個最經典最常見的「待辦事項清單 (Todo List)」練練手感。就對 AI 下了一個超簡單的指令：「幫我做個 Todo List 網站，要有CRUD的功能，並且想要一個簡約的UI，我希望專案要越完整越好。」

那時候我心裡想的超單純：啊不就一個 HTML，裡面塞一點點 JavaScript 就搞定了嗎？簡單、好懂、我自己要改也方便。

結果呢？AI 老兄一頓操作猛如虎，給我生出了一整個專案包。我點開資料夾，下巴直接掉下來。哇靠，這是怎樣？React、Node.js、Express、MongoDB……全家餐都來了！

老實說，這 App 能跑，但感覺完全歪掉了。我只是想要一台腳踏車，結果 AI 給了我一艘航空母艦。這要我怎麼騎……啊不是，這已經超出我所了解與熟悉的範圍，且專案規模整個失控！會導致這樣的原因有各種可能，可能是我的Prompt太過鬆散，但又出現了這個「專案要越完整越好」這個關鍵字，也可能是AI自己異想天開等等。出現這種「技術奇觀」讓我意識到，完全放任的 Vibe Coding 真的很容易失控，變成一個你根本不想碰的燙手山芋。

而且老實說，有時候在社群上看到一些分享，真的會替他們頭痛，曾看到有人在分享，他的朋友VibeCoding出了一個購物網站，但登入系統不論怎麼打密碼都可以登入，或是開發出的網站把所有應加密資訊顯露出去。

我完全懂拿到新玩具那種興奮感，AI 工具也確實是開發上的一大福音，而且也讓許多程式小白能體會成為一名工程師的感覺!! 但問題出在「盲目相信」。當專案一搞大，你很快會發現：東西越來越難改、AI 給的專案根本跑不起來、就算跑起來了，噴出來的 BUG 你也看不懂。更慘的是，你叫 AI 修，它修完又生出新的 BUG，最後就卡在一個無限迴圈裡動彈不得。這對沒有太多開發經驗的人來說，真的是個超級大坑。

為魔法裝上韁繩：左手藍圖，右手魔法

所以咧？難道就要這樣放棄 AI 這個神隊友嗎？當然不行！

這就像拿到一把絕世神兵，你不能因為它太利就把它丟掉，而是要學會怎麼駕馭它。所以我就開始找方法，到底要怎麼做才能讓 AI 乖乖聽話，然後我找到了這個說新不新說舊不舊的開發法則：

文件驅動開發 (Document-Driven Development, DDD)。

這東西的精髓，就是把 Vibe Coding 這匹野馬套上「韁繩」。這也是我想分享的這整個系列的核心玩法：【左手藍圖，右手魔法：DDD 與 Vibe Coding 的開發協奏曲】

我們的玩法：40% 藍圖 / 40% 魔法 / 20% 心法

接下來的 30 天，我們的內容佔比大概會是這樣：

• 40% 是畫藍圖 (AI 文件生成)：白話文就是，在叫 AI 寫 Code 之前，我們先逼它跟我們一起把「規格」想清楚、寫下來。我們要當個聰明的甲方，把需求、架構、API 都定義好。
• 40% 是玩魔法 (AI 氛圍編程)：等規格文件都搞定了，嘿嘿，重頭戲來了。我們就把這些文件丟給 AI，跟它說：「照著這個寫！」 這時候的 Vibe Coding 就不會亂跑，而是超精準的火力輸出。
• 20% 是聊心法 (觀念與整合)：最後這 20% 嘛，就是聊聊開發的觀念。當 AI 幫我們做了這麼多事之後，我們開發者的價值到底在哪？（先劇透：我們從蓋磚頭的工人，升級成拿藍圖的總工程師了啦！）。

我們這次的 AI 神隊友：Google Gemini

市面上的 AI 模型百百種，那在這 30 天的系列文中，我主要會使用的 AI 神隊友就是 Google Gemini。

為什麼選它？首先，它的能力很全面，反應也很快，不論是跟它聊規格、產文件，還是寫程式碼，它都能夠勝任，就像一個什麼都會的全能型選手。

再來，也是最關鍵的一點，就是它有官方的命令列工具 Gemini CLI。有了它，我們就可以待在舒服的 VS Code 終端機裡，完成從文件生成到程式碼編寫的所有事情！這對於我們要實踐「右手魔法」的 Vibe Coding 來說，簡直是絕配！而且免費的版本就足夠應用在這次的主題了，每天提供的用量基本上都用不完!!!

我們會在接下來幾天，一步步為魔法的降臨做好準備：Day 1 學習文件驅動的心法，Day 2 把開發環境準備就緒，Day 3 掌握版本控制。然後在 Day 4，我們將正式召喚這位終端機裡的盟友，手把手帶大家安裝與操作 Gemini CLI，敬請期待！

實戰專案：來做個【習慣養成與心情日誌】吧！

光說不練假把戲，對吧？所以接下來這 30 天，我們要來點真格的！我們來一起做一個**「習慣養成與心情日誌」**的網站。我們會用 Python + Flask 當後端，前端就返璞歸真，用 HTML/CSS/JS，從零把它做出來。

如果你也跟我一樣，覺得 AI 超猛，但又怕它變成脫韁野馬，那這趟旅程你絕對不能錯過。

明天我會來介紹什麼是 DDD 文件驅動開發，先讓大家了解這主題的核心之一【文件】的重要性。

特別提一下，在這篇系列文之後提到DDD都會是指文件驅動開發而不是另外一個更常見的DDD 領域驅動開發(Domain-Driven Development)。