如何替 AI 程式助手寫出清楚的 UI Prompt？

1. 先寫使用者目標，不要先指定元件

先說清楚誰要完成什麼，以及這件事為什麼重要。確認行為真的合適後，再加入 UI 術語。元件名稱只是一種可能的解法，不是產品目標。

• 模糊：加一個漂亮的玻璃擬態 Dashboard。
• 更清楚：讓客服主管看出未解決的工單與緊急程度，並在不遺失目前篩選條件下開啟下一筆工單。

2. 寫清楚操作、狀態與邊界

說明介面如何開啟、每個操作會改變什麼、如何關閉，以及哪些內容必須保留。可能發生時，也要寫入載入、空白、錯誤、成功、重試、取消與權限狀態。

3. 先依行為選模式，再補視覺與動態

看得到介面卻不知道名稱時，可先用圖鑑找詞，再比較相近模式。把操作行為、視覺風格與動態分開決定，避免美術要求悄悄改變產品的使用方式。

4. 加入可以實際驗收的條件

把重要規則改寫成可以觀察、可以判定通過或失敗的檢查。依功能涵蓋鍵盤、可見焦點、狀態提示、小螢幕、縮放、減少動態、載入、失敗、重試與資料保留。

5. 要求寫程式前，先提供專案脈絡

寫出現有技術、設計系統、可重用元件、資料來源、路由與修改範圍，也要說明哪些行為不能改。助手在修改前仍應查看真實專案與測試。

6. 用固定結構保留每個產品決策

實用順序是：成果、使用者與情境、操作行為、畫面狀態、內容與資料、視覺方向、無障礙、專案限制、驗收條件，以及不做的範圍。假設與未決問題要明確標示，不要藏起來。

• 成果：完成後，誰應該能做成什麼？
• 操作與狀態：流程如何開始、改變、完成、失敗與恢復？
• 驗收：哪些明確證據可以證明成果正常？