Files
nextlevelbuilder-ui-ux-pro-…/README.zh.md
fivv d7e37dd359 docs: sync Chinese README with English version (#403)
Update README.zh.md to match the current English README.md:
- Reasoning rules 100 -> 161 (badges, headings, flow diagram, features)
- Color palettes 96 -> 161 (aligned 1:1 with product types)
- Tech stacks 13 -> 22 (list all 22 stacks; expand supported-stacks table with Angular/Laravel/Three.js/JavaFX)
- npm package uipro-cli -> ui-ux-pro-max-cli (badges, install, contributor steps)
- Add install entries for kilocode, warp, augment; add uninstall/global commands
- Expand reasoning-rules table (fill examples, add Lifestyle category)
- Add design-system javafx examples
- Replace manual cp -r with npm run sync:assets / check:assets
- Add sections: Basic vs. Premium, Automated Releases, Troubleshooting, Compatible Agents
- Fix inconsistent pronoun (您 -> 你) for consistency

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-02 08:55:43 +07:00

29 KiB
Raw Permalink Blame History

UI UX Pro Max

🇨🇳 简体中文 | 🇺🇸 English

GitHub Release 161 条推理规则 67 种 UI 风格 Python 3.x License

npm npm downloads GitHub stars PayPal

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

UI UX Pro Max

如果这个项目对你有帮助,请考虑支持:

PayPal 捐赠

其他项目
NextLevelBuilder.io | GoClaw.sh | ClaudeKit.cc | TOSE.sh

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)

通用风格 (49)
# 风格 最适用于
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 复古模拟 / 胶片 摄影、音乐/黑胶品牌
落地页风格 (8)
# 风格 最适用于
1 主视觉中心设计 具有强烈视觉识别度的产品
2 转化优化型 潜在客户生成、销售页面
3 功能丰富展示 SaaS、复杂产品
4 极简直接型 简单产品、应用
5 社交证明聚焦 服务、B2C 产品
6 交互产品演示 软件、工具
7 信任与权威型 B2B、企业、咨询
8 叙事驱动型 品牌、代理公司、非营利
BI/分析仪表板风格 (10)
# 风格 最适用于
1 密集数据仪表板 复杂数据分析
2 热力图风格 地理/行为数据
3 高管仪表板 高管摘要
4 实时监控 运维、DevOps
5 钻取分析 详细探索
6 对比分析仪表板 并排对比
7 预测分析 预测、ML 洞察
8 用户行为分析 UX 研究、产品分析
9 财务仪表板 财务、会计
10 销售智能仪表板 销售团队、CRM

💎 基础版与高级版对比

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

🟢 基础版(本仓库)

  • 完全开源: 适合个人开发者、爱好者及标准项目。
  • 核心 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

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

工作原理

  1. 你提出请求 - 请求任何 UI/UX 任务(构建、设计、创建、实现、审查、修复、改进)
  2. 生成设计系统 - AI 使用推理引擎自动生成完整的设计系统
  3. 智能推荐 - 根据你的产品类型和需求,找到最佳匹配的风格、配色和字体
  4. 代码生成 - 使用正确的颜色、字体、间距和最佳实践实现 UI
  5. 交付前检查 - 针对常见 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    # 页面特定覆盖 (仅与主配置的偏差)

层级检索工作原理:

  1. 构建特定页面 (如"结账页") 时,先检查 design-system/pages/checkout.md
  2. 如果页面文件存在,其规则覆盖主配置文件
  3. 如果不存在,仅使用 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.jsoncli/package.jsoncli/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

这是 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 历史

Star History Chart

许可证

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

兼容的智能体

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