UI UX Pro Max Skill
一個提供設計智慧的 AI 技能，用於跨多個平台和框架建構專業 UI/UX。
這是什麼？
UI UX Pro Max 是一個 AI 技能（上下文注入層），旨在載入到 AI 編碼助手（如 Claude Code、Cursor、Windsurf、GitHub Copilot 等 15+ 種）中。安裝後，它會自動增強 AI 生成專業、生產級 UI/UX 程式碼的能力——無需開發者每次手動指定設計規則。
其核心是一個結構化的知識庫，結合一個基於 Python 的推理引擎，該引擎會分析使用者請求，並在編寫任何程式碼之前生成一個完整、量身定制的 設計系統（風格 + 顏色 + 排版 + 版面配置模式 + 反模式）。
核心功能
1. 智慧設計系統生成器 (v2.0 旗艦版)
推理引擎在以下領域執行多領域並行搜尋：
- 161 種產品/行業類別 → 匹配版面配置模式
- 67 種 UI 風格 → 按 BM25 分數排名
- 161 種調色盤 → 行業適配的選擇
- 57 種字體配對 → 性格匹配的排版
- 24 種登陸頁面模式 → 轉化優化的結構
輸出是一個完全結構化的設計系統，包括建議的模式、風格、顏色、排版、關鍵效果、要避免的反模式以及預交付清單。
2. 67 種 UI 風格
涵蓋了現代和利基設計美學的整個光譜，分為三個類別：
- 49 種通用風格：玻璃擬態、擬物化、粗野主義、黏土擬態、Bento Grid、深色模式、AI 原生 UI、賽博朋克、蒸汽波、像素藝術、空間 UI (VisionOS) 等。
- 8 種登陸頁面風格：以 Hero 為中心、轉化優化、功能豐富展示、故事驅動等。
- 10 種 BI/分析儀表板風格：數據密集、執行級、實時監控、金融、銷售情報等。
3. 161 條行業特定推理規則
規則涵蓋垂直領域，包括：
- 技術與 SaaS、金融科技、醫療保健、電子商務、創意機構、生活方式應用、新興技術（Web3、空間計算、量子計算）等。
每條規則都編碼了：建議的版面配置模式、風格優先級、顏色情緒、排版情緒、關鍵動畫/效果以及明確的反模式（例如，「銀行應用程式禁止使用 AI 紫色/粉色漸層」）。
4. 99 條 UX 指南
最佳實踐、無障礙標準 (WCAG AA) 和涵蓋響應式設計、懸停狀態、焦點指示器、減少動態支援和對比度比例的反模式。
5. 多堆疊支援 (15 種技術堆疊)
React、Next.js、Astro、Vue、Nuxt.js、Nuxt UI、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind、shadcn/ui、Jetpack Compose、Angular、Laravel。
6. 設計系統持久化（主版 + 覆蓋模式）
生成並持久化一個層次化的設計系統到 design-system/MASTER.md 以及 design-system/pages/ 下的每個頁面覆蓋檔案。這確保了跨會話和同一專案的頁面之間的一致設計語言。
如何運作
使用者請求
│
▼
多領域搜尋 (5 個並行搜尋)
│
▼
推理引擎 (BM25 排名 + JSON 條件規則)
│
▼
完整的設計系統輸出
(模式 + 風格 + 顏色 + 排版 + 效果 + 反模式 + 清單)
│
▼
AI 產生具有完整設計上下文的程式碼
安裝
透過 Claude Marketplace (Claude Code)
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
透過 CLI (推薦 — 支援所有 AI 助手)
npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai claude # Claude Code
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurf
uipro init --ai copilot # GitHub Copilot
uipro init --ai all # 所有支援的助手
支援的 AI 助手: Claude Code、Cursor、Windsurf、Antigravity、GitHub Copilot、Kiro、Codex CLI、Qoder、Roo Code、Gemini CLI、Trae、OpenCode、Continue、CodeBuddy、Droid (Factory)、KiloCode、Warp、Augment。
先決條件: Python 3.x (搜尋/推理腳本需要)。
用法
安裝後，當您提出 UI/UX 要求時，該技能會自動啟動：
為我的 SaaS 產品建構一個登陸頁面
為醫療保健分析建立一個儀表板
設計一個帶有深色模式的個人作品集網站
為電子商務設計一個行動應用程式 UI
建構一個帶有深色主題的金融科技銀行應用程式
對於使用工作流程模式的平台（Kiro、Copilot、Roo Code）：
/ui-ux-pro-max 為我的 SaaS 產品建構一個登陸頁面
專案結構
src/ui-ux-pro-max/
├── data/*.csv # 知識庫 (風格、顏色、字體、規則)
├── scripts/*.py # 搜尋引擎與設計系統推理
└── templates/ # 特定於平台的配置模板
cli/ # CLI 安裝程式 (從模板生成檔案)
.claude/skills/ # Claude Code 的本地安裝路徑
docs/ # 文件
preview/ # UI 預覽資產
為何重要
大多數 AI 編碼助手缺乏持久、結構化的設計知識。沒有像這樣的注入技能，它們會預設為通用、不一致或「AI 外觀」的 UI 模式。UI UX Pro Max 透過以下方式解決此問題：
- 在程式碼生成開始前 標準化設計決策。
- 編碼行業特定的反模式 以防止常見錯誤。
- 透過單一 CLI 安裝程式 跨所有主要 AI 編碼平台工作。
- 跨會話持久化設計系統 以用於多頁專案。
它有效地充當嵌入您 AI 助手中的高級 UI/UX 設計師。