ui-ux-pro-max-skill/.agent/workflows/ui-ux-pro-max.md

---
description: 规划和实现 UI
auto_execution_mode: 3
---

# UI/UX Pro Max - 设计智能

可搜索的数据库，包含 UI 风格、配色方案、字体配对、图表类型、产品推荐、UX 指南和特定技术栈的最佳实践。

## 前置要求

检查是否已安装 Python：

```bash
python3 --version || python --version
```

如果未安装 Python，根据用户的操作系统安装：

**macOS:**
```bash
brew install python3
```

**Ubuntu/Debian:**
```bash
sudo apt update && sudo apt install python3
```

**Windows:**
```powershell
winget install Python.Python.3.12
```

---

## 如何使用此工作流

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

### 步骤 1：分析用户需求

从用户请求中提取关键信息：
- **产品类型**：SaaS、电商、作品集、仪表板、落地页等
- **风格关键词**：极简、活泼、专业、优雅、深色模式等
- **行业**：医疗、金融科技、游戏、教育等
- **技术栈**：React、Vue、Next.js，或默认为 `html-tailwind`

### 步骤 2：搜索相关领域

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

```bash
python3 .shared/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`**。

```bash
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind
```

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

---

## 搜索参考

### 可用领域

| 领域 | 用途 | 示例关键词 |
|--------|---------|------------------|
| `product` | 产品类型推荐 | SaaS、电商、作品集、医疗、美妆、服务 |
| `style` | UI 风格、颜色、效果 | 玻璃态、极简主义、深色模式、野兽派 |
| `typography` | 字体配对、Google Fonts | 优雅、活泼、专业、现代 |
| `color` | 按产品类型的配色方案 | saas、电商、医疗、美妆、金融科技、服务 |
| `landing` | 页面结构、CTA 策略 | 英雄区、英雄中心、推荐、定价、社会证明 |
| `chart` | 图表类型、库推荐 | 趋势、对比、时间线、漏斗、饼图 |
| `ux` | 最佳实践、反模式 | 动画、无障碍、z-index、加载 |
| `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 组件、主题、表单、模式 |

---

## 示例工作流

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

**AI 应该：**

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

# 2. 搜索风格（基于行业：美妆、优雅）
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

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

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

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

# 6. 搜索 UX 指南
python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux

# 7. 搜索技术栈指南（默认：html-tailwind）
python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
```

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

---

## 获得更好结果的技巧

1. **关键词要具体** - "医疗 SaaS 仪表板" > "应用"
2. **多次搜索** - 不同关键词揭示不同见解
3. **组合领域** - 风格 + 排版 + 颜色 = 完整设计系统
4. **始终检查 UX** - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
5. **使用技术栈标志** - 获取特定实现的最佳实践
6. **迭代** - 如果首次搜索不匹配，尝试不同关键词
7. **拆分为多个文件** - 为了更好的可维护性：
   - 将组件分离到单独文件（例如 `Header.tsx`、`Footer.tsx`）
   - 将可重用样式提取到专用文件
   - 保持每个文件专注且少于 200-300 行

---

## 专业 UI 的通用规则

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

### 图标和视觉元素

| 规则 | 应该做 | 不应该做 |
|------|----|----- |
| **不使用表情符号图标** | 使用 SVG 图标（Heroicons、Lucide、Simple Icons） | 使用表情符号如 🎨 🚀 ⚙️ 作为 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 代码之前，验证这些项目：

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

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

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

### 布局
- [ ] 浮动元素与边缘有适当间距
- [ ] 没有内容隐藏在固定导航栏后面
- [ ] 在 320px、768px、1024px、1440px 下响应式
- [ ] 移动端无横向滚动

### 无障碍
- [ ] 所有图片都有 alt 文本
- [ ] 表单输入都有标签
- [ ] 颜色不是唯一指示器
- [ ] 遵守 `prefers-reduced-motion`