---
name: ui-ux-pro-max
description: "面向 Web 和移动端的 UI/UX 设计智能库。可搜索的本地数据库，包含 84 种风格、192 个配色方案、74 组字体搭配、192 种产品类型、98 条 UX 准则、104 条图标条目、16 个 GSAP 动效预设，以及覆盖 22 种技术栈（React、Next.js、Vue、Nuxt、Svelte、Astro、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui、Jetpack Compose、Angular、Laravel、JavaFX、WPF、WinUI、Avalonia、Uno Platform、UWP、Three.js 以及 HTML/CSS）的 25 种图表类型。在设计、构建或审查 UI 时使用：页面、组件、配色方案、排版、布局、无障碍、动效或数据可视化。"
---

# UI/UX Pro Max - 设计智能库

可搜索的 UI/UX 设计规则数据库，提供基于优先级的推荐：84 种风格、192 个配色方案、74 组字体搭配、192 种带推理规则的产品类型、98 条 UX 准则、104 条图标条目、16 个 GSAP 动效预设，以及覆盖 22 种技术栈的 25 种图表类型。

## 何时应用

当任务涉及 **UI 结构、视觉设计决策、交互模式或用户体验质量把控** 时使用此技能：设计新页面、创建/重构 UI 组件、选择配色/排版/间距/布局系统、审查 UI 的 UX/无障碍/一致性、实现导航/动效/响应式行为，或提升感知质量与可用性。

对于纯后端逻辑、API/数据库设计、与视觉无关的性能工作、基础设施/DevOps，或非视觉类脚本，可跳过此技能——除非该任务会改变某个东西**看起来、感觉起来、动起来或交互起来**的方式。

## 按优先级划分的规则类别

*按优先级 1→10 决定优先关注哪个类别；使用 `--domain <Domain>` 查询完整细节。每个类别的完整规则文本都在 `references/quick-reference.md` 中——按需读取，而不是每次都加载。*

| 优先级 | 类别 | 影响 | 领域 | 关键检查项（必须具备） | 反模式（应避免） |
|----------|----------|--------|--------|------------------------|------------------------|
| 1 | 无障碍 | 严重 | `ux` | 对比度 4.5:1、Alt 文本、键盘导航、Aria 标签 | 移除焦点环、无标签的纯图标按钮 |
| 2 | 触控与交互 | 严重 | `ux` | 最小尺寸 44×44px、间距 8px 以上、加载反馈 | 仅依赖悬停、瞬时状态变化（0ms） |
| 3 | 性能 | 高 | `ux` | WebP/AVIF、懒加载、预留空间（CLS &lt; 0.1） | 布局抖动、累积布局偏移 |
| 4 | 风格选择 | 高 | `style`、`product` | 匹配产品类型、一致性、SVG 图标（非emoji） | 随意混用扁平与拟物风格、用emoji作图标 |
| 5 | 布局与响应式 | 高 | `ux` | 移动优先断点、Viewport meta、无横向滚动 | 横向滚动、固定像素容器宽度、禁用缩放 |
| 6 | 排版与色彩 | 中 | `typography`、`color` | 基础字号16px、行高1.5、语义化色彩令牌 | 正文文字&lt;12px、灰底灰字、组件中硬编码十六进制色值 |
| 7 | 动效 | 中 | `ux`、`gsap` | 时长150–300ms、动效传达含义、空间连续性 | 纯装饰性动画、对width/height做动画、未支持减少动效 |
| 8 | 表单与反馈 | 中 | `ux` | 可见标签、错误信息紧邻字段、辅助文本、渐进式披露 | 仅用placeholder作标签、错误信息只在顶部、一开始信息过载 |
| 9 | 导航模式 | 高 | `ux` | 可预测的返回、底部导航≤5项、深度链接 | 导航项过多、返回行为损坏、无深度链接 |
| 10 | 图表与数据 | 低 | `chart` | 图例、提示框、无障碍配色 | 仅依赖颜色传达信息 |

要查看每个类别的完整规则列表（全部约98条带原理说明的UX准则），请阅读 `references/quick-reference.md`。要查看特定于应用的打磨规则（图标、触控反馈、深色模式对比度、安全区域）以及标准的交付前检查清单，请阅读 `references/pro-rules.md`。

---

## 运行搜索工具

搜索脚本位于此技能自己的目录内，而不是项目目录。始终通过完整路径调用它——不要假设某个特定的工作目录：

```bash
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<query>" --domain <domain>
```

如果找不到 `python`，依次尝试 `python3`，然后 `py -3`。需要 Python 3.x，无外部依赖（如果缺少 Python，请参见 README 中的安装说明）。

## 工作流程

### 步骤1：分析用户需求

从用户请求中提取：
- **产品类型**：SaaS、电商、作品集、仪表盘、娱乐、工具类、生产力工具，或混合类型
- **目标受众与使用场景**：年龄段、使用场景（通勤、休闲、工作）
- **风格关键词**：俏皮、活泼、极简、深色模式、内容优先、沉浸式等
- **技术栈**：从项目中检测——检查 `package.json` 依赖（react/next/vue/svelte/nuxt/@angular）、`pubspec.yaml`（Flutter）、`*.xcodeproj`/`Package.swift`（SwiftUI）、`composer.json`（Laravel），或 React Native 标志（`app.json` + `react-native` 依赖）。如果无法检测，询问用户或默认使用 `html-tailwind`。**永远不要假设技术栈**——硬编码的默认值会悄悄误导每一条推荐。

### 步骤2：生成设计系统（新页面/新项目必需）

始终从 `--design-system` 开始，获取带推理说明的全面推荐：

```bash
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
```

这会并行搜索产品/风格/色彩/落地页/排版这几个领域，应用 `ui-reasoning.csv` 中的推理规则，并返回模式、风格、色彩、排版、效果，以及应避免的反模式。

**示例：**
```bash
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "beauty spa wellness service" --design-system -p "Serenity Spa"
```

### 步骤2b：持久化设计系统（主文件+覆盖层模式）

要将设计系统保存下来以便跨会话检索，添加 `--persist`，**并始终传入指向项目根目录的 `--output-dir`**——如果不传，文件会相对于工具实际运行的目录写入：

```bash
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --output-dir "<project-root>"
```

这会创建：
- `design-system/<project-slug>/MASTER.md` — 全局唯一真源
- `design-system/<project-slug>/pages/` — 用于存放页面级覆盖规则的文件夹

如果有页面级覆盖需求，添加 `--page "dashboard"`，也会创建 `design-system/<project-slug>/pages/dashboard.md`。

如果 `design-system/<project-slug>/MASTER.md` 已存在，`--persist` **会跳过写入并保持原文件不变**，除非同时传入 `--force`——在重新生成之前，先检查该文件是否存在（并阅读它），这样才不会悄悄丢弃用户或团队成员之前做出的决策。

**构建特定页面时的检索方式：**
1. 阅读 `design-system/<project-slug>/MASTER.md`
2. 检查 `design-system/<project-slug>/pages/<page-name>.md` 是否存在——如果存在，其规则会覆盖主文件（Master）
3. 否则只使用主文件（Master）的规则

### 步骤2c：设计旋钮（可选）

三个可选的 1-10 滑动值，用于在不改变查询内容的情况下微调 `--design-system` 的输出。可以任意组合添加到同一条命令中：

```bash
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --variance <1-10> --motion <1-10> --density <1-10>
```

| 旋钮 | 低（1-3） | 中（4-7） | 高（8-10） |
|------|-----------|-----------|-------------|
| `--variance` | 居中/极简（偏向极简主义类别） | 均衡/现代 | 大胆/不对称（偏向粗野主义、Bento网格） |
| `--motion` | 微妙的微交互 | 标准的滚动/交错动效 | 复杂的编排效果（pin、Flip、SplitText） |
| `--density` | 疏朗（24-96px间距刻度） | 标准（16-64px，当前默认值） | 紧凑/仪表盘风格（8-32px间距刻度） |

- `--motion` 会附带一段现成可用的GSAP代码片段（含框架说明、注意事项和性能说明），这段代码从 `--domain gsap` 中提取，与解析出的档位（微妙/标准/复杂）相匹配。
- `--density` 会覆盖ASCII/markdown/MASTER.md输出中的 `--space-*` CSS变量表——可用于仪表盘（高密度）与营销页面（低密度），而无需手动编辑令牌。
- 不设置某个旋钮时，输出中对应的部分会与之前完全一致（行为不变）。

**示例：**
```bash
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "internal analytics dashboard" --design-system --variance 8 --motion 7 --density 8 -p "Ops Console"
```

### 步骤3：按需用详细搜索补充信息

```bash
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<keyword>" --domain <domain> [-n <max_results>]
```

| 需求 | 领域 | 示例 |
|------|--------|---------|
| 产品类型模式 | `product` | `--domain product "entertainment social"` |
| 更多风格选项 | `style` | `--domain style "glassmorphism dark"` |
| 配色方案 | `color` | `--domain color "entertainment vibrant"` |
| 字体搭配 | `typography` | `--domain typography "playful modern"` |
| 单个Google字体 | `google-fonts` | `--domain google-fonts "sans serif popular variable"` |
| 图表推荐 | `chart` | `--domain chart "real-time dashboard"` |
| UX最佳实践 | `ux` | `--domain ux "animation accessibility"` |
| 落地页结构 | `landing` | `--domain landing "hero social-proof"` |
| 图标推荐 | `icons` | `--domain icons "navigation outline"` |
| GSAP动效预设 | `gsap` | `--domain gsap "scroll reveal stagger"` |
| React/Next.js性能 | `react` | `--domain react "rerender memo list"` |
| 应用/原生界面准则 | `web` | `--domain web "accessibilityLabel touch safe-areas"` |

如果省略 `--domain`，会根据查询自动检测领域——但自动检测在术语存在重叠时可能会误判（例如"font"同时匹配 `typography` 和 `google-fonts`）。如果结果看起来文不对题，请显式传入 `--domain`。

### 步骤4：技术栈准则

```bash
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<keyword>" --stack <stack>
```

**可用技术栈：** `react`、`nextjs`、`vue`、`svelte`、`astro`、`nuxtjs`、`nuxt-ui`、`angular`、`laravel`、`swiftui`、`react-native`、`flutter`、`jetpack-compose`、`html-tailwind`、`shadcn`、`threejs`、`javafx`、`wpf`、`winui`、`avalonia`、`uno`、`uwp`。使用步骤1中检测到的技术栈。

---

## 如果搜索结果为0

不要凭空编造输出。而应该：
1. 用更宽泛或换一种表述的关键词重试一次（尝试将产品类型和风格分开搜索，而不是合在一起）。
2. 如果仍为空，回退到上方的优先级表格，并明确告知用户此推荐来自内置默认值，而非数据库匹配结果（例如"未找到与X匹配的配色方案，使用通用SaaS默认值"）。
3. 永远不要把0结果的搜索伪装成返回了数据的样子。

## 示例工作流程

**用户请求：** "做一个AI搜索首页。"（从 `package.json` 检测到技术栈为Next.js）

```bash
# 步骤2：设计系统
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "AI search tool modern minimal" --design-system -p "AI Search"

# 步骤3：补充信息
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "search loading animation" --domain ux

# 步骤4：技术栈准则
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "suspense streaming bundle" --stack nextjs
```

然后综合设计系统与详细搜索的结果并进行实现。

## 输出格式

`--design-system` 支持 `-f ascii`（默认，终端显示）、`-f markdown`（文档用）和 `--json`（机器可读，包含原始设计系统字典以及持久化状态）。

## 获得更好结果的技巧

- 使用**多维度关键词**——组合产品类型+行业+调性+密度：`"entertainment social vibrant content-dense"`，而不是只写`"app"`
- 为同一需求尝试不同的表述方式：`"playful neon"` → `"vibrant dark"` → `"content-first minimal"`
- 先用 `--design-system` 获取全面推荐，再用 `--domain` 深入研究你不确定的具体维度
- 显式传入检测到的技术栈以获取具体实现层面的指导

| 问题 | 应对方法 |
|---------|------------|
| 无法确定风格/色彩 | 用不同关键词重新运行 `--design-system` |
| 深色模式对比度问题 | `references/quick-reference.md` §6：`color-dark-mode` + `color-accessible-pairs` |
| 动画感觉不自然 | `references/quick-reference.md` §7：`spring-physics` + `easing` + `exit-faster-than-enter` |
| 表单UX不佳 | `references/quick-reference.md` §8：`inline-validation` + `error-clarity` + `focus-management` |
| 导航感觉混乱 | `references/quick-reference.md` §9：`nav-hierarchy` + `bottom-nav-limit` + `back-behavior` |
| 小屏幕上布局错乱 | `references/quick-reference.md` §5：`mobile-first` + `breakpoint-consistency` |
| 性能/卡顿 | `references/quick-reference.md` §3：`virtualize-lists` + `main-thread-budget` + `debounce-throttle` |

## 交付App UI前

阅读 `references/pro-rules.md` 并执行其中的标准交付前检查清单。它涵盖图标/视觉元素规范、交互反馈、明暗模式对比度、安全区域布局，以及无障碍——适用范围限定于原生/移动端App UI（iOS/Android/React Native/Flutter）。