ui-ux-pro-max

UI/UX Pro Max

概述

UI UX Pro Max 是 NextLevelBuilder 推出的开源（MIT）技能包，为编码 Agent 提供可离线查询的设计数据：79 种可搜索的 UI 风格、192 种配有匹配调色板的产品类型、74 组字体搭配、25 种图表类型、119 条 UX 指南，以及适用于 22 种技术栈的规则（截至 v2.15.0 的数量），还包含一个可将它们组合成产品设计系统的生成器。本技能介绍如何安装和查询该技能包，以及一种精简的设计方法——交互设计、用户流程、组件模式、无障碍设计和微交互；无论是否安装该技能包，这些方法都适用。

使用说明

在 UI UX Pro Max 技能包可用时使用它

在建议安装之前，先检查是否已安装。安装程序会将七个技能（ui-ux-pro-max、design、design-system、ui-styling、brand、banner-design、slides——约 170 个文件、5 MB）复制到项目中，因此请先征求用户同意。

# Already installed? (project, universal, or home directory)
ls .claude/skills/ui-ux-pro-max/scripts/search.py .agents/skills/ui-ux-pro-max/scripts/search.py \
   ~/.claude/skills/ui-ux-pro-max/scripts/search.py 2>/dev/null
python3 --version

# Install into the current project (the npm package is ui-ux-pro-max-cli; its command is uipro)
npx ui-ux-pro-max-cli init --ai claude       # .claude/skills/   also: cursor, gemini, copilot, windsurf, opencode, all
npx ui-ux-pro-max-cli init --ai codex        # .agents/skills/   (same target as --ai universal)
npx ui-ux-pro-max-cli init --ai claude --global   # ~/.claude/skills/ for every project

在 Claude Code 中，该技能包也可作为插件使用：/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill，然后运行 /plugin install ui-ux-pro-max@ui-ux-pro-max-skill。

先生成设计系统，再查询详细信息。将 SEARCH 指向技能包的安装位置：

SEARCH=.claude/skills/ui-ux-pro-max/scripts/search.py

# One recommendation: landing pattern, style, palette, typography, effects, anti-patterns, checklist
python3 $SEARCH "veterinary clinic appointment booking" --design-system -p "Pawline Vet" -f markdown

# Save it for later sessions: design-system/pawline-vet/MASTER.md plus pages/booking.md
# (files that already exist are left untouched; add --force to overwrite MASTER.md)
python3 $SEARCH "veterinary clinic appointment booking" --design-system --persist -p "Pawline Vet" --page booking --output-dir .

# Targeted lookups (-n sets the number of results, default 3; --json returns untruncated fields)
python3 $SEARCH "form validation error message" --domain ux -n 2
python3 $SEARCH "form validation" --stack nextjs
python3 $SEARCH "skeleton loading" --domain ux --json

--domain 接受 style、color、chart、landing、product、ux、typography、icons、gsap、react、web、google-fonts。--stack 接受 react、nextjs、vue、nuxtjs、nuxt-ui、svelte、astro、angular、laravel、html-tailwind、shadcn、threejs、swiftui、jetpack-compose、react-native、flutter、javafx、wpf、winui、avalonia、uno、uwp。如果存在已保存的设计系统，编写 UI 代码前先阅读 MASTER.md；pages/ 中的文件会覆盖该页面的主设计系统。

设计方法

当用户请求 UI/UX 指导或实现时，请遵循以下步骤：

第 1 步：了解设计背景

方面	需要了解的内容
用户	他们是谁？是否具备技术背景？使用频率如何？
任务	用户想要完成什么？
情境	使用桌面端、移动端，还是两者皆有？时间紧迫还是用于探索？
复杂度	有多少步骤？有多少数据？有多少选项？
现有模式	产品已遵循哪些惯例？

第 2 步：应用核心 UX 原则

渐进式披露： 每一步只显示所需内容。通过可展开区域、工具提示或高级设置隐藏复杂内容。

反馈闭环： 每项用户操作都必须在 100ms 内产生可见反馈。点击、提交、错误、成功等操作都需要明确的响应。

预防错误优于处理错误： 禁用无效选项、提供行内校验、使用智能默认值。预防错误的成本低于从错误中恢复。

识别优于回忆： 应让用户看到选项，而不是要求他们记住选项。已知选项应使用下拉菜单，而不是自由文本。显示最近使用的项目和建议。

一致性： 相同操作在任何地方都应遵循相同模式。如果点击一行会在某个页面打开详情面板，那么在每个页面上都应如此。

第 3 步：设计交互模式

导航模式：

Top nav:        Best for < 7 primary sections, public sites
Sidebar nav:    Best for apps with deep hierarchy, frequent switching
Bottom tabs:    Best for mobile, 3-5 primary destinations
Breadcrumbs:    Best for deep hierarchies where users need to backtrack
Command palette: Best for power users, keyboard-driven apps

表单模式：

Single column:  Best for most forms (faster completion)
Multi-column:   Only for related short fields (city/state/zip)
Stepped wizard: Best for 7+ fields or complex flows
Inline editing: Best for settings and profile pages

数据展示模式：

Table:          Best for comparing items with many attributes
Card grid:      Best for visual items or browsing
List:           Best for sequential or prioritized items
Detail panel:   Best for master-detail workflows
Dashboard:      Best for monitoring metrics at a glance

步骤 4：精心实现

加载状态：

• 使用骨架屏而非加载动画（不会那么突兀，感觉也更快）
• 操作耗时超过 3 秒时显示进度条
• 常见操作使用乐观 UI（立即显示成功，失败时回滚）

空状态：

• 绝不显示空白屏幕。说明这里会显示什么，以及如何开始
• 添加插图或图标，缓解空荡感
• 提供主要操作按钮（“创建你的第一个项目”）

过渡和动画：

Duration:   150-300ms for UI transitions (faster feels snappy)
Easing:     ease-out for entrances, ease-in for exits
Motion:     Fade + slight translate (8-16px) for appearing elements
Hover:      Scale 1.02-1.05 for cards, color shift for buttons
Focus:      Visible ring (2px offset) for keyboard navigation

重要的微交互：

• 按钮按下：激活时轻微缩小（0.97）
• 切换开关：平滑滑动并过渡颜色
• 复选框：勾选标记以轻微弹跳的效果绘制出来
• 表单提交：按钮显示加载状态，然后显示成功勾选标记
• 删除：项目滑出，显示撤销提示

步骤 5：验证设计

• 5 秒测试： 新用户能否在 5 秒内识别页面用途？
• 眯眼测试： 模糊视线时，视觉层级是否依然清晰？
• Tab 键测试： 能否仅用键盘完成整个流程的导航？
• 错误测试： 出错时会发生什么？数据为空？文本过长？网络缓慢？

示例

示例 1：使用 pack 生成并持久化设计系统

用户请求：“我们正在为 Pawline Vet（一家兽医诊所）开发预约网站。为它选择一种风格，并确保各页面风格一致。”

SEARCH=.claude/skills/ui-ux-pro-max/scripts/search.py
python3 $SEARCH "veterinary clinic appointment booking" --design-system --persist -p "Pawline Vet" --page booking --output-dir .

**结果：**脚本会打印推荐内容，并在首次运行时写入两个文件。返回的关键值如下：

Category:    Veterinary Clinic
Pattern:     Trust & Authority + Conversion (Hero > Proof > Solution overview > Clear CTA path)
Style:       Claymorphism — light mode supported, dark mode conditional
Colors:      Primary #0D9488, Secondary #14B8A6, Accent/CTA #EA580C, Background #F0FDFA, Foreground #134E4A
Typography:  Varela Round (headings) / Nunito Sans (body), with the Google Fonts import
Checklist:   contrast 4.5:1, visible focus states, prefers-reduced-motion, responsive at 375/768/1024/1440px

design-system/pawline-vet/MASTER.md          # colors as CSS variables, typography, spacing, component specs
design-system/pawline-vet/pages/booking.md   # overrides for the booking page only

建议的行动号召是“联系销售 / 获取报价”，这不适合诊所——构建前请在 MASTER.md 中将其替换为“预约”，然后根据这些文件实现页面。

示例 2：改善设置页面的 UX

用户请求：“我们的设置页面让人困惑，帮我重新设计一下。”

分析和输出：

## Current Issues
1. All settings on one long page — overwhelming
2. No grouping — unrelated settings mixed together
3. Save button only at the bottom — easy to miss
4. No indication of which settings were changed

## Recommended Design

### Structure
- Group settings into logical sections with a left sidebar:
  - General, Notifications, Security, Billing, Integrations
- Each section loads as its own panel on the right

### Interaction
- Auto-save with a subtle "Saved" toast (no save button needed)
- Or: floating save banner that appears only when changes are detected
- Show changed fields with a subtle highlight
- Add "Reset to default" per field, not per page

### Component Pattern
[Sidebar] → [Section Header + Description] → [Setting Group]

Each setting:
  Label (bold) + Description (gray, smaller)
  Input/Toggle/Select aligned to the right
  Divider between settings

示例 3：设计系统组件审查

用户请求：“帮我为应用创建风格一致的按钮。”

输出：

## Button System

### Hierarchy (use exactly these 4 variants)
| Variant | Use Case | Example |
|---------|----------|---------|
| Primary | Main CTA, 1 per screen | "Save", "Submit", "Create" |
| Secondary | Supporting actions | "Cancel", "Back", "Export" |
| Ghost | Tertiary actions | "Learn more", "View all" |
| Destructive | Irreversible actions | "Delete", "Remove" |

### Sizes
| Size | Height | Padding | Font | Use Case |
|------|--------|---------|------|----------|
| sm | 32px | 12px 16px | 13px | Tables, dense UI |
| md | 40px | 12px 20px | 14px | Default, forms |
| lg | 48px | 14px 24px | 16px | Hero CTAs, landing |

### States (every button needs all of these)
- Default → Hover (darken 10%) → Active (darken 15%, scale 0.98)
- Focus (visible ring, 2px offset)
- Disabled (50% opacity, no pointer events)
- Loading (spinner replaces text, same width to prevent layout shift)

### Rules
- Max 1 primary button per visible area
- Destructive buttons require a confirmation step
- Icon-only buttons need a tooltip and aria-label
- Button text: verb + noun ("Create project" not just "Create")

指南

• 针对 80% 的常见情况进行设计。优化常见操作路径。边缘情况放在菜单和高级选项中。
• 每个屏幕都应有一个明显的下一步操作。如果用户犹豫不决，说明设计失败了。
• 留白不是浪费空间。塞入更多元素并不会让界面更实用。
• 文案也是 UX 的一部分。“出了点问题”不好。“无法保存你的更改。请检查网络连接后重试。”才好。
• 使用真实数据进行测试。卡片显示 3 个词时看起来很棒，换成 30 个词可能就会出问题。要针对最坏情况进行设计。
• 性能就是 UX。漂亮的界面如果需要 4 秒才响应，会让人觉得出了故障。
• 无障碍设计惠及所有人。键盘导航、屏幕阅读器、颜色对比度和动态效果偏好都很重要。
• 犹豫不决时，就看看哪些做法有效。研究人们已经在使用并喜爱的界面。没有充分理由时，不要重新发明已有模式。
• 将 pack 的设计系统视为起点。它按关键词匹配对行排序，因此要检查匹配的类别，并调整任何不适合产品的内容；如果类别有误，请使用更具体的查询重新运行。
• 使用当前的 npm 包 ui-ux-pro-max-cli。较旧的 uipro-cli 包停留在 2.2.3 版（2026 年 1 月），且包含过时数据。
• 如果 .claude/skills/ui-ux-pro-max/ 已存在——例如此技能以该名称安装——init --ai claude 会报告成功，但不会写入任何内容。请使用 --ai universal 安装、使用 Claude Code 插件，或传入 --force，此选项会将现有的 SKILL.md 替换为 pack 自带的文件。
• uipro versions 会查询 GitHub API，未认证配额用尽后会因速率限制错误而失败；init 从 npm 包安装，不需要调用该 API。uipro uninstall 会请求确认，因此让用户自行运行。
• 不要为了让 pack 正常工作而安装 Python 或其他软件；如果缺少 python3，请告知用户，并继续使用设计方法。