UX Pro Max - 設計智慧專家 是做什麼的？
為網頁和行動應用程式提供全面的 UI/UX 設計指南。根據產品類型、產業和使用者需求，提供智慧的設計建議。在設計新的 UI、選擇顏色和字型、審查程式碼以找出 UX 問題或實作功能時，請參考這些準則。
工作流程
步驟 1：分析使用者需求
從使用者請求中提取：
- 產品類型：SaaS、電子商務、作品集、儀表板、登陸頁面等
- 風格關鍵字：極簡、活潑、專業、優雅、深色模式等
- 產業：醫療保健、金融科技、遊戲、教育、美容等
- 技術棧：React、Vue、Next.js、Svelte、Flutter 或 html-tailwind（預設）
步驟 2：生成設計系統
查閱下方參考資料（以及 data/ 中的 CSV 檔案）以取得：
- 推薦的模式和區塊佈局
- 主要的視覺風格及其效果
- 色票（主要、次要、CTA、背景、文字）
- 字型搭配（標題 + 正文字體及其 Google Fonts URL）
- 關鍵效果及應避免的反模式
步驟 3：實作指南
套用參考資料中技術棧特定的最佳實務：
- HTML/Tailwind 工具類別、響應式中斷點
- React hooks、狀態管理、效能模式
- Vue Composition API、Pinia 狀態管理
- Flutter widgets、主題、導航
- 無障礙性需求（WCAG 合規）
步驟 4：交付前驗證
在交付任何 UI 程式碼之前，執行所有檢查清單（視覺品質、互動、淺色/深色模式、版面配置、無障礙性）。
優先級規則
| 優先級 | 類別 | 影響 |
|---|---|---|
| 1 | 無障礙性 | 關鍵 - 色彩對比度 4.5:1、焦點狀態、aria-labels |
| 2 | 觸控與互動 | 關鍵 - 44x44px 觸控目標、cursor-pointer |
| 3 | 效能 | 高 - 圖片優化、延遲載入 |
| 4 | 版面配置與響應式 | 高 - 行動優先、viewport meta |
| 5 | 字型與顏色 | 中 - 行高 1.5-1.75、可讀字型 |
| 6 | 動畫 | 中 - 150-300ms 持續時間、僅使用 transform |
| 7 | 風格選擇 | 中 - 使風格符合產品類型 |
依產品類型的快速風格選擇器
| 產品類型 | 主要風格 | 次要風格 | 顏色情緒 |
|---|---|---|---|
| SaaS（通用） | 極簡主義 | 平面設計、玻璃擬態 | 信任藍 + 強調對比色 |
| 電子商務 | 新粗獷主義 | Bento Grid、深色模式 | 品牌主色 + 成功綠 |
| 電子商務奢侈品 | 奢華極簡 | 深色模式、優雅 | 高級黑 + 金色點綴 |
| 醫療保健 | 柔和極簡 | 平面設計、有機風格 | 平靜藍 + 健康綠 |
| 金融科技/加密貨幣 | 賽博龐克 | 深色模式、玻璃擬態 | 深色科技 + 鮮明點綴 |
| 遊戲 | 霓虹發光 | 賽博龐克、深色模式 | 鮮豔 + 霓虹 + 沉浸感 |
| 作品集/創意 | 編輯風格 | 粗獷主義、不對稱 | 品牌主色 + 藝術感 |
| 儀表板 | 企業科技風格 | 平面設計、資料密集型 | 冷→暖漸層 + 中性色 |
| AI/聊天機器人 | 極光漸層 | 玻璃擬態、深色模式 | 中性色 + AI 紫 (#6366F1) |
| 美容/水療/保健 | 有機形狀 | 柔和極簡、優雅 | 柔和粉彩 + 自然色調 |
依產業的色票
SaaS / 商業
| 角色 | 十六進位碼 | Tailwind |
|---|---|---|
| 主要 | #2563EB | blue-600 |
| 次要 | #3B82F6 | blue-500 |
| CTA | #F97316 | orange-500 |
| 背景 | #F8FAFC | slate-50 |
| 文字 | #1E293B | slate-800 |
| 邊框 | #E2E8F0 | slate-200 |
電子商務奢侈品
| 角色 | 十六進位碼 | Tailwind |
|---|---|---|
| 主要 | #1C1917 | stone-900 |
| 次要 | #44403C | stone-700 |
| CTA | #CA8A04 | yellow-600 |
| 背景 | #FAFAF9 | stone-50 |
| 文字 | #0C0A09 | stone-950 |
| 邊框 | #D6D3D1 | stone-300 |
醫療保健
| 角色 | 十六進位碼 | Tailwind |
|---|---|---|
| 主要 | #0891B2 | cyan-600 |
| 次要 | #22D3EE | cyan-400 |
| CTA | #059669 | emerald-600 |
| 背景 | #ECFEFF | cyan-50 |
| 文字 | #164E63 | cyan-900 |
| 邊框 | #A5F3FC | cyan-200 |
金融科技 / 加密貨幣
| 角色 | 十六進位碼 | Tailwind |
|---|---|---|
| 主要 | #F59E0B | amber-500 |
| 次要 | #FBBF24 | amber-400 |
| CTA | #8B5CF6 | violet-500 |
| 背景 | #0F172A | slate-900 |
| 文字 | #F8FAFC | slate-50 |
| 邊框 | #334155 | slate-700 |
遊戲
| 角色 | 十六進位碼 | Tailwind |
|---|---|---|
| 主要 | #7C3AED | violet-600 |
| 次要 | #A78BFA | violet-400 |
| CTA | #F43F5E | rose-500 |
| 背景 | #0F0F23 | custom-dark |
| 文字 | #E2E8F0 | slate-200 |
| 邊框 | #4C1D95 | violet-900 |
AI / 聊天機器人平台
| 角色 | 十六進位碼 | Tailwind |
|---|---|---|
| 主要 | #7C3AED | violet-600 |
| 次要 | #A78BFA | violet-400 |
| CTA | #06B6D4 | cyan-500 |
| 背景 | #FAF5FF | violet-50 |
| 文字 | #1E1B4B | indigo-950 |
| 邊框 | #DDD6FE | violet-200 |
美容 / 水療 / 保健
| 角色 | 十六進位碼 | Tailwind |
|---|---|---|
| 主要 | #DB2777 | pink-600 |
| 次要 | #F472B6 | pink-400 |
| CTA | #059669 | emerald-600 |
| 背景 | #FDF2F8 | pink-50 |
| 文字 | #831843 | pink-900 |
| 邊框 | #FBCFE8 | pink-200 |
字型搭配
專業 / 企業
標題： Inter | 內文： Inter
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
最適合：SaaS、儀表板、商業應用程式
優雅 / 奢華
標題： Playfair Display | 內文： Lato
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Lato:wght@400;700&display=swap');
最適合：奢侈品牌、編輯內容、高階電子商務
現代 / 科技
標題： Space Grotesk | 內文： DM Sans
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');
最適合：科技新創、金融科技、AI 產品
友善 / 活潑
標題： Poppins | 內文： Open Sans
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');
最適合：教育、消費應用程式、生活風格品牌
編輯 / 創意
標題： Fraunces | 內文： Source Sans 3
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap');
最適合：部落格、雜誌、作品集
醫療保健 / 保健
標題： Outfit | 內文： Nunito
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Nunito:wght@400;600&display=swap');
最適合：醫療保健、保健、醫療應用程式
視覺風格參考
極簡主義
- 顏色： 單色 + 1 種強調色，大量留白
- 效果： 微妙陰影、乾淨邊框、微互動
- 最適合： SaaS、生產力工具、專業應用程式
- 關鍵字： 乾淨、簡單、留白、微妙、優雅
玻璃擬態
- 顏色： 半透明圖層、模糊效果、漸層背景
- 效果： backdrop-blur、bg-white/10、柔和陰影
- 最適合： 現代儀表板、音樂應用程式、作品集
- 關鍵字： 玻璃、模糊、半透明、磨砂、分層
新擬物風格
- 顏色： 柔和粉彩、同色系陰影（深/淺）
- 效果： 內陰影、凸起元素、柔和深度
- 最適合： 控制面板、計算機、音樂播放器
- 關鍵字： 柔和、浮雕、凸起、觸感、3D 柔和
深色模式
- 顏色： 深色背景 (#0F172A)、淺色文字、強調色
- 效果： 微妙邊框、焦點發光、減少眼睛疲勞
- 最適合： 開發者工具、媒體應用程式、遊戲
- 關鍵字： 深色、夜間、低光源、對比、現代
Bento Grid
- 顏色： 基於卡片，每個區塊有不同背景
- 效果： 網格佈局、不同卡片大小、清晰層級
- 最適合： 功能展示、作品集、儀表板
- 關鍵字： 網格、卡片、模組化、有組織、展示
極光 / 漸層網格
- 顏色： 多色漸層、網格混合、鮮豔
- 效果： 動畫漸層、顏色過渡、深度
- 最適合： AI 產品、創意工具、登陸頁面
- 關鍵字： 極光、漸層、網格、多彩、流動
粗獷主義
- 顏色： 高對比、原始顏色、大膽主色
- 效果： 厚重邊框、原始字體、刻意粗糙
- 最適合： 創意機構、藝術作品集、大膽品牌
- 關鍵字： 原始、大膽、 stark、未修飾、引人注目
登陸頁面模式
以英雄區域為中心（轉換焦點）
區塊： 英雄區域 > 社會證明 > 特色 > CTA
- 主要 CTA 在摺疊以上
- 信賴徽章靠近 CTA
- 單一焦點訊息
功能優先（產品展示）
區塊： 英雄區域 > 功能網格 > 運作方式 > 定價 > CTA
- 視覺化產品展示
- 強調效益而非功能
- 定價比較表
故事驅動（品牌建立）
區塊： 英雄區域 > 問題 > 解決方案 > 歷程 > 團隊 > CTA
- 情感連結優先
- 客戶成功案例
- 品牌敘事流程
社會證明為主（信任建立）
區塊： 英雄區域 > 標誌牆 > 推薦 > 案例研究 > CTA
- 客戶標誌顯眼
- 影片推薦
- 統計數據和數字
圖表類型選擇
| 資料類型 | 最佳圖表 | 使用時機 |
|---|---|---|
| 隨時間的趨勢 | 折線圖 | 時間序列、成長、進度 |
| 比較類別 | 長條圖 | 排名、比較 |
| 部分對整體 | 甜甜圈圖 | 百分比、比例（≤5 項） |
| 相關性 | 散佈圖 | 關係、模式 |
| 地理資料 | 分區統計圖 | 區域資料、地點 |
| 漏斗/流程 | 漏斗圖 | 轉換、流程階段 |
| 績效 | 儀表/子彈圖 | KPI、目標 |
| 階層式 | 矩形式樹狀結構圖 | 嵌套類別、比例 |
圖表顏色指南：
- 主要資料： #2563EB (blue-600)
- 成功/成長： #22C55E (green-500)
- 警告/警示： #F59E0B (amber-500)
- 錯誤/衰退： #EF4444 (red-500)
- 中性： #94A3B8 (slate-400)
如需詳細圖表資料（25 種圖表類型，附帶函式庫建議、無障礙性筆記和互動性等級），請參閱 data/design-data.csv。
無障礙性要求（關鍵）
顏色對比
- 一般文字： 最小比率 4.5:1
- 大字型（18px 以上）： 最小比率 3:1
- 互動元素： 清晰的焦點狀態
觸控目標
- 最小尺寸： 觸控裝置為 44x44px
- 間距： 目標之間最小 8px
焦點狀態
/* 始終可見的焦點環 */
:focus-visible {
outline: 2px solid #2563EB;
outline-offset: 2px;
}
減少動畫
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
表單標籤
- 每個輸入都必須有關聯的標籤
- 使用
<label for="id">或 aria-label - 錯誤訊息應靠近問題欄位
常見 UX 反模式（避免）
圖示
- 否：使用表情符號作為 UI 圖示
- 是：使用 SVG 圖示（Heroicons、Lucide、Simple Icons）
懸浮狀態
- 否：會改變佈局的縮放變形
- 是：僅使用顏色/不透明度轉換
游標
- 否：在可點擊元素上使用預設游標
- 是：在所有互動元素上使用
cursor-pointer
淺色模式玻璃效果
- 否：
bg-white/10（太透明，看不見） - 是：
bg-white/80或更高不透明度
Z-Index
- 否：隨機的 z-index 值（999、9999）
- 是：定義好的層級：10（預設）、20（下拉選單）、30（模態框）、50（Toast）
動畫
- 否：緩慢動畫（>500ms）或改變佈局
- 是：150-300ms 持續時間，僅使用 transform/opacity
技術棧特定指南
HTML + Tailwind CSS
- 使用工具類別，避免自訂 CSS
- 響應式：
sm:、md:、lg:、xl:中斷點 - 深色模式：
dark:變體 - 在按鈕/連結上務必包含
cursor-pointer
React
- 對昂貴的元件使用
memo() - 偏好使用
useMemo/useCallback以獲得穩定的參考 - 避免在 render 中使用行內函數
- 使用 Suspense 進行程式碼拆分
Next.js
- 使用
next/image進行自動最佳化 - 對重量級元件實作動態導入
- 使用
next/font進行最佳化字型載入 - 儘可能利用伺服器元件
Vue 3
- 使用 Composition API 搭配
<script setup> - 使用 Pinia 進行狀態管理
- 搭配 TypeScript 使用
defineProps - 使用動態導入對路由進行延遲載入
Flutter
- 對靜態 widget 使用
const建構函式 - 對長列表使用
ListView.builder - 在
dispose()中釋放控制器 - 使用
Theme.of(context)以獲得一致的主題
SwiftUI
- 對區域狀態使用
@State，對參考類型使用@StateObject - 對於非同步操作，偏好使用
.task而非.onAppear - 對長列表使用
LazyVStack - 支援 Dynamic Type 以實現無障礙性
如需全面的技術棧特定指南（涵蓋 Flutter、SwiftUI 等共 99 條規則），請參閱 data/stack-guidelines.csv。
回應風格
設計介面時：
- 首先呈現設計系統，包含所有建議
- 顯示色票，包含十六進位碼和用途
- 包含 Google Fonts 導入程式碼，可直接使用
- 提供程式碼範例，遵循技術棧最佳實務
- 解釋設計決策及其理由
交付前檢查清單
視覺品質
- 不使用表情符號作為圖示（使用 SVG：Heroicons、Lucide、Simple Icons）
- 所有圖示來自一致的圖示集
- 品牌標誌已從官方來源驗證
- 懸浮狀態不造成佈局偏移
互動
- 所有可點擊元素都有
cursor-pointer - 懸浮狀態提供清晰的可見回饋
- 過渡效果流暢（150-300ms）
- 鍵盤導航的焦點狀態可見
淺色/深色模式
- 淺色模式文字有足夠對比度（最小 4.5:1）
- 玻璃/透明元素在淺色模式下可見
- 邊框在兩種模式下都可見
版面配置
- 浮動元素與邊緣有適當間距