60 秒決策
先確認使用者要完成的事。
適合使用
- 顏色本身會被儲存、套用或需要精確交接，例如品牌色或圖表顏色。
- 使用者需要同時看見視覺色票與可重用的色碼。
不適合使用
- 只是把一個既有樣式設為主要或次要，幾個預設選項就足夠。
- 顏色沒有任何任務意義，只是為了讓介面看起來更炫。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
色票與值一起呈現
色票讓人看效果，HEX 或其他值讓人能複製、驗證與交接。
先用原生入口，再加必要資訊
原生 color input 能叫出平台選色器；若加自訂色盤，必須能解決明確任務。
不要只靠顏色傳達狀態
顏色若承載成功、警告或類別意義，仍要有文字或圖示可辨識。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
預設色
色票與已儲存色碼一致。
選色中
視覺預覽跟著原生控制項更新。
手動輸入
可輸入或貼上合法 HEX，並即時同步預覽。
格式錯誤
保留輸入文字並說明需要 #RRGGBB 格式。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
品牌主色
先觀察：原生選色入口、HEX 值與色票是否即時同步。
操作：輸入 #2563EB，或從色票選擇另一種顏色。
預期結果：合法色碼會同步色票；錯誤格式不會被悄悄套用。
可操作 Demo
同步色票與 HEX 色碼
以色票快速選色，也可貼上或輸入 #RRGGBB 色碼。
HEX 色碼
目前品牌主色為 #2563EB，色票已同步更新。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「品牌主色」Color Picker。使用原生 color input 作為選色入口，旁邊顯示即時色票與可編輯的 HEX 值；HEX 必須驗證為 #RRGGBB 格式，輸入錯誤時保留原值並說明修正方式。不要把普通的樣式偏好做成複雜色盤。驗收清單
不要只確認欄位能不能點。
- 色票與實際儲存值是否一起可見？
- 是否有原生或可鍵盤操作的選色入口？
- 手動色碼是否可驗證？
- 錯誤色碼是否保留並說明？
- 顏色的資訊意義是否仍有文字輔助？