先替需求正名
描述使用者要完成的事，再找到可能的元件名稱。
到元件庫搜尋功能、俗稱或英文名稱。一頁式工作流程
先找名字，再把 AI 的猜測一項一項拿掉。
這份指南不要求你先成為 UI 專家。從正在做的任務開始，走完四步，再用八條檢查確認畫面能不能交付。
比較相似元件
不要只看外形，確認輸入、資料限制與操作結果。
從比較頁排除不適合的元件。補成 UI Spec
交代資料、行為、狀態、手機版、鍵盤與錯誤復原。
把選型理由寫進可複製的需求。用任務驗收 AI
實際操作，不用「看起來不錯」當作完成。
重跑主要流程、失敗狀態與 360px。可重用 Prompt
把名詞換成自己的需求，就能開始。
我要製作［頁面或功能］，主要使用者是［角色］，他要完成［任務］。
請先列出你建議的 UI 元件與選型理由，不要直接產生畫面。
資料包含［欄位與限制］；操作後應發生［結果］。
提供預設、載入、空白、錯誤、成功與停用狀態。
說明 360px 手機版如何保留主要任務，以及鍵盤與焦點行為。
完成後依下列條件驗收：［可觀察的完成條件］。交付前檢查
八個可以回答通過或不通過的問題。
- 元件名稱與使用者任務一致，不是只因為外形相像。
- 資料來源、允許值、格式與空值規則已交代。
- 操作結果、等待、失敗、重試與取消路徑可以被看見。
- 危險操作有明確對象、確認與完成回饋。
- 360px 沒有把桌面畫面直接縮小或造成整頁溢出。
- 鍵盤可完成主要任務，浮層關閉後焦點回到合理位置。
- 顏色、圖示與動畫不是唯一的資訊線索。
- 驗收句子能回答通過或不通過，不使用「現代」「直覺」當標準。
需要完整範例？