前端美學
frontend-design 設定立場：承諾一個方向，避開沒有人選擇的預設值。這個技能提供決策規則、數字、先例數據以及讓這些選擇可驗證的檢查。需要時再打開參考步驟名稱，不要事先全部讀完。
1. 先讀取專案規則
- 設計前請尋找簡報或合約：
DESIGN.md、PRODUCT.md、token 檔案（tokens.css、theme.*、tailwind.config.*），或合約文件如FRONTEND_CONTRACT.md。這些的優先級高於此技能中的預設值。 - 如果專案透過 token 路由視覺數值，則元件中出現新的原始 hex、px 或 rgba 值是發現，而非風格選擇。
- 保留已經有效的部分：主題切換、i18n 鍵、無障礙行為、現有元件。只重新設計要求的範圍，而不是整個應用程式。
2. 簡報
撰寫 references/principles.md 中描述的簡報：主題、受眾與情境、主螢幕的任務、密度、語言，以及五個維度（字體排印、色彩、佈局、動態、細節）。加入三個拒絕：這個設計不能看起來像的預設值。如果使用者沒有描述品味，提出一個方向並說明原因。不要質問使用者。
3. 先例
從技能基礎目錄執行此命令：
python scripts/design_lookup.py "saas dashboard dark" --ux --motion
使用英文關鍵字。輸出會給出匹配的產品類型、其風格、具有對比度檢查的文字與 UI 配對的色板、字體排印配對和推理規則。將其視為證據，而非答案。其第一個風格通常是趨勢選擇（玻璃形態、霓虹、bento），這對於密集工具來說是錯誤的。在 192 個色板行中，文字配對只有一個失敗，但大多數色板的邊框與背景的對比度低於 3:1，因此每個色板在使用前都需要檢查其 UI 配對。
4. 方向
從 references/directions.md 中選擇一個方向，或定義你自己的方向，並說明為什麼它適合這個簡報，以及為什麼最接近的替代方案不適合。將大膽用在一處：一個標誌性元素。它周圍的一切都是克制的。
5. 先有 Token 再有元件
首先定義色彩角色、字體尺度、間距、圓角、陰影和動態持續時間作為變數（references/color-and-type.md、references/layout-and-motion.md）。檢查你交付的每個文字配對：
python scripts/wcag.py "#1f2937" "#ffffff" "#556070" "#f6f7f9"
6. 建構
涵蓋每個狀態，而不僅僅是愉悅路徑（references/components-and-states.md）。保持文案為產品語言，並測試最長的翻譯。
7. 在報告前驗證
- 渲染並查看它。
python scripts/visual_capture.py <url> --out shots --matrix會提供預設、150% 縮放、窄和手機檢視，等待畫面穩定，並報告主控台錯誤。閱讀references/visual-review.md；沒有擷取的審查就不是視覺審查。 - 在變更後再次擷取並執行
scripts/image_diff.py before.png after.png。如果變更的區域與你聲稱已變更的內容不符，則該聲明是錯誤的。 python scripts/slop_scan.py <changed paths>。退出狀態 1 表示阻斷性發現。- 為你實際交付的每個文字和 UI 配對進行對比度檢查（
wcag.py）。 - 僅鍵盤操作測試、減少動態測試，以及使用最壞情況數據的斷裂測試。
- 主控台錯誤是失敗。被回報為「空白」的擷取也是失敗；將被回報為「未穩定」的視為可疑。
當無法連接到瀏覽器時，請寫「未經視覺驗證」，列出你跳過的狀態，並且不要對渲染的 UI 外觀做任何聲明。
8. 報告
命名方向及其理由，提供 token 區塊，並列出每個驗證及其命令和結果。列出未經驗證的項目。
底線（永遠不要為了美觀而交換這些）
- 文字對比度至少 4.5:1。大字型（24px，或 18.66px 粗體）和 UI 邊界或焦點指示器至少需 3:1。
- 每個可互動元素都有可見的鍵盤焦點指示器，且不同於其懸停狀態。
- 顏色永遠不單獨承載意義。
- 動態尊重
prefers-reduced-motion。每秒閃爍不超過三次。 - 正文在網頁上至少 16px，在密集桌面 UI 中至少 14px。沒有低於 12px 的文字。
- 每個狀態都存在：載入、空白、錯誤、禁用和部分數據。
- 沒有預留文字文案。錯誤資訊要說明發生了什麼以及該怎麼做。
- 文字能夠承受最長的真實字串：翻譯、CJK、長路徑和模型名稱。
品味規則
- 一個主要的中性色完成大部分工作。一個強調色在畫面上最多覆蓋約 10%。成功、警告和危險顏色在不同主題間保持固定。
- 最多兩個字體家族，如果需要加上等寬字體。一個尺度比率。層級來自大小、粗細、色彩和空間，而不是框線。
- 較少的邊框和較少的嵌套卡片。圓角來自一個小尺度。陰影色調與色板一致，最多三個層級。
- 動態：每個畫面一個有目的的時刻，僅有 transform 和 opacity，且不對一個會話中重複多次的動作進行動畫。
- 文案：句子大小寫、樸實的動詞，以及在按鈕、結果訊息和選單中對同一個動作使用相同的名稱。
選擇測試
每個預設值（字體、色板、圓角、陰影、佈局、圖示集）都必須為此簡報選擇。如果你無法說出理由，就更改它。你選擇的預設值不是一個跡象。references/anti-slop.md 列出了常見跡象以及標記每個跡象的掃描器規則。
檔案
references/principles.md：決策順序、簡報模板、拒絕。references/directions.md：九個方向及其經過驗證的起始 token。references/color-and-type.md：色板、深色模式、對比度、字體尺度、字體載入、CJK。references/layout-and-motion.md：網格、密度、間距、圓角、陰影、動態。references/components-and-states.md：元件、狀態矩陣、文案、斷裂測試。references/desktop-app.md：WebView 和桌面應用程式的規則。references/anti-slop.md：跡象、為什麼它們看起來像預設值、要問的問題、掃描器規則 ID。references/critique.md：審查程序、九大支柱、嚴重性、輸出格式。references/visual-review.md：如何渲染、擷取、閱讀和重新比對 UI。references/sources.md：每個規則的來源以及故意未使用的內容。scripts/wcag.py、scripts/design_lookup.py、scripts/slop_scan.py、scripts/visual_capture.py、scripts/image_diff.py：唯讀、無第三方套件、無網路。如果python不在 PATH 上，請使用py -3。data/：從 ui-ux-pro-max 供應的 MIT 授權 CSV 資料（請參閱data/PROVENANCE.md）。