UI/UX Pro Max - 设计智能专家
为网页和移动应用提供的全面 UI/UX 设计指南。可根据产品类型、行业和用户需求，提供智能设计建议。在设计新 UI、选择颜色和字体、审查代码中的 UX 问题或实现功能时，请参考这些指南。
工作流程
第一步：分析用户需求
从用户请求中提取：
- 产品类型：SaaS、电子商务、作品集、仪表板、落地页等
- 风格关键词：简约、有趣、专业、优雅、深色模式等
- 行业：医疗、金融科技、游戏、教育、美容等
- 技术栈：React、Vue、Next.js、Svelte、Flutter 或 html-tailwind（默认）
第二步：生成设计系统
参考以下数据（以及 data/ 目录下的 CSV 文件）以获取：
- 推荐的模式和部分布局
- 带有效果的初级视觉风格
- 配色方案（主色、辅助色、行动号召色、背景色、文字色）
- 字体搭配（标题 + 正文字体及 Google Fonts URL）
- 关键效果及应避免的反模式
第三步：实现指南
应用参考数据中针对特定技术栈的最佳实践：
- HTML/Tailwind 实用类、响应式断点
- React 钩子、状态管理、性能模式
- Vue 组合式 API、Pinia 状态管理
- Flutter 组件、主题、导航
- 无障碍要求（WCAG 合规性）
第四步：交付前验证
在交付任何 UI 代码之前，完成所有检查清单（视觉质量、交互、亮/暗模式、布局、无障碍）。
优先级规则
| 优先级 | 类别 | 影响 |
|---|---|---|
| 1 | 无障碍 | 关键 - 颜色对比度 4.5:1，焦点状态，aria-labels |
| 2 | 触摸与交互 | 关键 - 44x44px 触摸目标，cursor-pointer |
| 3 | 性能 | 高 - 图像优化，懒加载 |
| 4 | 布局与响应式 | 高 - 移动优先，视口 meta |
| 5 | 字体与颜色 | 中 - 行高 1.5-1.75，易读字体 |
| 6 | 动画 | 中 - 150-300ms 持续时间，仅变换 |
| 7 | 风格选择 | 中 - 风格与产品类型匹配 |
按产品类型的快速风格选择器
| 产品类型 | 主要风格 | 次要风格 | 色彩情绪 |
|---|---|---|---|
| SaaS (通用) | 极简主义 | 扁平设计，玻璃拟态 | 信任蓝 + 对比色强调 |
| 电子商务 | 新粗野主义 | 便当盒网格，深色模式 | 品牌主色 + 成功绿 |
| 高端电子商务 | 奢侈品极简 | 深色模式，优雅 | 高级黑 + 金色点缀 |
| 医疗保健 | 柔和极简主义 | 扁平设计，有机形态 | 宁静蓝 + 健康绿 |
| 金融科技/加密货币 | 赛博朋克 | 深色模式，玻璃拟态 | 深色科技 + 鲜艳点缀 |
| 游戏 | 霓虹发光 | 赛博朋克，深色模式 | 鲜艳 + 霓虹 + 沉浸 |
| 作品集/创意 | 编辑风格 | 粗野主义，非对称 | 品牌主色 + 艺术感 |
| 仪表板 | 企业科技 | 扁平设计，数据密集 | 冷→暖渐变 + 中性色 |
| AI/聊天机器人 | 极光渐变 | 玻璃拟态，深色模式 | 中性 + AI紫 (#6366F1) |
| 美容/水疗/健康 | 有机形状 | 柔和极简主义，优雅 | 柔和粉彩 + 自然色调 |
按行业分类的配色方案
SaaS / 商业
| 角色 | 十六进制 | Tailwind |
|---|---|---|
| 主色 | #2563EB | blue-600 |
| 辅助色 | #3B82F6 | blue-500 |
| 行动号召色 | #F97316 | orange-500 |
| 背景色 | #F8FAFC | slate-50 |
| 文字色 | #1E293B | slate-800 |
| 边框色 | #E2E8F0 | slate-200 |
高端电子商务
| 角色 | 十六进制 | Tailwind |
|---|---|---|
| 主色 | #1C1917 | stone-900 |
| 辅助色 | #44403C | stone-700 |
| 行动号召色 | #CA8A04 | yellow-600 |
| 背景色 | #FAFAF9 | stone-50 |
| 文字色 | #0C0A09 | stone-950 |
| 边框色 | #D6D3D1 | stone-300 |
医疗保健
| 角色 | 十六进制 | Tailwind |
|---|---|---|
| 主色 | #0891B2 | cyan-600 |
| 辅助色 | #22D3EE | cyan-400 |
| 行动号召色 | #059669 | emerald-600 |
| 背景色 | #ECFEFF | cyan-50 |
| 文字色 | #164E63 | cyan-900 |
| 边框色 | #A5F3FC | cyan-200 |
金融科技 / 加密货币
| 角色 | 十六进制 | Tailwind |
|---|---|---|
| 主色 | #F59E0B | amber-500 |
| 辅助色 | #FBBF24 | amber-400 |
| 行动号召色 | #8B5CF6 | violet-500 |
| 背景色 | #0F172A | slate-900 |
| 文字色 | #F8FAFC | slate-50 |
| 边框色 | #334155 | slate-700 |
游戏
| 角色 | 十六进制 | Tailwind |
|---|---|---|
| 主色 | #7C3AED | violet-600 |
| 辅助色 | #A78BFA | violet-400 |
| 行动号召色 | #F43F5E | rose-500 |
| 背景色 | #0F0F23 | custom-dark |
| 文字色 | #E2E8F0 | slate-200 |
| 边框色 | #4C1D95 | violet-900 |
AI / 聊天机器人平台
| 角色 | 十六进制 | Tailwind |
|---|---|---|
| 主色 | #7C3AED | violet-600 |
| 辅助色 | #A78BFA | violet-400 |
| 行动号召色 | #06B6D4 | cyan-500 |
| 背景色 | #FAF5FF | violet-50 |
| 文字色 | #1E1B4B | indigo-950 |
| 边框色 | #DDD6FE | violet-200 |
美容 / 水疗 / 健康
| 角色 | 十六进制 | Tailwind |
|---|---|---|
| 主色 | #DB2777 | pink-600 |
| 辅助色 | #F472B6 | pink-400 |
| 行动号召色 | #059669 | emerald-600 |
| 背景色 | #FDF2F8 | pink-50 |
| 文字色 | #831843 | pink-900 |
| 边框色 | #FBCFE8 | pink-200 |
字体搭配
专业 / 企业
标题： Inter 正文： Inter
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
最佳适用：SaaS、仪表板、商业应用
优雅 / 奢华
标题： Playfair Display 正文： Lato
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Lato:wght@400;700&display=swap');
最佳适用：奢侈品牌、编辑风格、高端电子商务
现代 / 科技
标题： Space Grotesk 正文： DM Sans
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');
最佳适用：科技初创公司、金融科技、AI 产品
友好 / 有趣
标题： Poppins 正文： Open Sans
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');
最佳适用：教育、消费者应用、生活方式品牌
编辑 / 创意
标题： Fraunces 正文： Source Sans 3
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap');
最佳适用：博客、杂志、作品集
医疗保健 / 健康
标题： Outfit 正文： Nunito
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Nunito:wght@400;600&display=swap');
最佳适用：医疗保健、健康、医疗应用
视觉风格参考
极简主义
- 颜色： 单色 + 1 个强调色，大量留白
- 效果： 柔和阴影，干净边框，微交互
- 最佳适用： SaaS、生产力工具、专业应用
- 关键词： 干净，简单，留白，微妙，优雅
玻璃拟态
- 颜色： 半透明层，模糊效果，渐变背景
- 效果： backdrop-blur，bg-white/10，柔和阴影
- 最佳适用： 现代仪表板，音乐应用，作品集
- 关键词： 玻璃，模糊，半透明，磨砂，分层
新拟态
- 颜色： 柔和粉彩，同色系阴影（暗/亮）
- 效果： 内阴影，凸出元素，柔和深度
- 最佳适用： 控制面板，计算器，音乐播放器
- 关键词： 柔和，浮雕，凸出，触感，3D-柔和
深色模式
- 颜色： 深色背景 (#0F172A)，亮色文字，强调色
- 效果： 微妙边框，焦点发光，减少眼睛疲劳
- 最佳适用： 开发者工具，媒体应用，游戏
- 关键词： 深色，夜间，低光，对比度，现代
便当盒网格
- 颜色： 基于卡片，每个部分有独特背景
- 效果： 网格布局，不同卡片大小，清晰层次
- 最佳适用： 功能展示，作品集，仪表板
- 关键词： 网格，卡片，模块化，有组织，展示
极光 / 渐变网格
- 颜色： 多色渐变，网格混合，鲜艳
- 效果： 动画渐变，颜色过渡，深度
- 最佳适用： AI 产品，创意工具，落地页
- 关键词： 极光，渐变，网格，多彩，流动
粗野主义
- 颜色： 高对比度，原始颜色，大胆原色
- 效果： 粗边框，原始排版，故意粗糙
- 最佳适用： 创意机构，艺术作品集，大胆品牌
- 关键词： 原始，大胆，鲜明，未经修饰，引人注目
落地页模式
以 Hero 为中心 (转化焦点)
部分： Hero > 社会证明 > 功能 > 行动号召
- 主要行动号召按钮在首屏上方
- 信任徽章靠近行动号召按钮
- 单一聚焦信息
功能优先 (产品演示)
部分： Hero > 功能网格 > 工作原理 > 定价 > 行动号召
- 视觉产品演示
- 收益优于功能
- 定价对比表
故事驱动 (品牌建设)
部分： Hero > 问题 > 解决方案 > 历程 > 团队 > 行动号召
- 情感连接优先
- 客户成功案例
- 品牌叙事流程
社会证明为重心 (信任建设)
部分： Hero > 标志 > 推荐 > 案例研究 > 行动号召
- 客户标志突出
- 视频推荐
- 数据和数字
图表类型选择
| 数据类型 | 最佳图表 | 何时使用 |
|---|---|---|
| 随时间变化趋势 | 折线图 | 时间序列、增长、进度 |
| 类别比较 | 柱状图 | 排名、比较 |
| 部分与整体 | 环形图 | 百分比、比例（≤5 项） |
| 相关性 | 散点图 | 关系、模式 |
| 地理数据 | 分级统计图 | 区域数据、位置 |
| 漏斗/流程 | 漏斗图 | 转化、流程阶段 |
| 绩效 | 仪表/子弹图 | KPI、目标 |
| 层次结构 | 矩形树图 | 嵌套类别、比例 |
图表颜色指南：
- 主要数据： #2563EB (blue-600)
- 成功/增长： #22C55E (green-500)
- 警告/提醒： #F59E0B (amber-500)
- 错误/下降： #EF4444 (red-500)
- 中性： #94A3B8 (slate-400)
有关详细的图表数据（25 种图表类型，含库推荐、无障碍说明和交互级别），请参见 data/design-data.csv。
无障碍要求 (关键)
颜色对比度
- 普通文字： 最小比例 4.5:1
- 大文字（18px+）： 最小比例 3:1
- 交互元素： 清晰的焦点状态
触摸目标
- 最小尺寸： 触控设备为 44x44px
- 间距： 目标之间最小 8px
焦点状态
/* 始终可见的焦点环 */
:focus-visible {
outline: 2px solid #2563EB;
outline-offset: 2px;
}
减少动画
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
表单标签
- 每个输入必须 有关联的标签
- 使用
<label for="id">或 aria-label - 错误消息靠近问题字段
常见的 UX 反模式 (避免)
图标
- 不允许： 使用表情符号作为 UI 图标
- 正确做法： 使用 SVG 图标（Heroicons、Lucide、Simple Icons）
悬停状态
- 不允许： 会改变布局的缩放变换
- 正确做法： 仅颜色/不透明度过渡
光标
- 不允许： 可点击元素使用默认光标
- 正确做法： 在所有交互元素上使用
cursor-pointer
亮色模式下的玻璃效果
- 不允许：
bg-white/10（过于透明，不可见） - 正确做法：
bg-white/80或更高不透明度
Z-Index
- 不允许： 随意的 z-index 值（999、9999）
- 正确做法： 定义的层级：10（默认）、20（下拉菜单）、30（模态框）、50（提示）
动画
- 不允许： 慢速动画（>500ms）或改变布局的动画
- 正确做法： 150-300ms 持续时间，仅变换/不透明度
特定技术栈指南
HTML + Tailwind CSS
- 使用实用类，避免自定义 CSS
- 响应式：
sm:，md:，lg:，xl:断点 - 深色模式：
dark:变体 - 始终在按钮/链接上包含
cursor-pointer
React
- 对昂贵的组件使用
memo() - 优先使用
useMemo/useCallback以实现稳定引用 - 避免在渲染中使用内联函数
- 使用 Suspense 进行代码分割
Next.js
- 使用
next/image实现自动优化 - 对重型组件实现动态导入
- 使用
next/font实现优化字体加载 - 尽可能利用服务器组件
Vue 3
- 使用组合式 API 和
<script setup> - 使用 Pinia 进行状态管理
- 使用 TypeScript 的
defineProps - 使用动态导入懒加载路由
Flutter
- 对静态组件使用
const构造函数 - 对长列表使用
ListView.builder - 在
dispose()中释放控制器 - 使用
Theme.of(context)实现一致的主题
SwiftUI
- 使用
@State管理本地状态，对于引用类型使用@StateObject - 对于异步操作，优先使用
.task而非.onAppear - 对长列表使用
LazyVStack - 支持动态类型以实现无障碍
有关全面的特定技术栈指南（跨 Flutter、SwiftUI 等的 99 条规则），请参见 data/stack-guidelines.csv。
响应风格
设计界面时：
- 首先展示设计系统，包含所有建议
- 显示色板，包含十六进制值和用途
- 包含 Google Fonts 导入代码，可直接使用
- 提供代码示例，遵循技术栈最佳实践
- 解释设计决策，附带理由
交付前检查清单
视觉质量
- 不要使用表情符号作为图标（使用 SVG：Heroicons、Lucide、Simple Icons）
- 所有图标来自一致的图标集
- 品牌标志已验证为官方来源
- 悬停状态不会引起布局变化
交互
- 所有可点击元素都有
cursor-pointer - 悬停状态提供清晰的视觉反馈
- 过渡流畅（150-300ms）
- 键盘导航时焦点状态可见
亮色/深色模式
- 亮色模式文字有足够对比度（最小 4.5:1）
- 玻璃/透明元素在亮色模式下可见
- 两种模式下边框都可见
布局
- 浮动元素与边缘有适当间距
- ...
（截断以进行翻译）