UI UX Pro Max

这是一项AI技能，旨在为跨多个平台和框架的专业UI/UX设计提供智能支持。

如果您觉得此项目有用，请考虑支持我们：

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

v2.0版本更新内容

智能设计系统生成

v2.0 的旗舰功能是 设计系统生成器——一个由 AI 驱动的推理引擎，能够分析您的项目需求，并在几秒钟内生成一套完整、量身定制的设计系统。

+----------------------------------------------------------------------------------------+
|  目标：宁静水疗中心 - 推荐设计系统                                      |
+----------------------------------------------------------------------------------------+
|                                                                                        |
|  模式：英雄主导 + 社会认同                                                  |
|     转化：以情感驱动，辅以信任元素                                     |
|     行动号召：位于首屏上方，并在用户评价后重复出现                       |
|     版块：                                                                          |
|       1. 英雄区                                                                          |
|       2. 服务                                                                      |
|       3. 用户评价                                                                  |
|       4. 预约                                                                       |
|       5. 联系方式                                                                       |
|                                                                                        |
|  风格：柔和的 UI 进化                                                              |
|     关键词：柔和阴影、微妙深度、舒缓、高端质感、有机形状        |
|     适用领域：健康养生、美容、生活方式品牌、高端服务                     |
|     性能：优秀 | 可访问性：WCAG AA                                    |
|                                                                                        |
|  颜色：                                                                               |
|     主色：    #E8B4B8（柔粉）                                                    |
|     辅色：  #A8D5BA（鼠尾草绿）                                                   |
|     行动号召色：        #D4AF37（金色）                                                         |
|     背景色： #FFF5F5（暖白）                                                   |
|     文字色： #2D3436（炭黑）                                                     |
|     备注：舒缓的配色方案，搭配金色点缀，营造奢华感                           |
|                                                                                        |
|  字体排版：科莫兰·加拉蒙 / 蒙特塞拉特                                           |
|     氛围：优雅、舒缓、精致                                              |
|     适用领域：奢侈品牌、健康养生、美容、内容类媒体                               |
|     Google Fonts：https://fonts.google.com/share?selection.family=...                  |
|                                                                                        |
|  核心效果：                                                                          |
|     柔和阴影 + 平滑过渡（200-300ms） + 温和的悬停状态                |
|                                                                                        |
|  避免事项（反模式）：                                                                |
|     明亮的霓虹色 + 刺激的动画 + 暗色模式 + AI 紫/粉色渐变       |
|                                                                                        |
|  交付前检查清单：                                                               |
|     [ ] 不使用表情符号作为图标（建议使用 SVG：Heroicons/Lucide）                                 |
|     [ ] 所有可点击元素均设置 cursor-pointer                                       |
|     [ ] 悬停状态采用平滑过渡（150-300ms）                               |
|     [ ] 浅色模式下，文本对比度不低于 4.5:1                                        |
|     [ ] 键盘导航时聚焦状态可见                                          |
|     [ ] 尊重 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交易平台、订阅盒子、食品配送
服务业	美容/SPA、餐厅、酒店、法律服务、家庭服务、预订与预约
创意领域	作品集、广告公司、摄影、游戏、音乐流媒体、照片/视频编辑器
生活方式	习惯追踪、食谱与烹饪、冥想、天气、日记、情绪追踪
新兴技术	Web3/NFT、空间计算、量子计算、自动驾驶无人机群

每条规则包括：

• 推荐模式 - 落地页结构
• 风格优先级 - 最佳匹配的UI风格
• 色彩基调 - 符合行业的配色方案
• 字体基调 - 匹配的字体个性
• 关键效果 - 动画与交互
• 反模式 - 不该做的事情（例如，银行业不适用“AI紫粉渐变”）

功能特性

• 67种UI风格 - 玻璃拟物、黏土拟物、极简主义、粗野主义、新拟物、便当格子布局、暗黑模式、AI原生UI等
• 161组配色方案 - 与161种产品类型一一对应的行业专属配色
• 57组字体搭配 - 精选的Google Fonts字体组合
• 25种图表类型 - 面板与数据分析的推荐方案
• 15种技术栈 - React、Next.js、Astro、Vue、Nuxt.js、Nuxt UI、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind、shadcn/ui、Jetpack Compose、Angular、Laravel
• 99条UX指南 - 最佳实践、反模式及无障碍访问规范
• 161条推理规则 - 行业特定的设计系统生成（v2.0新增）

可用风格（67种）

通用风格（49种）

序号	风格	适用场景
1	极简主义与瑞士风格	企业应用、仪表盘、文档
2	新拟物	健康/ wellness应用、冥想平台
3	玻璃拟物	现代SaaS、金融仪表盘
4	粗野主义	设计作品集、艺术项目
5	3D与超现实主义	游戏、产品展示、沉浸式体验
6	鲜艳且区块化	创业公司、创意机构、游戏
7	暗黑模式（OLED）	夜间模式应用、编码平台
8	无障碍与伦理	政府、医疗、教育
9	黏土拟物	教育类应用、儿童应用、SaaS
10	极光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产品、聊天机器人、AI助手
26	孟菲斯设计	创意机构、音乐、年轻品牌
27	蒸汽波	音乐平台、游戏、作品集
28	立体分层	仪表盘、卡片布局、模态窗口
29	夸张极简主义	时尚、建筑、作品集
30	动态文字排版	英雄区、营销网站
31	视差叙事	品牌故事、产品发布
32	瑞士现代主义2.0	企业官网、建筑、编辑类网站
33	HUD/科幻FUI	科幻游戏、太空科技、网络安全
34	像素艺术	独立游戏、复古工具、创意
35	便当网格	产品功能、仪表盘、个人主页
36	空间UI（VisionOS）	空间计算应用、VR/AR
37	E-Ink/纸质感	阅读类应用、数字报纸
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	预测分析	预测、机器学习洞察
8	用户行为分析	UX研究、产品分析
9	金融仪表盘	财务、会计
10	销售情报仪表盘	销售团队、CRM

安装方法

使用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 uipro-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         # 所有助手

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

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

其他 CLI 命令

uipro versions              # 列出可用版本
uipro update                # 更新到最新版本
uipro init --offline        # 跳过 GitHub 下载，使用捆绑资源
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 产品构建一个着陆页

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

设计一个带有暗黑模式的个人作品集网站

为电子商务制作一个移动应用界面

构建一个具有暗黑主题的金融科技银行应用

工作原理

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
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

持久化设计系统（主文件 + 重写模式）

将您的设计系统保存到文件中，以便在不同会话之间进行分层检索：

# 生成并持久化到 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/[页面名称].md 是否存在。
如果页面文件存在，优先使用其规则。
如果不存在，则完全使用主文件的规则。
现在，请生成代码……

架构与贡献

对于用户

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

始终使用 CLI 进行安装：

npm install -g uipro-cli
uipro init --ai <平台>

这可确保您获得最新的模板以及适合您 AI 助手的正确文件结构。

对于贡献者

如果您想为该项目做出贡献：

# 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 并在本地测试
cp -r src/ui-ux-pro-max/data/* cli/assets/data/
cp -r src/ui-ux-pro-max/scripts/* cli/assets/scripts/
cp -r src/ui-ux-pro-max/templates/* cli/assets/templates/

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

# 6. 创建 Pull Request（切勿直接推送到 main 分支）
git checkout -b feat/your-feature
git commit -m "feat: 描述"
git push -u origin feat/your-feature
gh pr create

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

星标历史

许可证

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

UI UX Pro Max 快速上手指南

UI UX Pro Max 是一款专为 AI 助手设计的高级技能库，旨在为多平台和框架提供专业级的 UI/UX 设计智能。它内置了 161 条行业推理规则、67 种 UI 风格以及完整的配色与排版方案，能帮助 AI 瞬间生成量身定制的设计系统。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows, macOS 或 Linux
• 运行时环境：
  • Node.js: 建议版本 18.x 或更高（用于运行 CLI 工具）
  • Python: 3.x 版本（部分底层逻辑依赖）
• 前置依赖：
  • npm (随 Node.js 安装)
  • 一个支持加载外部技能/提示词的 AI 编辑器或终端环境（如 Cursor, VS Code + Copilot, 或直接通过 CLI 调用）

国内加速建议： 如果访问 npm 官方源较慢，建议切换至国内镜像源（如淘宝镜像）：

npm config set registry https://registry.npmmirror.com

安装步骤

该工具主要通过 npm 包 uipro-cli 进行分发和调用。

1. 全局安装 CLI 工具 在终端中执行以下命令：

   npm install -g uipro-cli
   

2. 验证安装 安装完成后，检查版本以确认安装成功：

   uipro --version
   

3. 集成到 AI 工作流（可选） 如果您使用的是支持自定义 Skill 的 AI 编辑器，请将本仓库克隆到本地，并在配置中指向 ui-ux-pro-max-skill 目录，以便 AI 直接读取其中的 161 条推理规则和样式定义。

   git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
   

基本使用

安装完成后，您可以通过命令行或直接在 AI 对话中触发设计系统生成功能。

方式一：通过 CLI 快速生成

使用 uipro 命令并传入您的需求描述，工具将基于内置的推理引擎输出完整的设计系统方案。

示例：为一个美容水疗中心生成落地页设计方案

uipro generate "Build a landing page for my beauty spa"

预期输出内容： 系统将返回包含以下要素的结构化文本：

• 推荐模式 (Pattern): 例如 "Hero-Centric + Social Proof"
• 风格定义 (Style): 例如 "Soft UI Evolution" (柔和阴影、有机形状)
• 配色方案 (Colors): 具体的 Hex 色值（主色、辅助色、CTA 按钮色等）
• 字体搭配 (Typography): 推荐的 Google Fonts 组合
• 关键效果 (Key Effects): 动画时长、悬停状态建议
• 避坑指南 (Anti-patterns): 明确列出不应使用的元素（如：避免霓虹色、避免深色模式等）
• 交付前检查清单: 无障碍访问、响应式断点等规范

方式二：在 AI 对话中直接调用

如果您已将此技能加载到 AI 上下文中，只需直接用自然语言描述需求，AI 会自动调用内部的 161 条行业规则进行推理。

用户输入示例：

"为我创建一个面向 B2B 金融科技公司的仪表盘设计规范，需要体现专业感和信任感。"

AI 响应逻辑：

1. 匹配行业规则：自动定位到 "Finance -> Fintech/Banking" 类别。
2. 应用风格优先级：选择适合金融行业的 UI 风格（如 Glassmorphism 或 Minimalism）。
3. 过滤反模式：自动排除不适合金融行业的元素（如过于花哨的渐变或游戏化风格）。
4. 输出结果：生成包含具体颜色代码、字体组合、图表类型建议及无障碍标准的完整设计文档。

---

注：本工具核心在于其内置的推理规则库，无需复杂的配置即可通过自然语言交互获得专业级设计建议。