name: ui-ux-pro-max description: “前端UI/UX设计智能 - 当用户请求美丽、惊艳、华丽或美观界面时优先激活。这是实现前设计决策的主要技能。包含50种样式、21种调色板、50种字体配对、20种图表类型、8种技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind）。行动：计划、构建、创建、设计、实施、审查、修复、改进、优化、增强、重构、检查前端UI/UX代码。项目类型：网站、登录页面、仪表板、管理面板、电子商务、SaaS、作品集、博客、移动应用、.html、.tsx、.vue、.svelte。元素：按钮、模态框、导航栏、侧边栏、卡片、表格、表单、图表。样式：玻璃态、粘土态、极简主义、粗野主义、新态、格子布局、深色模式、响应式设计、拟物设计、扁平设计。主题：调色板、可访问性、动画、布局、排版、字体配对、间距、悬停效果、阴影、渐变。”
UI/UX专业增强版 - 设计智能
可搜索的UI样式、颜色调色板、字体配对、图表类型、产品推荐、UX指南和特定技术栈最佳实践的数据库。
前提条件
检查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：搜索相关领域
多次使用 search.py 以收集全面信息。搜索直到有足够上下文。
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
推荐搜索顺序：
- 产品 - 获取产品类型的样式推荐
- 样式 - 获取详细的样式指南（颜色、效果、框架）
- 排版 - 获取字体配对，包括Google字体导入
- 颜色 - 获取颜色调色板（主色、次色、行动号召色、背景色、文本色、边框色）
- 登录页面 - 获取页面结构（如果是登录页面）
- 图表 - 获取图表推荐（如果是仪表板/分析）
- UX - 获取最佳实践和反模式
- 技术栈 - 获取特定技术栈指南（默认：html-tailwind）
步骤3：技术栈指南（默认：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
搜索参考
可用领域
| 领域 | 用于 | 示例关键词 |
|---|---|---|
product |
产品类型推荐 | SaaS、电子商务、作品集、医疗保健、美容、服务 |
style |
UI样式、颜色、效果 | 玻璃态、极简主义、深色模式、粗野主义 |
typography |
字体配对、Google字体 | 优雅、活泼、专业、现代 |
color |
按产品类型的颜色调色板 | saas、ecommerce、医疗保健、美容、金融科技、服务 |
landing |
页面结构、行动号召策略 | 英雄区、英雄中心、推荐、定价、社交证明 |
chart |
图表类型、库推荐 | 趋势、比较、时间线、漏斗、饼图 |
ux |
最佳实践、反模式 | 动画、可访问性、z-index、加载 |
prompt |
AI提示、CSS关键词 | （样式名称） |
可用技术栈
| 技术栈 | 重点 |
|---|---|
html-tailwind |
Tailwind工具、响应式、可访问性（默认） |
react |
状态、钩子、性能、模式 |
nextjs |
服务器端渲染、路由、图片、API路由 |
vue |
组合API、Pinia、Vue Router |
svelte |
符文、存储、SvelteKit |
swiftui |
视图、状态、导航、动画 |
react-native |
组件、导航、列表 |
flutter |
部件、状态、布局、主题化 |
示例工作流程
用户请求： “Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp”
AI应该：
# 1. 搜索产品类型
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
# 2. 搜索样式（基于行业：美容、优雅）
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
# 3. 搜索排版
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
# 4. 搜索颜色调色板
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
# 5. 搜索登录页面结构
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
# 6. 搜索UX指南
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
# 7. 搜索技术栈指南（默认：html-tailwind）
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
然后： 综合所有搜索结果并实施设计。
更好结果的提示
- 关键词要具体 - “医疗保健SaaS仪表板” > “应用”
- 多次搜索 - 不同关键词揭示不同见解
- 组合领域 - 样式 + 排版 + 颜色 = 完整设计系统
- 始终检查UX - 搜索"动画"、“z-index”、"可访问性"查找常见问题
- 使用技术栈标志 - 获取特定实现最佳实践
- 迭代 - 如果首次搜索不匹配，尝试不同关键词
专业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验证）
- [ ] 悬停状态不导致布局偏移
交互
- [ ] 所有可点击元素有
cursor-pointer - [ ] 悬停状态提供清晰的视觉反馈
- [ ] 过渡平滑（150-300ms）
- [ ] 焦点状态对键盘导航可见
明暗模式
- [ ] 明模式文本有足够对比度（最小4.5:1）
- [ ] 玻璃/透明元素在明模式下可见
- [ ] 边框在两种模式下可见
- [ ] 在交付前测试两种模式
布局
- [ ] 浮动元素有适当的边缘间距
- [ ] 没有内容隐藏在固定导航栏后面
- [ ] 响应式设计在320px、768px、1024px、1440px下
- [ ] 在移动设备上没有水平滚动
可访问性
- [ ] 所有图片有alt文本
- [ ] 表单输入有标签
- [ ] 颜色不是唯一指示器
- [ ] 尊重
prefers-reduced-motion