UI/UX Pro Max - 设计智能

面向网页和移动应用程序的综合设计指南。包含 50 多种样式、97 种调色板、57 种字体配对、99 条用户体验指南以及涵盖 9 种技术栈的 25 种图表类型。提供可搜索的数据库，并附带基于优先级的推荐。

何时应用

在以下情况下参考这些指南：

• 设计新的 UI 组件或页面时
• 选择调色板和排版时
• 审查代码以查找 UX 问题时
• 构建着陆页或仪表板时
• 实施无障碍访问要求时

按优先级划分的规则类别

快速参考

1. 可访问性（关键）

• 色彩对比度- 普通文本最小对比度 4.5:1
• 焦点状态- 交互元素上显示可见的焦点环
• 替代文本- 为有意义的图像提供描述性替代文本
• ARIA标签- 为纯图标按钮添加 aria-label 属性
• 键盘导航- Tab键顺序与视觉顺序一致
• 表单标签- 使用 label 标签并配合 for 属性

2. 触控与交互（关键）

• 触控目标尺寸- 最小触控目标 44x44 像素
• 悬停与点击- 主要交互使用点击/轻触方式
• 加载状态按钮- 异步操作期间禁用按钮
• 错误反馈- 在问题附近提供清晰的错误信息
• cursor-pointer- 为可点击元素添加 cursor-pointer

3. 性能（高优先级）

• image-optimization- 使用 WebP 格式、srcset 属性、懒加载
• reduced-motion- 检查 prefers-reduced-motion 设置
• content-jumping- 为异步加载内容预留空间

4. 布局与响应式（高优先级）

• viewport-meta- 设置 width=device-width initial-scale=1
• readable-font-size- 移动端正文文本最小字号为 16px
• horizontal-scroll- 确保内容适配视口宽度
• z-index-management- 定义 z-index 层级规范（如 10, 20, 30, 50）

5. 排版与色彩（中优先级）

• line-height- 正文文本行高设置为 1.5-1.75
• 行宽- 每行限制在65-75个字符
• 字体搭配- 标题和正文字体风格要匹配

6. 动画（中等优先级）

• 持续时间与节奏- 微交互使用150-300毫秒
• 变换性能- 使用transform/opacity，而非width/height
• 加载状态- 使用骨架屏或加载指示器

7. 风格选择（中等优先级）

• 风格匹配- 风格需与产品类型匹配
• 一致性- 所有页面使用相同风格
• 不使用表情符号图标- 使用SVG图标，而非表情符号

8. 图表与数据（低优先级）

• 图表类型- 图表类型需与数据类型匹配
• 色彩指引- 使用无障碍色彩组合
• 数据表- 为无障碍访问提供表格替代方案

使用方法

使用下方的CLI工具搜索特定域名。

先决条件

检查是否已安装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：生成设计系统（必需）

始终以--design-system开头以获取包含推理的全面建议：

python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

此命令：

1. 并行搜索5个领域（产品、样式、色彩、落地页、排版）
2. 应用来自ui-reasoning.csv的推理规则来选择最佳匹配
3. 返回完整设计系统：模式、样式、色彩、排版、效果
4. 包含需避免的反模式

示例：

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— 仪表板页面相对于主文件的特定偏差规则

层级检索工作原理：

1. 当构建特定页面（例如“结账”页）时，首先检查design-system/pages/checkout.md
2. 如果该页面文件存在，则其规则覆盖主文件中的规则
3. 如果不存在，则仅使用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>]

何时使用详细搜索：

步骤 4：技术栈指南（默认：html-tailwind）

获取特定于实现的最佳实践。如果用户未指定技术栈，则默认使用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

搜索参考

可用领域

可用技术栈

工作流程示例

用户请求："为专业护肤服务制作落地页"

步骤 1：分析需求

• 产品类型：美容/水疗服务
• 风格关键词：优雅、专业、柔和
• 行业：美容/健康
• 技术栈：html-tailwind (默认)

步骤 2：生成设计系统 (必需)

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

输出：包含模式、样式、颜色、排版、效果和反模式的完整设计系统。

步骤 3：补充详细搜索 (根据需要)

# Get UX guidelines for animation and accessibility
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# Get alternative typography options if needed
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

步骤 4：技术栈指南

python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

然后：综合设计系统 + 详细搜索并实施设计。

输出格式

该--设计系统flag 支持两种输出格式：

# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

获得更好结果的技巧

1. 关键词要具体- "医疗健康 SaaS 仪表盘" > "应用"
2. 多次搜索- 不同的关键词会揭示不同的洞见
3. 组合领域- 风格 + 排版 + 色彩 = 完整的设计系统
4. 始终检查用户体验- 搜索"动画"、"z-index"、"无障碍访问"以发现常见问题
5. 使用 stack flag- 获取特定于实现的最佳实践
6. 迭代- 如果首次搜索不匹配，尝试不同的关键词

专业用户界面的通用规则

这些是经常被忽视、导致用户界面看起来不专业的问题：

图标与视觉元素

交互与光标

浅色/深色模式对比度

布局与间距

交付前检查清单

交付UI代码前，请核实以下项目：

视觉质量

• 未使用表情符号作为图标（应使用SVG）
• 所有图标来自统一的图标集（Heroicons/Lucide）
• 品牌标识正确（已通过Simple Icons验证）
• 悬停状态不会导致布局偏移
• 直接使用主题颜色（bg-primary），而非var()包装器

交互

• 所有可点击元素均具备光标指针
• 悬停状态提供清晰的视觉反馈
• 过渡效果平滑（150-300毫秒）
• 键盘导航时焦点状态可见

浅色/深色模式

• 浅色模式下文本具有足够对比度（最低4.5:1）
• 玻璃/透明元素在浅色模式下可见
• 两种模式下均可见边框
• 交付前测试两种模式

布局

• 浮动元素与边缘保持适当间距
• 无内容被固定导航栏遮挡
• 在375px、768px、1024px、1440px分辨率下保持响应式
• 移动端无水平滚动条

可访问性

• 所有图片均包含替代文本
• 表单输入框均配有标签
• 不以颜色作为唯一指示方式
• 遵循减弱动态效果偏好设置已落实