iT邦幫忙

2025 iThome 鐵人賽

DAY 1
1
生成式 AI

左手藍圖,右手魔法:DDD 與 Vibe Coding 的開發協奏曲系列 第 1

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

  • 分享至 

  • xImage
  •  

嘿,大家好啊!我是 ChiYu,也可以叫我Eric。
https://ithelp.ithome.com.tw/upload/images/20250820/20132971wFztNdRwWx.png

寫了五年的 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 2 學習文件驅動的心法,Day 3 把開發環境準備就緒,Day 4 掌握版本控制。然後在 Day 5,我們將正式召喚這位終端機裡的盟友,手把手帶大家安裝與操作 Gemini CLI,敬請期待!

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

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

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

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

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


下一篇
Day 2: 【心法篇】開發者的航海圖:什麼是文件驅動開發 (DDD)?
系列文
左手藍圖,右手魔法:DDD 與 Vibe Coding 的開發協奏曲14
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言