UI/UX Pro Max 是一个面向 Web 与移动应用的综合设计指南工具，以可搜索数据集加 CLI 的形式提供。它包含 84 种风格、192 套配色方案、74 组字体搭配、99 条 UX 指南和 25 种图表类型，覆盖 22 种技术栈，并支持基于优先级的推荐。
一、用途 该工具用于在以下场景中提供设计参考：设计新的 UI 组件或页面；选择配色方案与排版；审查代码中的 UX 问题；构建落地页或仪表盘；实现无障碍要求。
二、主要能力
- 规则按优先级分类：无障碍（CRITICAL，ux 域）、触控与交互（CRITICAL，ux 域）、性能（HIGH，ux 域）、布局与响应式（HIGH，ux 域）、排版与颜色（MEDIUM，typography/color 域）、动画（MEDIUM，ux 域）、风格选择（MEDIUM，style/product 域）、图表与数据（LOW，chart 域）。
- 快速参考涵盖：无障碍（颜色对比度至少 4.5:1、可见焦点环、描述性 alt 文本、图标按钮的 aria-label、Tab 顺序与视觉顺序一致、表单 label 使用 for 属性）；触控与交互（触控目标至少 44x44px、主交互使用点击/轻触、异步操作期间禁用按钮、在问题附近显示清晰错误信息、可点击元素添加 cursor-pointer）；性能（使用 WebP、srcset、懒加载；检查 prefers-reduced-motion；为异步内容预留空间）；布局与响应式（viewport meta 为 width=device-width initial-scale=1、移动端正文最小 16px、内容适配视口宽度、定义 z-index 层级如 10/20/30/50）；排版与颜色（正文行高 1.5-1.75、每行 65-75 字符、标题与正文字体气质匹配）；动画（微交互 150-300ms、使用 transform/opacity 而非 width/height、骨架屏或加载指示器）；风格选择（风格与产品类型匹配、所有页面风格一致、使用 SVG 图标而非 emoji）；图表与数据（图表类型与数据类型匹配、使用无障碍配色、为无障碍提供表格替代）。
三、使用方式 前置条件：需要 python3（Claude Code shell 与 claude.ai 代码执行沙箱中默认可用）。该技能不安装任何内容。 工作流程：当用户请求 UI/UX 工作（设计、构建、创建、实现、审查、修复、改进）时，先进入该技能目录，使 scripts/ 与 data/ 路径可解析。 步骤 1：分析用户需求，提取产品类型（SaaS、电商、作品集、仪表盘、落地页等）、风格关键词（极简、活泼、专业、优雅、深色模式等）、行业（医疗、金融科技、游戏、教育等）、技术栈（React、Vue、Next.js，或默认 html-tailwind）。 步骤 2（必需）：始终以 --design-system 开始，获取带推理的综合推荐：python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]。该命令并行搜索 5 个域（product、style、color、landing、typography），应用 ui-reasoning.csv 中的推理规则选择最佳匹配，返回完整设计系统：模式、风格、颜色、排版、效果，并包含应避免的反模式。 步骤 2b：持久化设计系统（Master + Overrides 模式），添加 --persist 并指向项目根目录：python3 scripts/search.py "<query>" --design-system --persist -p "Project Name" --output-dir "$PROJECT_ROOT"。这会创建 design-system/<project-slug>/MASTER.md（全局事实来源，含所有设计规则）与 design-system/<project-slug>/pages/（页面级覆盖文件夹）。--persist 在 MASTER.md 已存在时跳过写入，可加 --force 覆盖。页面级覆盖示例：python3 scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard" --output-dir "$PROJECT_ROOT"，会额外创建 design-system/<project-slug>/pages/dashboard.md。层级检索方式：构建特定页面时先检查 pages/<page>.md，存在则其规则覆盖 Master，否则仅使用 MASTER.md。 步骤 3：按需补充详细搜索：python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]。可用域包括 product、style、typography、color、landing、chart、ux、icons、react、web、gsap、google-fonts。 步骤 4：技术栈指南（默认 html-tailwind）：python3 scripts/search.py "<keyword>" --stack html-tailwind。可用技术栈包括 html-tailwind、react、nextjs、astro、vue、nuxtjs、nuxt-ui、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose、threejs、angular、laravel、javafx、wpf、winui、avalonia、uno、uwp。 输出格式：--design-system 支持 ASCII 框（默认，适合终端显示）与 Markdown（加 -f markdown，适合文档）。
四、适用场景 示例工作流：用户请求“为专业护肤服务构建落地页”。步骤 1 分析：产品类型为美容/SPA 服务，风格关键词为优雅、专业、柔和，行业为美容/健康，技术栈默认 html-tailwind。步骤 2 生成设计系统：python3 scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"。步骤 3 补充详细搜索，如 python3 scripts/search.py "animation accessibility" --domain ux 与 python3 scripts/search.py "elegant luxury serif" --domain typography。步骤 4 技术栈指南：python3 scripts/search.py "layout responsive form" --stack html-tailwind。最后综合设计系统与详细搜索结果实现设计。
五、专业 UI 常见规则 图标与视觉元素：不使用 emoji 图标，使用 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；所有图标来自一致图标集（Heroicons/Lucide）；品牌 logo 正确（经 Simple Icons 验证）；悬停状态不导致布局偏移；直接使用主题颜色（bg-primary）而非 var() 包装。 交互：所有可点击元素有 cursor-pointer；悬停状态提供清晰视觉反馈；过渡平滑（150-300ms）；键盘导航焦点状态可见。 明暗模式：浅色模式文本对比度足够（至少 4.5:1）；玻璃/透明元素在浅色模式可见；边框在两种模式均可见；交付前测试两种模式。 布局：浮动元素与边缘有适当间距；内容不被固定导航栏遮挡；在 375px、768px、1024px、1440px 响应式正常；移动端无水平滚动。 无障碍：所有图片有 alt 文本；表单输入有 label；颜色不是唯一指示；尊重 prefers-reduced-motion。
七、限制 该技能不安装任何内容，需要 python3 环境。资料未提供收费、价格、平台支持范围等更多信息。