8.3 KiB
8.3 KiB
| trigger |
|---|
| always_on |
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 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
推荐搜索顺序：
- Product（产品） - 获取产品类型的风格推荐
- Style（风格） - 获取详细风格指南（颜色、效果、框架）
- Typography（排版） - 获取字体配对及 Google Fonts 导入
- Color（颜色） - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
- Landing（落地页） - 获取页面结构（如果是落地页）
- Chart（图表） - 获取图表推荐（如果是仪表板/分析）
- UX - 获取最佳实践和反模式
- Stack（技术栈） - 获取特定技术栈指南（默认：html-tailwind）
步骤 3：技术栈指南（默认：html-tailwind）
如果用户未指定技术栈，默认使用 html-tailwind。
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 应该：
# 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
然后： 综合所有搜索结果并实现设计。
获得更好结果的技巧
- 关键词要具体 - "医疗 SaaS 仪表板" > "应用"
- 多次搜索 - 不同关键词揭示不同见解
- 组合领域 - 风格 + 排版 + 颜色 = 完整设计系统
- 始终检查 UX - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
- 使用技术栈标志 - 获取特定实现的最佳实践
- 迭代 - 如果首次搜索不匹配，尝试不同关键词
- 拆分为多个文件 - 为了更好的可维护性：
- 将组件分离到单独文件（例如
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