nextlevelbuilder/ui-ux-pro-max-skill · 上手攻略

  • 仓库：nextlevelbuilder/ui-ux-pro-max-skill
  • 链接：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
  • 分类：agent · tool · trending
  • 作者：Tom
  • 更新：2026-07-04

这是什么

UI UX Pro Max Skill 是一个面向 AI coding agent 的设计智能 Skill，核心功能是 Design System Generator（设计系统生成器）——根据你描述的项目类型，自动推理并输出完整的设计系统：页面模式、配色、字体、动效、行业反模式、交付检查清单，全部结构化输出。

它不是一次生成一个按钮样式，而是根据"我要做一个美容 SPA 的 landing page"这类高层需求，推断出完整的行业匹配设计系统。

v2.0（当前版本）内置 161 个行业推理规则、67 种 UI 风格、161 套配色方案、57 种字体组合，支持 22 种前端技术栈。

Stars 10 万（截至 2026-07-04），MIT 许可证，生产可用。

解决什么问题

AI coding agent 生成 UI 的两个常见困境：

  1. 冷启动问题：你需要先告诉 AI"我要什么风格"，但往往自己也不知道该选什么——选错了风格导致后续返工。
  2. 缺乏行业上下文：通用设计规则（"按钮要圆角"）不够用，医疗产品不能用金融风，奢侈品不能用 Y2K——这个 Skill 解决了这个 gap。

它的解法：输入产品类型 → BM25 检索匹配行业规则 → 结构化输出完整设计系统 → 喂给 AI coding agent 执行。

快速安装

方式一：Claude Code Marketplace（Claude Code 用户）

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

方式二：npm CLI（推荐，支持所有主流 AI 编程工具）

# 全局安装 CLI
npm install -g ui-ux-pro-max-cli

# 进入项目目录
cd /path/to/your/project

# 为指定 AI 助手安装 skill
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai codex       # Codex CLI
uipro init --ai gemini      # Gemini CLI
uipro init --ai all         # 所有支持的助手

支持列表：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 是必需的运行依赖。如未安装： ```bash

macOS

brew install python3

Ubuntu/Debian

sudo apt update && sudo apt install python3

Windows

winget install Python.Python.3.12 ```

全局安装（所有项目共享）

uipro init --ai claude --global   # 安装到 ~/.claude/skills/
uipro init --ai cursor --global   # 安装到 ~/.cursor/skills/

其他 CLI 命令

uipro versions              # 列出可用版本
uipro update                # 从已安装 CLI 包刷新 skill 文件
uipro init --offline        # 离线模式（使用绑定的模板）
uipro uninstall             # 卸载（自动检测平台）
uipro uninstall --ai claude  # 卸载特定平台

核心用法

使用流程

Skill 激活后，在对话中自然语言描述你的项目需求即可：

Build a landing page for my beauty spa

Skill 会自动激活，调用 Design System Generator 推理并输出完整设计系统。

v2.0 Design System Generator 输出示例

针对"美容 SPA"请求，输出结构如下：

PATTERN: Hero-Centric + Social Proof
  转换策略: 情感驱动 + 信任元素
  CTA: 折叠上方 + 评价后重复
  区块: Hero / Services / Testimonials / Booking / Contact

STYLE: Soft UI Evolution
  关键词: 柔和阴影、微深度、平静、高级感、有机形态
  适合: 美容、奢侈品生活方式品牌

COLORS:
  Primary:   #E8B4B8 (柔粉)
  Secondary: #A8D5BA (鼠尾草绿)
  CTA:       #D4AF37 (金色)
  Background:#FFF5F5 (暖白)
  Text:      #2D3436 (炭灰)

TYPOGRAPHY: Cormorant Garamond / Montserrat

KEY EFFECTS: 柔阴影 + 平滑过渡(200-300ms) + 柔和悬停

AVOID: 亮霓虹色 / 生硬动画 / 暗色模式 / AI紫粉渐变

PRE-DELIVERY CHECKLIST:
  [ ] 不用 emoji 作图标（用 SVG: Heroicons/Lucide）
  [ ] 所有可点击元素 cursor-pointer
  [ ] 悬停状态平滑过渡 150-300ms
  [ ] 文字对比度 ≥ 4.5:1
  ...

完整功能清单

  • 67 种 UI 风格：Glassmorphism、Claymorphism、Neumorphism、Bento Grid、Brutalism、Cyberpunk UI、VisionOS Spatial UI 等
  • 161 套配色方案：与 161 种产品类型一一对应
  • 57 种字体组合：含 Google Fonts 导入链接
  • 25 种图表类型：仪表盘 / 分析类 UI 推荐
  • 22 种技术栈指南：React、Next.js、Astro、Vue、Nuxt、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind、shadcn/ui、Jetpack Compose、Angular、Laravel、Three.js 等
  • 99 条 UX 指南：最佳实践 + 反模式 + 无障碍规则
  • 161 条行业推理规则：覆盖 Tech & SaaS、金融、医疗、电商、服务、创意、生活方式、新兴科技 8 大类

典型命令

uipro init --ai claude                    # 为 Claude Code 安装
uipro init --ai cursor --global           # Cursor 全局安装
uipro init --offline                      # 离线模式

典型适用场景

适合： - 新项目启动阶段，直接问 Skill 生成设计系统再让 coding agent 实现 - 不确定该用什么 UI 风格的开发者（行业规则 + BM25 帮你匹配） - 需要快速生成多行业设计规范的团队（医疗、金融、电商各有不同规则） - 想让 coding agent 输出的 UI 更有行业针对性的项目经理

不太适合： - 已有成熟设计系统的团队（可能和现有规范冲突） - 需要 Figma/Sketch 原型输出的设计师（Skill 输出的是规则文本，不是设计文件） - 完全不需要 AI 辅助设计决策的专业设计师

坑与注意

  1. Premium 版是付费墙：核心开源部分覆盖设计系统文本规则生成；品牌识别、Logo 设计、定制图标、Enterprise Token Architecture 等属于 Premium 功能（见 uupm.cc）。
  2. Python 3 依赖：搜索推理脚本需要 Python 运行环境，纯 Node.js 环境不可用。
  3. 离线模式有限制：--offline 使用绑定的模板，无法享受规则库的实时更新。
  4. 设计风格偏好因人而异：Skill 输出的是结构化建议，设计师或甲方未必认可，仍需人工 review。
  5. npm 包名曾有变更：旧包 uipro-cli 已过时，应使用新包 ui-ux-pro-max-cli（即 uipro 命令）。

与同类对比

UI UX Pro Max Skill Taste-Skill Claude Design Figma Dev Mode
形态 SKILL.md + CLI SKILL.md 内置（Claude） Figma 插件
核心能力 行业设计系统生成 抗 AI 味刻度盘 实时设计建议 设计稿转代码
行业规则 161 个行业 通用 无 无
输出内容 配色/字体/模式/反模式 设计规则 + dials 实时建议 代码片段
技术栈覆盖 22 种 无 无 有限
价格 开源免费 / Premium 付费 免费 需 Claude 订阅 Figma 订阅

一句话推荐结论

如果你用 AI coding agent 做产品开发，UI UX Pro Max Skill 是目前行业覆盖最广、设计系统输出最结构化的 Skill——输入产品类型，输出完整设计规范，161 个行业规则让 AI 不再乱选风格。

来源：GitHub README（v2.0）、raw.githubusercontent.com 全文、官方 npm 包