tag
這裡整理與「Vibe Coding」相關的已發布文章，依最新更新排序。
Latest first
2026 iThome 鐵人賽 Vibe Coding UI Day 17：安安～我是ChiYu～ 昨天把資料值和命令分開後，我從 Command Palette 執行「檢視專案結構」。AI 很快交出一張有箭頭、有縮排，點下去也會展開的畫面。 昨天結尾先停在這個錯誤現場。這張圖是依照第一版問題重建的畫面，不…
2026 iThome 鐵人賽 Vibe Coding UI Day 16：安安～我是ChiYu～ 昨天把工作區設定整理完後，我回到專案列表處理任務。內容切換終於不再全部交給 Tabs，最後一欄卻只剩一顆三點按鈕。 昨天結尾先停在這個錯誤現場。這張圖是依照第一版問題重建的畫面，不含真實資料： 三點按鈕展開後…
2026 iThome 鐵人賽 Vibe Coding UI Day 15：安安～我是ChiYu～ 昨天，我把帳號申請頁上的 Breadcrumb、Stepper、Pagination 和進度資訊分開後，總算不會再用一條藍線回答所有問題。結果文章才剛收尾，工作區設定又送來一排看起來很整齊的 Tabs。 先把…
2026 iThome 鐵人賽 Vibe Coding UI Day 14：安安～我是ChiYu～ 昨天把桌面和手機的導覽重新分工後，我終於順利進入 LumenDesk 的帳號申請頁。這次沒有迷路，頁面裡卻一次冒出五類「我現在到哪裡」。 我想知道目前位在系統哪一層、申請做到第幾步、紀錄還有幾頁、文件完成多少…
2026 iThome 鐵人賽 Vibe Coding UI Day 13：安安～我是ChiYu～ 昨天，我把邀請成員和建立活動的流程接了起來。想說順手切到手機尺寸看一下，瀏覽器才剛縮到 360px，桌面那條 Sidebar 依然很有自己的想法，硬是占著半張畫面。 內容區已經快被擠成收據了，它還站得筆直。 …
2026 iThome 鐵人賽 Vibe Coding UI Day 11：安安～我是ChiYu～ 昨天，三份附件終於可以各自上傳、失敗與重試。可是我把活動名稱留空、Email 填錯，再按下「發布」，整份表單只亮起幾個紅框。為了排除活動頁自己的問題，我又把前幾天完成的「新增成員」表單抓回來重測，原始需求同樣…
2026 iThome 鐵人賽 Vibe Coding UI Day 10：安安～我是ChiYu～ 昨天，活動日期和預約時段終於各自歸位。接下來只剩把海報、參與名單和場地照片傳上去，我原本想得很簡單：畫一個框，讓管理員把檔案拖進去，收工。 幫我做一個漂亮的檔案上傳區，要能拖進去。 昨天結尾留下的，就是這個版…
2026 iThome 鐵人賽 Vibe Coding UI Day 9：安安～我是ChiYu～ 昨天，LumenDesk 的活動預算、人數和餐點數量終於各自找到適合的控制。沒想到我一按下「下一步」，AI 又端出一張佔掉快半頁的月曆。 昨天結尾留下的，就是這張同時身兼四職的 Calendar。 活動日期找它…
2026 iThome 鐵人賽 Vibe Coding UI Day 8：安安～我是ChiYu～ 昨天，LumenDesk 的邀請成員流程終於走完。新團隊接到的第一個工作是建立內部活動，畫面裡馬上出現一大群數字：48,000 元預算、每組人數、配送距離、餐點數量，活動結束後還要收滿意度。 我把需求濃縮成一句…
2026 iThome 鐵人賽 Vibe Coding UI Day 7：安安～我是ChiYu～ 昨天把通知設定拆成 Checkbox、Radio 與 Switch 後，邀請成員流程只剩兩個欄位：「所屬部門」和「協作者」。 部門要能搜尋，但只能從既有資料選一筆；協作者也要搜尋，卻能保留多筆結果。AI 第一版…
2026 iThome 鐵人賽 Vibe Coding UI Day 6：安安～我是ChiYu～ 昨天才把帳號、密碼、搜尋與備註送回各自的輸入元件，我繼續往下填邀請表單，AI 又替我準備了一排整整齊齊的開關。 Email、站內通知、通知頻率，連「邀請後立即啟用」都長得一樣。畫面很有設定頁的樣子，至於可以選幾…
2026 iThome 鐵人賽 Vibe Coding UI Day 5：安安～我是ChiYu～ 昨天才把邀請 Dialog 的操作區分清楚：送出用 Button，權限說明用 Link。按鈕總算不再互相冒充，我把視線往上一移，新的問題已經排好隊等我了。 帳號、密碼、搜尋和備註，一人分到一個長方形輸入框。AI…
2026 iThome 鐵人賽 Vibe Coding UI Day 4：安安～我是ChiYu～ 昨天，我們整理出一張八格 UI Spec，終於可以把「好用一點」拆成資料、操作、狀態與驗收條件。今天準備拿它處理 LumenDesk 的第一個完整任務：邀請成員。 不過在正式拆 Button 與 Link 之前…
2026 iThome 鐵人賽 Vibe Coding UI Day 3：安安～我是ChiYu～ 昨天，我把成員管理頁拆成 Component、Pattern 和 Layout，總算能指出：「這次只改部門篩選，不動整張頁面。」 修改範圍有了，照理說可以叫 AI 開工了吧？ 還不行。因為我手上只剩下這句需求：…
2026 iThome 鐵人賽 Vibe Coding UI Day 2：安安～我是祈豫～ 昨天留下來的後台有一個很麻煩的問題。 我知道搜尋沒反應、手機版壞掉，停用按鈕也像裝飾品，但真的要叫 AI 修改時，我只說得出：「那個東西幫我改一下。」 既然叫不出名字，我乾脆先請 AI 幫忙點名。還是同一張 Lume…
2026 iThome 鐵人賽 Vibe Coding UI Day 1：安安，我是 ChiYu！ 今年的第一篇，我想先從一句非常有 Vibe Coding 味道的 Prompt 開始。 這句話看起來有講需求、有講風格，甚至還很貼心地補了「好用」： 幫我做一個現代、漂亮、好用的工作區成員管理後台。 我在 2…
AI 讓工程師少寫了一部分程式碼，但也把真正的重心推到需求釐清、規格設計、MVP 切分與可推進任務管理。這篇文章整理 AI 開發時最核心的工作框架。
SDD (Spec Driven Development) 是將 DDD 升級為強制的規格藍圖，利用結構化規格確保 AI 實作的精準性與可維護性。
這三十天不僅僅是開發一個 App，更是一場關於如何在 AI 時代重新定義開發者價值的探索之旅。
今天，我們就要正式啟動專案，打響「左手藍圖」的第一槍！我們將完全在 VS Code 終端機內，為我們的太空船，設定好最初也最重要的航行座標。
我們將迎來本系列第一個令人心跳加速的轉捩點。我們不只要安裝「引擎」，我們還要學會詠唱「魔法的咒語」，真正地與 AI 對話，把我們的意念灌注到終端機之中！
深入軟體開發中最最最重要的觀念——版本控制，並親手設定我們專案的雲端保險庫與時光機總部：Git 與 GitHub。
2025 iThome 鐵人賽 Day 3：手把手帶你建立專業的本地開發環境。安裝 VS Code、Python、Node.js 及必備擴充套件，為接下來的 AI 輔助開發做好萬全準備。
2025 iThome 鐵人賽 Day 2：深入探討文件驅動開發 (DDD) 的心法。了解如何透過清晰的規格文件駕馭 AI，避免 Vibe Coding 失控，實現「左手藍圖，右手魔法」的高效開發。
2025 iThome 鐵人賽 Day 1：開啟文件驅動開發 (DDD) 與 Vibe Coding 的旅程。介紹本系列文章的核心目標，以及如何透過 AI 輔助來構建「習慣養成與心情日誌」專案。