name: ui-research description: 研究优先的UI/UX设计工作流。在任何前端视觉工作之前使用，以研究现代模式，从真实产品中收集灵感，避免通用AI生成的外观。高质量UI工作的强制性前提条件。
UI 研究
设计前必研究。每次。
此技能确保UI工作基于真实世界灵感、现代模式和以人为本的设计，而非通用AI输出。
重要参考： 参见 UI 灵感来源
何时使用此技能
总是在以下情况前使用：
- 创建新UI组件
- 设计落地页
- 构建仪表盘或管理界面
- 开发移动应用屏幕
- 任何视觉/前端工作
此技能是高质量UI工作的强制要求。
研究工作流
阶段1：定义（5分钟）
在搜索前回答：
1. 我在构建什么？（组件、页面、流程）
2. 什么平台？（网页、iOS、Android、桌面）
3. 什么行业？（SaaS、电子商务、金融科技等）
4. 什么感觉？（专业、有趣、极简、大胆）
5. 什么约束？（现有品牌、技术栈、时间线）
阶段2：研究（15-30分钟）
搜索策略：
# 对每个UI任务，至少搜索3个来源：
# 1. 真实产品（最重要）
搜索：Mobbin、UI Sources、Refero
为什么：看真实公司如何解决这个问题
# 2. 策展画廊
搜索：Land-book、Awwwards、Godly
为什么：高质量、经过审查的设计
# 3. 组件模式
搜索：shadcn/ui、Collect UI、Dribbble
为什么：特定UI元素灵感
按任务搜索查询：
| 构建内容 | 搜索术语 |
|---|---|
| 仪表盘 | “分析仪表盘”、“管理面板”、“SaaS仪表盘” |
| 落地页 | “[行业]落地页”、“英雄部分”、“定价页面” |
| 移动应用 | “[应用类型] iOS”、“移动[功能]”、“[竞争对手]应用” |
| 电子商务 | “产品页面”、“结账流程”、“购物车设计” |
| 认证流程 | “登录屏幕”、“入门流程”、“注册表单” |
| 设置 | “设置页面”、“个人资料设置”、“偏好设置” |
阶段3：收集（10分钟）
保存5-10个共鸣的例子。对每个，记录：
URL/来源：[你找到的地方]
优点：[你喜欢的特定元素]
模式：[跨例子的重复解决方案]
独特：[使此突出的地方]
适应：[如何应用到我们的项目]
阶段4：分析（10分钟）
模式识别：
跨例子的常见模式：
- 布局：[网格、间距、层次]
- 颜色：[调色板趋势、对比]
- 字体：[字体、比例、粗细]
- 组件：[按钮、卡片、表单]
- 交互：[悬停、过渡、反馈]
质量检查清单：
- [ ] 找到3+个真实已发布产品（非概念）
- [ ] 识别了重复模式
- [ ] 记录了独特差异化
- [ ] 考虑了可访问性
- [ ] 检查了移动响应性
阶段5：设计简报（5分钟）
在实施前，文档化：
## UI研究简报
### 灵感来源
- [链接1]：[采纳什么]
- [链接2]：[采纳什么]
- [链接3]：[采纳什么]
### 要遵循的关键模式
- 布局：[具体方法]
- 颜色：[调色板方向]
- 字体：[字体选择]
- 组件：[样式决定]
### 差异化
- [使我们的独特的地方]
- [品牌个性元素]
### 技术方法
- 组件库：[shadcn/ui等]
- 动画方法：[Framer Motion、CSS]
- 响应策略：[移动优先等]
来源选择指南
按项目类型
| 项目 | 主要来源 | 次要 |
|---|---|---|
| SaaS应用 | Mobbin、UI Sources | Land-book、shadcn/ui |
| 落地页 | Land-book、Godly | Awwwards、One Page Love |
| 移动应用 | Mobbin、Screenlane | Pttrns、Apple HIG |
| 电子商务 | Baymard、Awwwards | Mobbin、UI Sources |
| 仪表盘 | Dribbble、UI Sources | Ant Design、Tremor |
| 作品集 | Awwwards、One Page Love | Godly、个人网站 |
按平台
| 平台 | 必需研究 |
|---|---|
| iOS | Apple HIG、Mobbin（iOS过滤器） |
| Android | Material 3、Mobbin（Android过滤器） |
| 网页 | Awwwards、Land-book、shadcn/ui |
| 桌面 | Fluent 2、平台特定应用 |
| 跨平台 | 以上全部，找到共同点 |
避免“AI外观”
要避免的红旗
通用AI模式（不要做这些）：
- 蓝/紫渐变背景
- 完全对称的一切
- 通用斑点/波浪装饰
- Undraw风格插图
- “带笔记本电脑模型布局的英雄部分”布局
- 默认配色方案未变
- 千篇一律的卡片网格
- 过度使用的玻璃形态
人性化元素
使设计感觉人性化的内容：
- 有个性的自定义调色板
- 有意的非对称
- 独特的字体组合
- 真实摄影或自定义插图
- 有个性的微交互
- 微妙的有机形状
- 品牌特定细节
- 体贴的空状态
- 文案中的人格化
质量信号
| 方面 | 通用AI | 人性化打磨 |
|---|---|---|
| 颜色 | 默认蓝色 | 自定义品牌调色板 |
| 布局 | 完美网格 | 有意的变化 |
| 图像 | 库存照片 | 自定义/策展图像 |
| 文案 | Lorem ipsum | 真实、人格化丰富的文本 |
| 动画 | 标准淡入淡出 | 有目的、品牌化的运动 |
| 细节 | 无 | 悬停状态、微交互 |
研究工具
浏览器扩展
- Muzli - 设计灵感源
- Panda - 新闻和灵感仪表盘
- Stylify Me - 提取网站颜色/字体
截图工具
- Full Page Screen Capture - 捕获整个页面
- Awesome Screenshot - 注释和保存
组织
- Figma - 创建情绪板
- Notion - 文档化研究
- Eagle - 视觉书签管理器
- Pinterest - 快速收集
研究输出模板
# UI研究：[组件/页面名称]
## 上下文
- **构建内容：** [什么]
- **平台：** [哪里]
- **约束：** [限制]
## 灵感（5-10个来源）
### 1. [公司/网站名称]
- **URL：** [链接]
- **截图：** [附加]
- **优点：** [特定元素]
- **采纳：** [使用什么]
### 2. [公司/网站名称]
...
## 模式分析
### 布局
- [观察到的常见布局模式]
### 颜色
- [调色板趋势]
### 字体
- [字体和比例模式]
### 组件
- [UI元素模式]
## 设计方向
### 必须有
- [非可协商元素]
### 锦上添花
- [增强机会]
### 避免
- [要跳过的反模式]
## 技术栈
- **组件：** [库选择]
- **样式：** [方法]
- **动画：** [库/方法]
与其他技能的集成
研究后，继续：
| 下一步 | 要使用的技能 |
|---|---|
| 视觉实现 | frontend-enhancer |
| 设计系统设置 | generic-design-system |
| UX流程设计 | generic-ux-designer |
| 动画工作 | ui-animation |
| 品牌对齐 | brand-identity |
快速启动检查清单
在任何UI工作前：
- [ ] 定义我在构建什么
- [ ] 搜索3+个灵感来源
- [ ] 收集5+个相关例子
- [ ] 识别了重复模式
- [ ] 记录了独特差异化
- [ ] 创建了简要设计方向
- [ ] 检查了“AI外观”红旗
- [ ] 计划了人性化元素
另见
- UI 灵感来源 - 完整来源列表和URL
- 设计模式 - 视觉设计令牌
frontend-enhancer- 用于研究后的实现generic-design-system- 用于设计系统工作graphic-design- 用于视觉设计原则
研究不是可选的。这是通用和卓越之间的区别。