ui-ux-pro-max

UI/UX Pro Max - 设计智能

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

适用场景

当任务涉及UI 结构、视觉设计决策、交互模式或用户体验质量控制时，请使用此 Skill：设计新页面、创建或重构 UI 组件、选择配色／字体排版／间距／布局系统、检查 UI 的 UX／无障碍性／一致性、实现导航／动画／响应式行为，或提升整体观感和易用性。

纯后端逻辑、API／数据库设计、非视觉性能优化、基础设施／DevOps 或非视觉脚本任务无需使用此 Skill——除非任务会改变某项内容的外观、感受、动态效果或交互方式。

按优先级划分的规则类别

按优先级 1→10 判断应先关注哪个类别；使用 --domain <Domain> 查询完整详情。每个类别的完整规则文本都位于 references/quick-reference.md 中；按需阅读，无需每次都加载。

优先级	类别	影响	领域	关键检查项（必须具备）	反模式（应避免）
1	无障碍性	严重	ux	对比度 4.5:1、替代文本、键盘导航、Aria 标签	移除焦点环、没有标签的纯图标按钮
2	触控与交互	严重	ux	最小尺寸 44×44px、间距至少 8px、加载反馈	仅依赖悬停、状态瞬间变化（0ms）
3	性能	高	ux	WebP/AVIF、延迟加载、预留空间（CLS < 0.1）	布局抖动、累积布局偏移
4	风格选择	高	style、product	匹配产品类型、保持一致、使用 SVG 图标（不用 emoji）	随意混用扁平风格和拟物风格、使用 emoji 作为图标
5	布局与响应式	高	ux	移动优先断点、Viewport meta、不出现水平滚动	水平滚动、固定 px 容器宽度、禁用缩放
6	字体排版与颜色	中	typography、color	基础字号 16px、行高 1.5、语义化颜色令牌	正文字号 < 12px、灰字配灰底、在组件中直接使用十六进制颜色值
7	动画	中	ux、gsap	时长 150–300ms、动效传达含义、空间连续性	仅作装饰的动画、对宽度／高度做动画、未支持减少动态效果
8	表单与反馈	中	ux	可见标签、错误信息靠近字段、辅助文本、渐进式展示	仅使用占位符作为标签、错误仅显示在顶部、一开始就显示过多内容
9	导航模式	高	ux	返回行为可预测、底部导航 ≤5 项、深层链接	导航项过多、返回行为异常、缺少深层链接
10	图表与数据	低	chart	图例、工具提示、无障碍配色	仅依靠颜色传达含义

如需查看各类别的完整规则列表（含约 99 条 UX 指南及其理由），请阅读 references/quick-reference.md。如需了解针对特定应用的细节优化规则（图标、触控反馈、暗色模式对比度、安全区域）以及标准交付前检查清单，请阅读 references/pro-rules.md。

---

运行搜索工具

搜索脚本位于此 Skill 自身的目录中，而非项目目录中。请始终使用完整路径调用脚本，不要假定当前工作目录：

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 已存在，除非同时传入 --force，否则 --persist 会跳过写入并保持文件不变——请先检查文件是否存在（若存在则读取），再重新生成，以免在无提示的情况下丢弃用户或团队成员之前做出的决定。

构建特定页面时的检索方式：

1. 读取 design-system/<project-slug>/MASTER.md
2. 检查 design-system/<project-slug>/pages/<page-name>.md 是否存在——如果存在，则以其中的规则覆盖主规则
3. 否则，仅使用主规则

步骤 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 Fonts 字体	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 中检测到的技术栈。

---

如果搜索未返回结果

不要编造输出。请改为：

1. 使用更宽泛或不同措辞的关键词重试一次（尝试分别搜索产品和风格，而不是组合搜索）。
2. 如果仍无结果，请回退到上方的优先级表，并明确告诉用户该建议来自内置默认值，而非数据库匹配（例如：“没有匹配 X 的配色方案，使用通用 SaaS 默认值”）。
3. 绝不要将未返回结果的搜索说成已返回数据。

工作流示例

用户请求：“制作一个 AI 搜索主页。”（从 package.json 检测到技术栈为 Next.js）

# Step 2: design system
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "AI search tool modern minimal" --design-system -p "AI Search"

# Step 3: supplement
python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "search loading animation" --domain ux

# Step 4: stack guidelines
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

交付应用 UI 前

请阅读 references/pro-rules.md，并逐项检查其中的标准交付前检查清单。该清单涵盖图标／视觉元素规范、交互反馈、浅色／深色对比度、安全区域布局和无障碍功能，适用于原生／移动应用 UI（iOS/Android/React Native/Flutter）。