Learning path
別再只叫 AI 做漂亮一點：30 天 Vibe Coding UI 元件驗收實驗
2026 iThome 鐵人賽 Vibe Coding 系列：從模糊需求、AI 第一版與實際操作出發，練習辨認 UI 元件、補齊互動狀態，並把需求改寫成可驗收的 Prompt。
這是我參加 2026 iThome 鐵人賽 Vibe Coding 組的系列文章。
30 天裡，我不會只看 AI 交出的畫面漂不漂亮，而是會實際操作、找出缺少的狀態與例外，再把模糊需求改寫成可以觀察、操作與判定結果的 UI Spec。
這個系列會走過什麼？
- Day 1–3：先把 UI 名稱、責任層級與規格說清楚。
- Day 4–12：拆解按鈕、輸入、選擇、日期與檔案上傳。
- Day 13–24：處理導覽、浮動介面、訊息與各種狀態。
- Day 25–30：整理資料呈現，最後回到同一個後台案例做完整驗收。
適合正在用 AI 製作介面、但還不熟悉前端或 UI 元件名稱，並希望知道「AI 到底有沒有真的完成需求」的 Vibe Coder。
Start here
從這篇開始
先讀這篇建立共同語言，再往下看完整閱讀順序。
Full archive
完整閱讀順序
- 01 Day 1｜AI 不是不會做，是你只說「做得好看一點」 2026 iThome 鐵人賽 Vibe Coding UI Day 1：安安，我是 ChiYu！ 今年的第一篇，我想先從一句非常有 Vibe Coding 味道的 Prompt 開始。 這句話看起來有講需求、有講風格，甚至還很貼心地補了「好用」： 幫我做一個現代、漂亮、好用的工作區成員管理後台。 我在 2…
- 02 Day 2｜這些東西到底叫什麼？Component、Pattern、Layout 與 Template 2026 iThome 鐵人賽 Vibe Coding UI Day 2：安安～我是祈豫～ 昨天留下來的後台有一個很麻煩的問題。 我知道搜尋沒反應、手機版壞掉，停用按鈕也像裝飾品，但真的要叫 AI 修改時，我只說得出：「那個東西幫我改一下。」 既然叫不出名字，我乾脆先請 AI 幫忙點名。還是同一張 Lume…
- 03 Day 3｜一份 AI 看得懂的 UI Spec，至少要交代這 8 件事 2026 iThome 鐵人賽 Vibe Coding UI Day 3：安安～我是ChiYu～ 昨天，我把成員管理頁拆成 Component、Pattern 和 Layout，總算能指出：「這次只改部門篩選，不動整張頁面。」 修改範圍有了，照理說可以叫 AI 開工了吧？ 還不行。因為我手上只剩下這句需求：…
- 04 Day 4｜按鈕不只是藍色方塊：Button、Link 與操作元件 2026 iThome 鐵人賽 Vibe Coding UI Day 4：安安～我是ChiYu～ 昨天，我們整理出一張八格 UI Spec，終於可以把「好用一點」拆成資料、操作、狀態與驗收條件。今天準備拿它處理 LumenDesk 的第一個完整任務：邀請成員。 不過在正式拆 Button 與 Link 之前…
- 05 Day 5｜輸入文字也有分工：Text Field、Textarea、Password 與 Search 2026 iThome 鐵人賽 Vibe Coding UI Day 5：安安～我是ChiYu～ 昨天才把邀請 Dialog 的操作區分清楚：送出用 Button，權限說明用 Link。按鈕總算不再互相冒充，我把視線往上一移，新的問題已經排好隊等我了。 帳號、密碼、搜尋和備註，一人分到一個長方形輸入框。AI…
- 06 Day 6｜五種選擇控制怎麼分？Checkbox、Radio、Switch、Toggle Button 與 Segmented Control 2026 iThome 鐵人賽 Vibe Coding UI Day 6：安安～我是ChiYu～ 昨天才把帳號、密碼、搜尋與備註送回各自的輸入元件，我繼續往下填邀請表單，AI 又替我準備了一排整整齊齊的開關。 Email、站內通知、通知頻率，連「邀請後立即啟用」都長得一樣。畫面很有設定頁的樣子，至於可以選幾…
- 07 Day 7｜別再把所有下拉都叫 Dropdown：從 Select 到 Multi-select 的選型指南 2026 iThome 鐵人賽 Vibe Coding UI Day 7：安安～我是ChiYu～ 昨天把通知設定拆成 Checkbox、Radio 與 Switch 後，邀請成員流程只剩兩個欄位：「所屬部門」和「協作者」。 部門要能搜尋，但只能從既有資料選一筆；協作者也要搜尋，卻能保留多筆結果。AI 第一版…
- 08 Day 8｜數值要輸入、拖曳還是評分？六種數值控制的選型 2026 iThome 鐵人賽 Vibe Coding UI Day 8：安安～我是ChiYu～ 昨天，LumenDesk 的邀請成員流程終於走完。新團隊接到的第一個工作是建立內部活動，畫面裡馬上出現一大群數字：48,000 元預算、每組人數、配送距離、餐點數量，活動結束後還要收滿意度。 我把需求濃縮成一句…
- 09 Day 9｜輸入日期、選時間還是看整月？五種日期時間元件怎麼選 2026 iThome 鐵人賽 Vibe Coding UI Day 9：安安～我是ChiYu～ 昨天，LumenDesk 的活動預算、人數和餐點數量終於各自找到適合的控制。沒想到我一按下「下一步」，AI 又端出一張佔掉快半頁的月曆。 昨天結尾留下的，就是這張同時身兼四職的 Calendar。 活動日期找它…
- 10 Day 10｜檔案不是選完就好：上傳流程的完整狀態 2026 iThome 鐵人賽 Vibe Coding UI Day 10：安安～我是ChiYu～ 昨天，活動日期和預約時段終於各自歸位。接下來只剩把海報、參與名單和場地照片傳上去，我原本想得很簡單：畫一個框，讓管理員把檔案拖進去，收工。 幫我做一個漂亮的檔案上傳區，要能拖進去。 昨天結尾留下的，就是這個版…
- 11 Day 11｜表單錯了，怎麼帶人修回來？從 Label 到 Validation Summary 的修正路徑 2026 iThome 鐵人賽 Vibe Coding UI Day 11：安安～我是ChiYu～ 昨天，三份附件終於可以各自上傳、失敗與重試。可是我把活動名稱留空、Email 填錯，再按下「發布」，整份表單只亮起幾個紅框。為了排除活動頁自己的問題，我又把前幾天完成的「新增成員」表單抓回來重測，原始需求同樣…
- 12 Day 13｜手機版不是把 Sidebar 縮小：Header、Navbar、Sidebar 與 Bottom Navigation 怎麼分工 2026 iThome 鐵人賽 Vibe Coding UI Day 13：安安～我是ChiYu～ 昨天，我把邀請成員和建立活動的流程接了起來。想說順手切到手機尺寸看一下，瀏覽器才剛縮到 360px，桌面那條 Sidebar 依然很有自己的想法，硬是占著半張畫面。 內容區已經快被擠成收據了，它還站得筆直。 …
- 13 Day 14｜使用者走到哪裡了？Breadcrumb、Pagination、Stepper、Progress 與頁內導覽 2026 iThome 鐵人賽 Vibe Coding UI Day 14：安安～我是ChiYu～ 昨天把桌面和手機的導覽重新分工後，我終於順利進入 LumenDesk 的帳號申請頁。這次沒有迷路，頁面裡卻一次冒出五類「我現在到哪裡」。 我想知道目前位在系統哪一層、申請做到第幾步、紀錄還有幾頁、文件完成多少…
- 14 Day 15｜同一區域怎麼切換內容？Tabs、Accordion、Disclosure 與 Segmented Control 2026 iThome 鐵人賽 Vibe Coding UI Day 15：安安～我是ChiYu～ 昨天，我把帳號申請頁上的 Breadcrumb、Stepper、Pagination 和進度資訊分開後，總算不會再用一條藍線回答所有問題。結果文章才剛收尾，工作區設定又送來一排看起來很整齊的 Tabs。 先把…
- 15 Day 16｜選一個值，還是執行命令？Select、Menu、Overflow Menu 與 Command Palette 2026 iThome 鐵人賽 Vibe Coding UI Day 16：安安～我是ChiYu～ 昨天把工作區設定整理完後，我回到專案列表處理任務。內容切換終於不再全部交給 Tabs，最後一欄卻只剩一顆三點按鈕。 昨天結尾先停在這個錯誤現場。這張圖是依照第一版問題重建的畫面，不含真實資料： 三點按鈕展開後…
- 16 Day 17｜資料有層級時，別只用縮排：Tree View、Nested List、Treegrid 與 Expandable Row 2026 iThome 鐵人賽 Vibe Coding UI Day 17：安安～我是ChiYu～ 昨天把資料值和命令分開後，我從 Command Palette 執行「檢視專案結構」。AI 很快交出一張有箭頭、有縮排，點下去也會展開的畫面。 昨天結尾先停在這個錯誤現場。這張圖是依照第一版問題重建的畫面，不…