iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
生成式 AI

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

AI 寫 Code 超快,但成品像一團義大利麵,讓你又愛又怕嗎?

本系列【左手藍圖,右手魔法】就是要為脫韁野馬般的「Vibe Coding」套上「文件驅動開發」這道完美護欄!我們將化身「領航員」與「引擎手」,學習用 Google Gemini 規劃藍圖,再以 Gemini CLI 在 VS Code 中高效衝刺。

文章將遵循文件、編碼、觀念整合的學習路徑,並使用 GitHub 記錄歷程,從零到有,實戰開發一個「習慣養成與心情日誌」。無論你是程式小白或想精進 AI 協作的開發者,都歡迎加入這場駕馭 AI 的開發協奏曲!

鐵人鍊成 | 共 32 篇文章 | 11 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day 21: 【前端 #2】從原型到架構:拆解並整合 AI 生成的 UI 程式碼

安安,我是 ChiYu! 昨天那場「視覺魔法秀」是不是超震撼的?才幾分鐘,AI 就「咻」一下變出一個又美又能動的 UI 原型,真的太扯了!這證明 AI 拿來做...

2025-09-09 ‧ 由 ChiYu 分享
DAY 22

Day 22: 【前端 #3】AI 一鍵生成完整 App 靜態 UI

安安,我是 ChiYu! 昨天,我們扮演了一位冷靜而專業的「結構工程師」,成功地將 AI 生成的華麗原型,重構成為一個結構清晰、職責分明的專業前端專案。我們的...

2025-09-10 ‧ 由 ChiYu 分享
DAY 23

Day 23: 【前端 #4】非同步的藝術:深入 Fetch API 與 Promise

安安,我是 ChiYu! 昨天,我們扮演了一位「創世神」,指揮 AI 在一天之內,為我們建構出了 App 完整、精美的靜態 UI。我們現在手上,有了一個外觀完美...

2025-09-11 ‧ 由 ChiYu 分享
DAY 24

Day 24:【前端 #5】狀態管理的哲學:讓 UI 成為數據的鏡子

安安,我是 ChiYu! 昨天,我們的 App 經歷了一次歷史性的飛躍。我們為它安裝了「神經系統」,成功地讓前端的「身體」與後端的「大腦」進行了第一次對話。我們...

2025-09-12 ‧ 由 ChiYu 分享
DAY 25

Day 25: 【前端 #6】核心生命週期:一天搞定習慣的「增刪改查」與「打卡」

安安,我是 ChiYu! 昨天,我們的 App 經歷了一次質的飛躍。我們為它植入了「靈魂」——一個中央的狀態 (state) 和一個渲染引擎 (render)。...

2025-09-13 ‧ 由 ChiYu 分享
DAY 26

Day 26: 【前端 #7】用戶體驗的最後一哩路:優雅地處理載入與錯誤

安安,我是 ChiYu! 昨天,我們的 App 經歷了一次完全體的進化!我們在一天之內,火力全開,搞定了核心的 CRUD 功能。我們的 App 不僅能思考、能表...

2025-09-14 ‧ 由 ChiYu 分享
DAY 27

Day 27: 【文件 #8】數據的畫布:用 Gemini 設計「圖表元件規格書」

安安,我是 ChiYu! 昨天,我們的 App 學會了「同理心」,能夠優雅地處理載入與錯誤,大幅提升了使用者體驗。至此,我們 App 的基礎建設與核心互動功能...

2025-09-15 ‧ 由 ChiYu 分享
DAY 28

Day 28: 【前端 #8】兌現承諾:根據規格書 Vibe Coding 關聯性洞察圖表

安安,我是 ChiYu! 昨天,我們再次實踐了「文件驅動開發」的核心精神。我們沒有直接衝進複雜的圖表程式碼中,而是先退一步,將一個模糊的「想法」,轉化為了一份清...

2025-09-16 ‧ 由 ChiYu 分享
DAY 29

Day 29: 【文件 #9】專案的守衛:用 Gemini 規劃「前端認證流程」

安安,我是 ChiYu! 昨天,我們成功地兌現了對使用者的最終承諾,將冰冷的數據轉化為了富有情感的、能啟發洞察的視覺化故事。我們的 App 核心價值已然確立。...

2025-09-17 ‧ 由 ChiYu 分享
DAY 30

Day 30: 【前端 #9】建立大門與鑰匙:根據流程圖實現前端使用者認證

說在前頭!!!有些部分多花費了些時間在講,所以雖然今天已經滿30天了,但我還沒有正式完成這次鐵人賽系列文!!!我後面還是會繼續更新到正式完結。畢竟還是要有頭有尾...

2025-09-18 ‧ 由 ChiYu 分享