ui-ux-pro-max：AI 设计智能 Skill（重点收藏）

调研日期：2026-08-27 | 数据来源：GitHub API、README.zh.md、核心 SKILL.md、skill.json、SECURITY.md、脚本静态分析
仓库：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

一句话定位

“给 AI 编程助手装上设计大脑”：一个跨平台 AI 技能，为前端/移动/桌面 UI 设计提供专业设计智能——内置 79 种可搜索 UI 风格（50 种 active）、192 套行业配色、74 种字体配对、119 条 UX 指南、25 种图表类型、22 个技术栈，并在数秒内为你的项目自动生成完整设计系统（风格 + 配色 + 字体 + 效果 + 反模式 + 交付前检查清单）。

💡 一句话价值：让 Claude Code / Cursor / Copilot / Codex 等 AI 助手从“会写代码”升级到“会做专业设计”——不再用 AI 紫渐变、不再乱配色、不再违背无障碍规范。

1. 项目背景

  • ⭐ 121721★ · 13040 fork · MIT · v2.15.0（2026-08-13 发布）· 主语言 Python（搜索脚本）+ TypeScript（CLI）
  • 创建于 2025-11-30，最后更新 2026-08-27（持续活跃，版本迭代快）
  • 作者/组织：NextLevelBuilder（nextlevelbuilder.io；同系列还有 GoClaw.sh / ClaudeKit.cc / TOSE.sh）
  • 定位：AI 设计智能 Skill 库——不是 UI 组件库，而是“设计决策的数据库 + 搜索引擎”
  • 版本节奏：semantic-release 自动化发布，dev 分支发 beta，main 发稳定版（当前 v2.15.0）
  • 官网页：https://uupm.cc | CLI npm 包：ui-ux-pro-max-cli（命令 uipro）
  • 社区规模：subscribers 499 · open issues 89 · 有 PayPal 捐赠渠道

仓库结构（651 个文件）：

目录 作用
src/ui-ux-pro-max/ 唯一真相源：数据（CSV）+ 搜索脚本 + 模板（维护这一份）
.claude/skills/ Claude Code 本地开发/测试用的 7 个技能
cli/ npm CLI 安装器（uipro init）
cli/assets/ 打包进 npm 包的技能资源
docs/ 开发文档（含“三处 data/scripts/templates 区别”）
gallery/ 展示站点（Next.js）
projects/ · preview/ · screenshots/ 示例项目与预览图

2. 环境要求

用户要求专门多一个“环境”小节。

项 要求 说明
AI 编程助手 任一：Claude Code / Cursor / Windsurf / Antigravity / GitHub Copilot / Kiro / Roo Code / Codex CLI / Qoder / Gemini CLI / Trae / OpenCode / Continue / CodeBuddy / Droid / KiloCode / Warp / Augment / CodeWhale / OpenClaw 等 22 个平台 技能会按平台自动适配激活方式
Node.js + npm 需要（装 CLI 用） npm install -g ui-ux-pro-max-cli 或 npx ui-ux-pro-max-cli
Python 3.x 需要（跑搜索脚本用） 仅标准库，不装任何第三方依赖、不发网络请求
目标技术栈 任选其一：React / Next.js / Vue / Nuxt.js / Nuxt UI / Svelte / Astro / Angular / Laravel / SwiftUI / React Native / Flutter / Jetpack Compose / HTML+Tailwind / shadcn/ui / Three.js / JavaFX / WPF / WinUI 3 / Avalonia / Uno Platform / UWP 22 个技术栈各有专属指南
（可选）高级版 品牌设计 / Logo / CIP / 幻灯片 / 自定义图标 / AI 图像素材生成 开源基础版之外的高级能力，见 uupm.cc

3. 怎么用（详细介绍）

3.1 安装（三种方式）

方式一：Claude Marketplace（Claude Code）

在 Claude Code 里直接两条命令：

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

方式二：CLI（推荐，支持全部平台）

npm install -g ui-ux-pro-max-cli
cd /path/to/your/project
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai copilot     # GitHub Copilot
uipro init --ai codex       # Codex CLI
uipro init --ai all         # 所有助手

⚠️ npm 包名是 ui-ux-pro-max-cli，安装的命令是 uipro。旧版 uipro-cli 已过时。

方式三：全局安装（所有项目通用）

uipro init --ai claude --global      # 装到 ~/.claude/skills/
uipro init --ai universal --global   # 装到 ~/.agents/skills/

3.2 日常使用（两种模式）

技能模式（自动激活）——大多数平台：

直接自然对话即可，技能在检测到 UI/UX 请求时自动激活：

为我的 SaaS 产品搭建一个落地页
创建一个医疗健康分析仪表板
设计一个带深色模式的作品集网站
为电商制作一个移动应用 UI
搭建一个带深色主题的金融科技银行应用

工作流模式（斜杠命令）——Kiro / Copilot / Roo Code / KiloCode：

/ui-ux-pro-max 为我的 SaaS 产品搭建一个落地页

3.3 工作原理（5 步）

  1. 你提出请求——任何 UI/UX 任务（构建/设计/创建/实现/审查/修复/改进）
  2. 生成设计系统——AI 用推理引擎自动生成完整设计系统
  3. 智能推荐——根据产品类型和需求，找到最佳匹配的风格、配色、字体
  4. 代码生成——用正确的颜色、字体、间距和最佳实践实现 UI
  5. 交付前检查——针对常见 UI/UX 反模式进行验证

3.4 设计系统生成器（v2.0 旗舰功能）

底层是 5 个并行多域搜索 + 推理引擎：

搜索域 数据量 作用
产品类型匹配 192 个分类 匹配产品 → UI 分类规则
风格推荐 79 种可搜索（50 active） BM25 排序选风格
配色方案 192 套 与 192 种产品类型 1:1 对齐的行业专属调色板
落地页模式 34 种 落地页结构模式
字体配对 74 种组合 含 Google Fonts 导入

推理引擎应用 192 条行业特定推理规则（科技/SaaS、金融、医疗、电商、服务、创意、生活方式、新兴技术等），每条规则含推荐模式、风格优先级、配色氛围、字体氛围、关键效果、反模式。

命令行直接调用设计系统生成器：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react

持久化设计系统（主配置 + 页面覆盖）：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"

生成 design-system/MASTER.md（全局真相源）+ design-system/pages/<page>.md（页面特定覆盖）。构建具体页面时先查页面文件，有则覆盖主配置，无则只用主配置。

3.5 完整能力清单

  • 79 种可搜索 UI 风格（50 active）：玻璃拟态、粘土拟态、极简主义、粗野主义、新拟态、便当盒网格、深色模式、AI 原生 UI 等；另有 29 种 supplemental + 9 种 deprecated
  • 192 套配色方案：与 192 种产品类型 1:1 对齐的行业专属调色板
  • 74 种字体配对：精选字体组合，含 Google Fonts 导入
  • 25 种图表类型：仪表板和分析场景推荐
  • 22 种技术栈：React / Next.js / Vue / Nuxt.js / Svelte / Astro / SwiftUI / React Native / Flutter / HTML+Tailwind / shadcn/ui / Jetpack Compose / Angular / Laravel / JavaFX / WPF / WinUI 3 / UWP / Avalonia / Uno Platform / Three.js 等
  • 119 条 UX 指南：最佳实践、反模式、无障碍规则、弹性文字布局、紧凑标签与可取消交互
  • 192 条推理规则（v2.0）：行业特定设计系统生成
  • 105 条精选图标指导 + 1512-icon Phosphor manifest 验证
  • 17 种 GSAP 动效预设
  • 无障碍核心检查：对比度 4.5:1、键盘导航、Aria 标签、focus 可见、reduced-motion 尊重等

3.6 基础版 vs 高级版

🟢 基础版（本仓库，开源） 🟡 高级版（付费，uupm.cc）
UI/UX 智能 79 风格 / 192 产品类型 / 配色 / 字体配对 全部基础能力 +
品牌设计 — 品牌标识生成、Logo、企业识别系统（CIP）、横幅、幻灯片、自定义图标
素材生成 — 深度集成 AI 图像生成，真实视觉素材
架构 核心设计智能 更全面的设计令牌架构，面向大规模团队
支持 社区 优先技术支持

4. 价值

  • 设计专业度跃升：让 AI 助手告别“AI 紫渐变 + 默认蓝色”，产出有风格、有配色逻辑、有字体系统的专业 UI
  • 跨平台通用：一个 Skill 适配 22 个 AI 编程助手，买一次设计智能到处用
  • 本地离线可用：核心搜索脚本纯 Python 标准库，无网络依赖，数据全在本地 CSV
  • 可搜索可验证：BM25 搜索引擎 + 数据溯源（provenance）+ 测试，输出有据可依
  • 交付前质检：内置 119 条 UX 指南 + 反模式检查，减少返工
  • 开源免费：基础版 MIT 全开源，个人开发者直接用

5. 能力边界

  • 不是 UI 组件库：它给“设计决策”，不直接提供 React/Tailwind 组件（那是 shadcn/ui 等的事）
  • 需要配合 AI 助手：脱离 Claude Code / Cursor 等无法独立使用
  • 高级功能付费：品牌设计 / Logo / CIP / 幻灯片 / AI 图像素材是高级版能力
  • 风格推荐是“建议”：79 种风格/192 配色的推荐基于数据库，最终仍需人工审美判断
  • 升级提醒：旧版 uipro-cli 已过时；仓库 ZIP 不能直接上传 Claude.ai（超 200 文件限制，且含符号链接曾有安装问题）
  • 脚本目录路径敏感：搜索脚本在技能自身目录，需用完整路径调用，不能假设工作目录

6. 对比同类

方案 形态 优点 缺点
ui-ux-pro-max（本页） AI 设计智能 Skill 数据量大（79 风格/192 配色/119 UX 指南）、跨 22 平台、本地离线、可搜索 是“设计决策库”非组件库；高级功能付费
shadcn/ui React 组件库 高质量组件 + Tailwind 只管组件不管设计决策
Tailwind CSS 样式框架 原子化 CSS 不给配色/字体/风格推荐
Figma AI / 设计工具 设计软件 可视化设计 不在代码编辑器内
普通提示词让 AI 写 UI 无 Skill 简单 无设计规范，容易出“AI 味”页面
v0.dev / Lovable 等 生成式 UI 平台 一键出页面 偏产品化，不可嵌入你的 AI 助手

7. 安全风险（重点分析）

基于脚本静态分析 + SECURITY.md 评估。核心技能本身安全，但有几点要留意。

  • 核心搜索脚本（低风险）✅：search.py（核心 172 行）纯 Python 标准库，不发网络请求、不执行外部命令——静态扫描无 subprocess/eval/网络调用。数据全为本地 CSV。
  • CLI 安装器（中低风险）：uipro init 会向你的项目目录 / 全局目录写入技能文件（.claude/skills/、.cursor/skills/ 等），uipro uninstall 会删除目录。需确认安装来源正规（官方 npm 包 ui-ux-pro-max-cli）。
  • 附加技能脚本（中风险，需留意）：核心之外还有 brand / design / design-system / slides / ui-styling / banner-design 等附加技能：
    • design-system/scripts/fetch-background.py：会从 Pexels 拉取真实图片（硬编码 URL，无 API key）——有网络请求
    • ui-styling/scripts/shadcn_add.py：会执行 npx shadcn@<版本> add <组件>——npx 会从 npm 注册表拉取并运行代码（依赖 npm 生态供应链）
    • brand/scripts/extract-colors.cjs、design/scripts/logo/generate.py、cip/render-html.py：品牌/Logo 生成类，涉及文件读写与生成，建议只在信任项目内运行
  • 供应链风险（中低）：npm 包 ui-ux-pro-max-cli（依赖 chalk / commander / ora / prompts，均为知名库）+ 发布流水线；官方 SECURITY.md 声明只支持最新版本安全修复，建议保持 uipro update 更新
  • AI 助手执行面：技能本质是给 AI 的提示/数据，最终由你的 AI 助手执行代码——风险主要来自“AI 按照技能建议自动跑 shadcn/npx 等命令”，建议审查 AI 要执行的命令后再放行
  • 漏洞报告机制 ✅：SECURITY.md 提供 GitHub 私有漏洞上报（5 个工作日确认，14 天修复时限）；核心设计输出（颜色/字体/UI 建议）不在安全范围内

8. 社区反馈 / 可靠性

  • 超高热度的 AI 设计 Skill：⭐12.2 万，GitHub 上极受欢迎的 AI 技能项目之一；持续高频更新（v2.15.0，2026-08-13）
  • 工程严谨：数据溯源（provenance）、1,934 个已批准 Google Fonts 的 catalog、离线 CI 校验、snapshot hash、semantic-release 自动化发布
  • 有官方支持渠道：PayPal 捐赠、官网 uupm.cc、GitHub issues（89 open）
  • ⚠️ 但注意：Star 多是热度，不等于“开箱即用”——它需要配合 AI 助手使用，且高级功能要付费；实际效果取决于你的 AI 助手对 Skill 的遵循程度

refer

说明：本页为调研整理笔记。数据基于 2026-08-27 时的公开信息（版本 v2.15.0）。技能安装与用法以官方 README 为准，高级版能力以 uupm.cc 为准。