打磨（Polish）
總覽
在完成標記、結構和反鬆散設計之後，套用微觀工藝，使 UI 在渲染的表面上感覺恰到好處。這裡的數值配方除非有標準或專案標記為其歸屬，否則皆視為啟發式規則。
何時使用
- 完成
/ui建置後（在anti-slop-design之後） /polish/ 「感覺不對勁」 / 「rapihin detail」- 懸浮、按壓、進入/離開、圖示切換等微互動
何時跳過
- 結構性網格/間距/層級 →
design-foundations - 比較渲染方向/測試所有狀態 →
prototype - 嵌套圓角/高程語言 →
design-surfaces - 字型角色、換行、截斷 →
design-typography - 合規性（對比度、名稱、鍵盤） →
accessibility - 動畫系統/命名系列 →
motion - 僅複製 / 「AI 文字」 / 空狀態文案 →
content-design - 「程式碼整理」 / 生成的實作 →
anti-slop-code - 僅後端編輯且無 UI 渲染變化
必須遵守
| 規則 | 詳情 |
|---|---|
| 渲染證明 | 從渲染後的 UI 而非原始碼來判斷換行、對齊、按壓和圓角 |
| 標記優先 | 使用 --radius、間距和字型標記；不要在有現成標記時發明一次性數值 |
| 分類配方 | 將 0.96、交錯毫秒等數字標記為啟發式規則 |
| 最便宜的可行修復 | 刪除裝飾 → 原生 CSS → 重複使用專案標記 → 最後才加入抽象層 |
| 行動端工藝 | 小於 768px 寬度使用全寬主要 CTA；黏性 chrome 使用安全區域；拇指可及的動作 |
禁止 transition: all | 指定屬性名稱；跳過 Tailwind 的裸 transition |
| 控制項幾何證明 | 在確認光學校準前，渲染完整的控制項矩陣，包含載入中和適用的 LTR/RTL |
工藝（起點）
| 關注點 | 起點 | 分類 | 交接對象 |
|---|---|---|---|
| 嵌套角落 | 當曲線共享中心時，外層 ≈ 內層 + 內縮 | 啟發式 | design-surfaces |
| 控制項中的圖示 | 相對於幾何中心的光學微調 | 建議 | — |
| 區塊深度 | 專案的邊框/高程語言 | 專案預設值 | design-surfaces |
| 懸浮/切換 | 可中斷的 CSS 轉場 | 建議 | 如涉及編排則交給 motion |
| 按壓 | 如需按壓反饋，使用 scale(0.96) | 啟發式 | — |
| 動態數字 | tabular-nums | 建議 | design-typography |
| 短標題 | text-wrap: balance | 建議 | design-typography |
| 點擊區域 | 觸控 44×44 / 密集桌面 ≥40 | 建議 | 為了 WCAG 2.5.8 (24px) 交給 accessibility |
例外情況：藥丸/圓形、密集工具欄（禁用按壓縮放）、減少動畫偏好設定、非同心品牌語言、無需外框的圖片。
控制項幾何
- 渲染光學變體矩陣：純文字、前置圖示、後置圖示、僅圖示以及載入中。
幾何置中（inline-flex / items-center / justify-center）是必要但不充分的證明。不存在通用的像素偏移量：先比較渲染後的矩陣，然後在固定的圖示插槽或字形內套用最小的補償。
判斷圖示-標籤組合內容群組及其知覺視覺質量是否在各種變體和狀態下達到平衡和置中。分別評估標籤基線/大寫字母高度與圖示的關係；在圖示+文字的變體中，標籤本身不需要佔據控制項的中心。同時驗證圖示視覺重量、標記間距、對稱標記內邊距、焦點、點擊區域、禁用狀態和載入中狀態，確保內容群組或控制項寬度沒有意外偏移。當產品支援時，同時包含 LTR 和 RTL。
穩定的載入中幾何是預設值。對於明確的測量變形例外情況（references/component-patterns.md），檢查兩個端點和目標播放，確認相鄰操作保持穩定，並提供證據報告該例外情況。故意的變形不能成為意外旋轉圖示位移或缺少可存取名稱的藉口。
工作流程
- 確定範圍 — 指定表面名稱；跳過結構性或標記系統工作。
- 掃描 — 檢查 1x/2x 渲染、淺色/深色模式、懸浮/按壓/焦點、行動裝置寬度。
- 控制項矩陣 — 在渲染尺寸下比較純文字、前置/後置圖示、僅圖示、載入中以及適用的 LTR/RTL。
- 修復 — 進行最便宜的可行變更；將值對應到標記；將光學校償保持在圖示插槽內。
- 報告 — 按原則分組的前/後對照表；未檢查的狀態標記為
未驗證。
邊界
- 可以決定： 光學微調、命名轉場、tabular-nums、換行輔助、專案無按壓反饋時提供。
- 絕對不能： 將
0.96、彈跳0或同心圓半徑視為普遍法則；在破損的佈局上進行打磨；取代品牌字型。
檢查清單
- 光學檢查嵌套圓角（或交接給
design-surfaces） - 在看起來有偏移的地方，圖示已光學置中
- 已檢查完整的渲染控制項矩陣：純文字、前置/後置圖示、僅圖示、載入中以及適用的 LTR/RTL
- 圖示-標籤組合群組/知覺視覺質量已置中；已驗證標籤基線/大寫字母高度關係、圖示視覺重量以及標記間距/內邊距
- 焦點、點擊區域、禁用狀態和載入中狀態在無標籤或寬度偏移的情況下保持幾何形狀
- 無
transition: all；懸浮/按壓可中斷 - 動態數字在可能抖動的地方使用了
tabular-nums - 標題使用
text-wrap: balance；在有用的地方簡短複製使用text-pretty - 點擊區域符合 44/40 指導方針且無重疊
- 行動端工藝：小於 768px 全寬主要按鈕、安全區域、拇指操作區
- 啟發式規則已標記；未測試的狀態標記為
未驗證
深度閱讀
完整範例：references/polish.md。
相關技能：design-surfaces、design-foundations、design-typography、motion、accessibility、references/evidence-policy.md。