UI/UX Pro Max - 設計智慧

UX Pro Max - 設計智慧 是做什麼的？

針對網頁、行動與桌面應用程式的 UI/UX 設計智慧。此技能應在設計、建構、審查或修正介面時使用，包括頁面、元件、設計系統、無障礙性、互動、響應式佈局、字體排印、色彩、圖表以及特定技術棧的 UI 實作。可搜尋的本地資料：79 種可搜尋樣式（50 種啟用中）、192 組產品調色盤與推理檔案、74 組字體配對、119 條 UX 準則、105 個圖示、17 個 GSAP 預設、25 種圖表類型以及 22 個技術棧。

何時套用

當任務涉及 UI 結構、視覺設計決策、互動模式或使用者體驗品質控制 時，應使用此 Skill。

主要使用案例

在以下情況此 Skill 最為有用：

• 設計新的頁面（Landing Page、Dashboard、Admin、SaaS、Mobile App）
• 建立或重構 UI 元件（按鈕、彈窗、表單、表格、圖表等）
• 選擇配色方案、字體系統、間距規範或佈局體系
• 審查 UI 程式碼的使用者體驗、無障礙性或視覺一致性
• 實作導航結構、動效或響應式行為
• 做產品層級的設計決策（風格、資訊層級、品牌表達）
• 提升介面的感知品質、清晰度或可用性

建議使用

在以下情況建議使用此 Skill：

• UI 看起來「不夠專業」，但原因不明確
• 收到可用性或體驗方面的反饋
• 準備上線前的 UI 品質優化
• 需要對齊跨平台設計（Web / iOS / Android）
• 建構設計系統或可重複使用元件庫

不需使用

在以下情況無需使用此 Skill：

• 純後端邏輯開發
• 僅涉及 API 或資料庫設計
• 與介面無關的效能最佳化
• 基礎設施或 DevOps 工作
• 非視覺類腳本或自動化任務

判斷準則：如果任務會改變某個功能 看起來如何、使用起來如何、如何運動或如何被互動，就應該使用此 Skill。

按優先級分類的規則

供人工/AI 查閱：按 1→10 決定先關注哪類規則；需要細則時用 --domain <Domain> 查詢。腳本不讀取本表。

優先級	類別	影響	領域	主要檢查項目 (必須有)	反模式 (應避免)
1	無障礙性	關鍵	ux	對比度 4.5:1, 替代文字, 鍵盤導航, Aria-labels	移除焦點環, 僅含圖示的按鈕無標籤
2	觸控與互動	關鍵	ux	最小尺寸 44×44px, 8px+ 間距, 載入反饋	僅依賴懸停, 即時狀態變更 (0ms)
3	效能	高	ux	WebP/AVIF, 延遲載入, 保留空間 (CLS < 0.1)	版面抖動, 累計版面配置位移
4	樣式選擇	高	style, product	符合產品類型, 一致性, SVG 圖示 (非 emoji)	隨機混合扁平與擬物風格, 使用 emoji 作為圖示
5	版面與響應式	高	ux	行動優先中斷點, Viewport meta, 無水平捲動	水平捲動, 固定像素容器寬度, 停用縮放
6	字體排印與色彩	中	typography, color	基礎 16px, 行高 1.5, 語意化色彩 token	內文小於 12px, 灰階文字, 在元件中使用原始十六進制碼
7	動畫	中	ux	上下文感知時序, 動畫傳達意義, 空間連續性	所有轉場使用單一持續時間, 對 width/height 做動畫, 未支援 reduced-motion
8	表單與反饋	中	ux	可見標籤, 錯誤訊息靠近欄位, 輔助文字, 漸進式揭露	僅使用 placeholder 作為標籤, 錯誤僅在頂部顯示, 一次性顯示過多資訊
9	導航模式	高	ux	可預測的返回, 底部導航 ≤5 項, 深層連結	導航超載, 返回行為異常, 無深層連結
10	圖表與數據	低	chart	圖例, 工具提示, 無障礙色彩	僅依賴顏色來傳達資訊

快速參考

1. 無障礙性 (關鍵)

• color-contrast - 一般文字最小對比度 4.5:1（大字型 3:1）；Material Design
• focus-states - 在可互動元素上顯示可見的焦點環（2–4px；Apple HIG, MD）
• alt-text - 為有意義的圖片提供描述性替代文字
• aria-labels - 為僅含圖示的按鈕提供 aria-label；原生應用程式中使用 accessibilityLabel（Apple HIG）
• icon-context - 語意取決於用途：裝飾性圖示若與可見文字並排則隱藏於無障礙樹；有意義的圖示需要文字替代方案；圖示控制項需要可存取名稱及適用狀態
• keyboard-nav - Tab 順序符合視覺順序；完整的鍵盤支援（Apple HIG）
• form-labels - 使用 label 搭配 for 屬性
• skip-links - 為鍵盤使用者提供跳至主要內容的連結
• heading-hierarchy - 依序使用 h1→h6，不可跳級
• color-not-only - 不要僅靠顏色傳達資訊（請加上圖示/文字）
• dynamic-type - 支援系統文字縮放；避免文字增長時被截斷（Apple Dynamic Type, MD）
• reduced-motion - 尊重 prefers-reduced-motion；在使用者要求時減少/停用動畫（Apple Reduced Motion API, MD）
• voiceover-sr - 有意義的 accessibilityLabel/accessibilityHint；VoiceOver/螢幕報讀軟體的邏輯閱讀順序（Apple HIG, MD）
• escape-routes - 在彈窗和多步驟流程中提供取消/返回功能（Apple HIG）
• keyboard-shortcuts - 保留系統和無障礙快捷鍵；為拖放操作提供鍵盤替代方案（Apple HIG）
• focus-not-obscured - 黏性 UI、重疊層和橫幅不得隱藏鍵盤焦點控制項（WCAG 2.2 AA）
• focus-not-obscured-enhanced - 保持整個焦點元件可見（WCAG 2.2 AAA）
• focus-appearance - 驗證焦點指示區域和 3:1 狀態對比；僅有可見焦點是不夠的（WCAG 2.2 AAA）
• dragging-alternative - 每個由作者控制的拖曳動作都需要一個單一指標和鍵盤替代方案（WCAG 2.2 AA）
• web-target-size - 網頁指標目標需要 24×24 CSS px 或已記錄的例外情況；請勿使用原生單位替代（WCAG 2.2 AA）
• consistent-help - 重複的說明機制在整組頁面中應保持相同的相對順序（WCAG 2.2 A）
• redundant-entry - 在相同流程中重複使用已提供的資訊，除非重新輸入是必要的（WCAG 2.2 A）
• accessible-authentication - 允許密碼管理器和貼上功能；提供非認知性的驗證途徑（WCAG 2.2 最低標準, AA）。進階 AAA 標準未包含在此資料集中
• auto-rotation-controls - 輪播和移動內容需要暫停/停止控制項，並應在獲得焦點或啟用 reduced-motion 時停止（WAI）
• contextual-live-badge-updates - 將變更的數量/狀態以完整的上下文短語宣告，而不移動焦點；使用一個適當的 live/status 區域，且僅在必要時使用原子更新

2. 觸控與互動 (關鍵)

• touch-target-size - 最小 44×44pt（Apple）/ 48×48dp（Material）；必要時可擴展觸控區域至視覺邊界之外
• touch-spacing - 觸控目標之間最小間距 8px/8dp（Apple HIG, MD）
• hover-vs-tap - 主要互動使用點擊/輕觸；不要僅依賴懸停
• loading-buttons - 非同步操作期間停用按鈕；顯示 spinner 或進度條
• error-feedback - 在問題附近顯示清晰的錯誤訊息
• cursor-pointer - 為可點擊元素添加 cursor-pointer（Web）
• gesture-conflicts - 避免在主內容上使用水平滑動；偏好垂直捲動
• tap-delay - 使用 touch-action: manipulation 以減少 300ms 延遲（Web）
• standard-gestures - 一致地使用平台標準手勢；不要重新定義（例如：滑動返回、捏合縮放）（Apple HIG）
• system-gestures - 不要阻擋系統手勢（控制中心、返回滑動等）（Apple HIG）
• press-feedback - 按壓時提供視覺反饋（漣漪/高亮；MD 狀態層）
• haptic-feedback - 在確認和重要動作時使用觸覺回饋；避免過度使用（Apple HIG）
• gesture-alternative - 不要僅依賴手勢互動；始終為關鍵動作提供可見控制項
• safe-area-awareness - 將主要觸控目標遠離瀏海、動態島、手勢條和螢幕邊緣
• no-precision-required - 避免需要在小圖示或薄邊緣上進行像素級精準點擊
• swipe-clarity - 滑動動作必須顯示清晰的 affordance 或提示（chevron、標籤、教學）
• drag-threshold - 在開始拖曳前使用移動閾值以避免意外拖曳

3. 效能 (高)

• image-optimization - 使用 WebP/AVIF、響應式圖片（srcset/sizes）、延遲載入非關鍵資源
• image-dimension - 宣告 width/height 或使用 aspect-ratio 以防止版面位移（Core Web Vitals: CLS）
• font-loading - 使用 font-display: swap/optional 以避免文字不可見（FOIT）；保留空間以減少版面位移（MD）
• font-preload - 僅預載關鍵字體；避免在每個變體上過度使用 preload
• critical-css - 優先處理首屏 CSS（內聯關鍵 CSS 或早期載入樣式表）
• lazy-loading - 透過動態導入/路由級別拆分來延遲載入非英雄區域元件
• bundle-splitting - 按路由/功能拆分程式碼（React Suspense / Next.js dynamic）以減少初始載入和 TTI
• third-party-scripts - 非同步/延遲載入第三方腳本；審核並移除不必要的腳本（MD）
• reduce-reflows - 避免頻繁的版面讀取/寫入；先批量執行 DOM 讀取，再批量寫入
• content-jumping - 為非同步內容保留空間以避免版面跳動（Core Web Vitals: CLS）
• lazy-load-below-fold - 為非首屏圖片和重型媒體使用 loading="lazy"
• virtualize-lists - 對超過 50 項的清單進行虛擬化，以改善記憶體效率和捲動效能
• main-thread-budget - 將每幀工作保持在約 16ms 以下以達到 60fps；將重型任務移至主執行緒之外（HIG, MD）
• progressive-loading - 對超過 1 秒的操作使用骨架螢幕/ shimmer，而不是長時間的阻塞 spinner（Apple HIG）
• input-latency - 將輸入延遲保持在輕觸/捲動約 100ms 以下（Material 響應性標準）
• tap-feedback-speed - 在輕觸後的 100ms 內提供視覺反饋（Apple HIG）
• debounce-throttle - 對高頻事件（捲動、調整大小、輸入）使用 debounce/throttle
• offline-support - 提供離線狀態訊息和基本備援方案（PWA / 行動應用）
• network-fallback - 為慢速網路提供降級模式（較低解析度圖片、較少動畫）

4. 樣式選擇 (高)

• style-match - 使樣式符合產品類型（使用 --design-system 獲取建議）
• consistency - 在所有頁面使用相同的樣式
• no-emoji-icons - 使用 SVG 圖示（Heroicons, Lucide），而不是 emoji
• color-palette-from-product - 從產品/行業中選擇調色盤（搜尋 --domain color）
• effects-match-style - 陰影、模糊、圓角與所選樣式一致（玻璃 / 扁平 / 黏土等）
• platform-adaptive - 尊重平台慣例（iOS HIG vs Material）：導航、控制項、字體排印、動畫
• state-clarity - 使懸停/按壓/停用狀態在視覺上可區分，同時保持樣式一致性（Material 狀態層）
• elevation-consistent - 為卡片、工作表、彈窗使用一致的 elevation/陰影比例；避免隨機的陰影值
• dark-mode-pairing - 同時設計淺色/深色變體，以保持品牌、對比度和樣式一致
• icon-style-consistent - 在整個產品中使用一套圖示集/視覺語言（筆劃寬度、圓角半徑）
• system-controls - 偏好使用原生/系統控制項，而非完全自訂控制項；僅在品牌需要時才進行自訂（Apple HIG）
• blur-purpose - 使用模糊來指示背景可被關閉（彈窗、工作表），而不是作為裝飾（Apple HIG）
• primary-action - 每個畫面應只有一個主要 CTA；次要動作在視覺上從屬於主要動作（Apple HIG）

5. 版面與響應式 (高)

• viewport-meta - width=device-width initial-scale=1（絕不停用縮放）
• mobile-first - 先設計行動版，再向上擴展到平板和桌面
• breakpoint-consistency - 使用系統化的中斷點（例如 375 / 768 / 1024 / 1440）
• readable-font-size - 行動版內文最小 16px（避免 iOS 自動縮放）
• line-length-control - 行動版每行 35–60 字元；桌面版每行 60–75 字元
• horizontal-scroll - 行動版無水平捲動；確保內容符合 viewport 寬度
• spacing-scale - 使用 4pt/8dp 遞增的間距系統（Material Design）
• touch-density - 保持元件間距適合觸控：不擁擠，也不導致誤觸
• container-width - 桌面版有一致的 max-width（max-w-6xl / 7xl）
• z-index-management - 定義分層的 z-index 比例（例如 0 / 10 / 20 / 40 / 100 / 1000）
• fixed-element-offset - 固定導航欄/底部欄必須為下方內容保留安全的 padding
• scroll-behavior - 避免干擾主捲動體驗的巢狀捲動區域
• viewport-units - 在行動版上偏好使用 min-h-dvh 而非 100vh
• orientation-support - 在橫向模式下保持版面可讀和可操作
• content-priority - 在行動版上優先顯示核心內容；摺疊或隱藏次要內容
• visual-hierarchy - 透過尺寸、間距、對比度建立層級 — 而不僅是顏色
• compact-label-overflow - 根據語意選擇 badge、狀態標籤、篩選 chip 或可移除的值；保持必要的標籤可用，並向指標和鍵盤使用者揭露不可避免的截斷
• chip-collection-reflow - 在縮小標籤之前先換行顯示集合；使 +n 溢出摘要成為可操作的揭露，而不是隱藏值

6. 字體排印與色彩 (中)

• line-height - 內文使用 1.5-1.75
• line-length - 限制每行 65-75 個字元
• font-pairing - 匹配標題/內文字體個性
• font-scale - 一致的文字尺寸比例（例如 12 14 16 18 24 32）
• contrast-readability - 淺色背景上使用較深文字（例如 slate-900 搭配白色背景）
• text-styles-system - 使用平台文字系統：iOS 11 Dynamic Type 樣式 / Material 5 種文字角色（display, headline, title, body, label）（HIG, MD）
• weight-hierarchy - 使用字重來強化層級：粗體標題（600–700）、一般內文（400）、中等標籤（500）（MD）
• color-semantic - 定義語意化色彩 token（primary, secondary, error, surface, on-surface），不要在元件中使用原始十六進制碼（Material color system）
• color-dark-mode - 深色模式使用去飽和/較亮的色調變體，而不是反轉顏色；分別測試對比度（HIG, MD）
• color-accessible-pairs - 前景/背景配對必須達到 4.5:1（AA）或 7:1（AAA）；使用工具進行驗證（WCAG, MD）
• color-not-decorative-only - 功能性色彩（錯誤紅、成功綠）必須包含圖示/文字；避免僅靠顏色傳達意義（HIG, MD）
• truncation-strategy - 偏好換行而非截斷；截斷時使用省略號，並透過工具提示/展開提供完整文字（Apple HIG）
• letter-spacing - 尊重每個平台的預設字母間距；避免在內文上使用緊湊的字距（HIG, MD）
• number-tabular - 在數據列、價格等使用表格/等寬數字

…

[其餘內容因長度截斷，但應完整保留原文結構]