UI/UX Pro Max - 設計智慧
Web 與行動應用程式的綜合設計指南。包含 67 種樣式、96 個色彩調色盤、57 種字體配對、99 條 UX 指南，以及橫跨 13 個技術堆疊的 25 種圖表類型。可搜尋的資料庫，並提供基於優先級的推薦。
何時套用
在以下情況參考這些指南：
- 設計新的 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-labelkeyboard-nav- Tab 順序應與視覺順序一致form-labels- 使用帶有 for 屬性的 label
2. 觸控與互動（關鍵）
touch-target-size- 觸控目標最小為 44x44pxhover-vs-tap- 主要互動使用點擊/輕觸loading-buttons- 非同步操作期間應停用按鈕error-feedback- 清晰的錯誤訊息應顯示在問題附近cursor-pointer- 為可點擊元素添加 cursor-pointer
3. 效能（高）
image-optimization- 使用 WebP、srcset、延遲載入reduced-motion- 檢查 prefers-reduced-motioncontent-jumping- 為非同步內容保留空間
4. 佈局與響應式（高）
viewport-meta- width=device-width initial-scale=1readable-font-size- 行動裝置上主體文字最小 16pxhorizontal-scroll- 確保內容符合視口寬度z-index-management- 定義 z-index 尺度 (10, 20, 30, 50)
5. 排版與色彩（中）
line-height- 主體文字使用 1.5-1.75line-length- 每行限制在 65-75 個字元font-pairing- 標題/主體字體風格應相互匹配
6. 動畫（中）
duration-timing- 微互動使用 150-300mstransform-performance- 使用 transform/opacity，而非 width/heightloading-states- 骨架螢幕或載入旋轉器
7. 樣式選擇（中）
style-match- 樣式需與產品類型匹配consistency- 所有頁面應使用相同樣式no-emoji-icons- 使用 SVG 圖示，而非 emoji
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 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
此指令會：
- 平行搜尋 5 個領域（product, style, color, landing, typography）
- 套用來自
ui-reasoning.csv的推理規則以選出最佳匹配 - 返回完整的設計系統：模式、樣式、色彩、排版、效果
- 包含應避免的反模式
範例：
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
步驟 2b：持久化設計系統（主檔案 + 覆蓋模式）
若要跨會話分層檢索設計系統，請添加 --persist：
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
這會建立：
design-system/MASTER.md— 包含所有設計規則的全球唯一真相來源design-system/pages/— 存放頁面專屬覆蓋規則的資料夾
搭配頁面專屬覆蓋：
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
這也會建立：
design-system/pages/dashboard.md— 頁面專屬偏離主檔案的規則
分層檢索方式：
- 建置特定頁面時（例如「結帳」），先檢查
design-system/pages/checkout.md - 如果該頁面檔案存在，其規則會覆蓋主檔案
- 若不存在，則僅使用
design-system/MASTER.md
步驟 3：補充詳細搜尋（視需要）
取得設計系統後，使用領域搜尋獲取更多細節：
python3 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 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
可用的技術堆疊：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose
搜尋參考
可用領域
| 領域 | 用途 | 範例關鍵詞 |
|---|---|---|
product | 產品類型推薦 | SaaS、電子商務、作品集、醫療保健、美容、服務 |
style | UI 樣式、色彩、效果 | 玻璃擬態、極簡主義、深色模式、野獸主義 |
typography | 字體配對、Google Fonts | 優雅、有趣、專業、現代 |
color | 按產品類型的色彩調色盤 | saas、電子商務、醫療保健、美容、fintech、服務 |
landing | 頁面結構、CTA 策略 | hero、hero-centric、推薦、定價、社會證明 |
chart | 圖表類型、函式庫推薦 | 趨勢、比較、時間線、漏斗、圓餅圖 |
ux | 最佳實踐、反模式 | 動畫、無障礙性、z-index、載入中 |
react | React/Next.js 效能 | waterfall、bundle、suspense、memo、rerender、cache |
web | Web 介面指南 | aria、focus、鍵盤、語意、virtualize |
prompt | AI 提示、CSS 關鍵詞 | (樣式名稱) |
可用的技術堆疊
| 技術堆疊 | 重點 |
|---|---|
html-tailwind | Tailwind 工具、響應式、無障礙性（預設） |
react | 狀態、鉤子、效能、模式 |
nextjs | SSR、路由、圖片、API 路由 |
vue | Composition API、Pinia、Vue Router |
svelte | Runes、stores、SvelteKit |
swiftui | 視圖、狀態、導航、動畫 |
react-native | 元件、導航、列表 |
flutter | 小部件、狀態、佈局、主題化 |
shadcn | shadcn/ui 元件、主題化、表單、模式 |
jetpack-compose | 可組合項、修飾符、狀態提升、重組 |
範例工作流程
使用者請求：「Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp」
步驟 1：分析需求
- 產品類型：美容/水療服務
- 風格關鍵詞：優雅、專業、柔和
- 產業：美容/健康
- 技術堆疊：html-tailwind（預設）
步驟 2：生成設計系統（必要）
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
**輸出：**包含模式、樣式、色彩、排版、效果和反模式的完整設計系統。
步驟 3：補充詳細搜尋（視需要）
# 獲取有關動畫和無障礙性的 UX 指南
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# 如有需要，獲取替代排版選項
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
步驟 4：技術堆疊指南
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
**接著：**綜合設計系統 + 詳細搜尋結果並實作設計。
輸出格式
--design-system 標誌支援兩種輸出格式：
# ASCII 框（預設）- 最適合終端機顯示
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - 最適合文件
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
獲得更好結果的技巧
- 關鍵詞要具體 - "healthcare SaaS dashboard" 優於 "app"
- 多次搜尋 - 不同的關鍵詞會揭示不同的見解
- 組合領域 - 樣式 + 排版 + 色彩 = 完整的設計系統
- 務必檢查 UX - 搜尋 "animation"、"z-index"、"accessibility" 以找出常見問題
- 使用技術堆疊標誌 - 獲取實作專屬的最佳實踐
- 疊代 - 若初次搜尋不匹配，嘗試不同的關鍵詞
專業 UI 的常見規則
以下是常被忽略，卻會讓 UI 看起來不專業的問題：
圖示與視覺元素
| 規則 | 該做的事 | 不該做的事 |
|---|---|---|
| 不使用 emoji 圖示 | 使用 SVG 圖示（Heroicons、Lucide、Simple Icons） | 使用 🎨 🚀 ⚙️ 等 emoji 作為 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 程式碼之前，請驗證以下項目：
視覺品質
- 未使用 emoji 作為圖示（請改用 SVG）
- 所有圖示來自一致的圖示集（Heroicons/Lucide）
- 品牌標誌正確（已從 Simple Icons 驗證）
- 懸停狀態不會導致佈局偏移
- 直接使用主題顏色（如 bg-primary）而非 var() 包裝
互動
- 所有可點擊元素都有
cursor-pointer - 懸停狀態提供清晰的視覺反饋
- 過渡動畫流暢（150-300ms）
- 鍵盤導航的焦點狀態可見
淺色/深色模式
- 淺色模式文字有足夠的對比度（最低 4.5:1）
- 玻璃/透明元素在淺色模式下可見
- 邊框在兩種模式都可見
- 交付前測試兩種模式
佈局
- 浮動元素與邊緣有適當間距
- 內容未隱藏在固定導覽列後面
- 在 375px、768px、1024px、1440px 下均為響應式
- 行動裝置上無水平滾動
無障礙性
- 所有圖片都有替代文字
- 表單輸入項有標籤
- 顏色不是唯一的指示方式
- 尊重
prefers-reduced-motion