Day 1: 【啟程】嘿，AI！我們來做個網站，但這次，我們約法三章
Day 0: 【啟程】嘿，AI！我們來做個網站，但這次，我們約法三章 嘿，大家好啊！我是 ChiYu，也可以叫我 Eric。 寫了五年的 Code，平常都在跟 .Net
系列文章
2025 iThome 鐵人賽
Day 2: 【心法篇】開發者的航海圖：什麼是文件驅動開發 (DDD)？
嘿，大家好啊！我是 ChiYu。 昨天聊到 AI 開發，一不小心就把小小的「腳踏車」專案搞成一艘「航空母艦」，超頭痛的對吧？這種「AI 太能幹」造成的失
Day 3: 【工具篇 #1】萬丈高樓平地起：建置本地開發環境
安安，我是 ChiYu！ 昨天，我們在腦中畫好了宏偉的建築藍圖 (DDD)，確立了「文件驅動開發」這個核心心法。今天，理論課結束，我們要開始動手了
Day 4: 【工具篇 #2】程式碼的時光機：Git 與 GitHub 版本控制
安安，我是 ChiYu！ 昨天，我們扮演了「技師與軍火官」的角色，把我們的駕駛艙 (VS Code) 從毛胚屋打造成了精裝房，並備妥了所有核心的建材與燃料 (Python & No
Day 5: 【工具篇 #3】終端機裡的魔法：什麼是 Vibe Coding 與 Gemini CLI？
安安，我是 ChiYu！ 昨天，我們完成了技師的工作，為我們的專案蓋好了雲端機棚 (GitHub)，也把駕駛艙 (VS Code) 裝潢得舒適又專業。硬體設施全部到
Day 6: 【文件 #1】專案的靈魂：用 Gemini CLI 生成「專案章程」
安安，我是 ChiYu！ 經過了五天的「前置作業」，我們的駕駛艙 (VS Code)、引擎 (Python)、魔法法杖 (Gemini CLI) 全都準備就緒了。是不是已經手癢難
Day 7: 【文件 #2】使用者的旅程：用 Gemini CLI 描繪「使用者故事」
安安，我是 ChiYu！ 昨天，我們確立了專案的「北極星」——專案章程，並在 GitHub 上留下了第一個不可磨滅的印記。如果說昨天的「專案章程」是我們的**
Day 8: 【文件 #3】系統的心臟：用 Gemini CLI 設計「軟體架構文件」
安安，我是 ChiYu！ 前兩天，我們完成了專案的「出生證明」(專案章程) 和「使用者地圖」(使用者故事)。我們現在非常清楚「為誰而做」以及「他們
Day 9: 【文件 #4】數據的家：用 Gemini 規劃「資料庫綱要」
安安，我是 ChiYu！ 昨天，我們化身為架構師，完成了專案的**「系統藍圖」**(軟體架構文件)，釐切了前台、後台、API 與資料庫之間的分工合
Day 10: 【文件 #5】溝通的契約：用 Gemini 撰寫「Web API 規格書」
安安，我是 ChiYu！ 昨天，我們完成了餐廳的「食材倉庫」設計圖——資料庫綱要。至此，我們專案的願景、使用者需求、系統架構、數據儲存方式，都已
Day 11: 【心法 #2】透過AI幫我們生成Prompt
安安，我是 ChiYu！ 昨天，我們終於完成了上半部分的最後一份文件！可以正式進入開發的環節！但在進入開發環節前，我想要回頭再詳細聊一下 Ai Prompt En
Day 12: 【後端 #1】起手式：AI 代理人 生成模組化的 Flask 專案
安安，我是 ChiYu！歡迎來到歷史性的一刻！ 過去一週，我們是專案的「規劃師」，用文字和圖表描繪著未來。從今天起，我們是「建築師」與「魔法師」
Day 13: 【後端 #2】AI 建築師：依藍圖自動建構 CRUD API
安安，我是 ChiYu！歡迎來到 Vibe Coding 協奏曲的第一個最大的開發項目！ 昨天，我們用一個指令召喚出了整個專案骨架。今天，我們要進行一次令人振奮的專案
Day 14: 【DevOps #1】AI 品管員：設定 GitHub Actions 自動化程式碼檢查
安安，我是 ChiYu！ 我們前幾天火力全開，後端 API 核心功能都搞定了。我們的後端架構現在什麼功能都做得出來！但問題來了，我們怎麼保證每個工程師（
Day 15: 【後端 #3】API 測試：用 Gemini CLI 輔助撰寫 Pytest
安安，我是 ChiYu！ 昨天，我們的 CI 品管員 (GitHub Actions) 成功上崗，確保了所有程式碼的「風格」都符合最高標準。 但是，一本語法完全正確的食譜，不代表按照它
Day 16: 【整合篇】後端竣工！回顧與展望
安安，我是 ChiYu！ 走到這一步，請先放下鍵盤，靠在椅背上，深呼吸，然後給自己一個最真誠、最響亮的掌聲！你真的非常、非常了不起！ 今天，是我們
Day 17: 【前端 #0】前端世界的基石： HTML, CSS 與 JavaScript
安安，我是 ChiYu！ 昨天，我們為精彩的後端開發之旅，畫下了一個完美的句點。我們現在擁有一個性能強大、穩定可靠的「專案引擎」，一顆強壯、默默
Day 18: 【文件 #6】網站的風格指南：用 Gemini 定義顏色與字體
安安，我是 ChiYu！ 昨天，我們扮演了「造物主」，理解了構成數位生命的三大基本元素：HTML (骨骼)、CSS (皮囊) 與 JavaScript (肌肉)。 我們的生命
Day 19: 【文件 #7】頁面的骨架：用 Gemini 規劃主佈局與元件拆分
安安，我是 ChiYu！ 昨天，我們扮演了「首席視覺設計師」，為我們的數位生命，定義了一套獨一無二的「基因圖譜 (DNA)」——我們的 風格指南。現
Day 20: 【前端 #1】Gemini Canvas 生成UI (還有新的AI建議功能)
安安，我是 ChiYu！ 昨天，我們完成了前端開發的最後一份規劃文件。至此，我們所有的「左手藍圖」工作，全部大功告成！ 從今天起，我們將正式拿起工
Day 21: 【前端 #2】從原型到架構：拆解並整合 AI 生成的 UI 程式碼
安安，我是 ChiYu！ 昨天那場「視覺魔法秀」是不是超震撼的？才幾分鐘，AI 就「咻」一下變出一個又美又能動的 UI 原型，真的太扯了！這證明 AI 拿來做
Day 22: 【前端 #3】AI 一鍵生成完整 App 靜態 UI
安安，我是 ChiYu！ 昨天，我們扮演了一位冷靜而專業的「結構工程師」，成功地將 AI 生成的華麗原型，重構成為一個結構清晰、職責分明的專業前端專案
Day 23: 【前端 #4】非同步的藝術：深入 Fetch API 與 Promise
安安，我是 ChiYu！ 昨天，我們扮演了一位「創世神」，指揮 AI 在一天之內，為我們建構出了 App 完整、精美的靜態 UI。我們現在手上，有了一個外觀完美
Day 24: 【前端 #5】狀態管理的哲學：讓 UI 成為數據的鏡子
安安，我是 ChiYu！ 昨天，我們的 App 經歷了一次歷史性的飛躍。我們為它安裝了「神經系統」，成功地讓前端的「身體」與後端的「大腦」進行了第一次對
Day 25: 【前端 #6】核心生命週期：一天搞定習慣的「增刪改查」與「打卡」
安安，我是 ChiYu！ 昨天，我們的 App 經歷了一次質的飛躍。我們為它植入了「靈魂」——一個中央的狀態 (state) 和一個渲染引擎 (render)。它學會了如
Day 26: 【前端 #7】用戶體驗的最後一哩路：優雅地處理載入與錯誤
安安，我是 ChiYu！ 昨天，我們的 App 經歷了一次完全體的進化！我們在一天之內，火力全開，搞定了核心的 CRUD 功能。我們的 App 不僅能思考、能表達，現在更
Day 27: 【文件 #8】數據的畫布：用 Gemini 設計「圖表元件規格書」
安安，我是 ChiYu！ 昨天，我們的 App 學會了「同理心」，能夠優雅地處理載入與錯誤，大幅提升了使用者體驗。至此，我們 App 的基礎建設與核心互動功能，
Day 28: 【前端 #8】兌現承諾：根據規格書 Vibe Coding 關聯性洞察圖表
安安，我是 ChiYu！ 昨天，我們再次實踐了「文件驅動開發」的核心精神。我們沒有直接衝進複雜的圖表程式碼中，而是先退一步，將一個模糊的「想法」
Day 29: 【文件 #9】專案的守衛：用 Gemini 規劃「前端認證流程」
安安，我是 ChiYu！ 昨天，我們成功地兌現了對使用者的最終承諾，將冰冷的數據轉化為了富有情感的、能啟發洞察的視覺化故事。我們的 App 核心價值已然
Day 30: 【前端 #9】建立大門與鑰匙：根據流程圖實現前端使用者認證
說在前頭！！！ 有些部分多花費了些時間在講，所以雖然今天已經滿30天了， 但我還沒有正式完成這次鐵人賽系列文！！！ 我後面還是會繼續更新到正式完結
Day 31: 【優化篇】代碼的整形外科：JavaScript 模組化與代碼重構
說在前頭～ 既然已經達成30天了，乾脆把庫存一次全部PO完好了～ 安安，我是 ChiYu！ 昨天，我們為 App 裝上了堅固的大門與門鎖，成功地實現了完整的
【完賽感言】左手藍圖，右手魔法：一趟旅程的結束與反思
安安！我是 ChiYu！ 三十天竟然就這樣過去了耶！回想一開始，真的只有一個超模糊的想法，就憑著一股傻勁跟對 AI 的好奇心與信任，直接衝了，開始了這