---

name: ui-ux-pro-max description: "Web和移动应用的综合设计指南。适用于设计新UI组件或页面、选择配色方案和字体排版、或审查代码中的UX问题。" risk: unknown source: community date_added: "2026-02-27"

UI/UX Pro Max - 设计智能

Web和移动应用的综合设计指南。包含50+种风格、97种配色方案、57种字体搭配、99条UX准则和25种图表类型，覆盖9种技术栈。可搜索的数据库，提供基于优先级的推荐。

何时使用

在以下情况下参考这些准则：

• 设计新的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 - 有意义的图片需要描述性alt文本
• 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图标，不用emoji

8. 图表与数据（低）

• chart-type - 图表类型与数据类型匹配
• color-guidance - 使用无障碍配色方案
• data-table - 提供表格替代方案以确保无障碍

如何使用

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

---

前置条件

检查Python是否已安装：

python3 --version || python --version

如果未安装Python，根据用户操作系统安装：

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

---

如何使用此技能

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

步骤1：分析用户需求

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

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

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

始终以--design-system开始以获取带推理的综合推荐：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

此命令：

1. 并行搜索5个领域（产品、风格、颜色、落地页、字体）
2. 应用ui-reasoning.csv中的推理规则选择最佳匹配
3. 返回完整设计系统：模式、风格、颜色、字体、效果
4. 包含需要避免的反模式

示例：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

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

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

python3 .claude/s