用途
UI/UX Pro Max 是一个前端 UI/UX 设计智能技能，用于在用户请求设计、构建、创建、实现、审查、修复或改进界面时提供设计决策支持。它提供可搜索的数据库，涵盖 UI 风格、配色方案、字体搭配、图表类型、产品推荐、UX 指南以及特定技术栈的最佳实践。当用户要求美观、惊艳、华丽或具有美感的界面时，应优先激活此技能。
主要能力
该技能通过一个 Python 搜索脚本按领域检索设计信息，可搜索的领域包括：
- product：按产品类型获取风格推荐，关键词如 SaaS、e-commerce、portfolio、healthcare、beauty、service。
- style：获取详细风格指南（颜色、效果、框架），关键词如 glassmorphism、minimalism、dark mode、brutalism。
- typography：获取字体搭配及 Google Fonts 导入，关键词如 elegant、playful、professional、modern。
- color：按产品类型获取配色方案（Primary、Secondary、CTA、Background、Text、Border），关键词如 saas、ecommerce、healthcare、beauty、fintech、service。
- landing：获取页面结构与 CTA 策略，关键词如 hero、hero-centric、testimonial、pricing、social-proof。
- chart：获取图表类型与库推荐，关键词如 trend、comparison、timeline、funnel、pie。
- ux：获取最佳实践与反模式，关键词如 animation、accessibility、z-index、loading。
- prompt：获取 AI 提示词与 CSS 关键词，关键词为风格名称。
同时支持按技术栈检索特定指南，可用技术栈包括：html-tailwind（默认）、react、nextjs、vue、svelte、swiftui、react-native、flutter。
使用方式
前置条件：检查 Python 是否安装。
python3 --version || python --version
如未安装，按操作系统安装：
macOS：
brew install python3
Ubuntu/Debian：
sudo apt update && sudo apt install python3
Windows：
winget install Python.Python.3.12
工作流程：
第 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>]
推荐搜索顺序：Product → Style → Typography → Color → Landing（若为落地页）→ Chart（若为仪表盘/分析）→ UX → Stack。
第 3 步：技术栈指南（默认 html-tailwind）。若用户未指定技术栈，默认使用 html-tailwind。
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
示例工作流（用户请求：为专业护肤服务制作落地页）：
# 1. 搜索产品类型
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
# 2. 搜索风格（基于行业：beauty、elegant）
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
随后综合所有搜索结果并实现设计。
提升效果的技巧：关键词要具体（"healthcare SaaS dashboard" 优于 "app"）；多次搜索，不同关键词揭示不同见解；组合领域（风格 + 排版 + 颜色 = 完整设计系统）；始终检查 UX（搜索 animation、z-index、accessibility 以发现常见问题）；使用 stack 标志获取实现层面的最佳实践；迭代，若首次搜索不匹配则尝试不同关键词。
专业 UI 的常见规则
图标与视觉元素：不使用 emoji 作为 UI 图标，应使用 SVG 图标（Heroicons、Lucide、Simple Icons）；悬停状态应稳定，使用颜色/透明度过渡而非导致布局偏移的缩放变换；品牌 logo 应正确，从 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）；边框在浅色模式使用 border-gray-200，而非 border-white/10（不可见）。
布局与间距：浮动导航栏添加 top-4 left-4 right-4 间距，而非贴紧 top-0 left-0 right-0；内容内边距需考虑固定导航栏高度，避免内容被固定元素遮挡；容器最大宽度保持一致（如统一使用 max-w-6xl 或 max-w-7xl）。
交付前检查清单
视觉质量：未使用 emoji 作为图标（改用 SVG）；所有图标来自一致图标集（Heroicons/Lucide）；品牌 logo 正确（已从 Simple Icons 验证）；悬停状态不引起布局偏移。
交互：所有可点击元素有 cursor-pointer；悬停状态提供清晰视觉反馈；过渡平滑（150-300ms）；键盘导航的焦点状态可见。
明暗模式：浅色模式文字对比度充足（最低 4.5:1）；玻璃/透明元素在浅色模式可见；边框在两种模式下均可见；交付前测试两种模式。
布局：浮动元素与边缘有适当间距；内容不被固定导航栏遮挡；在 320px、768px、1024px、1440px 下响应式正常；移动端无横向滚动。
无障碍：所有图片有 alt 文本；表单输入有标签；颜色不是唯一指示器；尊重 prefers-reduced-motion。
适用场景
适用于需要设计或实现前端界面的场景，包括 SaaS、电商、作品集、仪表盘、落地页等产品类型，以及需要风格、配色、字体、图表、UX 指南和特定技术栈最佳实践支持的设计任务。
限制
该技能依赖 Python 环境，需先安装 Python 3。搜索脚本路径为 .claude/skills/ui-ux-pro-max/scripts/search.py。关于收费、价格、平台支持范围等更多信息，资料暂未提供。