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 为准。