用途
UI/UX Pro Max 是一个面向 Web 与移动应用的设计智能技能，以可搜索数据库的形式提供设计指南与建议。它适用于以下场景：设计新的 UI 组件或页面、选择配色方案与排版、审查代码中的 UX 问题、构建落地页或仪表盘、实现无障碍要求。
主要能力
该技能包含 50+ 种风格、97 套配色方案、57 组字体搭配、99 条 UX 准则以及 25 种图表类型，覆盖 9 种技术栈。其规则按优先级组织：
- 优先级 1（关键）：无障碍（ux 领域）
- 优先级 2（关键）：触控与交互（ux）
- 优先级 3（高）：性能（ux）
- 优先级 4（高）：布局与响应式（ux）
- 优先级 5（中）：排版与颜色（typography、color）
- 优先级 6（中）：动画（ux）
- 优先级 7（中）：风格选择（style、product）
- 优先级 8（低）：图表与数据（chart）
无障碍方面涵盖颜色对比度（普通文本至少 4.5:1）、焦点状态、替代文本、aria 标签、键盘导航、表单标签等。触控与交互涵盖最小 44x44px 触控目标、加载按钮禁用、错误反馈、cursor-pointer 等。性能涵盖图片优化（WebP、srcset、懒加载）、减少动态效果、内容跳动预留空间。布局与响应式涵盖 viewport meta、移动端最小 16px 正文字号、水平滚动、z-index 管理。排版与颜色涵盖行高 1.5-1.75、每行 65-75 字符、字体搭配。动画涵盖 150-300ms 微交互、transform/opacity 性能、加载状态。风格选择涵盖风格与产品类型匹配、一致性、使用 SVG 图标而非 emoji。图表与数据涵盖图表类型匹配、可访问配色、数据表格替代方案。
使用方式
前置条件：检查 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 步：分析用户需求，提取产品类型、风格关键词、行业、技术栈（默认 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 步：持久化设计系统（Master + Overrides 模式）。添加 --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（相对 Master 的页面级偏差）。分层检索方式：构建特定页面（如 Checkout）时，先检查 design-system/pages/checkout.md；若存在，其规则覆盖 Master；若不存在，则仅使用 design-system/MASTER.md。上下文感知检索提示词示例：
I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...
第 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）：
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
可用技术栈：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose。
可用领域：product（产品类型建议）、style（UI 风格、颜色、效果）、typography（字体搭配、Google Fonts）、color（按产品类型的配色）、landing（页面结构、CTA 策略）、chart（图表类型、库建议）、ux（最佳实践、反模式）、react（React/Next.js 性能）、web（Web 界面指南）、prompt（AI 提示词、CSS 关键词）。
输出格式：--design-system 支持两种输出格式，ASCII 框（默认，适合终端显示）和 Markdown（适合文档）：
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
适用场景
- 设计新 UI 组件或页面
- 选择配色方案与排版
- 审查代码中的 UX 问题
- 构建落地页或仪表盘
- 实现无障碍要求
限制与注意事项
该技能为设计指南与建议工具，不包含自动生成代码的功能，需结合设计系统与详细搜索结果自行实现设计。使用前需确保 Python 已安装。默认技术栈为 html-tailwind，未指定时按此处理。资料中未提供收费、价格、平台限制等信息。
专业 UI 常见规则
图标与视觉元素：不使用 emoji 作为 UI 图标，使用 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-w-6xl 或 max-w-7xl）。
交付前检查清单：视觉质量（无 emoji 图标、图标集一致、品牌 logo 正确、悬停不导致布局偏移、直接使用主题颜色）；交互（可点击元素有 cursor-pointer、悬停反馈清晰、过渡 150-300ms、焦点状态可见）；明暗模式（浅色文本对比度至少 4.5:1、玻璃/透明元素在浅色模式可见、两种模式边框可见）；布局（浮动元素与边缘间距适当、内容不被固定导航栏遮挡、在 375px/768px/1024px/1440px 响应式、移动端无水平滚动）；无障碍（图片有 alt 文本、表单输入有标签、颜色不是唯一指示、尊重 prefers-reduced-motion）。