AI Skills
ui-ux-pro-max

ui-ux-pro-max

熱門

網頁與行動應用程式的全方位設計指南。適用於設計新的 UI 元件或頁面、選擇色彩調色盤與字型，或審查程式碼中的 UX 問題。

4.4萬星標
6478分支
更新於 2026/7/24
獲取技能源代碼

相關技能

source-driven-development7.8萬design-system11萬frontend-code-review15萬
SKILL.md
readonlyread-only
name
ui-ux-pro-max
description

Comprehensive design guide for web and mobile applications. Use when designing new UI components or pages, choosing color palettes and typography, or reviewing code for UX issues.

UI/UX Pro Max - 設計智慧

網頁與行動應用程式的全方位設計指南。包含 50 多種樣式、97 組色彩調色盤、57 組字型搭配、99 條 UX 準則，以及 25 種圖表類型，橫跨 9 個技術棧。可搜尋資料庫，並提供優先級建議。

使用時機

在以下情況參考這些準則：

  • 設計新的 UI 元件或頁面
  • 選擇色彩調色盤與字型
  • 審查程式碼中的 UX 問題
  • 建立登陸頁面或儀表板
  • 實作無障礙需求

規則分類（依優先級）

優先級 分類 影響 領域
1 無障礙 關鍵 ux
2 觸控與互動 關鍵 ux
3 效能 高 ux
4 版面與響應式 高 ux
5 字型與色彩 中 typography, color
6 動畫 中 ux
7 樣式選擇 中 style, product
8 圖表與資料 低 chart

快速參考

1. 無障礙（關鍵）

  • color-contrast - 一般文字最小對比度 4.5:1
  • focus-states - 互動元素上可見的焦點環
  • alt-text - 為有意義的圖片提供描述性替代文字
  • aria-labels - 純圖示按鈕使用 aria-label
  • keyboard-nav - Tab 順序與視覺順序一致
  • form-labels - 使用 label 搭配 for 屬性

2. 觸控與互動（關鍵）

  • touch-target-size - 觸控目標最小 44x44px
  • hover-vs-tap - 主要互動使用點擊/輕觸
  • loading-buttons - 非同步操作期間停用按鈕
  • error-feedback - 在問題附近顯示清楚錯誤訊息
  • cursor-pointer - 為可點擊元素加上 cursor-pointer

3. 效能（高）

  • image-optimization - 使用 WebP、srcset、延遲載入
  • reduced-motion - 檢查 prefers-reduced-motion
  • content-jumping - 為非同步內容保留空間

4. 版面與響應式（高）

  • viewport-meta - width=device-width initial-scale=1
  • readable-font-size - 行動裝置內文最小 16px
  • horizontal-scroll - 確保內容符合視窗寬度
  • z-index-management - 定義 z-index 層級（10, 20, 30, 50）

5. 字型與色彩（中）

  • line-height - 內文使用 1.5-1.75
  • line-length - 每行限制 65-75 個字元
  • font-pairing - 標題與內文字型風格相符

6. 動畫（中）

  • duration-timing - 微互動使用 150-300ms
  • transform-performance - 使用 transform/opacity，而非 width/height
  • loading-states - 骨架螢幕或載入動畫

7. 樣式選擇（中）

  • style-match - 樣式與產品類型相符
  • consistency - 所有頁面使用相同樣式
  • no-emoji-icons - 使用 SVG 圖示，而非表情符號

8. 圖表與資料（低）

  • chart-type - 圖表類型與資料類型相符
  • color-guidance - 使用無障礙色彩調色盤
  • data-table - 提供表格替代方案以符合無障礙

使用方式

使用下方 CLI 工具搜尋特定領域。

前置需求

檢查是否已安裝 Python：

python3 --version || python --version

若未安裝 Python，請根據使用者作業系統安裝：

macOS：

brew install python3

Ubuntu/Debian：

sudo apt update && sudo apt install python3

Windows：

winget install Python.Python.3.12

如何使用此技能

當使用者提出 UI/UX 相關工作（設計、建立、實作、審查、修正、改善）時，請遵循以下流程：

步驟 1：分析使用者需求

從使用者請求中提取關鍵資訊：

  • 產品類型：SaaS、電子商務、作品集、儀表板、登陸頁面等
  • 樣式關鍵字：極簡、活潑、專業、優雅、深色模式等
  • 產業：醫療保健、金融科技、遊戲、教育等
  • 技術棧：React、Vue、Next.js，或預設為 html-tailwind

步驟 2：產生設計系統（必要）

務必以 --design-system 開頭，以取得包含推理的完整建議：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

此指令會：

  1. 並行搜尋 5 個領域（product, style, color, landing, typography）
  2. 套用 ui-reasoning.csv 中的推理規則，選出最佳配對
  3. 回傳完整設計系統：模式、樣式、色彩、字型、效果
  4. 包含應避免的反模式

範例：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

步驟 3：補充詳細搜尋（視需要）

取得設計系統後，使用領域搜尋取得更多細節：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

何時使用詳細搜尋：

需求 領域 範例
更多樣式選項 style --domain style "glassmorphism dark"
圖表建議 chart --domain chart "real-time dashboard"
UX 最佳實務 ux --domain ux "animation accessibility"
替代字型 typography --domain typography "elegant luxury"
登陸頁結構 landing --domain landing "hero social-proof"

步驟 4：技術棧指南（預設：html-tailwind）

取得特定實作的最佳實務。若使用者未指定技術棧，預設為 html-tailwind。

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

可用技術棧：html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn

搜尋參考

可用領域

領域 用途 範例關鍵字
product 產品類型建議 SaaS, e-commerce, portfolio, healthcare, beauty, service
style UI 樣式、色彩、效果 glassmorphism, minimalism, dark mode, brutalism
typography 字型搭配、Google Fonts elegant, playful, professional, modern
color 依產品類型的色彩調色盤 saas, ecommerce, healthcare, beauty, fintech, service
landing 頁面結構、CTA 策略 hero, hero-centric, testimonial, pricing, social-proof
chart 圖表類型、函式庫建議 trend, comparison, timeline, funnel, pie
ux 最佳實務、反模式 animation, accessibility, z-index, loading
react React/Next.js 效能 waterfall, bundle, suspense, memo, rerender, cache
web 網頁介面準則 aria, focus, keyboard, semantic, virtualize
prompt AI 提示、CSS 關鍵字 (style name)

可用技術棧

技術棧 重點
html-tailwind Tailwind 工具類、響應式、無障礙（預設）
react 狀態、鉤子、效能、模式
nextjs SSR、路由、圖片、API 路由
vue Composition API、Pinia、Vue Router
svelte Runes、stores、SvelteKit
swiftui 視圖、狀態、導航、動畫
react-native 元件、導航、列表
flutter 小工具、狀態、版面、主題
shadcn shadcn/ui 元件、主題、表單、模式

範例流程

使用者請求： "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

步驟 1：分析需求

  • 產品類型：美容/SPA 服務
  • 樣式關鍵字：優雅、專業、柔和
  • 產業：美容/健康
  • 技術棧：html-tailwind（預設）

步驟 2：產生設計系統（必要）

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

輸出： 包含模式、樣式、色彩、字型、效果及反模式的完整設計系統。

步驟 3：補充詳細搜尋（視需要）

# 取得動畫與無障礙的 UX 準則
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# 若需要，取得替代字型選項
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

步驟 4：技術棧指南

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

然後： 綜合設計系統與詳細搜尋結果，實作設計。

輸出格式

--design-system 旗標支援兩種輸出格式：

# ASCII 框（預設） - 最適合終端機顯示
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - 最適合文件
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

獲得更好結果的秘訣

  1. 關鍵字要具體 - "healthcare SaaS dashboard" 優於 "app"
  2. 多次搜尋 - 不同關鍵字會揭露不同見解
  3. 結合領域 - 樣式 + 字型 + 色彩 = 完整設計系統
  4. 務必檢查 UX - 搜尋 "animation"、"z-index"、"accessibility" 以找出常見問題
  5. 使用技術棧旗標 - 取得特定實作的最佳實務
  6. 疊代 - 若第一次搜尋不符，嘗試不同關鍵字

專業 UI 的常見規則

以下是常被忽略、會讓 UI 看起來不專業的問題：

圖示與視覺元素

規則 正確做法 錯誤做法
不使用表情符號圖示 使用 SVG 圖示（Heroicons、Lucide、Simple Icons） 使用 🎨 🚀 ⚙️ 等表情符號作為 UI 圖示
穩定的懸停狀態 懸停時使用顏色/透明度轉場 使用會導致版面位移的縮放變形
正確的品牌標誌 從 Simple Icons 查詢官方 SVG 猜測或使用錯誤的標誌路徑
一致的圖示尺寸 使用固定 viewBox（24x24）搭配 w-6 h-6 隨意混合不同圖示尺寸

互動與游標

規則 正確做法 錯誤做法
游標指標 在所有可點擊/可懸停的卡片上加上 cursor-pointer 在互動元素上保留預設游標
懸停回饋 提供視覺回饋（顏色、陰影、邊框） 無任何元素可互動的提示
平滑轉場 使用 transition-colors duration-200 瞬間狀態變化或太慢（>500ms）

淺色/深色模式對比

規則 正確做法 錯誤做法
淺色模式玻璃卡片 使用 bg-white/80 或更高不透明度 使用 bg-white/10（太透明）
淺色模式文字對比 文字使用 #0F172A（slate-900） 內文使用 #94A3B8（slate-400）
淺色模式次要文字 至少使用 #475569（slate-600） 使用 gray-400 或更淺
邊框可見度 淺色模式使用 border-gray-200 使用 border-white/10（看不見）

版面與間距

規則 正確做法 錯誤做法
浮動導覽列 加上 top-4 left-4 right-4 間距 將導覽列貼齊 top-0 left-0 right-0
內容內距 考慮固定導覽列的高度 讓內容藏在固定元素後面
一致的最大寬度 使用相同的 max-w-6xl 或 max-w-7xl 混合不同容器寬度

交付前檢查清單

在交付 UI 程式碼前，請確認以下項目：

視覺品質

  • [ ] 未使用表情符號作為圖示（改用 SVG）
  • [ ] 所有圖示來自一致的圖示集（Heroicons/Lucide）
  • [ ] 品牌標誌正確（已從 Simple Icons 驗證）
  • [ ] 懸停狀態不會造成版面位移
  • [ ] 直接使用主題顏色（bg-primary），而非 var() 包裝

互動

  • [ ] 所有可點擊元素都有 cursor-pointer
  • [ ] 懸停狀態提供清楚的視覺回饋
  • [ ] 轉場流暢（150-300ms）
  • [ ] 焦點狀態在鍵盤導航時可見

淺色/深色模式

  • [ ] 淺色模式文字有足夠對比（最低 4.5:1）
  • [ ] 玻璃/透明元素在淺色模式下可見
  • [ ] 邊框在兩種模式下都可見
  • [ ] 交付前測試兩種模式

版面

  • [ ] 浮動元素與邊緣有適當間距
  • [ ] 無內容藏在固定導覽列後方
  • [ ] 在 375px、768px、1024px、1440px 下響應式正常
  • [ ] 行動裝置無水平捲動

無障礙

  • [ ] 所有圖片都有替代文字
  • [ ] 表單輸入有標籤
  • [ ] 顏色不是唯一的指示方式
  • [ ] 尊重 prefers-reduced-motion

使用時機

此技能適用於執行概述中所述的工作流程或動作。

限制

  • 僅在任務明確符合上述範圍時使用此技能。
  • 請勿將輸出視為環境特定驗證、測試或專家審查的替代方案。
  • 若缺少必要輸入、權限、安全邊界或成功標準，請停止並要求釐清。