UX Pro Max - 设计智能 是做什么的？
适用于 Web 和移动应用的综合性设计指南。包含 67 种风格、96 个调色板、57 种字体搭配、99 条 UX 准则和 25 种图表类型，覆盖 13 个技术栈。可搜索的数据库，带有优先级推荐。
何时应用
在以下情况参考这些指南：
- 设计新的 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:1focus-states- 可交互元素上可见的焦点环alt-text- 为有意义的图片提供描述性替代文本aria-labels- 为纯图标按钮提供 aria-labelkeyboard-nav- Tab 顺序与视觉顺序一致form-labels- 使用含 for 属性的 label 标签
2. 触摸与交互（关键）
touch-target-size- 触摸目标最小 44x44 像素hover-vs-tap- 主要交互使用点击/触摸loading-buttons- 异步操作期间禁用按钮error-feedback- 在问题附近显示清晰的错误消息cursor-pointer- 为可点击元素添加 cursor-pointer
3. 性能（高）
image-optimization- 使用 WebP、srcset、懒加载reduced-motion- 检查 prefers-reduced-motioncontent-jumping- 为异步内容预留空间
4. 布局与响应式（高）
viewport-meta- width=device-width initial-scale=1readable-font-size- 移动端正文最小 16 像素horizontal-scroll- 确保内容不超出视口宽度z-index-management- 定义 z-index 层级（10、20、30、50）
5. 字体与颜色（中）
line-height- 正文使用 1.5-1.75line-length- 每行限制 65-75 个字符font-pairing- 匹配标题/正文字体的性格
6. 动画（中）
duration-timing- 微交互使用 150-300 毫秒transform-performance- 使用 transform/opacity，避免 width/heightloading-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 skills/ui-ux-pro-max/scripts/search.py "<产品类型> <行业> <关键词>" --design-system [-p "项目名称"]
此命令：
- 并行搜索 5 个领域（产品、风格、颜色、落地页、字体）
- 应用
ui-reasoning.csv中的推理规则选择最佳匹配 - 返回完整的设计系统：模式、风格、颜色、字体、效果
- 包含应避免的反模式
示例：
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
第 2b 步：持久化设计系统（主 + 覆盖模式）
要跨会话保存设计系统以实现层级化检索，添加 --persist：
python3 skills/ui-ux-pro-max/scripts/search.py "<查询>" --design-system --persist -p "项目名称"
这将创建：
design-system/MASTER.md— 包含所有设计规则的全局真相源design-system/pages/— 用于页面特定覆盖的文件夹
带页面特定覆盖：
python3 skills/ui-ux-pro-max/scripts/search.py "<查询>" --design-system --persist -p "项目名称" --page "dashboard"
这还会创建：
design-system/pages/dashboard.md— 页面特定的主文件偏差
层级化检索如何工作：
- 构建特定页面（如“Checkout”）时，首先检查
design-system/pages/checkout.md - 如果页面文件存在，其规则覆盖主文件
- 如果不存在，则仅使用
design-system/MASTER.md
第 3 步：根据需要用详细搜索补充
获得设计系统后，使用领域搜索获取更多细节：
python3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
何时使用详细搜索：
| 需求 | 领域 | 示例 |
|---|---|---|
| 更多风格选项 | 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 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind
可用技术栈：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose
搜索参考
可用领域
| 领域 | 用途 | 示例关键词 |
|---|---|---|
product | 产品类型推荐 | SaaS、电子商务、作品集、医疗、美容、服务 |
style | UI 风格、颜色、效果 | glassmorphism、极简、深色模式、brutalism |
typography | 字体搭配、Google Fonts | 优雅、有趣、专业、现代 |
color | 按产品类型划分的调色板 | SaaS、电子商务、医疗、美容、金融科技、服务 |
landing | 页面结构、CTA 策略 | Hero、Hero 中心、推荐、定价、社交证明 |
chart | 图表类型、库推荐 | 趋势、比较、时间线、漏斗、饼图 |
ux | 最佳实践、反模式 | 动画、无障碍、z-index、加载 |
react | React/Next.js 性能 | 瀑布流、打包、Suspend、Memo、重渲染、缓存 |
web | Web 界面指南 | ARIA、焦点、键盘、语义、虚拟化 |
prompt | AI 提示、CSS 关键词 | (风格名称) |
可用技术栈
| 技术栈 | 关注点 |
|---|---|
html-tailwind | Tailwind 工具类、响应式、无障碍（默认） |
react | 状态、Hook、性能、模式 |
nextjs | SSR、路由、图片、API 路由 |
vue | 组合式 API、Pinia、Vue Router |
svelte | Runes、Store、SvelteKit |
swiftui | 视图、状态、导航、动画 |
react-native | 组件、导航、列表 |
flutter | 小部件、状态、布局、主题化 |
shadcn | shadcn/ui 组件、主题化、表单、模式 |
jetpack-compose | 可组合项、修饰符、状态提升、重组 |
示例工作流
用户请求：“为专业护肤服务制作落地页”
第 1 步：分析需求
- 产品类型：美容/水疗服务
- 风格关键词：优雅、专业、柔和
- 行业：美容/健康
- 技术栈：html-tailwind（默认值）
第 2 步：生成设计系统（必需）
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
输出： 包含模式、风格、颜色、字体、效果和反模式的完整设计系统。
第 3 步：根据需要用详细搜索补充
# 获取动画和无障碍的 UX 准则
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# 如果需要获取替代字体选项
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
第 4 步：技术栈指南
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
然后： 综合设计系统 + 详细搜索并实现设计。
输出格式
--design-system 标志支持两种输出格式：
# ASCII 框（默认） - 最适合终端显示
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - 最适合文档
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
获得更好结果的提示
- 关键词要具体 - “healthcare SaaS dashboard” 优于 “app”
- 多次搜索 - 不同关键词揭示不同见解
- 组合领域 - 风格 + 字体 + 颜色 = 完整设计系统
- 始终检查 UX - 搜索 “animation”、“z-index”、“accessibility” 以发现常见问题
- 使用技术栈标志 - 获取特定实现的最佳实践
- 迭代 - 如果首次搜索不匹配，请尝试不同关键词
专业 UI 的通用规则
这些是经常被忽视、导致 UI 外观不够专业的问题：
图标与视觉元素
| 规则 | 应做 | 不应做 |
|---|---|---|
| 不要使用 emoji 图标 | 使用 SVG 图标（Heroicons、Lucide、Simple Icons） | 使用 🎨 🚀 ⚙️ 等 emoji 作为 UI 图标 |
| 稳定的悬停状态 | 悬停时使用颜色/透明度过渡 | 使用导致布局偏移的缩放变换 |
| 正确的品牌标志 | 从 Simple Icons 查找官方 SVG | 猜测或使用不正确的标志路径 |
| 一致的图标尺寸 | 使用固定 viewBox（24x24）搭配 w-6 h-6 | 随机混合不同图标尺寸 |
交互与光标
| 规则 | 应做 | 不应做 |
|---|---|---|
| 光标指针 | 为所有可点击/悬停卡片添加 cursor-pointer | 在交互元素上保留默认光标 |
| 悬停反馈 | 提供视觉反馈（颜色、阴影、边框） | 无任何交互指示 |
| 平滑过渡 | 使用 transition-colors duration-200 | 瞬时状态变化或过慢（>500 毫秒） |
浅色/深色模式对比度
| 规则 | 应做 | 不应做 |
|---|---|---|
| 浅色模式玻璃卡片 | 使用 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 代码之前，请验证以下项目：
视觉质量
- 未将 emoji 用作图标（已使用 SVG）
- 所有图标来自一致的图标集（Heroicons/Lucide）
- 品牌标志正确（已从 Simple Icons 验证）
- 悬停状态不会导致布局偏移
- 直接使用主题颜色（bg-primary）而非 var() 包装器
交互
- 所有可点击元素都有
cursor-pointer - 悬停状态提供清晰的视觉反馈
- 过渡流畅（150-300 毫秒）
- 焦点状态对键盘导航可见
浅色/深色模式
- 浅色模式文本有足够对比度（最低 4.5:1）
- 玻璃/透明元素在浅色模式下可见
- 两种模式下边框均可见
- 交付前测试两种模式
布局
- 浮动元素与边缘保持适当间距
- 无内容隐藏在固定导航栏后面
- 在 375px、768px、1024px、1440px 下响应式良好
- 移动端无水平滚动
无障碍
- 所有图片都有替代文本
- 表单输入有标签
- 颜色不是唯一指示符
- 遵守
prefers-reduced-motion