name: ui-ux-pro-max description: “UI/UX设计智能。50种样式，21种调色板，50种字体配对，20种图表，9种栈（React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui）。操作：规划、构建、创建、设计、实施、审查、修复、改进、优化、增强、重构、检查UI/UX代码。项目：网站、落地页、仪表板、管理面板、电子商务、SaaS、组合、博客、移动应用、.html、.tsx、.vue、.svelte。元素：按钮、模态、导航栏、侧边栏、卡片、表格、表单、图表。样式：玻璃拟态、粘土拟态、极简主义、粗野主义、新拟态、便当网格、暗模式、响应式、拟物化、扁平设计。主题：色彩调色板、可访问性、动画、布局、排版、字体配对、间距、悬停、阴影、渐变。集成：shadcn/ui MCP用于组件搜索和示例。”
UI/UX Pro Max - 设计智能
全面网页和移动应用设计指南。包含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-labelkeyboard-nav- Tab顺序匹配视觉顺序form-labels- 使用带for属性的标签
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-motioncontent-jumping- 为异步内容预留空间
4. 布局与响应式（高）
viewport-meta- width=device-width initial-scale=1readable-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/heightloading-states- 骨架屏或加载指示器
7. 样式选择（中）
style-match- 样式匹配产品类型consistency- 在所有页面使用相同样式no-emoji-icons- 使用SVG图标，而非表情符号
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"]
此命令：
- 并行搜索5个领域（产品、样式、颜色、落地、排版）
- 应用
ui-reasoning.csv中的推理规则选择最佳匹配 - 返回完整设计系统：模式、样式、颜色、排版、效果
- 包括要避免的反模式
示例：
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
步骤3：补充详细搜索（根据需要）
获取设计系统后，使用领域搜索获取额外细节：
python3 .claude/skills/ui-ux-pro-max/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 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
可用栈：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn
搜索参考
可用领域
| 领域 | 用途 | 示例关键词 |
|---|---|---|
product |
产品类型推荐 | SaaS、电子商务、组合、医疗健康、美容、服务 |
style |
UI样式、颜色、效果 | 玻璃拟态、极简主义、暗模式、粗野主义 |
typography |
字体配对、Google Fonts | 优雅、有趣、专业、现代 |
color |
按产品类型的色彩调色板 | saas、ecommerce、医疗健康、美容、金融科技、服务 |
landing |
页面结构、CTA策略 | hero、hero-centric、testimonial、pricing、social-proof |
chart |
图表类型、库推荐 | trend、comparison、timeline、funnel、pie |
ux |
最佳实践、反模式 | animation、accessibility、z-index、loading |
react |
React/Next.js性能 | waterfall、bundle、suspense、memo、rerender、cache |
web |
Web界面指南 | aria、focus、keyboard、semantic、virtualize |
prompt |
AI提示、CSS关键词 | (样式名称) |
可用栈
| 栈 | 焦点 |
|---|---|
html-tailwind |
Tailwind工具、响应式、a11y（默认） |
react |
状态、钩子、性能、模式 |
nextjs |
SSR、路由、图像、API路由 |
vue |
组合API、Pinia、Vue Router |
svelte |
Runes、商店、SvelteKit |
swiftui |
视图、状态、导航、动画 |
react-native |
组件、导航、列表 |
flutter |
组件、状态、布局、主题 |
shadcn |
shadcn/ui组件、主题、表单、模式 |
示例工作流程
用户请求： “Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp”
步骤1：分析需求
- 产品类型：美容/水疗服务
- 样式关键词：优雅、专业、柔和
- 行业：美容/健康
- 栈：html-tailwind（默认）
步骤2：生成设计系统（必需）
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
输出： 完整设计系统，包括模式、样式、颜色、排版、效果，以及要避免的反模式
步骤3：补充详细搜索（根据需要）
# 获取动画和可访问性的UX指南
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# 如果需要，获取替代排版选项
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
步骤4：栈指南
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
然后： 综合设计系统 + 详细搜索并实施设计
输出格式
--design-system标志支持两种输出格式：
# ASCII框（默认）- 最佳用于终端显示
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - 最佳用于文档
python3 .claude/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看起来不专业：
图标与视觉元素
| 规则 | 做 | 不做 |
|---|---|---|
| 无表情符号图标 | 使用SVG图标（Heroicons、Lucide、Simple Icons） | 使用表情符号如🎨 🚀 ⚙️作为UI图标 |
| 稳定悬停状态 | 在悬停时使用颜色/透明度过渡 | 使用导致布局偏移的缩放变换 |
| 正确的品牌标志 | 从Simple Icons研究官方SVG | 猜测或使用不正确的标志路径 |
| 一致的图标大小 | 使用固定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）
- [ ] 品牌标志正确（从Simple Icons验证）
- [ ] 悬停状态不会导致布局偏移
- [ ] 直接使用主题颜色（bg-primary），而非var()包装器
交互
- [ ] 所有可点击元素有
cursor-pointer - [ ] 悬停状态提供清晰的视觉反馈
- [ ] 过渡平滑（150-300ms）
- [ ] 焦点状态对键盘导航可见
明暗模式
- [ ] 亮模式文本有足够对比度（最小4.5:1）
- [ ] 玻璃/透明元素在亮模式下可见
- [ ] 边框在两种模式下都可见
- [ ] 交付前测试两种模式
布局
- [ ] 浮动元素与边缘有适当间距
- [ ] 没有内容隐藏在固定导航栏后
- [ ] 在375px、768px、1024px、1440px处响应式
- [ ] 在移动设备上无水平滚动
可访问性
- [ ] 所有图像有alt文本
- [ ] 表单输入有标签
- [ ] 颜色不是唯一指示器
- [ ]
prefers-reduced-motion受到尊重