UI/UX Pro Max – 设计智能

一个可搜索的数据库，包含 UI 风格、配色方案、字体搭配、图表类型、产品推荐、UX 准则以及特定技术栈的最佳实践。

前置条件

检查是否已安装 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：搜索相关领域

多次使用 search.py 以收集全面的信息。持续搜索直到获得足够的上下文。

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

推荐搜索顺序：

1. Product (产品) – 获取针对该产品类型的风格建议
2. Style (风格) – 获取详细的风格指南（颜色、特效、框架）
3. Typography (排版) – 获取带有 Google Fonts 引入代码的字体搭配
4. Color (颜色) – 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
5. Landing (落地页) – 获取页面结构（如果是落地页）
6. Chart (图表) – 获取图表推荐（如果是仪表盘/分析类）
7. UX (用户体验) – 获取最佳实践和反模式（即应避免的设计）
8. Stack (技术栈) – 获取特定技术栈的指南（默认：html-tailwind）

步骤 3：技术栈指南 (默认: 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

搜索参考

可用领域 (Domains)

可用技术栈 (Stacks)

示例工作流

用户请求： “为专业护肤服务制作一个落地页 (Landing page)”

AI 应当执行：

# 1. 搜索产品类型
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

# 2. 搜索风格 (基于行业: 美业, 优雅)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

# 3. 搜索排版/字体
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

# 4. 搜索配色方案
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

# 5. 搜索落地页结构
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

# 6. 搜索 UX 准则
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux

# 7. 搜索技术栈指南 (默认: html-tailwind)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

然后： 综合所有搜索结果并实现设计。

获取更好结果的技巧

1. 关键词要具体 – 使用 “healthcare SaaS dashboard” (医疗 SaaS 仪表盘) 优于 “app”。
2. 多次搜索 – 不同的关键词会揭示不同的见解。
3. 组合领域 – 风格 (Style) + 排版 (Typography) + 颜色 (Color) = 完整的设计系统。
4. 务必检查 UX – 搜索 “animation” (动画), “z-index”, “accessibility” (无障碍) 以避免常见问题。
5. 使用 Stack 标志 – 获取特定实现的最佳实践。
6. 迭代 – 如果第一次搜索不匹配，尝试不同的关键词。

专业 UI 的通用规则

这些是经常被忽视的问题，它们会让 UI 看起来不专业：

图标与视觉元素

交互与光标

亮/暗模式对比度

布局与间距

交付前检查清单

在交付 UI 代码之前，请验证这些项目：

视觉质量

• 没有将 Emoji 用作图标（应使用 SVG）
• 所有图标来自一致的图标集 (Heroicons/Lucide)
• 品牌 Logo 正确（已通过 Simple Icons 验证）
• 悬停状态不会导致布局偏移
• 直接使用主题颜色 (bg-primary) 而不是 var() 包装器

交互体验

• 所有可点击元素都有 cursor-pointer
• 悬停状态提供清晰的视觉反馈
• 过渡效果平滑 (150-300ms)
• 键盘导航时焦点状态可见

亮/暗模式

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

布局

• 悬浮元素与边缘有适当的间距
• 没有内容隐藏在固定导航栏后面
• 在 320px, 768px, 1024px, 1440px 下均响应良好
• 移动端没有水平滚动条

无障碍性

• 所有图片都有 alt 文本
• 表单输入框有标签 (label)
• 颜色不是唯一的指示器
• 尊重 prefers-reduced-motion（减少动态效果）设置