ui-ux-pro-max

UI/UX Pro Max - 设计智能

适用于网页和移动应用的全面设计指南。包含50+种样式、97种配色方案、57种字体搭配、99条UX指南和25种图表类型，覆盖9种技术栈。可搜索数据库，提供基于优先级的推荐。

使用时机

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

• 设计新的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 - 使用label并关联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）

5. 字体与颜色（中）

• line-height - 正文使用1.5-1.75
• line-length - 每行限制65-75个字符
• font-pairing - 匹配标题/正文字体风格

6. 动画（中）

• duration-timing - 微交互使用150-300ms
• transform-performance - 使用transform/opacity，而非width/height
• loading-states - 骨架屏或加载动画

7. 样式选择（中）

• style-match - 样式与产品类型匹配
• consistency - 所有页面使用相同样式
• no-emoji-icons - 使用SVG图标，而非emoji

8. 图表与数据（低）

• chart-type - 图表类型与数据类型匹配
• color-guidance - 使用无障碍配色方案
• data-table - 提供表格替代方案以支持无障碍

如何使用

使用下面的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 .claude/skills/ui-ux-pro-max/scripts/search.py "<产品类型> <行业> <关键词>" --design-system [-p "项目名称"]

此命令：

1. 并行搜索5个领域（product, style, color, landing, typography）
2. 应用ui-reasoning.csv中的推理规则选择最佳匹配
3. 返回完整设计系统：模式、样式、颜色、字体、效果
4. 包含应避免的反模式

示例：

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

步骤3：补充详细搜索（按需）

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

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]

何时使用详细搜索：

需求	领域	示例
更多样式选项	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 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind

可用技术栈：html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn

---

搜索参考

可用领域

领域	用途	示例关键词
product	产品类型推荐	SaaS, e-commerce, portfolio, healthcare, beauty, service
style	UI样式、颜色、效果	glassmorphism, minimalism, dark mode, brutalism
typography	字体搭配、Google Fonts	elegant, playful, professional, modern
color	按产品类型的配色方案	saas, ecommerce, healthcare, beauty, fintech, service
landing	页面结构、CTA策略	hero, hero-centric, testimonial, pricing, social-proof
chart	图表类型、库推荐	trend, comparison, timeline, funnel, pie
ux	最佳实践、反模式	animation, accessibility, z-index, loading
react	React/Next.js性能	waterfall, bundle, suspense, memo, rerender, cache
web	Web界面指南	aria, focus, keyboard, semantic, virtualize
prompt	AI提示、CSS关键词	(样式名称)

可用技术栈

技术栈	重点
html-tailwind	Tailwind工具类、响应式、无障碍（默认）
react	状态、钩子、性能、模式
nextjs	SSR、路由、图片、API路由
vue	Composition API、Pinia、Vue Router
svelte	Runes、stores、SvelteKit
swiftui	视图、状态、导航、动画
react-native	组件、导航、列表
flutter	组件、状态、布局、主题
shadcn	shadcn/ui组件、主题、表单、模式

---

示例工作流程

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

步骤1：分析需求

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

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

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

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

步骤3：补充详细搜索（按需）

# 获取动画和无障碍的UX指南
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# 如果需要，获取替代字体选项
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

步骤4：技术栈指南

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

然后： 综合设计系统和详细搜索，实现设计。

---

输出格式

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

# ASCII框（默认） - 最适合终端显示
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - 最适合文档
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

---

获得更好结果的技巧

1. 关键词要具体 - "healthcare SaaS dashboard" 优于 "app"
2. 多次搜索 - 不同关键词揭示不同见解
3. 组合领域 - 样式 + 字体 + 颜色 = 完整设计系统
4. 始终检查UX - 搜索 "animation"、"z-index"、"accessibility" 以发现常见问题
5. 使用技术栈标志 - 获取特定实现的最佳实践
6. 迭代 - 如果首次搜索不匹配，尝试不同关键词

---

专业UI的常见规则

这些是经常被忽略、导致UI看起来不专业的问题：

图标与视觉元素

规则	应该	不应该
不使用emoji图标	使用SVG图标（Heroicons、Lucide、Simple Icons）	使用emoji如🎨🚀⚙️作为UI图标
稳定的悬停状态	悬停时使用颜色/透明度过渡	使用导致布局偏移的缩放变换
正确的品牌标志	从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）	使用gray-400或更浅
边框可见性	亮色模式使用border-gray-200	使用border-white/10（不可见）

布局与间距

规则	应该	不应该
浮动导航栏	添加top-4 left-4 right-4间距	将导航栏固定在top-0 left-0 right-0
内容内边距	考虑固定导航栏高度	让内容隐藏在固定元素后面
一致的最大宽度	使用相同的max-w-6xl或max-w-7xl	混合不同容器宽度

---

交付前检查清单

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

视觉质量

• [ ] 未使用emoji作为图标（改用SVG）
• [ ] 所有图标来自一致的图标集（Heroicons/Lucide）
• [ ] 品牌标志正确（从Simple Icons验证）
• [ ] 悬停状态不导致布局偏移
• [ ] 直接使用主题颜色（bg-primary）而非var()包装

交互

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

亮色/暗色模式

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

布局

• [ ] 浮动元素与边缘有适当间距
• [ ] 无内容隐藏在固定导航栏后面
• [ ] 在375px、768px、1024px、1440px下响应式
• [ ] 移动端无水平滚动

无障碍

• [ ] 所有图片有替代文本
• [ ] 表单输入有标签
• [ ] 颜色不是唯一指示符
• [ ] 尊重prefers-reduced-motion

使用时机

此技能适用于执行概述中描述的工作流程或操作。

限制

• 仅当任务明确符合上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少所需输入、权限、安全边界或成功标准，请停止并请求澄清。