名称: UI/UX 智能库与推荐专家描述: UI/UX 设计智能库与推荐专家。包含 67 种风格、96 种配色方案、57 种字体搭配、99 条 UX 指南，支持跨技术栈的设计系统生成。

ui-ux-pro-max

综合的网页和移动应用设计指南。包含 67 种风格、96 种配色方案、57 种字体搭配、99 条 UX 指南，以及跨 13 种技术栈的 25 种图表类型。可搜索数据库，提供优先级推荐。

何时应用

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

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

按优先级分类的规则类别

优先级	类别	影响	领域
1	无障碍	关键	`ux`
2	触摸与交互	关键	`ux`
3	性能	高	`ux`
4	布局与响应式	高	`ux`
5	排版与颜色	中	`typography`, `color`
6	动画	中	`ux`
7	风格选择	中	`style`, `product`
8	图表与数据	低	`chart`

快速参考

1. 无障碍（关键）

color-contrast - 正常文本的最小对比度为 4.5:1
focus-states - 互动元素上的可见焦点环
alt-text - 为有意义的图像添加描述性替代文本
aria-labels - 为图标按钮添加 aria-label
keyboard-nav - Tab 顺序与视觉顺序匹配
form-labels - 使用带 for 属性的标签

2. 触摸与交互（关键）

touch-target-size - 最小触摸目标大小为 44x44 像素
hover-vs-tap - 使用点击/轻击进行主要交互
loading-buttons - 在异步操作期间禁用按钮
error-feedback - 在问题附近提供清晰的错误消息
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）

如何使用此技能

当用户请求 UI/UX 工作（设计、构建、创建、实施、审查、修复、改进）时，遵循以下工作流程：

步骤 1：分析用户需求

从用户请求中提取关键信息：

产品类型：SaaS、电子商务、作品集、仪表板、着陆页等。
风格关键词：简约、活泼、专业、优雅、深色模式等。
行业：医疗保健、金融科技、游戏、教育等。
技术栈：React、Vue、Next.js，或默认为 html-tailwind

步骤 2：生成设计系统（必需）

始终从 --design-system 开始，以获取带有推理的全面推荐：

python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/Skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

此命令：

并行搜索 5 个领域（产品、风格、颜色、着陆页、排版）
应用 ui-reasoning.csv 中的推理规则选择最佳匹配
返回完整设计系统：模式、风格、颜色、排版、效果
包括应避免的反模式

示例：

python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/Skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

步骤 3：补充详细搜索（根据需要）

获取设计系统后，使用领域搜索获取更多细节：

python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/Skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

需求	领域	示例
更多风格选项	`style`	`--domain style "glassmorphism dark"`
图表推荐	`chart`	`--domain chart "real-time dashboard"`
UX 最佳实践	`ux`	`--domain ux "animation accessibility"`
替代字体	`typography`	`--domain typography "elegant luxury"`
着陆页结构	`landing`	`--domain landing "hero social-proof"`

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

获取特定实现的最佳实践。如果用户未指定技术栈，默认为 html-tailwind。

python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/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

输出格式

--design-system 标志支持两种输出格式：

# ASCII 框（默认）- 最适合终端显示
python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/Skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - 最适合文档化
python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/Skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

交付前检查清单

在交付 UI 代码前，验证以下项目：

视觉质量

[ ] 未使用表情符号作为图标（使用 SVG 代替）
[ ] 所有图标来自一致的图标集（Heroicons/Lucide）
[ ] 品牌标识正确（从 Simple Icons 验证）
[ ] 悬停状态不会导致布局偏移

交互

[ ] 所有可点击元素都有 cursor-pointer
[ ] 悬停状态提供清晰的视觉反馈
[ ] 过渡平滑（150-300 毫秒）
[ ] 键盘导航的焦点状态可见

无障碍

[ ] 所有图像都有替代文本
[ ] 表单输入有标签
[ ] 颜色不是唯一的指示器
[ ] prefers-reduced-motion 被尊重

名称: UI/UX 智能库与推荐专家 描述: UI/UX 设计智能库与推荐专家。包含 67 种风格、96 种配色方案、57 种字体搭配、99 条 UX 指南，支持跨技术栈的设计系统生成。