UI/UX Pro Max - 设计智能库

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 < 0.1） | 布局抖动、累积布局偏移 |

| 4 | 风格选择 | 高 | style、product | 匹配产品类型、一致性、SVG 图标（非emoji） | 随意混用扁平与拟物风格、用emoji作图标 |

| 5 | 布局与响应式 | 高 | ux | 移动优先断点、Viewport meta、无横向滚动 | 横向滚动、固定像素容器宽度、禁用缩放 |

| 6 | 排版与色彩 | 中 | typography、color | 基础字号16px、行高1.5、语义化色彩令牌 | 正文文字<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。

运行搜索工具

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

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 开始，获取带推理说明的全面推荐：

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 中的推理规则，并返回模式、风格、色彩、排版、效果，以及应避免的反模式。

示例：

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`——如果不传，文件会相对于工具实际运行的目录写入：

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 的输出。可以任意组合添加到同一条命令中：

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变量表——可用于仪表盘（高密度）与营销页面（低密度），而无需手动编辑令牌。
• 不设置某个旋钮时，输出中对应的部分会与之前完全一致（行为不变）。

示例：

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：按需用详细搜索补充信息

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：技术栈准则

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）

# 步骤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）。