UI UX Pro Max 是什麼、怎麼安裝使用：給 Claude Code / Cursor / Codex 加一套 UI 設計資料庫的 Skill

本文根據 nextlevelbuilder/ui-ux-pro-max-skill 倉庫 README 與 Claude Code 官方文檔整理，資料核對於 2026-10-10。倉庫更新頻繁，條目數量以倉庫 README 為準。

是什麼

UI UX Pro Max 是一個面向 AI 編程助手的設計類 Skill。讓 AI 直接寫頁面，常見的結果是配色、字體、佈局千篇一律；這個技能的思路是給 AI 配一份可以檢索的設計資料庫，讓它在動手寫代碼之前，先查「這類產品通常用什麼風格、什麼配色、什麼字體」，生成一份設計系統，再照着實現。

資料庫是一批 CSV 數據加一個 Python 檢索腳本（README 說用的是 BM25 檢索，只依賴標準庫、不聯網）。截至 2026-10-10，GitHub 顯示該倉庫約 13.4 萬 Star、1.4 萬 Fork，最近一次推送在 2026-10-09，是設計類 Skill 裏 Star 數最高的一個。

包含哪些 Skill

倉庫的核心是一個名為 ui-ux-pro-max 的技能，README 列出的資料規模（v2.0 之後）：

• 介面風格：79 種可檢索風格，其中 50 種為常規推薦（玻璃擬態、極簡、新擬態、Bento Grid、深色模式等）；
• 配色方案：192 套，按產品類型一一對應；
• 字體搭配：74 組，附 Google Fonts 引入方式；
• 圖表類型：25 種，用於儀表盤和數據頁面；
• UX 規範：119 條，含無障礙、長文本換行、標籤截斷等常見反例；
• 行業推理規則：192 條，用來根據「美容院官網」「金融 App」這類描述推導出整套設計系統；
• 技術棧指引：22 種，包括 React、Next.js、Vue、Svelte、SwiftUI、Flutter、Jetpack Compose、HTML + Tailwind 等。

README 還說明倉庫是基礎版，作者另有付費的 Premium 版（品牌識別、Logo、演示文稿等擴展技能），詳情在官網 uupm.cc。

怎麼安裝

Claude Code 插件市場（README 原文兩條命令）：

text
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

命令行安裝器（README 推薦，支持多種工具）：

bash
npm install -g ui-ux-pro-max-cli
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai codex       # Codex CLI
uipro init --ai gemini      # Gemini CLI

--ai 後面還可以換成 windsurf、copilot、kiro、trae、opencode 等，--ai all 一次裝全部；加 --global 裝到用戶目錄（如 uipro init --ai claude --global 裝到 ~/.claude/skills/）。不想全局裝 npm 包，可以用 npx ui-ux-pro-max-cli init --ai claude。

前置條件：本機要有 Python 3，檢索腳本靠它運行。

claude.ai 網頁版：README 明確說不要上載整個倉庫的 ZIP（文件數超過上載上限），項目目前也沒有提供單獨的上載包，所以網頁版暫時沒有官方安裝方式。

怎麼用

• 自動觸發：在 Claude Code、Cursor、Codex CLI 等工具裏直接描述需求即可，例如 Build a landing page for my SaaS product，技能會在識別到 UI/UX 任務時自動加載。中文描述同樣可以，最好說明產品類型和技術棧，不說技術棧時預設按 HTML + Tailwind 出。
• 斜槓命令：Kiro、GitHub Copilot、Roo Code、KiloCode 裏用 /ui-ux-pro-max 加需求來調用。
• 直接跑腳本：想先看設計系統再決定，可以運行 README 給的命令，例如 python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown；加 --persist -p "MyApp"（引號裏是項目名）會把結果寫進 design-system/ 目錄，後續會話可以繼續沿用。

適合誰 / 不適合誰

適合：

• 用 AI 寫前端、但自己沒有設計背景的開發者；
• 需要快速給不同行業的產品定一個「不出錯」的視覺方向的獨立開發者和小團隊；
• 想讓多個頁面保持同一套配色和字體規則的項目。

不適合：

• 已經有成熟設計規範和設計師把關的團隊——資料庫給的是通用推薦，不會替你遵守公司品牌規範；
• 只用 claude.ai 網頁版的用戶；
• 期待它直接產出設計稿或圖片素材的人——基礎版輸出的是設計規則和代碼。

注意事項

• 許可證：倉庫 LICENSE 為 MIT。Premium 版是另外的付費產品，不在這個倉庫裏。
• 維護狀態：持續更新，最近一次推送 2026-10-09。README 提醒舊的 uipro-cli 包已經過時，要裝 ui-ux-pro-max-cli。
• 安全提醒：技能會在本機運行 Python 腳本並可往項目裏寫 design-system/ 文件。README 稱腳本不安裝任何東西、不發起網絡請求，但安裝前仍建議自己看一遍 SKILL.md 和 scripts/；通過 npm 全局安裝 CLI 也等於執行第三方代碼，留意包名別裝錯。
• 兼容性：README 提到 v2.5.1 之前的版本在插件市場安裝時可能因符號連結報錯，遇到就改用 CLI 安裝；Trae 需要先切到 SOLO 模式。
• 資料庫給出的是經驗性推薦，不等於設計評審；無障礙和品牌一致性仍要人工檢查。