ui-ux-pro-max

UI/UX Pro Max - 設計智慧指南

專為 Web 與行動應用程式打造的全方位設計指南。跨 10 大技術堆疊，包含 50+ 種風格、161 種配色方案、57 組字體搭配、161 種附帶推論規則的產品類型、99 條 UX 指南及 25 種圖表類型。提供可搜尋的資料庫與基於優先順序的推薦建議。

何時使用

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

必須使用

在以下情況下，必須呼叫本 Skill：

• 設計新頁面（Landing Page、儀表板、後台管理介面、SaaS、行動 App）
• 建立或重構 UI 元件（按鈕、Modal 對話方塊、表單、表格、圖表等）
• 選擇色彩方案、字型系統、間距標準或佈局系統
• 審查 UI 程式碼的使用者體驗、無障礙功能（Accessibility）或視覺一致性
• 實作導覽結構、動畫效果或響應式行為
• 制定產品層級的設計決策（風格、資訊層級、品牌傳達）
• 提升介面的感官品質、清晰度或易用性

推薦使用

在以下情況下，推薦使用本 Skill：

• UI 看起來「不夠專業」但原因不明
• 收到關於易用性或體驗的意見回饋
• 上線前的 UI 品質最佳化
• 跨平台設計對齊（Web / iOS / Android）
• 建立設計系統或可複用的元件庫

跳過不使用

在以下情況下，不需要使用本 Skill：

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

判定基準：如果該任務會改變功能的視覺外觀、手感體感、動態效果或互動方式，就應該使用本 Skill。

依優先順序分類的規則類別

供人工/AI 參考：請遵循優先順序 1→10 來決定首先關注哪個規則類別；需要時可使用 --domain <Domain> 查詢詳細資訊。腳本不會讀取此表格。

優先順序	類別	影響程度	Domain	關鍵檢查項目（必備）	反模式（應避免）
1	無障礙功能 (Accessibility)	極高 (CRITICAL)	ux	對比度 4.5:1、Alt 替代文字、鍵盤導覽、Aria-label	移除焦點環 (Focus rings)、無標籤的純圖示按鈕
2	觸控與互動	極高 (CRITICAL)	ux	最小尺寸 44×44px、8px+ 間距、載入中回饋	完全依賴 Hover、瞬間狀態切換 (0ms)
3	效能	高 (HIGH)	ux	WebP/AVIF、懶載入 (Lazy loading)、預留空間 (CLS < 0.1)	版面抖動 (Layout thrashing)、累積版面位移 (CLS)
4	風格選擇	高 (HIGH)	style, product	符合產品類型、保持一致性、使用 SVG 圖示 (不使用 Emoji)	隨意混用扁平與擬物風格、使用 Emoji 作為圖示
5	佈局與響應式	高 (HIGH)	ux	行動優先斷點、Viewport meta、避免水平捲動	水平捲動、固定 px 容器寬度、停用縮放
6	字型與色彩	中 (MEDIUM)	typography, color	基準 16px、行高 1.5、語意化色彩 Token	內文小於 12px、灰底灰字、元件內硬編碼原始 Hex 顏色
7	動畫效果	中 (MEDIUM)	ux	持續時間 150–300ms、動態傳達意義、空間連續性	純裝飾性動畫、對 width/height 作動畫、未支援 reduced-motion
8	表單與回饋	中 (MEDIUM)	ux	可見標籤、欄位旁顯示錯誤、輔助說明文字、漸進式揭露	僅用 Placeholder 當標籤、錯誤訊息只集中在頂部、一次呈現過多欄位
9	導覽模式	高 (HIGH)	ux	可預期的返回行為、底部導覽列 ≤5 項、Deep linking	過度載入的導覽列、返回行為失靈、不支援 Deep links
10	圖表與資料	低 (LOW)	chart	圖例、工具提示 (Tooltips)、無障礙配色	單靠顏色傳達資訊

快速參考指南

1. 無障礙功能 (CRITICAL)

• color-contrast - 普通內文對比度至少 4.5:1（大字體 3:1）；參考 Material Design
• focus-states - 互動元件上需有清晰可見的焦點環（2–4px；參考 Apple HIG、MD）
• alt-text - 為具備實際意義的圖片提供描述性 alt 替代文字
• aria-labels - 純圖示按鈕需加上 aria-label；原生 App 中加上 accessibilityLabel（參考 Apple HIG）
• keyboard-nav - Tab 聚焦順序與視覺順序一致；提供完整的鍵盤操作支援（參考 Apple HIG）
• form-labels - 表單元件使用帶有 for 屬性的 label 標籤
• 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 - 在 Modal 對話方塊與多步驟流程中提供取消/返回機制（參考 Apple HIG）
• keyboard-shortcuts - 保留系統與無障礙快捷鍵；為拖曳 (Drag-and-drop) 提供鍵盤替代方案（參考 Apple HIG）

2. 觸控與互動 (CRITICAL)

• touch-target-size - 點擊目標至少 44×44pt (Apple) / 48×48dp (Material)；必要時延伸超出視覺邊界的點擊區域
• touch-spacing - 觸控目標之間保持至少 8px/8dp 的間距（參考 Apple HIG、MD）
• hover-vs-tap - 主要互動採用點擊 (Click/Tap)；切勿單純依賴 Hover 懸停
• 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 state layers）
• haptic-feedback - 在確認與重要操作時使用觸覺回饋（Haptic）；避免過度使用（參考 Apple HIG）
• gesture-alternative - 切勿僅依賴手勢進行互動；重要操作必須提供可見的控制元件
• safe-area-awareness - 主要觸控目標應避開瀏海 (Notch)、動態島 (Dynamic Island)、手勢條及螢幕邊緣
• no-precision-required - 避免要求使用者精準點擊極小圖示或細微邊緣
• swipe-clarity - 滑動操作必須有明確的提示或引導（如箭頭、標籤、教學）
• drag-threshold - 開始拖曳前設定移動閾值，避免誤觸引發拖曳

3. 效能 (HIGH)

• 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 - 優先載入首屏 (Above-the-fold) CSS（內聯 critical CSS 或優先載入樣式表）
• lazy-loading - 透過動態匯入 (Dynamic import) / 路由層級拆分懶載入非首屏元件
• bundle-splitting - 按路由/功能拆分程式碼 (React Suspense / Next.js dynamic) 以降低首屏載入量與 TTI
• third-party-scripts - 以 async/defer 方式載入第三方腳本；定期審查並移除不必要的腳本（MD）
• reduce-reflows - 避免頻繁的 DOM 讀寫交替；將 DOM 讀取與寫入分別批次處理
• content-jumping - 為非同步內容預留空間，防止版面跳動（Core Web Vitals: CLS）
• lazy-load-below-fold - 對首屏未顯示的圖片與重度媒體使用 loading="lazy"
• virtualize-lists - 對超過 50 個項目的清單進行虛擬化處理 (Virtualization)，提高記憶體效率與捲動順暢度
• main-thread-budget - 將每幀的工作保持在 ~16ms 以下以達成 60fps；將重度任務移出主執行緒（HIG、MD）
• progressive-loading - 對於超過 1 秒的操作，使用 Skeleton 骨架屏 / 閃爍效果 (Shimmer) 代替長延遲的轉圈圖示（Apple HIG）
• input-latency - 將點擊/捲動的輸入延遲控制在 ~100ms 以內（Material 響應性標準）
• tap-feedback-speed - 在點擊後的 100ms 內提供視覺回饋（Apple HIG）
• debounce-throttle - 對高頻事件（捲動、調整視窗大小、輸入）使用 Debounce / Throttle
• offline-support - 提供離線狀態提示與基本降級備援機制（PWA / 行動 App）
• network-fallback - 為慢速網路提供降級模式（降低圖片解析度、減少動畫效果）

4. 風格選擇 (HIGH)

• style-match - 風格需與產品類型匹配（使用 --design-system 查看建議）
• consistency - 在所有頁面中維持一致的風格
• no-emoji-icons - 使用 SVG 圖示（如 Heroicons、Lucide），切勿使用 Emoji
• color-palette-from-product - 根據產品/行業選擇調色盤（搜尋 --domain color）
• effects-match-style - 陰影、模糊、圓角需與選定的風格對齊（如 glass / flat / clay 等）
• platform-adaptive - 尊重平台習慣（iOS HIG vs Material）：導覽、控制項、字體、動態效果
• state-clarity - 在維持整體風格的前提下，讓 Hover / Pressed / Disabled 狀態保持視覺上明確可區分（Material state layers）
• elevation-consistent - 為卡片、底欄 (Sheets)、Modal 採用一致的層級/陰影標尺；避免使用隨意的陰影數值
• dark-mode-pairing - 亮色與深色模式同步設計，以維護品牌形象、對比度與風格一致性
• icon-style-consistent - 整個產品統一採用單一圖示集/視覺語言（線條粗細、圓角角度）
• system-controls - 優先使用原生/系統控制項而非全自訂控制項；僅在品牌有明確要求時進行自訂（Apple HIG）
• blur-purpose - 使用模糊 (Blur) 來表示背景被關閉/遮蔽（如 Modal、Sheet），而非僅作為裝飾（Apple HIG）
• primary-action - 每個畫面應僅有一個主要行動按鈕 (CTA)；次要動作在視覺上應低於主要按鈕（Apple HIG）

5. 佈局與響應式 (HIGH)

• viewport-meta - width=device-width initial-scale=1（絕不停用縮放功能）
• mobile-first - 採用行動優先 (Mobile-first) 設計，再逐漸放大升級至平板與桌機
• breakpoint-consistency - 使用系統化的斷點（例如 375 / 768 / 1024 / 1440）
• readable-font-size - 行動裝置上的內文最小 16px（避免觸發 iOS 自動放大功能）
• line-length-control - 行動裝置每行 35–60 個字元；桌機每行 60–75 個字元
• horizontal-scroll - 行動裝置上不可出現水平捲動；確保內容完全符合視埠寬度
• spacing-scale - 使用 4pt/8dp 增量間距系統（Material Design）
• touch-density - 保持舒適的元件觸控間距：不擁擠、不導致誤觸
• container-width - 桌機端維持一致的最大寬度限制（max-w-6xl / 7xl）
• z-index-management - 定義階層化的 z-index 標尺（例如 0 / 10 / 20 / 40 / 100 / 1000）
• fixed-element-offset - 固定位置的導覽列/底欄必須為下方內容預留安全 Padding 內距
• scroll-behavior - 避免巢狀捲動區域干擾主頁面的捲動體驗
• `vie