UI Audit — 介面與互動審查
設計標準：極簡主義 + 動畫敘事 + 最少文字。
核心原則：能用視覺解決就不用文字，能用動畫替代提示就用動畫，必須用文字時用最少的字。
配套腳本
scripts/scan-ui.sh [DIRECTORY]：唯讀自動化掃描文字符號、模糊按鈕文字、硬編碼中文、靜態 Loading、未定義 CSS 類等常見 UI 問題。
第 0 步：UI 基線檢查（必須在任何審查之前執行）
導航基線
□ 使用者能從任何頁面回到主頁/首頁
□ 使用者能從詳情頁返回列表頁
□ 使用者能從列表頁進入建立/新增流程
□ 頁面重新整理後不丟失目前位置
狀態處理基線
□ 每個資料載入有 loading 狀態（skeleton/spinner）
□ 每個 API 呼叫有 error 狀態（使用者可見的錯誤提示）
□ 每個列表有空狀態（沒資料時的友好提示 + 行動引導）
□ 表單提交有 disabled 狀態（防止重複提交）
認證基線
□ 登入頁有「註冊」入口
□ 註冊頁有「登入」入口
□ 登入後跳轉到有意義的頁面（不是白屏）
□ 退出登入後清除狀態
□ Token 過期時自動跳轉登入頁
基線不通過時，先修基線，不做其他 UI 審查。
設計哲學
極簡主義
□ 每個頁面只有一個視覺焦點
□ 留白是設計的一部分
□ 顏色不超過 2 種主色 + 1 個強調色
□ 字體不超過 1 種
□ 無陰影、無漸層、無圓角超過 4px
□ 間距用 8px/16px/24px/32px 的倍數
動畫敘事
□ 每個狀態變化都有過渡動畫（150-300ms）
□ 列表項進入有 stagger 動畫（間隔 30-50ms）
□ 按鈕點擊有按壓回饋（scale: 0.98）
□ 載入用 Skeleton，不是靜態 placeholder
□ 錯誤用抖動動畫或顏色變化，不是彈窗
□ 成功用短暫的高亮動畫，不是 toast
最少文字
□ 按鈕文字不超過 4 個字
□ 圖示按鈕無文字（用 tooltip 替代）
□ 無「確定」、「取消」等模糊文字（用「儲存」、「放棄」替代）
□ 錯誤訊息不超過 10 個字
□ 導航項不超過 2 個字 + 圖示
不許出現文字符號
□ 無 → ← ↑ ↓（用箭頭圖示）
□ 無 ×（用關閉圖示）
□ 無 + -（用新增/減號圖示）
□ 無 > <（用 Chevron 圖示）
□ 無 ✓ !（用 Check/Alert 圖示）
□ 無 ~（用視覺分隔線）
□ 無 %（用進度條或圓環）
審查清單
1. 文字符號檢查（最高優先順序）
執行 scripts/scan-ui.sh 自動掃描，然後手動確認每個匹配是否需要替換為圖示。
2. 圖示系統檢查
□ 常用操作圖示齊全：save / trash / edit / arrow-left / x (close)
□ 導航圖示齊全：search / plus / download / upload / external-link
□ 所有圖示統一風格（線框或實心，二選一）
□ 圖示大小統一（16px 操作、24px 導航、32px 空狀態）
□ 圖示來自同一圖示庫（如 Lucide / Heroicons / Phosphor），不混用
3. 動畫檢查
□ 頁面切換有過渡動畫（fade/slide）
□ 列表項進入有 stagger 動畫
□ 按鈕點擊有按壓回饋
□ 載入用 Skeleton 動畫
□ 模態框/下拉選單有展開動畫
□ 長時間操作有進度動畫
禁止：旋轉 spinner 超過 2 秒、閃爍標籤、無限循環動畫、影響效能的複雜動畫。
4. i18n 完整性
□ 所有使用者可見文字使用 t() 函數
□ 無硬編碼中文字串（除 translations 檔案外）
□ 錯誤訊息使用 i18n key
□ aria-label 使用 i18n
5. CSS 一致性
□ JSX 中引用的 CSS 類都有定義
□ 無未使用的 CSS 類
□ z-index 層級一致（modal: 200, drawer: 100, backdrop: 99, toast: 300）
□ 顏色使用 CSS 變數或主題色，無硬編碼 hex
□ 無 !important（除非有明確理由）
6. 死程式碼檢查
□ 所有元件檔案都被至少一個其他檔案 import
□ 無同名檔案（不同目錄下的重複元件）
□ 無未使用的 import
7. 狀態處理
□ 每個資料載入有 loading 狀態
□ 每個 API 呼叫有 error 狀態
□ 每個列表都有 empty 狀態
□ 表單提交有 disabled 狀態
□ 長時間操作有取消/中止支援
8. 導航流程
□ 所有路由都有對應的頁面元件
□ 受保護路由有 auth guard
□ 404 有友好的 fallback 頁面
□ 麵包屑/返回按鈕導航正確
□ 外部連結在新標籤頁開啟
9. 響應式與無障礙
□ 行動端佈局不溢出
□ 所有互動元素有 aria-label
□ 鍵盤可操作（Tab 導航、Escape 關閉、Enter 確認）
□ 模態框/面板有 focus trap
□ 顏色對比度符合 WCAG AA
工作流
Phase 1: 自動化掃描
執行 scripts/scan-ui.sh，收集結果。重點關注：文字符號、過長按鈕文字、缺少動畫、硬編碼中文、未定義 CSS 類。
Phase 2: 手動驗證
對照設計哲學和審查清單，逐個頁面驗證。用 Playwright 截圖每個頁面對照檢查。
Phase 3: 修復
按優先順序修復：
- 文字符號替換為圖示
- 文字簡化
- 動畫補全
- CSS 類補全
- i18n 補全
- 死程式碼刪除
- 狀態處理
- 導航流程
Phase 4: 回歸驗證
修復後重新執行自動化掃描，確認無新增問題。
與 polish-loop-v2 的關係
- polish-loop-v2：通用程式碼審查（邏輯、安全、效能、執行期）
- ui-audit：專注前端 UI 和使用者體驗
並行執行，基線檢查共用。ui-audit 的問題優先順序高於 polish-loop-v2。