系列核心
Weight 1
點閱 1
Day 1: 【啟程】嘿，AI！我們來做個網站，但這次，我們約法三章
2025 iThome 鐵人賽 Day 1：開啟文件驅動開發 (DDD) 與 Vibe Coding 的旅程。介紹本系列文章的核心目標，以及如何透過 AI 輔助來構建「習慣養成與心情日誌」專案。
Series
2025 iThome 鐵人賽
左手藍圖，右手魔法：DDD 與 Vibe Coding 的開發協奏曲 系列 AI 寫 Code 超快，但成品像一團義大利麵，讓你又愛又怕嗎？ 本系列【左手藍圖，右手魔法】就是要為脫韁野馬般的「Vibe Coding」套上「文件驅動開發」這道完美護欄！我們將化身「領航員」與「引擎手」，學習用 Google Gemini 規劃藍圖，再以 Gemini CLI 在 VS Code 中高效衝刺。 文章將遵循文件、編碼、觀念整合的學習路徑，並使用 GitHub 記錄歷程，從零到有，實戰開發一個「習慣養成與心情日誌」。無論你是程式小白或想精進 AI 協作的開發者，都歡迎加入這場駕馭 AI 的開發協奏曲！
32
系列文章
3
核心入口
Recommended Path
先從這幾篇開始
先讀核心文，再回頭看完整系列會比較順。
開始閱讀
系列核心
Weight 2
點閱 0
Day 2: 【心法篇】開發者的航海圖：什麼是文件驅動開發 (DDD)？
2025 iThome 鐵人賽 Day 2：深入探討文件驅動開發 (DDD) 的心法。了解如何透過清晰的規格文件駕馭 AI，避免 Vibe Coding 失控，實現「左手藍圖，右手魔法」的高效開發。
系列核心
Weight 3
點閱 1
Day 3: 【工具篇 #1】萬丈高樓平地起：建置本地開發環境
2025 iThome 鐵人賽 Day 3：手把手帶你建立專業的本地開發環境。安裝 VS Code、Python、Node.js 及必備擴充套件，為接下來的 AI 輔助開發做好萬全準備。
Archive
完整閱讀順序
預設依系列權重排序，同權重再看發佈日期。
系列核心
Weight 1
2025-08-20
點閱 1
Day 1: 【啟程】嘿，AI！我們來做個網站，但這次，我們約法三章
2025 iThome 鐵人賽 Day 1：開啟文件驅動開發 (DDD) 與 Vibe Coding 的旅程。介紹本系列文章的核心目標，以及如何透過 AI 輔助來構建「習慣養成與心情日誌」專案。
系列核心
Weight 2
2025-08-21
點閱 0
Day 2: 【心法篇】開發者的航海圖：什麼是文件驅動開發 (DDD)？
2025 iThome 鐵人賽 Day 2：深入探討文件驅動開發 (DDD) 的心法。了解如何透過清晰的規格文件駕馭 AI，避免 Vibe Coding 失控，實現「左手藍圖，右手魔法」的高效開發。
系列核心
Weight 3
2025-08-22
點閱 1
Day 3: 【工具篇 #1】萬丈高樓平地起：建置本地開發環境
2025 iThome 鐵人賽 Day 3：手把手帶你建立專業的本地開發環境。安裝 VS Code、Python、Node.js 及必備擴充套件，為接下來的 AI 輔助開發做好萬全準備。
一般更新
Weight 4
2025-08-23
點閱 0
Day 4: 【工具篇 #2】程式碼的時光機：Git 與 GitHub 版本控制
深入軟體開發中最最最重要的觀念——版本控制，並親手設定我們專案的雲端保險庫與時光機總部：Git 與 GitHub。
一般更新
Weight 5
2025-08-24
點閱 3
Day 5: 【工具篇 #3】終端機裡的魔法：什麼是 Vibe Coding 與 Gemini CLI？
我們將迎來本系列第一個令人心跳加速的轉捩點。我們不只要安裝「引擎」，我們還要學會詠唱「魔法的咒語」，真正地與 AI 對話，把我們的意念灌注到終端機之中！
一般更新
Weight 6
2025-08-25
點閱 1
Day 6: 【文件 #1】專案的靈魂：用 Gemini CLI 生成「專案章程」
今天，我們就要正式啟動專案，打響「左手藍圖」的第一槍！我們將完全在 VS Code 終端機內，為我們的太空船，設定好最初也最重要的航行座標。
一般更新
Weight 7
2025-08-26
點閱 0
Day 7: 【文件 #2】使用者的旅程：用 Gemini CLI 描繪「使用者故事」
今天，我們將完全在終端機內，描繪這張地圖，產出兩份從「使用者視角」出發的關鍵文件：使用者故事與使用者流程圖。
一般更新
Weight 8
2025-08-27
點閱 0
Day 8: 【文件 #3】系統的心臟：用 Gemini CLI 設計「軟體架構文件」
今天，我們要戴上「工程安全帽」，化身為系統架構師，規劃未來系統穩定、高效、可擴展的基石。
一般更新
Weight 9
2025-08-28
點閱 0
Day 9: 【文件 #4】數據的家：用 Gemini 規劃「資料庫綱要」
今天，我們將化身為「數據的守護者」——資料庫管理員 (DBA)，與 Gemini 一同規劃我們專案的「資料庫綱要 (Database Schema)」！
一般更新
Weight 10
2025-08-29
點閱 2
Day 10: 【文件 #5】溝通的契約：用 Gemini 撰寫「Web API 規格書」
今天，我們要交給「服務生 (API)」一份精準的「菜單」，讓他知道如何跟廚房溝通，這就是後端藍圖的最後一塊拼圖——Web API 規格書。
一般更新
Weight 11
2025-08-30
點閱 0
Day 11: 【心法 #2】透過AI幫我們生成Prompt
今天我們暫時不推進度，要來一場「魔法師的幕後揭秘」，聊聊如何讓 AI 幫我們生成高品質的 Prompt。
一般更新
Weight 12
2025-08-31
點閱 2
Day 12: 【後端 #1】起手式：AI 代理人 生成模組化的 Flask 專案
今天我們將命令 AI 代理人，根據設計好的「模組化專案結構」，一步到位地為我們生成整個後端專案的基礎架構。
一般更新
Weight 13
2025-09-01
點閱 0
Day 13: 【後端 #2】AI 建築師：依藍圖自動建構 CRUD API
今天我們將扮演「專案總建築師」，把詳細的「設計藍圖 (API_SPEC.yml)」交給 AI 首席工程師，命令它根據藍圖建構完整的 Habits 資源模組。
一般更新
Weight 14
2025-09-02
點閱 1
Day 14: 【DevOps #1】AI 品管員：設定 GitHub Actions 自動化程式碼檢查
今天我們就要來幫專案請一位 24 小時不休息的稽查員—— GitHub Actions ，順便設定好我們的第一條自動化品管流程 (CI)！
一般更新
Weight 15
2025-09-03
點閱 0
Day 15: 【後端 #3】API 測試：用 Gemini CLI 輔助撰寫 Pytest
今天我們將引入自動化測試，指揮 Gemini 化身為測試工程師，為我們撰寫測試案例，並直接升級 CI 流程。
一般更新
Weight 16
2025-09-04
點閱 1
Day 16: 【整合篇】後端竣工！回顧與展望
今天，是我們「左手藍圖，右手魔法」協奏曲的上半場終章。我們將回顧我們走了多遠，沉澱我們學到了什麼，並展望未來。
一般更新
Weight 17
2025-09-05
點閱 0
Day 17: 【前端 #0】前端世界的基石： HTML, CSS 與 JavaScript
今天，我們將回歸本心，認識一下構成生命的三大基本元素：HTML, CSS, 與 JavaScript。
一般更新
Weight 18
2025-09-06
點閱 2
Day 18: 【文件 #6】網站的風格指南：用 Gemini 定義顏色與字體
今天我們將化身為「首席視覺設計師」，與我們的 AI 夥伴 Gemini 深度對談，為我們的 App 定義一套獨一無二的視覺風格。
一般更新
Weight 19
2025-09-07
點閱 2
Day 19: 【文件 #7】頁面的骨架：用 Gemini 規劃主佈局與元件拆分
今天我們將化身為「UI 架構師」，指揮 Gemini 設計出網站的主要佈局，並將介面拆解成清晰的元件清單。
一般更新
Weight 20
2025-09-08
點閱 0
Day 20: 【前端 #1】Gemini Canvas 生成UI (還有新的AI建議功能)
今天我們將使用 Gemini Canvas 功能，直接從「建築工人」升級成「魔法建築師」，瞬間召喚出一棟功能完整、外觀精美的 UI 原型！
一般更新
Weight 21
2025-09-09
點閱 0
Day 21: 【前端 #2】從原型到架構：拆解並整合 AI 生成的 UI 程式碼
今天我們將扮演「結構工程師」，將昨天生成的 UI 原型進行專業級的「大改造」，落實關注點分離原則。
一般更新
Weight 22
2025-09-10
點閱 0
Day 22: 【前端 #3】AI 一鍵生成完整 App 靜態 UI
今天我們將繼續指揮 AI 助手，根據所有設計藍圖，在現有專案基礎上，將 MVP 所需的所有靜態 UI 元素全部建造完成。
一般更新
Weight 23
2025-09-11
點閱 1
Day 23: 【前端 #4】非同步的藝術：深入 Fetch API 與 Promise
今天我們將深入前端開發中最核心的觀念——非同步程式設計，並學習如何使用 Fetch API 讓前後端進行對話。
一般更新
Weight 24
2025-09-12
點閱 0
Day 24: 【前端 #5】狀態管理的哲學：讓 UI 成為數據的鏡子
今天我們將深入探討狀態管理的心法，並引入一個輕量的狀態中心模式，讓我們的 UI 成為數據最忠實的鏡子。
一般更新
Weight 25
2025-09-13
點閱 0
Day 25: 【前端 #6】核心生命週期：一天搞定習慣的「增刪改查」與「打卡」
今天我們將火力全開，搞定所有習慣的「增、刪、改、查」與「打卡」功能，讓 App 真正地動起來。
一般更新
Weight 26
2025-09-14
點閱 0
Day 26: 【前端 #7】用戶體驗的最後一哩路：優雅地處理載入與錯誤
今天我們將為 App 注入「同理心」，教它如何與使用者溝通，優雅地處理「載入中」和「錯誤」狀態。
一般更新
Weight 27
2025-09-15
點閱 1
Day 27: 【文件 #8】數據的畫布：用 Gemini 設計「圖表元件規格書」
今天我們將重拾文件驅動開發，為最複雜的「關聯性洞察」功能，撰寫一份清晰、專業的「圖表元件規格書」。
一般更新
Weight 28
2025-09-16
點閱 1
Day 28: 【前端 #8】兌現承諾：根據規格書 Vibe Coding 關聯性洞察圖表
今天我們將正式拿起工具，嚴格依據昨天的這份《圖表元件規格書》，指揮 AI 和 Chart.js，將這幅數據的畫布，變成真實、可互動的前端程式碼！
一般更新
Weight 29
2025-09-17
點閱 0
Day 29: 【文件 #9】專案的守衛：用 Gemini 規劃「前端認證流程」
今天我們將進行第二個前端的 DDD 循環，扮演「資安架構師」，為專案撰寫一份清晰、專業的「前端認證流程規格書」。
一般更新
Weight 30
2025-09-18
點閱 0
Day 30: 【前端 #9】建立大門與鑰匙：根據流程圖實現前端使用者認證
今天我們將迎來前端整合的最終章！嚴格依據流程圖實現認證系統，為 App 裝上大門與門鎖。
一般更新
Weight 31
2025-09-19
點閱 1
Day 31: 【優化篇】代碼的整形外科：JavaScript 模組化與代碼重構
今天我們將為原本臃腫的 script.js 進行一次徹底的「整形手術」，引入專業的 JavaScript 模組化結構。
一般更新
Weight 32
2025-09-20
點閱 0
【完賽感言】左手藍圖，右手魔法：一趟旅程的結束與反思
這三十天不僅僅是開發一個 App，更是一場關於如何在 AI 時代重新定義開發者價值的探索之旅。