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

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

• iThome 公開系列頁
• 我的 iThome 鐵人檔案