OpenSkillIndex← back to search
claude-code

Awesome-omni-skill ui-ux-pro-max

UI/UX 設計智能助手。50 種風格、21 套配色、50 組字體搭配、20 種圖表、8 種技術棧（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind）。動作：規劃、建構、創建、設計、實作、審查、修復、改進、優化、增強、重構、檢查 UI/UX 程式碼。專案：網站、登陸頁、儀表板、管理面板、電商、SaaS、作品集、部落格、行動應用程式、.html、.tsx、.vue、.svelte。元素：按鈕、彈窗、導航列、側邊欄、卡片、表格、表單、圖表。風格：玻璃擬態、黏土擬態、極簡主義、野獸派、新擬態、便當格、深色模式、響應式、擬物設計、扁平設計。主題：配色方案、無障礙設計、動畫、佈局、排版、字體搭配、間距、懸停效果、陰影、漸層。

install
source · Clone the upstream repo
git clone https://github.com/diegosouzapw/awesome-omni-skill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/design/ui-ux-pro-max-jimmy1987s" ~/.claude/skills/diegosouzapw-awesome-omni-skill-ui-ux-pro-max-4ab800 && rm -rf "$T"
manifest: skills/design/ui-ux-pro-max-jimmy1987s/SKILL.md
source content

UI/UX Pro Max - 設計智能

可搜尋的 UI 風格、配色方案、字體搭配、圖表類型、產品建議、UX 指南和技術棧最佳實踐資料庫。

先決條件

檢查是否已安裝 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：搜尋相關領域

使用 

search.py
多次搜尋以收集完整資訊。持續搜尋直到有足夠的上下文。

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<關鍵字>" --domain <領域> [-n <最大結果數>]

建議搜尋順序：

  1. Product - 取得產品類型的風格建議
  2. Style - 取得詳細風格指南（顏色、效果、框架）
  3. Typography - 取得字體搭配與 Google Fonts 匯入
  4. Color - 取得配色方案（主色、次色、CTA、背景、文字、邊框）
  5. Landing - 取得頁面結構（如果是登陸頁）
  6. Chart - 取得圖表建議（如果是儀表板/分析）
  7. UX - 取得最佳實踐和反模式
  8. Stack - 取得技術棧專屬指南（預設：html-tailwind）

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

如果使用者未指定技術棧，預設為 

html-tailwind
。

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

可用技術棧：

html-tailwind
、
react
、
nextjs
、
vue
、
svelte
、
swiftui
、
react-native
、
flutter

搜尋參考

可用領域

領域用途範例關鍵字
product
產品類型建議SaaS、電商、作品集、醫療、美容、服務
style
UI 風格、顏色、效果玻璃擬態、極簡主義、深色模式、野獸派
typography
字體搭配、Google Fonts優雅、活潑、專業、現代
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
prompt
AI 提示詞、CSS 關鍵字（風格名稱）

可用技術棧

技術棧重點
html-tailwind
Tailwind 工具類、響應式、無障礙（預設）
react
狀態、Hooks、效能、模式
nextjs
SSR、路由、圖片、API 路由
vue
Composition API、Pinia、Vue Router
svelte
Runes、stores、SvelteKit
swiftui
Views、State、Navigation、Animation
react-native
Components、Navigation、Lists
flutter
Widgets、State、Layout、Theming

範例工作流程

使用者請求： "做一個專業護膚服務的登陸頁"

AI 應該：

# 1. 搜尋產品類型
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

# 2. 搜尋風格（根據產業：美容、優雅）
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

# 3. 搜尋排版
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

# 4. 搜尋配色方案
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

# 5. 搜尋登陸頁結構
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

# 6. 搜尋 UX 指南
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux

# 7. 搜尋技術棧指南（預設：html-tailwind）
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

然後： 綜合所有搜尋結果並實作設計。

更好結果的技巧

  1. 關鍵字要具體 - "healthcare SaaS dashboard" > "app"
  2. 多次搜尋 - 不同關鍵字會揭示不同見解
  3. 組合領域 - Style + Typography + Color = 完整設計系統
  4. 總是檢查 UX - 搜尋 "animation"、"z-index"、"accessibility" 以找出常見問題
  5. 使用 stack 參數 - 取得實作專屬的最佳實踐
  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）
  • 玻璃/透明元素在淺色模式可見
  • 兩種模式邊框都可見
  • 交付前測試兩種模式

版面

  • 浮動元素與邊緣有適當間距
  • 沒有內容隱藏在固定導航列後面
  • 320px、768px、1024px、1440px 響應式
  • 行動裝置沒有水平捲軸

無障礙

  • 所有圖片有 alt 文字
  • 表單輸入有標籤
  • 顏色不是唯一指示器
  • 遵循 
    prefers-reduced-motion