ui-ux-pro-max

版本敏感。 以下所有 API 名称、SDK 门槛和浏览器支持声明均已于 2026-09-08 根据一手资料核实。核实依据和时间见 _jutsu/VERSIONS.md。如果该日期已久远，请在根据版本号采取行动前重新核实。

UI/UX Pro Max - 设计智能

面向 Web 和移动应用的综合设计指南。包含 84 种风格、192 个配色方案、74 组字体搭配、99 条 UX 指南，以及涵盖 22 个技术栈的 25 种图表类型。可搜索的数据库，并提供基于优先级的建议。

适用场景

在以下情况下参考这些指南：

• 设计新的 UI 组件或页面
• 选择配色方案和字体排版
• 检查代码中的 UX 问题
• 构建落地页或仪表板
• 实施无障碍要求

按优先级划分的规则类别

优先级	类别	影响	领域
1	无障碍	严重	ux
2	触控与交互	严重	ux
3	性能	高	ux
4	布局与响应式	高	ux
5	字体排版与颜色	中	typography、color
6	动画	中	ux
7	风格选择	中	style、product
8	图表与数据	低	chart

快速参考

1. 无障碍（严重）

• color-contrast - 普通文本的最低对比度为 4.5:1
• focus-states - 为交互元素显示焦点环
• alt-text - 为有意义的图像提供描述性替代文本
• aria-labels - 为仅含图标的按钮添加 aria-label
• keyboard-nav - Tab 顺序与视觉顺序一致
• form-labels - 使用带有 for 属性的 label

2. 触控与交互（严重）

• touch-target-size - 触控目标至少为 44x44px
• hover-vs-tap - 主要交互使用点击/轻触
• loading-buttons - 异步操作期间禁用按钮
• error-feedback - 在问题附近显示清晰的错误消息
• cursor-pointer - 为可点击元素添加 cursor-pointer

3. 性能（高）

• image-optimization - 使用 WebP、srcset 和延迟加载
• reduced-motion - 检查 prefers-reduced-motion
• content-jumping - 为异步内容预留空间

4. 布局与响应式（高）

• viewport-meta - width=device-width initial-scale=1
• readable-font-size - 移动设备上的正文至少为 16px
• horizontal-scroll - 确保内容适合视口宽度
• z-index-management - 定义 z-index 层级（10、20、30、50）

5. 字体排版与颜色（中）

• line-height - 正文行高使用 1.5-1.75
• line-length - 每行限制为 65-75 个字符
• font-pairing - 让标题和正文的字体风格相匹配

6. 动画（中）

• duration-timing - 微交互时长使用 150-300ms
• transform-performance - 使用 transform/opacity，而非 width/height
• loading-states - 使用骨架屏或加载指示器

7. 风格选择（中）

• style-match - 让风格与产品类型相匹配
• consistency - 所有页面使用相同风格
• no-emoji-icons - 使用 SVG 图标，而非表情符号

8. 图表与数据（低）

• chart-type - 根据数据类型选择相应的图表类型
• color-guidance - 使用无障碍配色方案
• data-table - 为无障碍提供表格替代方案

使用方法

使用下方的 CLI 工具搜索特定领域。

---

前提条件

需要 python3（Claude Code shell 和 claude.ai 的代码执行沙箱中默认提供）。此技能不会安装任何内容。

使用 --design-system 时务必传入 -f markdown。 默认格式为 ascii，专为终端设计：它会输出约 7,000 字节，其中包含原始 ANSI 颜色转义序列；而 hex_to_ansi 没有 isatty 检查，因此这些转义序列在通过管道传输时仍会保留，并以乱码形式进入上下文窗口。 -f markdown 会以简洁的 Markdown 返回相同信息，大小约为 2,100 字节。这里的使用者是模型，而非终端，因此在此技能中运行频率最高的命令可减少 3.3 倍 token。

---

如何使用此技能

当用户请求 UI/UX 相关工作（设计、构建、创建、实现、评审、修复、改进）时，请遵循以下工作流：

以下每条命令都要在与此代码块相同的 Shell 调用中运行。 Shell 状态不会在调用之间保留，工作目录也无法保证一致，因此每次都要重新推导 UIUX_DIR，并在每条命令中使用脚本的完整路径。此代码块会按顺序尝试：如果协调器的技能基础目录代码块已在同一次调用中运行，则使用 $SKILL_BASE/ui-ux-pro-max；你可以在代码块前添加 UIUX_DIR='/absolute/path/to/ui-ux-pro-max'，自行指定目录；如果主机替换了 CLAUDE_SKILL_DIR（独立安装），则使用此技能自身的目录；然后在常见技能目录中进行有限范围的搜索。若已知绝对路径，也可以直接用该路径替换 $UIUX_DIR。

# Commands run from the project, so --persist writes to the project root and
# never into the skill directory.
PROJECT_ROOT="$PWD"
uiux_given="${UIUX_DIR:-}"
UIUX_DIR=""
for uiux_c in "${SKILL_BASE:+$SKILL_BASE/ui-ux-pro-max}" "$uiux_given" "${CLAUDE_SKILL_DIR}"; do
  [ -n "$uiux_c" ] && [ -f "$uiux_c/scripts/search.py" ] && { UIUX_DIR="$uiux_c"; break; }
done
if [ -z "$UIUX_DIR" ]; then
  for uiux_root in "$HOME/.agents/skills" "$HOME/.claude/skills" "$HOME/.claude/plugins" /mnt/skills; do
    [ -d "$uiux_root" ] || continue
    uiux_hit="$(find -L "$uiux_root" -maxdepth 9 -type f -path '*/ui-ux-pro-max/scripts/search.py' 2>/dev/null | sort -V | tail -1)"
    [ -n "$uiux_hit" ] && { UIUX_DIR="${uiux_hit%/scripts/search.py}"; break; }
  done
fi
[ -n "$UIUX_DIR" ] || echo "genjutsu: ui-ux-pro-max not found. Say so in one line and derive the design system from the thesis by hand." >&2

步骤 1：分析用户需求

从用户请求中提取关键信息：

• 产品类型：SaaS、电商、作品集、仪表盘、落地页等。
• 风格关键词：简约、活泼、专业、优雅、深色模式等。
• 行业：医疗保健、金融科技、游戏、教育等。
• 技术栈：React、Vue、Next.js，或默认使用 html-tailwind

步骤 2：生成设计系统（必需）

始终从 --design-system 开始，获取全面的建议及其理由：

python3 "$UIUX_DIR/scripts/search.py" "<product_type> <industry> <keywords>" --design-system [-p "Project Name"] -f markdown

此命令会：

1. 并行搜索 5 个领域（产品、风格、颜色、落地页、排版）
2. 应用 ui-reasoning.csv 中的推理规则，选择最合适的匹配项
3. 返回完整的设计系统：模式、风格、颜色、排版、效果
4. 列出应避免的反模式

示例：

python3 "$UIUX_DIR/scripts/search.py" "beauty spa wellness service" --design-system -p "Serenity Spa" -f markdown

步骤 2b：保存设计系统（主文件 + 覆盖项模式）

如需跨会话分层检索设计系统，请添加 --persist（将 --output-dir 指向项目根目录，这样文件会保存在那里，而非技能目录中）：

python3 "$UIUX_DIR/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --output-dir "$PROJECT_ROOT" -f markdown

这会创建：

• design-system/<project-slug>/MASTER.md - 包含所有设计规则的全局事实来源
• design-system/<project-slug>/pages/ - 存放页面专属覆盖项的目录

如果 MASTER.md 已存在，--persist 会跳过写入；添加 --force 可覆盖。

使用页面专属覆盖项：

python3 "$UIUX_DIR/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --page "dashboard" --output-dir "$PROJECT_ROOT" -f markdown

这还会创建：

• design-system/<project-slug>/pages/dashboard.md - 与主文件不同的页面专属规则

分层检索的工作方式：

1. 构建特定页面（例如“结账”）时，先检查 design-system/<project-slug>/pages/checkout.md
2. 如果页面文件存在，其中的规则会覆盖主文件
3. 如果不存在，则仅使用 design-system/<project-slug>/MASTER.md

上下文感知检索提示词：

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

步骤 3：通过详细搜索补充信息（按需）

获取设计系统后，可使用领域搜索获取更多细节：

python3 "$UIUX_DIR/scripts/search.py" "<keyword>" --domain <domain> [-n <max_results>]

何时使用详细搜索：

需求	领域	示例
更多风格选项	style	--domain style "glassmorphism dark"
图表建议	chart	--domain chart "real-time dashboard"
UX 最佳实践	ux	--domain ux "animation accessibility"
其他字体	typography	--domain typography "elegant luxury"
落地页结构	landing	--domain landing "hero social-proof"

步骤 4：技术栈指南（默认：html-tailwind）

获取针对实现的最佳实践。如果用户未指定技术栈，默认使用 html-tailwind。

python3 "$UIUX_DIR/scripts/search.py" "<keyword>" --stack html-tailwind

可用技术栈：html-tailwind、react、nextjs、astro、vue、nuxtjs、nuxt-ui、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose、threejs、angular、laravel、javafx、wpf、winui、avalonia、uno、uwp

---

搜索参考

可用领域

领域	用途	示例关键词
product	产品类型推荐	SaaS、电商、作品集、医疗保健、美妆、服务
style	UI 样式、颜色、效果	玻璃拟态、极简主义、深色模式、粗野主义
typography	字体搭配、Google Fonts	优雅、活泼、专业、现代
color	配色方案（完整令牌集）	SaaS、电商、医疗保健、美妆、金融科技、服务
landing	页面结构、CTA 策略	主视觉区、以主视觉区为中心、客户评价、定价、社会认同
chart	图表类型、库推荐	趋势、比较、时间线、漏斗、饼图
ux	最佳实践、反模式	动画、无障碍、z-index、加载
icons	图标集 + 导入指南	线框、实心、品牌、导航
react	React/Next.js 性能	瀑布流、包、Suspense、memo、重新渲染、缓存
web	应用/网页界面指南	aria、焦点、键盘、语义化、虚拟化
gsap	动效代码片段（用于 --motion 拨盘）	显现、视差、交错、滚动
google-fonts	Google Fonts 查询	衬线、等宽、展示、可变

可用技术栈

技术栈	重点
html-tailwind	Tailwind 工具类、响应式、无障碍（默认）
react	状态、Hooks、性能、模式
nextjs	SSR、路由、图像、API 路由
astro	Islands 架构、局部水合、内容驱动
vue	Composition API、Pinia、Vue Router
nuxtjs	Nuxt 3、组合式函数、SSR/SSG、自动导入
nuxt-ui	Nuxt UI 组件、主题、表单
svelte	Runes、stores、SvelteKit
swiftui	视图、状态、导航、动画
react-native	组件、导航、列表
flutter	Widgets、状态、布局、主题
shadcn	shadcn/ui 组件、主题、表单、模式
jetpack-compose	Composables、Modifiers、状态提升、重组
threejs	Three.js 场景、材质、R3F 模式
angular	组件、signals、RxJS、独立 API
laravel	Blade、Livewire、Tailwind、表单模式
javafx	场景图、FXML、CSS、控件
wpf	XAML、MVVM、绑定、样式
winui	WinUI 3、XAML、Fluent、绑定
avalonia	跨平台 XAML、MVVM、样式
uno	Uno Platform、WinUI XAML 跨目标
uwp	UWP XAML、Fluent、自适应 UI

---

示例工作流

用户请求：“为专业护肤服务构建一个落地页”

步骤 1：分析需求

• 产品类型：美妆/水疗服务
• 风格关键词：优雅、专业、柔和
• 行业：美妆/健康养生
• 技术栈：html-tailwind（默认）

步骤 2：生成设计系统（必需）

python3 "$UIUX_DIR/scripts/search.py" "beauty spa wellness service elegant" --design-system -p "Serenity Spa" -f markdown

**输出：**包含模式、风格、颜色、字体排版、效果和反模式的完整设计系统。

步骤 3：补充详细搜索（按需）

# Get UX guidelines for animation and accessibility
python3 "$UIUX_DIR/scripts/search.py" "animation accessibility" --domain ux

# Get alternative typography options if needed
python3 "$UIUX_DIR/scripts/search.py" "elegant luxury serif" --domain typography

步骤 4：技术栈指南

python3 "$UIUX_DIR/scripts/search.py" "layout responsive form" --stack html-tailwind

**然后：**综合设计系统与详细搜索结果，并实现设计。

---

输出格式

--design-system 标志支持两种输出格式：

# ASCII box (default) - best for terminal display
python3 "$UIUX_DIR/scripts/search.py" "fintech crypto" --design-system -f markdown

# Markdown - best for documentation
python3 "$UIUX_DIR/scripts/search.py" "fintech crypto" --design-system -f markdown

---

提升效果的提示

1. 使用具体关键词——“医疗保健 SaaS 仪表盘” > “应用”
2. 多次搜索——不同关键词会带来不同见解
3. 组合领域——风格 + 字体排版 + 颜色 = 完整设计系统
4. 始终检查 UX——搜索“动画”“z-index”“无障碍”以发现常见问题
5. 使用技术栈标志——获取特定于实现的最佳实践
6. 反复迭代——如果首次搜索结果不匹配，请尝试不同的关键词

---

专业 UI 通用规则

以下是经常被忽略、会让 UI 显得不专业的问题：

图标与视觉元素

规则	应做	不应做
不使用表情符号图标	使用 SVG 图标（Heroicons、Lucide、Simple Icons）	将 🎨 🚀 ⚙️ 等表情符号用作 UI 图标
稳定的悬停状态	悬停时使用颜色／不透明度过渡	使用会导致布局偏移的缩放变换
使用正确的品牌 Logo	从 Simple Icons 查找官方 SVG	猜测或使用错误的 Logo 路径
统一图标尺寸	使用固定的 viewBox（24x24）和 w-6 h-6	随意混用不同尺寸的图标

交互与光标

规则	应做	不应做
指针光标	为所有可点击／可悬停的卡片添加 cursor-pointer	在交互元素上保留默认光标
悬停反馈	提供视觉反馈（颜色、阴影、边框）	不提示元素可交互
平滑过渡	使用 transition-colors duration-200	即时改变状态或过渡过慢（>500ms）

浅色／深色模式对比度

规则	应做	不应做
浅色模式下的玻璃卡片	使用 bg-white/80 或更高的不透明度	使用 bg-white/10（透明度过高）
浅色模式下的文本对比度	文本使用 #0F172A（slate-900）	正文文本使用 #94A3B8（slate-400）
浅色模式下的弱化文本	至少使用 #475569（slate-600）	使用 gray-400 或更浅的颜色
边框可见性	浅色模式下使用 border-gray-200	使用 border-white/10（不可见）

布局与间距

规则	应做	不应做
悬浮导航栏	添加 top-4 left-4 right-4 间距	将导航栏固定在 top-0 left-0 right-0
内容内边距	考虑固定导航栏的高度	让内容被固定元素遮挡
统一最大宽度	使用相同的 max-w-6xl 或 max-w-7xl	混用不同的容器宽度

---

交付前检查清单

交付 UI 代码前，请核实以下项目：

视觉质量

• 不使用表情符号作为图标（改用 SVG）
• 所有图标均来自统一的图标集（Heroicons/Lucide）
• 品牌 Logo 正确（已通过 Simple Icons 核实）
• 悬停状态不会导致布局偏移
• 直接使用主题颜色（bg-primary），而非 var() 包装器

交互

• 所有可点击元素都带有 cursor-pointer
• 悬停状态提供清晰的视觉反馈
• 过渡平滑（150-300ms）
• 键盘导航时焦点状态清晰可见

浅色／深色模式

• 浅色模式下的文本对比度充足（至少 4.5:1）
• 玻璃／透明元素在浅色模式下清晰可见
• 两种模式下的边框都清晰可见
• 交付前测试两种模式

布局

• 悬浮元素与边缘之间留有适当间距
• 没有内容被固定导航栏遮挡
• 在 375px、768px、1024px、1440px 宽度下均能自适应
• 移动设备上没有水平滚动

无障碍

• 所有图片都有 alt 文本
• 表单输入框都有标签
• 颜色不是唯一的指示方式
• 遵循 prefers-reduced-motion 设置