鐵人檔案
你看得到一個 UI，卻說不出它叫什麼；在 Vibe Coding 裡，只告訴 AI「做得漂亮、像 SaaS」，得到的畫面也常常能看不能用。這 30 天，我會進行 30 次 UI 驗收實驗，帶你認識常見元件的名稱、用途、適合情境與選擇方式。每篇都從模糊需求出發，實際操作 AI 產生的介面，找出遺漏的狀態、互動與例外，再把需求改寫成可驗收的 Prompt。系列幾乎不談程式碼，並搭配可操作的繁體中文 UI 元件百科，讓不熟前端的 Vibe Coder，也能清楚描述想要的畫面，判斷 AI 是否真的完成需求。
Day 1｜AI 不是不會做，是你只說「做得好看一點」 安安，我是 ChiYu！ 今年的第一篇，我想先從一句非常有 Vibe Coding 味道的 Prompt...
Day 2｜這些東西到底叫什麼？Component、Pattern、Layout 與 Template 安安～我是祈豫～ 昨天留下來的後台有一個很麻煩的問題。...
Day 3｜一份 AI 看得懂的 UI Spec，至少要交代這 8 件事 「做一個好用、漂亮、可以搜尋的下拉選單。」 只看這句話，我腦中已經會冒出不少問題：可以...
Day 4｜按鈕不只是藍色方塊：Button、Link 與操作元件 安安～我是ChiYu～ 昨天，我們整理出一張八格 UI Spec，終於可以把「好用一點」拆成...
Day 5｜輸入文字也有分工：Text Field、Textarea、Password 與 Search 安安～我是ChiYu～ 昨天才把邀請 Dialog 的...
Day 6｜Checkbox、Radio、Switch：三個看起來像，意思完全不同 安安～我是ChiYu～ 昨天才把帳號、密碼、搜尋與備註送回各自的輸入元件，我...
Day 7｜別再把所有下拉都叫 Dropdown：從 Select 到 Multi-select 的選型指南 安安～我是ChiYu～ 昨天把通知設定拆成 Che...
Day 8｜數值要輸入、拖曳還是評分？六種數值控制的選型 安安～我是ChiYu～ 昨天，LumenDesk 的邀請成員流程終於走完。新團隊接到的第一個工作是建立...
Day 9｜輸入日期、選時間還是看整月？五種日期時間元件怎麼選 安安～我是ChiYu～ 昨天，LumenDesk 的活動預算、人數和餐點數量終於各自找到適合的控...
Day 10｜檔案不是選完就好：上傳流程的完整狀態 安安～我是ChiYu～ 昨天，活動日期和預約時段終於各自歸位。接下來只剩把海報、參與名單和場地照片傳上去，我...
