ChiYu Code Journey

Learning path

別再只叫 AI 做漂亮一點：30 天 Vibe Coding UI 元件驗收實驗

2026 iThome 鐵人賽 Vibe Coding 系列：從模糊需求、AI 第一版與實際操作出發，練習辨認 UI 元件、補齊互動狀態，並把需求改寫成可驗收的 Prompt。

文章
30 篇
預估閱讀
約 4.7 小時
最後更新
2026-09-30
從第 1 篇開始 看完整閱讀順序

這是我參加 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

從這篇開始

先讀這篇建立共同語言，再往下看完整閱讀順序。

01 Day 1｜AI 不是不會做，是你只說「做得好看一點」 2026 iThome 鐵人賽 Vibe Coding UI Day 1：安安～我是ChiYu～ 我把一句很有 Vibe Coding 味道的 Prompt 交給 AI： 幫我做一個現代、漂亮、好用的工作區成員管理後台。 這句話看起來有需求、有風格，甚至還很貼心地補了「好用」。 2026 年 7 月 24 … 一般更新 2026-09-01 開始閱讀

Full archive

完整閱讀順序

Day 1–3｜UI 名稱、責任層級與規格

  1. 01 Day 1｜AI 不是不會做，是你只說「做得好看一點」 2026 iThome 鐵人賽 Vibe Coding UI Day 1：安安～我是ChiYu～ 我把一句很有 Vibe Coding 味道的 Prompt 交給 AI： 幫我做一個現代、漂亮、好用的工作區成員管理後台。 這句話看起來有需求、有風格，甚至還很貼心地補了「好用」。 2026 年 7 月 24 … 一般更新 2026-09-01 9 分鐘 點閱 1
  2. 02 Day 2｜這些東西到底叫什麼？Component、Pattern、Layout 與 Template 2026 iThome 鐵人賽 Vibe Coding UI Day 2：安安～我是ChiYu～ 昨天留下來的後台有一個很麻煩的問題。 我知道搜尋沒反應、手機版壞掉，停用按鈕也像裝飾品；真的要叫 AI 修改時，我卻只說得出：「那個東西幫我改一下。」 既然叫不出名字，我乾脆先請 AI 幫忙點名。還是同一張 L… 一般更新 2026-09-02 8 分鐘 點閱 0
  3. 03 Day 3｜一份 AI 看得懂的 UI Spec，至少要交代這 8 件事 2026 iThome 鐵人賽 Vibe Coding UI Day 3：安安～我是ChiYu～ 昨天我把成員管理頁拆成 Component、Pattern 和 Layout，總算能指出：「這次只改部門篩選，不動整張頁面。」 修改範圍有了，照理說可以叫 AI 開工了吧？ 還不行。因為我手上只剩下這句需求： … 一般更新 2026-09-03 6 分鐘 點閱 3

Day 4–12｜按鈕、輸入、選擇、日期與檔案上傳

  1. 04 Day 4｜按鈕不只是藍色方塊：Button、Link 與操作元件 2026 iThome 鐵人賽 Vibe Coding UI Day 4：安安～我是ChiYu～ 昨天整理完八格 UI Spec 後，我終於能把「好用一點」拆成資料、操作、狀態與驗收條件。 今天就拿它處理 LumenDesk 的第一個完整任務：邀請成員。 這個 Dialog 底下有三件事：查看權限說明、取消… 一般更新 2026-09-04 7 分鐘 點閱 1
  2. 05 Day 5｜輸入文字也有分工：Text Field、Textarea、Password 與 Search 2026 iThome 鐵人賽 Vibe Coding UI Day 5：安安～我是ChiYu～ 昨天才把邀請 Dialog 的操作區分清楚：送出用 Button，權限說明用 Link。按鈕總算不再互相冒充，我把視線往上一移，新的問題已經排好隊等我了。 帳號、密碼、搜尋和備註，一人分到一個長方形輸入框。AI… 一般更新 2026-09-05 7 分鐘 點閱 0
  3. 06 Day 6｜五種選擇控制怎麼分？Checkbox、Radio、Switch、Toggle Button 與 Segmented Control 2026 iThome 鐵人賽 Vibe Coding UI Day 6：安安～我是ChiYu～ 昨天才把帳號、密碼、搜尋與備註送回各自的輸入元件，我繼續往下填邀請表單，AI 又替我準備了一排整整齊齊的開關。 Email、站內通知、通知頻率，連「邀請後立即啟用」都長得一樣。畫面很有設定頁的樣子，至於可以選幾… 一般更新 2026-09-06 8 分鐘 點閱 1
  4. 07 Day 7｜別再把所有下拉都叫 Dropdown：從 Select 到 Multi-select 的選型指南 2026 iThome 鐵人賽 Vibe Coding UI Day 7：安安～我是ChiYu～ 昨天把通知設定拆成 Checkbox、Radio 與 Switch 後，邀請成員流程只剩兩個欄位：「所屬部門」和「協作者」。 部門要能搜尋，但只能從既有資料選一筆；協作者同樣要搜尋，卻可以留下多筆結果。AI 第… 一般更新 2026-09-07 7 分鐘 點閱 2
  5. 08 Day 8｜數值要輸入、拖曳還是評分？六種數值控制的選型 2026 iThome 鐵人賽 Vibe Coding UI Day 8：安安～我是ChiYu～ 昨天，LumenDesk 的邀請成員流程終於走完。新團隊接到的第一個工作是建立內部活動，畫面裡馬上出現一大群數字：48,000 元預算、每組人數、配送距離、餐點數量，活動結束後還要收滿意度。 我把需求濃縮成一句… 一般更新 2026-09-08 7 分鐘 點閱 0
  6. 09 Day 9｜輸入日期、選時間還是看整月？五種日期時間元件怎麼選 2026 iThome 鐵人賽 Vibe Coding UI Day 9：安安～我是ChiYu～ 昨天，LumenDesk 的活動預算、人數和餐點數量終於各自找到適合的控制。沒想到我一按下「下一步」，AI 又端出一張佔掉快半頁的月曆。 活動日期找它、報名期間找它、預約時段還是找它。這張 Calendar 一… 一般更新 2026-09-09 8 分鐘 點閱 0
  7. 10 Day 10｜檔案不是選完就好：上傳流程的完整狀態 2026 iThome 鐵人賽 Vibe Coding UI Day 10：安安～我是ChiYu～ 昨天，活動日期和預約時段終於各自歸位。接下來只剩把海報、參與名單和場地照片傳上去，我原本想得很簡單：畫一個框，讓管理員把檔案拖進去，收工。 幫我做一個漂亮的檔案上傳區，要能拖進去。 AI 很配合。虛線框、上傳… 一般更新 2026-09-10 9 分鐘 點閱 1
  8. 11 Day 11｜表單錯了，怎麼帶人修回來？從 Label 到 Validation Summary 的修正路徑 2026 iThome 鐵人賽 Vibe Coding UI Day 11：安安～我是ChiYu～ 昨天，三份附件終於可以各自上傳、失敗與重試。我把活動名稱留空、Email 填錯，再按下「發布」，整份表單卻只亮起幾個紅框。 為了排除活動頁自己的問題，我又把前幾天完成的「新增成員」表單抓回來重測。原始需求同樣… 一般更新 2026-09-11 8 分鐘 點閱 0
  9. 12 Day 12｜進階輸入不是越多越完整：OTP、Tag Input、Color Picker 與兩種 Editor 2026 iThome 鐵人賽 Vibe Coding UI Day 12：安安～我是ChiYu～ 昨天，表單終於能把人從錯誤帶回完成。接著輪到活動內容，AI 很自然地提出一份「功能完整」的升級方案：六格驗證碼、標籤膠囊、色盤，外加一整排編輯工具。 回頭看需求，這扇門確實是我自己打開的： 幫我做一個功能完整… 一般更新 2026-09-12 8 分鐘 點閱 0

Day 13–24｜導覽、浮動介面、訊息與狀態

  1. 13 Day 13｜手機版不是把 Sidebar 縮小：Header、Navbar、Sidebar 與 Bottom Navigation 怎麼分工 2026 iThome 鐵人賽 Vibe Coding UI Day 13：安安～我是ChiYu～ 昨天把邀請成員和建立活動的輸入流程接起來後，我順手把瀏覽器縮到 360px。桌面那條 Sidebar 依然很有自己的想法，硬是占著半張畫面。 內容區已經快被擠成收據了，它還站得筆直。 問題來自一開始的需求： … 一般更新 2026-09-13 11 分鐘 點閱 0
  2. 14 Day 14｜使用者走到哪裡了？Breadcrumb、Pagination、Stepper、Progress 與頁內導覽 2026 iThome 鐵人賽 Vibe Coding UI Day 14：安安～我是ChiYu～ 昨天把桌面和手機導覽重新分工後，我終於順利進入 LumenDesk 的帳號申請頁。這次沒有迷路，頁面裡卻一次冒出五種「我現在到哪裡」。 我想知道目前位在系統哪一層、申請做到第幾步、紀錄還有幾頁、文件完成多少；… 一般更新 2026-09-14 10 分鐘 點閱 0
  3. 15 Day 15｜同一區域怎麼切換內容？Tabs、Accordion、Disclosure 與 Segmented Control 2026 iThome 鐵人賽 Vibe Coding UI Day 15：安安～我是ChiYu～ 昨天把 Breadcrumb、Stepper、Pagination 和完成進度分開後，我總算不會再用一條藍線回答所有問題。接著進入工作區設定，畫面又送來一排整整齊齊的 Tabs。 當時我留給 AI 的需求只有… 一般更新 2026-09-15 10 分鐘 點閱 0
  4. 16 Day 16｜選一個值，還是執行命令？Select、Menu、Overflow Menu 與 Command Palette 2026 iThome 鐵人賽 Vibe Coding UI Day 16：安安～我是ChiYu～ 工作區設定整理完後，我回到專案列表。最後一欄只放了一顆三點按鈕，展開後依序出現： 進行中、編輯、刪除。 畫面排得很整齊，行為卻像一道突襲測驗。 「進行中」會保存任務狀態；「編輯」應該開啟編輯介面；「刪除」則可… 一般更新 2026-09-16 11 分鐘 點閱 0
  5. 17 Day 17｜資料有層級時，別只用縮排：Tree View、Nested List、Treegrid 與 Expandable Row 2026 iThome 鐵人賽 Vibe Coding UI Day 17：安安～我是ChiYu～ 昨天把資料值和命令分開後，我從 Command Palette 執行「檢視專案結構」。AI 很快交出一張有箭頭、有縮排，點下去也會展開的畫面。 乍看就是一棵樹。 再看仔細一點，子專案、附件、檢核紀錄和備註全部… 一般更新 2026-09-17 10 分鐘 點閱 0
  6. 18 Day 18｜彈窗要不要鎖住背景？Modal、Non-modal、Alert Dialog 與危險確認 2026 iThome 鐵人賽 Vibe Coding UI Day 18：安安～我是ChiYu～ 專案結構整理清楚後，我按下成員列上的「停用帳號」。畫面中央立刻出現一張白色卡片，後面有灰色遮罩，右下角還放了一顆紅色按鈕。 看起來非常像完成品。 下面是依照第一版問題重建的錯誤現場，不含真實帳號與個人資料： … 一般更新 2026-09-18 9 分鐘 點閱 0
  7. 19 Day 19｜點資料表一列後，不一定要跳 Modal：Drawer、Sheet 與 Bottom Sheet 2026 iThome 鐵人賽 Vibe Coding UI Day 19：安安～我是ChiYu～ 昨天，我用 Escape 取消了「停用林子安」這個危險動作。帳號保住了，管理員也沒有因此下班，反而接著問： 那我可以先看一下林子安的部門、角色和目前專案嗎？ 很合理。停用帳號以前先把資料看完，總比按下去之後才… 一般更新 2026-09-19 9 分鐘 點閱 0
  8. 20 Day 20｜滑過去出現的，不一定是 Tooltip：Tooltip、Popover 與 Hover Card 2026 iThome 鐵人賽 Vibe Coding UI Day 20：安安～我是ChiYu～ 昨天，我把林子安的詳細資料放進 Drawer，總算不用每看一位成員，就把整張清單蓋起來一次。 清單脈絡保住了，Drawer 裡卻又冒出三個需求： - 角色欄位旁的問號，要解釋權限規則。 - 管理員要能繼續變更… 一般更新 2026-09-20 10 分鐘 點閱 0
  9. 21 Day 21｜重要訊息到底該放在哪裡？Alert、Banner 與 Callout 2026 iThome 鐵人賽 Vibe Coding UI Day 21：安安～我是ChiYu～ 管理員準備儲存成員角色時，畫面同時冒出三則訊息： - 通知管道尚未選擇，設定無法儲存。 - 系統今晚會維護一小時。 - 新成員最好先從最小權限開始。 我當時留給 AI 的需求只有一句： 系統有錯誤或提醒時，顯… 一般更新 2026-09-21 10 分鐘 點閱 0
  10. 22 Day 22｜訊息可以自己消失嗎？Toast、Snackbar 與 Notification 2026 iThome 鐵人賽 Vibe Coding UI Day 22：安安～我是ChiYu～ 訊息站對位置後，LumenDesk 接著發生三件事： - 成員角色儲存成功。 - 「八月活動文案」被移除。 - 有人送來新的專案申請。 我把三件事縮成一句： 儲存完成後跳一個通知；刪除草稿後也跳同一種。新的申… 一般更新 2026-09-22 10 分鐘 點閱 0
  11. 23 Day 23｜Loading 不能只放一顆圈圈：五種等待狀態怎麼選 2026 iThome 鐵人賽 Vibe Coding UI Day 23：安安～我是ChiYu～ 通知中心留下了一筆新工作： 匯入 24 位成員。 這不是一瞬間完成的動作，我最早給 AI 的 Loading 需求卻只有一句： 資料載入時先放一個轉圈圈。 第一版真的很聽話。按下開始，畫面中央出現一顆 Spi… 一般更新 2026-09-23 11 分鐘 點閱 0
  12. 24 Day 24｜畫面空白，不代表沒有資料：Empty、Error、Offline、Permission 與 Success State 2026 iThome 鐵人賽 Vibe Coding UI Day 24：安安～我是ChiYu～ Loading 跑完後，LumenDesk 的「專案」頁面只剩一句： 目前沒有資料。 我當時給 AI 的需求也差不多簡短： 沒有資料時顯示「目前沒有資料」，並提供重新載入。 結果篩選零筆、API 失敗、離線、… 一般更新 2026-09-24 10 分鐘 點閱 0

Day 25–30｜資料呈現與完整驗收

  1. 25 Day 25｜Card 不是比較漂亮的 List：內容容器怎麼選才讀得懂 2026 iThome 鐵人賽 Vibe Coding UI Day 25：安安～我是ChiYu～ 專案資料恢復後，AI 很貼心地替每一筆套上圓角、陰影和滑過去會浮起來的效果。三張 Card 排在一起，SaaS 感可以說是相當充足。 我當時給的需求只有一句： 請把近期專案做成現代、好看的 Card。 結果同… 一般更新 2026-09-25 12 分鐘 點閱 0
  2. 26 Day 26｜小型標記怎麼分工？Badge、Tag、Chip、Filter Chip、Status 與 Avatar 2026 iThome 鐵人賽 Vibe Coding UI Day 26：安安～我是ChiYu～ 近期專案改成 List 後，名稱、負責人和里程碑終於排整齊了。結果每列旁邊又冒出一整排小膠囊：紅底的「3」、藍底的「設計系統」、可以移除的「陳怡安 ×」，還有綠色的「已同步」。 我給 AI 的追加需求是： 請… 一般更新 2026-09-26 11 分鐘 點閱 0
  3. 27 Day 27｜Table 不是 Data Table：功能越多，不代表資料越好用 2026 iThome 鐵人賽 Vibe Coding UI Day 27：安安～我是ChiYu～ 取消「進行中」Filter Chip 後，成員資料從 8 筆回到 24 筆。24 筆本身不會自動把 Table 升級；真正把需求往 Data Table 推的，是管理員接著要搜尋、篩選、多筆選取，再批次停用帳… 一般更新 2026-09-27 11 分鐘 點閱 0
  4. 28 Day 28｜圖片要展示、選擇、輪播還是放大？七種媒體元件怎麼分工 2026 iThome 鐵人賽 Vibe Coding UI Day 28：安安～我是ChiYu～ 從 Data Table 進入一筆活動專案後，詳細頁要放六張場地照片和一段教學影片。我把需求交給 AI： 做一個有圖片輪播和影片的漂亮產品頁。 下面是依照第一版需求重建的錯誤現場。畫面使用虛構活動資料與示意媒… 一般更新 2026-09-28 12 分鐘 點閱 0
  5. 29 Day 29｜同一句「幫我做後台」，28 天後我不再先看畫面 2026 iThome 鐵人賽 Vibe Coding UI Day 29：安安～我是ChiYu～ 我重新打開第一天做的 LumenDesk 成員管理後台，在搜尋框輸入 Orbit。 三筆資料，一筆都沒動。 下面是依照第一版需求重建的錯誤現場。畫面使用固定的虛構成員資料，不含真實個資： 側欄、摘要卡、搜尋、… 一般更新 2026-09-29 10 分鐘 點閱 0
  6. 30 Day 30｜AI 交出畫面不等於完成：30 天後，我改用任務驗收 UI 2026 iThome 鐵人賽 Vibe Coding UI Day 30：安安～我是ChiYu～ 重新驗收 LumenDesk 成員管理後台後，我開始寫這個系列的最後一篇。 第一版很快就完成了。 七段工作回顧、四步驟流程、三輪 Prompt、八題檢查表，全部排得整整齊齊。該有的都有。 我從頭讀了一次。 很… 一般更新 2026-09-30 10 分鐘 點閱 0