鐵人檔案
AI 生成的介面常常看起來漂亮，卻把 Button、Link、Input、Dialog 混在一起，互動狀態也漏了一半。
這個系列用 30 次 UI 驗收實驗，帶你認識常見 UI 元件、適用場景、互動狀態與選型差異，並把「做得像 SaaS」這類模糊需求，改寫成 AI 聽得懂、做完能檢查的規格。
文章搭配網站截圖、錯誤案例、修正版 Prompt 與可操作的繁體中文 UI 元件百科，讓不熟前端的 Vibe Coder 也能清楚說出自己要什麼。
Day 1｜AI 不是不會做，是你只說「做得好看一點」 安安～我是ChiYu～ 我把一句很有 Vibe Coding 味道的 Prompt 交給 AI： 幫我...
Day 2｜這些東西到底叫什麼？Component、Pattern、Layout 與 Template 安安～我是ChiYu～ 昨天留下來的後台有一個很麻煩的問...
Day 3｜一份 AI 看得懂的 UI Spec，至少要交代這 8 件事 安安～我是ChiYu～ 昨天我把成員管理頁拆成 Component、Pattern 和...
安安～我是ChiYu～ 昨天整理完八格 UI Spec 後，我終於能把「好用一點」拆成資料、操作、狀態與驗收條件。 今天就拿它處理 LumenDesk 的第一個...
安安～我是ChiYu～ 昨天才把邀請 Dialog 的操作區分清楚：送出用 Button，權限說明用 Link。按鈕總算不再互相冒充，我把視線往上一移，新的問題...
安安～我是ChiYu～ 昨天才把帳號、密碼、搜尋與備註送回各自的輸入元件，我繼續往下填邀請表單，AI 又替我準備了一排整整齊齊的開關。 圖 1：和昨天結尾是同...
安安～我是ChiYu～ 昨天把通知設定拆成 Checkbox、Radio 與 Switch 後，邀請成員流程只剩兩個欄位：「所屬部門」和「協作者」。 部門要能搜...
安安～我是ChiYu～ 昨天，LumenDesk 的邀請成員流程終於走完。新團隊接到的第一個工作是建立內部活動，畫面裡馬上出現一大群數字：48,000 元預算、...
安安～我是ChiYu～ 昨天，LumenDesk 的活動預算、人數和餐點數量終於各自找到適合的控制。沒想到我一按下「下一步」，AI 又端出一張佔掉快半頁的月曆。...
安安～我是ChiYu～ 昨天，活動日期和預約時段終於各自歸位。接下來只剩把海報、參與名單和場地照片傳上去，我原本想得很簡單：畫一個框，讓管理員把檔案拖進去，收工...
