用途
ui-ux-pro-max 是一个面向 Web 与移动应用的综合性设计指南技能，核心是一个可搜索数据库，用于在 UI/UX 设计、构建、创建、实现、审查、修复和改进等任务中提供基于优先级的推荐。
主要能力
数据库覆盖 13 个技术栈，包含：
- 67 种设计风格
- 96 套配色方案
- 57 组字体搭配
- 99 条 UX 指南
- 25 种图表类型
搜索按领域组织，可用领域包括：product（产品类型推荐）、style（UI 风格、颜色、效果）、typography（字体搭配、Google Fonts）、color（按产品类型的配色）、landing（页面结构、CTA 策略）、chart（图表类型、库推荐）、ux（最佳实践、反模式）、react（React/Next.js 性能）、web（Web 界面指南）、prompt（AI 提示、CSS 关键词）。
可用技术栈包括：html-tailwind（默认）、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose。
使用方式
前置条件
检查 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 步：生成设计系统（必需）
始终以 --design-system 开始，获取带推理的完整推荐：
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
该命令并行搜索 5 个领域（product、style、color、landing、typography），应用 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 "<query>" --design-system --persist -p "Project Name"
这会创建：
- design-system/MASTER.md — 包含所有设计规则的全局事实来源
- design-system/pages/ — 页面级覆盖文件夹
带页面级覆盖：
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --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 "<keyword>" --domain <domain> [-n <max_results>]
使用时机示例：更多风格选项用 --domain style "glassmorphism dark"；图表推荐用 --domain chart "real-time dashboard"；UX 最佳实践用 --domain ux "animation accessibility"；替代字体用 --domain typography "elegant luxury"；落地页结构用 --domain landing "hero social-proof"。
第 4 步：技术栈指南（默认 html-tailwind）
获取实现相关的最佳实践。若用户未指定技术栈，默认 html-tailwind：
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --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" 等常见问题）；使用 stack 参数获取实现相关最佳实践；迭代，若首次搜索不匹配则换关键词。
专业 UI 的常见规则
图标与视觉元素
- 不使用 emoji 图标，改用 SVG 图标（Heroicons、Lucide、Simple Icons）
- 悬停状态保持稳定，使用颜色/透明度过渡，不用会移动布局的缩放变换
- 品牌 logo 要正确，从 Simple Icons 查官方 SVG
- 图标尺寸一致，使用固定 viewBox（24x24）配合 w-6 h-6
交互与光标
- 所有可点击/可悬停卡片添加 cursor-pointer
- 悬停提供视觉反馈（颜色、阴影、边框）
- 过渡平滑，使用 transition-colors duration-200
明暗模式对比度
- 玻璃卡片浅色模式使用 bg-white/80 或更高不透明度
- 浅色文本使用 #0F172A（slate-900）
- 弱化文本浅色模式最低使用 #475569（slate-600）
- 边框可见性：浅色模式使用 border-gray-200
布局与间距
- 浮动导航栏添加 top-4 left-4 right-4 间距
- 内容内边距要考虑固定导航栏高度
- 保持一致的 max-width（max-w-6xl 或 max-w-7xl）
交付前检查清单
视觉质量：未用 emoji 作图标；图标来自一致图标集；品牌 logo 正确；悬停状态不引起布局偏移；直接使用主题颜色（bg-primary）而非 var() 包装。
交互：所有可点击元素有 cursor-pointer；悬停状态提供清晰视觉反馈；过渡平滑（150-300ms）；键盘导航焦点状态可见。
明暗模式：浅色模式文本对比度足够（最低 4.5:1）；玻璃/透明元素在浅色模式可见；边框在两种模式均可见；交付前测试两种模式。
布局：浮动元素与边缘有适当间距；内容不被固定导航栏遮挡；在 375px、768px、1024px、1440px 响应式正常；移动端无横向滚动。
无障碍：所有图片有 alt 文本；表单输入有标签；颜色不是唯一指示；尊重 prefers-reduced-motion。
适用场景
适用于 Web 与移动应用的 UI/UX 设计、构建、创建、实现、审查、修复和改进任务，覆盖 SaaS、电商、作品集、仪表盘、落地页等产品类型，以及医疗、金融科技、游戏、教育等行业。
限制
资料未提供收费、价格、平台支持范围、效果保证等信息。使用前需确保已安装 Python。