鐵人檔案
AI 生成的介面常常看起來漂亮，卻把 Button、Link、Input、Dialog 混在一起，互動狀態也漏了一半。
這個系列用 30 次 UI 驗收實驗，帶你認識常見 UI 元件、適用場景、互動狀態與選型差異，並把「做得像 SaaS」這類模糊需求，改寫成 AI 聽得懂、做完能檢查的規格。
文章搭配網站截圖、錯誤案例、修正版 Prompt 與可操作的繁體中文 UI 元件百科，讓不熟前端的 Vibe Coder 也能清楚說出自己要什麼。
安安～我是ChiYu～ 昨天，三份附件終於可以各自上傳、失敗與重試。我把活動名稱留空、Email 填錯，再按下「發布」，整份表單卻只亮起幾個紅框。 為了排除活動...
安安～我是ChiYu～ 昨天，表單終於能把人從錯誤帶回完成。接著輪到活動內容，AI 很自然地提出一份「功能完整」的升級方案：六格驗證碼、標籤膠囊、色盤，外加一整...
安安～我是ChiYu～ 昨天把邀請成員和建立活動的輸入流程接起來後，我順手把瀏覽器縮到 360px。桌面那條 Sidebar 依然很有自己的想法，硬是占著半張畫...
安安～我是ChiYu～ 昨天把桌面和手機導覽重新分工後，我終於順利進入 LumenDesk 的帳號申請頁。這次沒有迷路，頁面裡卻一次冒出五種「我現在到哪裡」。...
安安～我是ChiYu～ 昨天把 Breadcrumb、Stepper、Pagination 和完成進度分開後，我總算不會再用一條藍線回答所有問題。接著進入工作區...
安安～我是ChiYu～ 工作區設定整理完後，我回到專案列表。最後一欄只放了一顆三點按鈕，展開後依序出現： 進行中、編輯、刪除。 畫面排得很整齊，行為卻像一道...
安安～我是ChiYu～ 昨天把資料值和命令分開後，我從 Command Palette 執行「檢視專案結構」。AI 很快交出一張有箭頭、有縮排，點下去也會展開的...
安安～我是ChiYu～ 專案結構整理清楚後，我按下成員列上的「停用帳號」。畫面中央立刻出現一張白色卡片，後面有灰色遮罩，右下角還放了一顆紅色按鈕。 看起來非常像...
安安～我是ChiYu～ 昨天，我用 Escape 取消了「停用林子安」這個危險動作。帳號保住了，管理員也沒有因此下班，反而接著問： 那我可以先看一下林子安的部...
安安～我是ChiYu～ 昨天，我把林子安的詳細資料放進 Drawer，總算不用每看一位成員，就把整張清單蓋起來一次。 清單脈絡保住了，Drawer 裡卻又冒出三...
