快速判断

一句判断

适合把“设计知识检索 + 前端 UI 实现 + 品牌资产”合并到一个 Agent 工作流。

面向 Web、移动端和品牌资产的 UI/UX 设计知识库与多 skill 工具包。

读原文顺序

先读 README 开头，判断仓库解决的问题。
再看能力结构或包含内容，确认是否需要整体安装。
最后看安装、许可证和维护说明。

需要为网站、dashboard、SaaS、移动 app 或组件设计建立 UI/UX 方向时。

需要快速查询风格、配色、字体、产品类型、UX 准则、图表或技术栈建议时。

适合把“设计知识检索 + 前端 UI 实现 + 品牌资产”合并到一个 Agent 工作流；仓库内容较重，建议在明确设计任务时使用，避免所有前端小改都套用。

策展备注： 适合把“设计知识检索 + 前端 UI 实现 + 品牌资产”合并到一个 Agent 工作流；仓库内容较重，建议在明确设计任务时使用，避免所有前端小改都套用。

UI UX Pro Max

<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.zh.md">🇨🇳 简体中文</a> | <a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.md">🇺🇸 English</a>

一个为跨多平台和框架构建专业 UI/UX 提供设计智能的 AI 技能。

如果这个项目对你有帮助，请考虑支持： <a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-捐赠-00457C?style=for-the-badge&logo=paypal&logoColor=white" alt="PayPal 捐赠"></a>

其他项目 <a href="https://nextlevelbuilder.io">NextLevelBuilder.io</a> | <a href="https://goclaw.sh">GoClaw.sh</a> | <a href="https://claudekit.cc">ClaudeKit.cc</a> | <a href="https://tose.sh">TOSE.sh</a>

v2.0 新特性

智能设计系统生成

v2.0 的旗舰特性是设计系统生成器——一个 AI 驱动的推理引擎，可在数秒内分析你的项目需求并生成完整、定制化的设计系统。

+----------------------------------------------------------------------------------------+
|  目标：Serenity Spa - 推荐设计系统                                                      |
+----------------------------------------------------------------------------------------+
|                                                                                        |
|  模式：以 Hero 为中心 + 社交证明                                                         |
|     转化：情感驱动，带信任元素                                                          |
|     CTA：首屏展示，客户评价后重复                                                         |
|     版块：                                                                              |
|       1. 主视觉区 (Hero)                                                                |
|       2. 服务                                                                           |
|       3. 客户评价                                                                        |
|       4. 预约                                                                           |
|       5. 联系我们                                                                        |
|                                                                                        |
|  风格：柔和 UI 进化版 (Soft UI Evolution)                                              |
|     关键词：柔和阴影、微妙深度、 calming、高级质感、有机形状                             |
|     适用：健康、美容、生活方式品牌、高端服务                                             |
|     性能：优秀 | 无障碍：WCAG AA                                                        |
|                                                                                        |
|  配色：                                                                                |
|     主色：    #E8B4B8 (柔和粉)                                                         |
|     辅色：    #A8D5BA (鼠尾草绿)                                                       |
|     CTA：     #D4AF37 (金色)                                                           |
|     背景：    #FFF5F5 (暖白)                                                           |
|     文字：    #2D3436 (炭灰)                                                           |
|     备注： calming 配色，金色点缀增添奢华感                                            |
|                                                                                        |
|  字体：Cormorant Garamond / Montserrat                                                 |
|     调性：优雅、 calming、精致                                                          |
|     适用：奢侈品牌、健康、美容、编辑类                                                  |
|     Google Fonts: https://fonts.google.com/share?selection.family=...                   |
|                                                                                        |
|  关键效果：                                                                            |
|     柔和阴影 + 平滑过渡 (200-300ms) + 细腻悬停状态                                      |
|                                                                                        |
|  避免 (反模式)：                                                                       |
|     亮霓虹色 + 生硬动画 + 深色模式 + AI 紫/粉渐变 (银行业)                              |
|                                                                                        |
|  交付前检查清单：                                                                      |
|     [ ] 不使用表情符号作为图标 (使用 SVG: Heroicons/Lucide)                            |
|     [ ] 所有可点击元素有 cursor-pointer                                                 |
|     [ ] 悬停状态带平滑过渡 (150-300ms)                                                 |
|     [ ] 浅色模式：文字对比度至少 4.5:1                                                |
|     [ ] Focus 状态对键盘导航可见                                                       |
|     [ ] 尊重 prefers-reduced-motion 偏好                                             |
|     [ ] 响应式：375px、768px、1024px、1440px                                          |
|                                                                                        |
+----------------------------------------------------------------------------------------+

设计系统生成的工作原理

┌─────────────────────────────────────────────────────────────────┐
│  1. 用户请求                                                     │
│     "为我的美容院搭建落地页"                                      │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  2. 多域搜索 (5 个并行搜索)                                       │
│     • 产品类型匹配 (161 个分类)                                  │
│     • 风格推荐 (67 种风格)                                        │
│     • 配色方案选择 (161 套配色)                                   │
│     • 落地页模式 (24 种模式)                                      │
│     • 字体配对 (57 种组合)                                        │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  3. 推理引擎                                                     │
│     • 匹配产品 → UI 分类规则                                      │
│     • 应用风格优先级 (BM25 排序)                                  │
│     • 过滤行业反模式                                              │
│     • 处理决策规则 (JSON 条件)                                    │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  4. 完整设计系统输出                                             │
│     模式 + 风格 + 配色 + 字体 + 效果                              │
│     + 避免的反模式 + 交付前检查清单                               │
└─────────────────────────────────────────────────────────────────┘

161 条行业特定推理规则

推理引擎包含针对以下领域的专门规则：

分类	示例
科技与 SaaS	SaaS、微 SaaS、B2B 服务、开发者工具 / IDE、AI/聊天机器人平台、网络安全平台
金融	金融科技/加密货币、银行、保险、个人财务追踪、发票与账单工具
医疗健康	医疗诊所、药房、牙科、兽医、心理健康、用药提醒
电子商务	综合电商、奢侈品、二手交易平台 (P2P)、订阅盒、外卖配送
服务	美容/水疗、餐饮、酒店、法律、家政服务、预约与预订
创意	作品集、代理公司、摄影、游戏、音乐流媒体、照片/视频编辑器
生活方式	习惯追踪、食谱与烹饪、冥想、天气、日记、情绪追踪
新兴技术	Web3/NFT、空间计算、量子计算、自动驾驶无人机编队

每条规则包括：

推荐模式 - 落地页结构
风格优先级 - 最匹配的 UI 风格
配色氛围 - 适合行业的调色板
字体氛围 - 匹配品牌个性的字体
关键效果 - 动画与交互
反模式 - 不要做哪些（例如银行业的"AI 紫/粉渐变"）

功能特性

67 种 UI 风格 - 玻璃拟态、粘土拟态、极简主义、粗野主义、新拟态、便当盒网格、深色模式、AI 原生 UI 等
161 套配色方案 - 与 161 种产品类型 1:1 对齐的行业专属调色板
57 种字体配对 - 精选字体组合，含 Google Fonts 导入
25 种图表类型 - 适用于仪表板和分析场景的推荐
22 种技术栈 - React、Next.js、Astro、Vue、Nuxt.js、Nuxt UI、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind、shadcn/ui、Jetpack Compose、Angular、Laravel、Three.js、JavaFX、WPF、WinUI 3、UWP、Avalonia、Uno Platform
99 条 UX 指南 - 最佳实践、反模式与无障碍规则
161 条推理规则 - 行业特定的设计系统生成（v2.0 新增）

可用风格 (67)

#	风格	最适用于
1	极简主义 & 瑞士风格	企业应用、仪表板、文档
2	新拟态 (Neumorphism)	健康/养生应用、冥想平台
3	玻璃拟态 (Glassmorphism)	现代 SaaS、金融仪表板
4	粗野主义 (Brutalism)	设计作品集、艺术项目
5	3D & 超写实主义	游戏、产品展示、沉浸式体验
6	活力 & 块状	创业公司、创意机构、游戏
7	深色模式 (OLED)	夜间模式应用、编程平台
8	无障碍 & 伦理设计	政府、医疗、教育
9	粘土拟态 (Claymorphism)	教育应用、儿童应用、SaaS
10	极光 UI (Aurora UI)	现代 SaaS、创意机构
11	复古未来主义	游戏、娱乐、音乐平台
12	扁平设计	Web 应用、移动应用、初创 MVP
13	拟物化	传统应用、游戏、高端产品
14	液态玻璃	高端 SaaS、高端电商
15	动效驱动	作品集网站、叙事平台
16	微交互	移动应用、触摸屏 UI
17	包容性设计	公共服务、教育、医疗
18	零界面	语音助手、AI 平台
19	柔和 UI 进化版	现代企业应用、SaaS
20	新粗野主义	Z 世代品牌、创业公司、Figma 风格
21	便当盒网格	仪表板、产品页面、作品集
22	Y2K 美学	时尚品牌、音乐、Z 世代
23	赛博朋克 UI	游戏、科技产品、加密货币应用
24	有机亲生物	健康应用、可持续品牌
25	AI 原生 UI	AI 产品、聊天机器人、Copilot
26	孟菲斯设计	创意机构、音乐、年轻品牌
27	蒸汽波	音乐平台、游戏、作品集
28	维度分层	仪表板、卡片布局、模态框
29	夸张极简主义	时尚、建筑、作品集
30	动态字体	主视觉区、营销网站
31	视差叙事	品牌故事、产品发布
32	瑞士现代主义 2.0	企业网站、建筑、编辑类
33	HUD / 科幻 FUI	科幻游戏、太空科技、网络安全
34	像素艺术	独立游戏、复古工具、创意
35	便当网格	产品特性、仪表板、个人
36	空间 UI (VisionOS)	空间计算应用、VR/AR
37	电子墨水 / 纸张	阅读应用、数字报纸
38	Z 世代混沌 / 极繁主义	Z 世代生活方式、音乐艺术家
39	仿生 / 有机 2.0	可持续科技、生物科技、健康
40	反精致 / 原始美学	创意作品集、艺术家网站
41	触感数字 / 可变形 UI	现代移动应用、趣味品牌
42	自然提炼	健康品牌、可持续产品
43	交互式光标设计	创意作品集、交互式
44	语音优先多模态	语音助手、无障碍应用
45	3D 产品预览	电商、家具、时尚
46	渐变网格 / 极光进化	主视觉区、背景、创意
47	编辑网格 / 杂志	新闻网站、博客、杂志
48	色差 / RGB 分离	音乐平台、游戏、科技
49	复古模拟 / 胶片	摄影、音乐/黑胶品牌

</details>

<details> <summary>落地页风格 (8)</summary>

#	风格	最适用于
1	主视觉中心设计	具有强烈视觉识别度的产品
2	转化优化型	潜在客户生成、销售页面
3	功能丰富展示	SaaS、复杂产品
4	极简直接型	简单产品、应用
5	社交证明聚焦	服务、B2C 产品
6	交互产品演示	软件、工具
7	信任与权威型	B2B、企业、咨询
8	叙事驱动型	品牌、代理公司、非营利

</details>

<details> <summary>BI/分析仪表板风格 (10)</summary>

#	风格	最适用于
1	密集数据仪表板	复杂数据分析
2	热力图风格	地理/行为数据
3	高管仪表板	高管摘要
4	实时监控	运维、DevOps
5	钻取分析	详细探索
6	对比分析仪表板	并排对比
7	预测分析	预测、ML 洞察
8	用户行为分析	UX 研究、产品分析
9	财务仪表板	财务、会计
10	销售智能仪表板	销售团队、CRM

</details>

💎 基础版与高级版对比

许多用户询问开源版与高级版之间的差异。以下是详细的对比，帮助你选择适合自己工作流的版本。

🟢 基础版（本仓库）

完全开源： 适合个人开发者、爱好者及标准项目。
核心 UI/UX 智能： 完整支持 67 种 UI 风格、161 种产品类型、配色方案和精选字体配对。
智能推荐： 内置 BM25 搜索引擎，提供高精度的设计匹配。
跨平台支持： 提供针对 13+ 主流框架（React、Vue、Tailwind、iOS、Android 等）的技术栈专属指南。
设计系统生成： 通过 CLI 即时生成定制化的 UI 规则、模式与逻辑。

🟡 高级版

扩展的品牌设计能力： 超越 UI/UX 范畴，涵盖品牌标识生成、Logo 设计、企业识别系统 (CIP)、横幅、演示文稿幻灯片及自定义图标设计。
高级资产生成： 深度集成 AI 图像生成能力，创建真实视觉素材而非占位符。
企业级架构： 更全面、可扩展的设计令牌 (Design Token) 架构，面向大规模团队部署。
优先支持： 为需要不间断完整设计工作流的团队和专业人士提供专属技术支持。

👉 如需了解升级到高级版的更多详情，请访问 uupm.cc。

安装

使用 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 (推荐)

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

# 进入你的项目
cd /path/to/your/project

# 为你的 AI 助手安装
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai antigravity # Antigravity
uipro init --ai copilot     # GitHub Copilot
uipro init --ai kiro        # Kiro
uipro init --ai codex       # Codex CLI
uipro init --ai qoder       # Qoder
uipro init --ai roocode     # Roo Code
uipro init --ai gemini      # Gemini CLI
uipro init --ai trae        # Trae
uipro init --ai opencode    # OpenCode
uipro init --ai continue    # Continue
uipro init --ai codebuddy   # CodeBuddy
uipro init --ai droid       # Droid (Factory)
uipro init --ai kilocode    # KiloCode
uipro init --ai warp        # Warp
uipro init --ai augment     # Augment
uipro init --ai all         # 所有助手

npm 包名为 ui-ux-pro-max-cli；它仍然安装 uipro 命令。旧版 uipro-cli 已过时，不应用于当前资源。

全局安装（适用于所有项目）

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

其他 CLI 命令

uipro versions              # 列出可用版本
uipro update                # 从已安装的 CLI 包刷新技能文件
uipro init --offline        # 兼容性标志；安装捆绑模板
uipro uninstall             # 移除技能（自动检测平台）
uipro uninstall --ai claude # 移除特定平台
uipro uninstall --global    # 移除全局安装

前置要求

搜索脚本需要 Python 3.x。

# 检查是否已安装 Python
python3 --version

# macOS
brew install python3

# Ubuntu/Debian
sudo apt update && sudo apt install python3

# Windows
winget install Python.Python.3.12

使用方式

技能模式 (自动激活)

支持： Claude Code、Cursor、Windsurf、Antigravity、Codex CLI、Continue、Gemini CLI、OpenCode、Qoder、CodeBuddy、Droid (Factory)、KiloCode、Warp、Augment

当你请求 UI/UX 工作时，技能会自动激活。只需自然地聊天：

为我的 SaaS 产品搭建一个落地页

Trae：先切换到 SOLO 模式。技能会在 UI/UX 请求时激活。

工作流模式 (斜杠命令)

支持： Kiro、GitHub Copilot、Roo Code、KiloCode

使用斜杠命令调用技能：

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

示例提示词

为我的 SaaS 产品搭建一个落地页

创建一个医疗健康分析仪表板

设计一个带深色模式的作品集网站

为电商制作一个移动应用 UI

搭建一个带深色主题的金融科技银行应用

工作原理

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

支持的技术栈

该技能为以下技术栈提供特定指南：

分类	技术栈
Web (HTML)	HTML + Tailwind (默认)
React 生态	React、Next.js、shadcn/ui
Vue 生态	Vue、Nuxt.js、Nuxt UI
Angular	Angular
PHP	Laravel (Blade、Livewire、Inertia.js)
其他 Web	Svelte、Astro、Three.js
桌面端	JavaFX
iOS	SwiftUI
Android	Jetpack Compose
跨平台	React Native、Flutter

只需在提示词中提到你偏好的技术栈，或让它默认使用 HTML + Tailwind。

设计系统命令 (高级)

如需直接访问设计系统生成器：

注意：如果你通过 Continue 安装，将下面命令中的 .claude/skills/ 替换为 .continue/skills/。对于 Droid (Factory)，使用 .factory/skills/。

# 生成带 ASCII 输出的设计系统
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# 生成带 Markdown 输出
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 "elegant serif" --domain typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart

# 特定技术栈指南
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "tableview binding" --stack javafx
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterprise theme" --stack javafx
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafx

持久化设计系统 (主配置 + 覆盖模式)

将设计系统保存到文件，实现跨会话的层级检索：

# 生成并持久化到 design-system/MASTER.md
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/ 文件夹结构：

design-system/
├── MASTER.md           # 全局唯一真相源 (颜色、字体、间距、组件)
└── pages/
    └── dashboard.md    # 页面特定覆盖 (仅与主配置的偏差)

层级检索工作原理：

构建特定页面 (如"结账页") 时，先检查 design-system/pages/checkout.md
如果页面文件存在，其规则覆盖主配置文件
如果不存在，仅使用 design-system/MASTER.md

上下文感知检索提示词：

我正在构建 [页面名称] 页面。请阅读 design-system/MASTER.md。
同时检查 design-system/pages/[page-name].md 是否存在。
如果页面文件存在，优先使用其规则。
如果不存在，仅使用主配置规则。
现在，生成代码...

架构与贡献

对于用户

代码库已重构为使用基于模板的生成系统。所有平台特定文件 (.cursor/、.windsurf/、.kiro/、.factory/ 等) 现在由 CLI 动态生成。

始终使用 CLI 安装：

npm install -g ui-ux-pro-max-cli
uipro init --ai <platform>

这确保你获得随已安装 CLI 包捆绑的最新模板，以及适用于 AI 助手的正确文件结构。发布新版本时请先更新 npm 包。

对于贡献者

如果你想为这个项目做贡献：

# 1. 克隆仓库
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill

# 2. 理解结构
src/ui-ux-pro-max/           # 唯一真相源 (数据、脚本、模板)
cli/                         # CLI 安装器 (从模板生成文件)
.claude/                     # Claude Code 技能的本地开发/测试
.factory/                    # Droid (Factory) 技能的本地开发/测试

# 3. 在 src/ui-ux-pro-max/ 中修改
# - data/*.csv              → 数据库文件
# - scripts/*.py            → 搜索引擎与设计系统
# - templates/              → 平台特定模板

# 4. 同步到 CLI 并本地测试
cd cli
npm run sync:assets
npm run check:assets

# 5. 构建并测试 CLI
bun run build
node dist/index.js init --ai claude --offline  # 在临时文件夹中测试

# 6. 创建 PR (永远不要直接推送到 main)
git checkout -b feat/your-feature
git commit -m "feat: description"
git push -u origin feat/your-feature
gh pr create

详细的开发指南请参见 CLAUDE.md。

自动化发布

本仓库使用 semantic-release 配合约定式提交 (Conventional Commits) 自动创建 GitHub 发布：

dev 分支创建 beta GitHub 预发布，如 2.6.0-beta.1。
main 分支创建官方稳定版 GitHub 发布，如 2.6.0。

发布说明和 CHANGELOG.md 根据约定式提交信息生成。在发布准备期间，版本号会在 skill.json、.claude-plugin/plugin.json、.claude-plugin/marketplace.json、cli/package.json 和 cli/package-lock.json 之间同步。

使用以下提交类型以获得正确的版本号升级：

fix: -> 补丁版本发布
feat: -> 次版本发布
feat!: 或 BREAKING CHANGE: -> 主版本发布

发布工作流使用默认的 GITHUB_TOKEN 创建 GitHub 发布，并使用仓库的 NPM_TOKEN 密钥将 ui-ux-pro-max-cli 发布到 npm。

故障排查

`uipro: unknown command 'uninstall'` 或 `unknown command 'update'`

你安装的 ui-ux-pro-max-cli 版本已过时。请更新后重试：

npm install -g ui-ux-pro-max-cli@latest
uipro uninstall

`uipro uninstall` 提示 "No installed AI skill directories detected"

技能安装在与运行命令不同的目录中。可以：

# 方案 A — 切换到最初安装它的项目根目录
cd /path/to/your/project
uipro uninstall

# 方案 B — 移除全局安装
uipro uninstall --global

# 方案 C — 手动移除
rm -rf .claude/skills/ui-ux-pro-max   # Claude Code
rm -rf .cursor/skills/ui-ux-pro-max   # Cursor
rm -rf .windsurf/skills/ui-ux-pro-max # Windsurf
rm -rf .agents/skills/ui-ux-pro-max   # Antigravity

Claude Marketplace 安装失败，提示 "Zip file contains a symbolic link"

这是 v2.5.1 之前版本的已知问题。仓库内部使用了符号链接，某些安装工具无法处理。解决办法： 改用 CLI 安装器：

npm install -g ui-ux-pro-max-cli
uipro init --ai claude

或等待下一个已修复此问题的版本发布。

`npm install -g ui-ux-pro-max-cli` 失败，提示权限错误

# macOS/Linux — 使用 Node 版本管理器（推荐）或 sudo
sudo npm install -g ui-ux-pro-max-cli

# 或使用 npx 而不全局安装
npx ui-ux-pro-max-cli init --ai claude

运行设计系统命令时找不到 Python

搜索脚本需要 Python 3.x。请根据你的操作系统安装：

brew install python3        # macOS
sudo apt install python3    # Ubuntu/Debian
winget install Python.Python.3.12  # Windows

设计系统输出被截断 / 字段不完整

使用 --max-length 标志增加（或取消）截断限制：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --domain style --max-length 0
#                                                                               ^ 0 = 不限制

---

Star 历史

许可证

本项目采用 MIT 许可证授权。

兼容的智能体

本技能可与以下工具配合使用：

Claude Code
AdaL - 自进化的 AI 编码智能体（文档 | GitHub）

UI UX Pro Max

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.

If you find this useful, consider supporting the project: <a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-Donate-00457C?style=for-the-badge&logo=paypal&logoColor=white" alt="PayPal Donate"></a>

Other projects <a href="https://nextlevelbuilder.io">NextLevelBuilder.io</a> | <a href="https://goclaw.sh">GoClaw.sh</a> | <a href="https://claudekit.cc">ClaudeKit.cc</a> | <a href="https://tose.sh">TOSE.sh</a>

What's New in v2.0

Intelligent Design System Generation

The flagship feature of v2.0 is the Design System Generator - an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in seconds.

+----------------------------------------------------------------------------------------+
|  TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM                                      |
+----------------------------------------------------------------------------------------+
|                                                                                        |
|  PATTERN: Hero-Centric + Social Proof                                                  |
|     Conversion: Emotion-driven with trust elements                                     |
|     CTA: Above fold, repeated after testimonials                                       |
|     Sections:                                                                          |
|       1. Hero                                                                          |
|       2. Services                                                                      |
|       3. Testimonials                                                                  |
|       4. Booking                                                                       |
|       5. Contact                                                                       |
|                                                                                        |
|  STYLE: Soft UI Evolution                                                              |
|     Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes        |
|     Best For: Wellness, beauty, lifestyle brands, premium services                     |
|     Performance: Excellent | Accessibility: WCAG AA                                    |
|                                                                                        |
|  COLORS:                                                                               |
|     Primary:    #E8B4B8 (Soft Pink)                                                    |
|     Secondary:  #A8D5BA (Sage Green)                                                   |
|     CTA:        #D4AF37 (Gold)                                                         |
|     Background: #FFF5F5 (Warm White)                                                   |
|     Text:       #2D3436 (Charcoal)                                                     |
|     Notes: Calming palette with gold accents for luxury feel                           |
|                                                                                        |
|  TYPOGRAPHY: Cormorant Garamond / Montserrat                                           |
|     Mood: Elegant, calming, sophisticated                                              |
|     Best For: Luxury brands, wellness, beauty, editorial                               |
|     Google Fonts: https://fonts.google.com/share?selection.family=...                  |
|                                                                                        |
|  KEY EFFECTS:                                                                          |
|     Soft shadows + Smooth transitions (200-300ms) + Gentle hover states                |
|                                                                                        |
|  AVOID (Anti-patterns):                                                                |
|     Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients       |
|                                                                                        |
|  PRE-DELIVERY CHECKLIST:                                                               |
|     [ ] No emojis as icons (use SVG: Heroicons/Lucide)                                 |
|     [ ] cursor-pointer on all clickable elements                                       |
|     [ ] Hover states with smooth transitions (150-300ms)                               |
|     [ ] Light mode: text contrast 4.5:1 minimum                                        |
|     [ ] Focus states visible for keyboard nav                                          |
|     [ ] prefers-reduced-motion respected                                               |
|     [ ] Responsive: 375px, 768px, 1024px, 1440px                                       |
|                                                                                        |
+----------------------------------------------------------------------------------------+

How Design System Generation Works

┌─────────────────────────────────────────────────────────────────┐
│  1. USER REQUEST                                                │
│     "Build a landing page for my beauty spa"                    │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  2. MULTI-DOMAIN SEARCH (5 parallel searches)                   │
│     • Product type matching (161 categories)                    │
│     • Style recommendations (67 styles)                         │
│     • Color palette selection (161 palettes)                    │
│     • Landing page patterns (24 patterns)                       │
│     • Typography pairing (57 font combinations)                 │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  3. REASONING ENGINE                                            │
│     • Match product → UI category rules                         │
│     • Apply style priorities (BM25 ranking)                     │
│     • Filter anti-patterns for industry                         │
│     • Process decision rules (JSON conditions)                  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  4. COMPLETE DESIGN SYSTEM OUTPUT                               │
│     Pattern + Style + Colors + Typography + Effects             │
│     + Anti-patterns to avoid + Pre-delivery checklist           │
└─────────────────────────────────────────────────────────────────┘

161 Industry-Specific Reasoning Rules

The reasoning engine includes specialized rules for:

Category	Examples
Tech & SaaS	SaaS, Micro SaaS, B2B Service, Developer Tool / IDE, AI/Chatbot Platform, Cybersecurity Platform
Finance	Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing Tool
Healthcare	Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health, Medication Reminder
E-commerce	General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery
Services	Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment
Creative	Portfolio, Agency, Photography, Gaming, Music Streaming, Photo/Video Editor
Lifestyle	Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker
Emerging Tech	Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Drone Fleet

Each rule includes:

Recommended Pattern - Landing page structure
Style Priority - Best matching UI styles
Color Mood - Industry-appropriate palettes
Typography Mood - Font personality matching
Key Effects - Animations and interactions
Anti-Patterns - What NOT to do (e.g., "AI purple/pink gradients" for banking)

Features

67 UI Styles - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, and more
161 Color Palettes - Industry-specific palettes aligned 1:1 with the 161 product types
57 Font Pairings - Curated typography combinations with Google Fonts imports
25 Chart Types - Recommendations for dashboards and analytics
22 Tech Stacks - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, Three.js, JavaFX, WPF, WinUI 3, UWP, Avalonia, Uno Platform
99 UX Guidelines - Best practices, anti-patterns, and accessibility rules
161 Reasoning Rules - Industry-specific design system generation (NEW in v2.0)

Available Styles (67)

<details> <summary>General Styles (49)</summary>

#	Style	Best For
1	Minimalism & Swiss Style	Enterprise apps, dashboards, documentation
2	Neumorphism	Health/wellness apps, meditation platforms
3	Glassmorphism	Modern SaaS, financial dashboards
4	Brutalism	Design portfolios, artistic projects
5	3D & Hyperrealism	Gaming, product showcase, immersive
6	Vibrant & Block-based	Startups, creative agencies, gaming
7	Dark Mode (OLED)	Night-mode apps, coding platforms
8	Accessible & Ethical	Government, healthcare, education
9	Claymorphism	Educational apps, children's apps, SaaS
10	Aurora UI	Modern SaaS, creative agencies
11	Retro-Futurism	Gaming, entertainment, music platforms
12	Flat Design	Web apps, mobile apps, startup MVPs
13	Skeuomorphism	Legacy apps, gaming, premium products
14	Liquid Glass	Premium SaaS, high-end e-commerce
15	Motion-Driven	Portfolio sites, storytelling platforms
16	Micro-interactions	Mobile apps, touchscreen UIs
17	Inclusive Design	Public services, education, healthcare
18	Zero Interface	Voice assistants, AI platforms
19	Soft UI Evolution	Modern enterprise apps, SaaS
20	Neubrutalism	Gen Z brands, startups, Figma-style
21	Bento Box Grid	Dashboards, product pages, portfolios
22	Y2K Aesthetic	Fashion brands, music, Gen Z
23	Cyberpunk UI	Gaming, tech products, crypto apps
24	Organic Biophilic	Wellness apps, sustainability brands
25	AI-Native UI	AI products, chatbots, copilots
26	Memphis Design	Creative agencies, music, youth brands
27	Vaporwave	Music platforms, gaming, portfolios
28	Dimensional Layering	Dashboards, card layouts, modals
29	Exaggerated Minimalism	Fashion, architecture, portfolios
30	Kinetic Typography	Hero sections, marketing sites
31	Parallax Storytelling	Brand storytelling, product launches
32	Swiss Modernism 2.0	Corporate sites, architecture, editorial
33	HUD / Sci-Fi FUI	Sci-fi games, space tech, cybersecurity
34	Pixel Art	Indie games, retro tools, creative
35	Bento Grids	Product features, dashboards, personal
36	Spatial UI (VisionOS)	Spatial computing apps, VR/AR
37	E-Ink / Paper	Reading apps, digital newspapers
38	Gen Z Chaos / Maximalism	Gen Z lifestyle, music artists
39	Biomimetic / Organic 2.0	Sustainability tech, biotech, health
40	Anti-Polish / Raw Aesthetic	Creative portfolios, artist sites
41	Tactile Digital / Deformable UI	Modern mobile apps, playful brands
42	Nature Distilled	Wellness brands, sustainable products
43	Interactive Cursor Design	Creative portfolios, interactive
44	Voice-First Multimodal	Voice assistants, accessibility apps
45	3D Product Preview	E-commerce, furniture, fashion
46	Gradient Mesh / Aurora Evolved	Hero sections, backgrounds, creative
47	Editorial Grid / Magazine	News sites, blogs, magazines
48	Chromatic Aberration / RGB Split	Music platforms, gaming, tech
49	Vintage Analog / Retro Film	Photography, music/vinyl brands

</details>

<details> <summary>Landing Page Styles (8)</summary>

#	Style	Best For
1	Hero-Centric Design	Products with strong visual identity
2	Conversion-Optimized	Lead generation, sales pages
3	Feature-Rich Showcase	SaaS, complex products
4	Minimal & Direct	Simple products, apps
5	Social Proof-Focused	Services, B2C products
6	Interactive Product Demo	Software, tools
7	Trust & Authority	B2B, enterprise, consulting
8	Storytelling-Driven	Brands, agencies, nonprofits

</details>

<details> <summary>BI/Analytics Dashboard Styles (10)</summary>

#	Style	Best For
1	Data-Dense Dashboard	Complex data analysis
2	Heat Map & Heatmap Style	Geographic/behavior data
3	Executive Dashboard	C-suite summaries
4	Real-Time Monitoring	Operations, DevOps
5	Drill-Down Analytics	Detailed exploration
6	Comparative Analysis Dashboard	Side-by-side comparisons
7	Predictive Analytics	Forecasting, ML insights
8	User Behavior Analytics	UX research, product analytics
9	Financial Dashboard	Finance, accounting
10	Sales Intelligence Dashboard	Sales teams, CRM

</details>

💎 Basic vs. Premium Version Comparison

Many users ask about the differences between the open-source and premium versions. Here is a detailed breakdown to help you choose the right fit for your workflow.

🟢 Basic Version (This Repository)

Fully Open Source: Perfect for individual developers, hobbyists, and standard projects.
Core UI/UX Intelligence: Full access to 67 UI styles, 161 product types, color palettes, and curated font pairings.
Smart Recommendations: Built-in BM25 search engine for highly accurate design matching.
Cross-Platform Support: Stack-specific guidelines supporting 13+ major frameworks (React, Vue, Tailwind, iOS, Android, etc.).
Design System Generation: Instantly generate tailored UI rules, patterns, and logic via CLI.

🟡 Premium Version

Extended Brand Design Skills: Goes beyond UI/UX to include Brand Identity generation, Logo Design, Corporate Identity Programs (CIP), Banners, Presentation Slides, and custom Iconography.
Advanced Asset Creation: Deep integration with AI-powered image generation to create real visual assets, not just placeholders.
Enterprise Architecture: A more comprehensive and scalable Design Token architecture, built for large-scale team deployments.
Priority Support: Dedicated technical assistance for teams and professionals who need an uninterrupted full design workflow.

👉 For more details on upgrading to the Premium tier, visit uupm.cc.

Installation

Using Claude Marketplace (Claude Code)

Install directly in Claude Code with two commands:

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

Using CLI (Recommended)

# Install CLI globally
npm install -g ui-ux-pro-max-cli

# Go to your project
cd /path/to/your/project

# Install for your AI assistant
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai antigravity # Antigravity
uipro init --ai copilot     # GitHub Copilot
uipro init --ai kiro        # Kiro
uipro init --ai codex       # Codex CLI
uipro init --ai qoder       # Qoder
uipro init --ai roocode     # Roo Code
uipro init --ai gemini      # Gemini CLI
uipro init --ai trae        # Trae
uipro init --ai opencode    # OpenCode
uipro init --ai continue    # Continue
uipro init --ai codebuddy   # CodeBuddy
uipro init --ai droid       # Droid (Factory)
uipro init --ai kilocode    # KiloCode
uipro init --ai warp        # Warp
uipro init --ai augment     # Augment
uipro init --ai all         # All assistants

The npm package is ui-ux-pro-max-cli; it still installs the uipro command. Older uipro-cli releases are stale and should not be used for current assets.

Global Install (Available for All Projects)

uipro init --ai claude --global   # Install to ~/.claude/skills/
uipro init --ai cursor --global   # Install to ~/.cursor/skills/

Other CLI Commands

uipro versions              # List available versions
uipro update                # Refresh skill files from installed CLI package
uipro init --offline        # Compatibility flag; installs bundled templates
uipro uninstall             # Remove skill (auto-detect platform)
uipro uninstall --ai claude # Remove specific platform
uipro uninstall --global    # Remove from global install

Prerequisites

Python 3.x is required for the search script.

# Check if Python is installed
python3 --version

# macOS
brew install python3

# Ubuntu/Debian
sudo apt update && sudo apt install python3

# Windows
winget install Python.Python.3.12

Usage

Skill Mode (Auto-activate)

Supported: Claude Code, Cursor, Windsurf, Antigravity, Codex CLI, Continue, Gemini CLI, OpenCode, Qoder, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment

The skill activates automatically when you request UI/UX work. Just chat naturally:

Build a landing page for my SaaS product

Trae: Switch to SOLO mode first. The skill will activate for UI/UX requests.

Workflow Mode (Slash Command)

Supported: Kiro, GitHub Copilot, Roo Code, KiloCode

Use the slash command to invoke the skill:

/ui-ux-pro-max Build a landing page for my SaaS product

Example Prompts

Build a landing page for my SaaS product

Create a dashboard for healthcare analytics

Design a portfolio website with dark mode

Make a mobile app UI for e-commerce

Build a fintech banking app with dark theme

How It Works

You ask - Request any UI/UX task (build, design, create, implement, review, fix, improve)
Design System Generated - The AI automatically generates a complete design system using the reasoning engine
Smart recommendations - Based on your product type and requirements, it finds the best matching styles, colors, and typography
Code generation - Implements the UI with proper colors, fonts, spacing, and best practices
Pre-delivery checks - Validates against common UI/UX anti-patterns

Supported Stacks

The skill provides stack-specific guidelines for:

Category	Stacks
Web (HTML)	HTML + Tailwind (default)
React Ecosystem	React, Next.js, shadcn/ui
Vue Ecosystem	Vue, Nuxt.js, Nuxt UI
Angular	Angular
PHP	Laravel (Blade, Livewire, Inertia.js)
Other Web	Svelte, Astro, Three.js
Desktop	JavaFX
iOS	SwiftUI
Android	Jetpack Compose
Cross-Platform	React Native, Flutter

Just mention your preferred stack in the prompt, or let it default to HTML + Tailwind.

Design System Command (Advanced)

For direct access to the design system generator:

Note: If you installed via Continue, replace .claude/skills/ with .continue/skills/ in the commands below. For Droid (Factory), use .factory/skills/.

# Generate design system with ASCII output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Generate with Markdown output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown

# Domain-specific search
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart

# Stack-specific guidelines
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "tableview binding" --stack javafx
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterprise theme" --stack javafx
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafx

Persist Design System (Master + Overrides Pattern)

Save your design system to files for hierarchical retrieval across sessions:

# Generate and persist to design-system/MASTER.md
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"

# Also create a page-specific override file
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"

This creates a design-system/ folder structure:

design-system/
├── MASTER.md           # Global Source of Truth (colors, typography, spacing, components)
└── pages/
    └── dashboard.md    # Page-specific overrides (only deviations from Master)

How hierarchical retrieval works:

When building a specific page (e.g., "Checkout"), first check design-system/pages/checkout.md
If the page file exists, its rules override the Master file
If not, use design-system/MASTER.md exclusively

Context-aware retrieval prompt:

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

Architecture & Contributing

For Users

The codebase has been restructured to use a template-based generation system. All platform-specific files (.cursor/, .windsurf/, .kiro/, .factory/, etc.) are now generated dynamically by the CLI.

Always use the CLI to install:

npm install -g ui-ux-pro-max-cli
uipro init --ai <platform>

This ensures you get the latest templates bundled with the installed CLI package and the correct file structure for your AI assistant. Update the npm package first when a new release is published.

For Contributors

If you want to contribute to this project:

# 1. Clone the repository
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill

# 2. Understand the structure
src/ui-ux-pro-max/           # Source of truth (data, scripts, templates)
cli/                         # CLI installer (generates files from templates)
.claude/                     # Local dev/test for Claude Code skill
.factory/                    # Local dev/test for Droid (Factory) skill

# 3. Make changes in src/ui-ux-pro-max/
# - data/*.csv              → Database files
# - scripts/*.py            → Search engine & design system
# - templates/              → Platform-specific templates

# 4. Sync to CLI and test locally
cd cli
npm run sync:assets
npm run check:assets
npm run validate:csv
npm run smoke:domains
npm run smoke:stacks
npm run typecheck

# 5. Build and test CLI
# `npm run build` uses Bun when available and falls back to TypeScript compiler output after `npm ci`.
npm run build
node dist/index.js init --ai claude --offline  # Test in a temp folder

# 6. Create PR (never push directly to main)
git checkout -b feat/your-feature
git commit -m "feat: description"
git push -u origin feat/your-feature
gh pr create

See CLAUDE.md for detailed development guidelines.

Automated Releases

This repository uses semantic-release with Conventional Commits to create GitHub releases automatically:

dev branch creates beta GitHub prereleases such as 2.6.0-beta.1.
main branch creates official stable GitHub releases such as 2.6.0.

Release notes and CHANGELOG.md are generated from Conventional Commit messages. Version numbers are synchronized across skill.json, .claude-plugin/plugin.json, .claude-plugin/marketplace.json, cli/package.json, and cli/package-lock.json during release preparation.

Use these commit types for correct version bumps:

fix: -> patch release
feat: -> minor release
feat!: or BREAKING CHANGE: -> major release

The release workflow uses the default GITHUB_TOKEN for GitHub releases and the repository NPM_TOKEN secret to publish ui-ux-pro-max-cli to npm.

Troubleshooting

`uipro: unknown command 'uninstall'` or `unknown command 'update'`

Your installed version of ui-ux-pro-max-cli is outdated. Update it and retry:

npm install -g ui-ux-pro-max-cli@latest
uipro uninstall

`uipro uninstall` says "No installed AI skill directories detected"

The skill was installed in a different directory than where you're running the command. Either:

# Option A — run from the project root where you originally installed it
cd /path/to/your/project
uipro uninstall

# Option B — remove the global install
uipro uninstall --global

# Option C — remove manually
rm -rf .claude/skills/ui-ux-pro-max   # Claude Code
rm -rf .cursor/skills/ui-ux-pro-max   # Cursor
rm -rf .windsurf/skills/ui-ux-pro-max # Windsurf
rm -rf .agents/skills/ui-ux-pro-max   # Antigravity

Claude Marketplace install fails with "Zip file contains a symbolic link"

This is a known issue with versions prior to v2.5.1. The repository used symlinks internally which some installation tools can't handle. Fix: use the CLI installer instead:

npm install -g ui-ux-pro-max-cli
uipro init --ai claude

Or wait for the next release where this is resolved.

`npm install -g ui-ux-pro-max-cli` fails with permission error

# macOS/Linux — use a Node version manager (recommended) or sudo
sudo npm install -g ui-ux-pro-max-cli

# Or use npx without installing globally
npx ui-ux-pro-max-cli init --ai claude

Python not found when running design system commands

The search scripts require Python 3.x. Install it for your OS:

brew install python3        # macOS
sudo apt install python3    # Ubuntu/Debian
winget install Python.Python.3.12  # Windows

Design system output is cut off / fields truncated

Use the --max-length flag to increase (or remove) the truncation limit:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --domain style --max-length 0
#                                                                               ^ 0 = unlimited

---

Star History

License

This project is licensed under the MIT License.

Compatible Agents

This skill works with:

Claude Code
AdaL - Self-evolving AI coding agent (Docs | GitHub)

适合把“设计知识检索 + 前端 UI 实现 + 品牌资产”合并到一个 Agent 工作流。

UI UX Pro Max

v2.0 新特性

智能设计系统生成

设计系统生成的工作原理

161 条行业特定推理规则

功能特性

可用风格 (67)

💎 基础版与高级版对比

🟢 基础版（本仓库）

🟡 高级版

安装

使用 Claude Marketplace (Claude Code)

使用 CLI (推荐)

全局安装（适用于所有项目）

其他 CLI 命令

前置要求

使用方式

技能模式 (自动激活)

工作流模式 (斜杠命令)

示例提示词

工作原理

支持的技术栈

设计系统命令 (高级)

持久化设计系统 (主配置 + 覆盖模式)

架构与贡献

对于用户

对于贡献者

自动化发布

故障排查

uipro: unknown command 'uninstall' 或 unknown command 'update'

uipro uninstall 提示 "No installed AI skill directories detected"

Claude Marketplace 安装失败，提示 "Zip file contains a symbolic link"

npm install -g ui-ux-pro-max-cli 失败，提示权限错误

运行设计系统命令时找不到 Python

设计系统输出被截断 / 字段不完整

Star 历史

许可证

兼容的智能体

UI UX Pro Max

What's New in v2.0

Intelligent Design System Generation

How Design System Generation Works

161 Industry-Specific Reasoning Rules

Features

Available Styles (67)

💎 Basic vs. Premium Version Comparison

🟢 Basic Version (This Repository)

🟡 Premium Version

Installation

Using Claude Marketplace (Claude Code)

Using CLI (Recommended)

Global Install (Available for All Projects)

Other CLI Commands

Prerequisites

Usage

Skill Mode (Auto-activate)

Workflow Mode (Slash Command)

Example Prompts

How It Works

Supported Stacks

Design System Command (Advanced)

Persist Design System (Master + Overrides Pattern)

Architecture & Contributing

For Users

For Contributors

Automated Releases

Troubleshooting

uipro: unknown command 'uninstall' or unknown command 'update'

uipro uninstall says "No installed AI skill directories detected"

Claude Marketplace install fails with "Zip file contains a symbolic link"

npm install -g ui-ux-pro-max-cli fails with permission error

Python not found when running design system commands

Design system output is cut off / fields truncated

Star History

License

Compatible Agents

`uipro: unknown command 'uninstall'` 或 `unknown command 'update'`

`uipro uninstall` 提示 "No installed AI skill directories detected"

`npm install -g ui-ux-pro-max-cli` 失败，提示权限错误

`uipro: unknown command 'uninstall'` or `unknown command 'update'`

`uipro uninstall` says "No installed AI skill directories detected"

`npm install -g ui-ux-pro-max-cli` fails with permission error