228 lines
8.2 KiB
Markdown
228 lines
8.2 KiB
Markdown
# 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`
|