ui-research

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Research

UI研究

Research before you design. Every time.

This skill ensures UI work is informed by real-world inspiration, modern patterns, and human-centered design - not generic AI output.

Essential Reference: See UI Inspiration Sources

设计前先做研究，每次都要如此。

这项工作流确保UI设计基于真实世界的灵感、现代设计模式和以人为本的理念，而非千篇一律的AI输出内容。

重要参考： 查看 UI灵感来源

When to Use This Skill

何时使用该工作流

ALWAYS use before:

Creating new UI components
Designing landing pages
Building dashboards or admin UIs
Developing mobile app screens
Any visual/frontend work

This skill is MANDATORY for quality UI work.

务必在以下工作前使用：

创建新UI组件
设计着陆页
构建仪表盘或管理后台UI
开发移动端应用界面
任何视觉/前端相关工作

这是打造高质量UI作品的必备步骤。

Research Workflow

研究工作流

Phase 1: Define (5 min)

第一阶段：明确需求（5分钟）

Before searching, answer:

1. What am I building? (component, page, flow)
2. What platform? (web, iOS, Android, desktop)
3. What industry? (SaaS, e-commerce, fintech, etc.)
4. What feeling? (professional, playful, minimal, bold)
5. What constraints? (existing brand, tech stack, timeline)

开始搜索前，先回答以下问题：

1. 我要构建什么？（组件、页面、流程）
2. 面向什么平台？（网页、iOS、Android、桌面端）
3. 所属什么行业？（SaaS、电商、金融科技等）
4. 想要营造什么氛围？（专业、活泼、极简、大胆）
5. 有哪些约束条件？（现有品牌、技术栈、时间周期）

Phase 2: Research (15-30 min)

第二阶段：开展研究（15-30分钟）

Search Strategy:

bash

undefined

搜索策略：

bash

undefined

For each UI task, search at least 3 sources:

针对每项UI任务，至少从3类来源搜索：

1. Real products (MOST IMPORTANT)

1. 真实产品（最重要）

Search: Mobbin, UI Sources, Refero Why: See how real companies solved this problem

搜索平台：Mobbin, UI Sources, Refero 原因：了解真实企业如何解决同类问题

2. Curated galleries

2. 精选设计画廊

Search: Land-book, Awwwards, Godly Why: High-quality, vetted designs

搜索平台：Land-book, Awwwards, Godly 原因：获取经过筛选的高质量设计案例

3. Component patterns

3. 组件模式库

Search: shadcn/ui, Collect UI, Dribbble Why: Specific UI element inspiration


**Search Queries by Task:**

| Building     | Search Terms                                              |
| ------------ | --------------------------------------------------------- |
| Dashboard    | "analytics dashboard", "admin panel", "SaaS dashboard"    |
| Landing page | "[industry] landing page", "hero section", "pricing page" |
| Mobile app   | "[app type] iOS", "mobile [feature]", "[competitor] app"  |
| E-commerce   | "product page", "checkout flow", "cart design"            |
| Auth flows   | "login screen", "onboarding", "signup form"               |
| Settings     | "settings page", "profile settings", "preferences"        |

搜索平台：shadcn/ui, Collect UI, Dribbble 原因：获取特定UI元素的灵感


**按任务分类的搜索关键词：**

| 设计内容     | 搜索关键词                                              |
| ------------ | --------------------------------------------------------- |
| 仪表盘       | "analytics dashboard", "admin panel", "SaaS dashboard"    |
| 着陆页       | "[行业] landing page", "hero section", "pricing page" |
| 移动应用     | "[应用类型] iOS", "mobile [功能]", "[竞品] app"  |
| 电商平台     | "product page", "checkout flow", "cart design"            |
| 认证流程     | "login screen", "onboarding", "signup form"               |
| 设置页面     | "settings page", "profile settings", "preferences"        |

Phase 3: Collect (10 min)

第三阶段：收集案例（10分钟）

Save 5-10 examples that resonate. For each, note:

URL/Source: [where you found it]
What works: [specific elements you like]
Patterns: [repeating solutions across examples]
Unique: [what makes this stand out]
Adapt: [how to apply to our project]

保存5-10个符合需求的案例，每个案例需记录：

链接/来源：[获取案例的渠道]
可取之处：[你喜欢的具体元素]
通用模式：[多个案例中重复出现的解决方案]
独特亮点：[该案例的与众不同之处]
适配方案：[如何应用到我们的项目中]

Phase 4: Analyze (10 min)

第四阶段：分析总结（10分钟）

Pattern Recognition:

Common patterns across examples:
- Layout: [grid, spacing, hierarchy]
- Colors: [palette trends, contrast]
- Typography: [fonts, scale, weights]
- Components: [buttons, cards, forms]
- Interactions: [hover, transitions, feedback]

Quality Checklist:

Found 3+ real shipped products (not concepts)
Identified repeating patterns
Noted unique differentiators
Considered accessibility
Checked mobile responsiveness

模式识别：

案例中的通用模式：
- 布局：[网格、间距、层级结构]
- 色彩：[调色板趋势、对比度]
- 排版：[字体、字号层级、字重]
- 组件：[按钮、卡片、表单]
- 交互：[悬停效果、过渡动画、反馈机制]

质量检查清单：

找到3个以上已上线的真实产品案例（而非概念设计）
识别出重复出现的设计模式
记录下案例的独特差异化点
考虑了可访问性需求
检查了移动端响应式表现

Phase 5: Design Brief (5 min)

第五阶段：设计简报（5分钟）

Before implementing, document:

markdown

undefined

开始实施前，整理以下文档：

markdown

undefined

UI Research Brief

UI研究简报

Inspiration Sources

灵感来源

[Link 1]: [What to adopt]
[Link 2]: [What to adopt]
[Link 3]: [What to adopt]

Key Patterns to Follow

需遵循的核心设计模式

Layout: [specific approach]
Color: [palette direction]
Typography: [font choices]
Components: [style decisions]

布局：[具体实现方式]
色彩：[调色板方向]
排版：[字体选择]
组件：[风格决策]

Differentiation

差异化设计

[What makes ours unique]
[Brand personality elements]

[我们的设计独特之处]
[品牌个性相关细节]

Technical Approach

技术实现方案

Component library: [shadcn/ui, etc.]
Animation approach: [Framer Motion, CSS]
Responsive strategy: [mobile-first, etc.]

---

组件库：[shadcn/ui等]
动画方案：[Framer Motion、CSS]
响应式策略：[移动端优先等]

---

Source Selection Guide

来源选择指南

By Project Type

按项目类型分类

Project	Primary Sources	Secondary
SaaS App	Mobbin, UI Sources	Land-book, shadcn/ui
Landing Page	Land-book, Godly	Awwwards, One Page Love
Mobile App	Mobbin, Screenlane	Pttrns, Apple HIG
E-commerce	Baymard, Awwwards	Mobbin, UI Sources
Dashboard	Dribbble, UI Sources	Ant Design, Tremor
Portfolio	Awwwards, One Page Love	Godly, personal sites

项目类型	主要来源	次要来源
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, 个人网站

By Platform

按平台分类

Platform	Required Research
iOS	Apple HIG, Mobbin (iOS filter)
Android	Material 3, Mobbin (Android filter)
Web	Awwwards, Land-book, shadcn/ui
Desktop	Fluent 2, platform-specific apps
Cross-platform	All of the above, find common ground

平台类型	必选研究资源
iOS	Apple HIG, Mobbin（iOS筛选）
Android	Material 3, Mobbin（Android筛选）
网页	Awwwards, Land-book, shadcn/ui
桌面端	Fluent 2, 平台专属应用
跨平台	以上所有资源，寻找通用设计思路

Avoiding the "AI Look"

规避“AI风格”

Red Flags to Avoid

需警惕的雷区

GENERIC AI PATTERNS (Don't do these):
- Blue/purple gradient backgrounds
- Perfectly symmetrical everything
- Generic blob/wave decorations
- Undraw-style illustrations
- "Hero with laptop mockup" layouts
- Default color schemes unchanged
- Cookie-cutter card grids
- Overused glassmorphism

通用AI设计模式（请勿效仿）：
- 蓝/紫色渐变背景
- 完全对称的布局
- 通用的 blob/波浪装饰
- Undraw风格插画
- “笔记本电脑样机+标题”的英雄区布局
- 未修改的默认配色方案
- 千篇一律的卡片网格
- 过度使用玻璃拟态效果

Human Touch Elements

赋予设计人文感的元素

WHAT MAKES DESIGN FEEL HUMAN:
- Custom color palette with personality
- Intentional asymmetry
- Unique typography combinations
- Real photography or custom illustration
- Micro-interactions with character
- Subtle organic shapes
- Brand-specific details
- Thoughtful empty states
- Personality in copywriting

让设计更具温度的细节：
- 带有品牌个性的自定义调色板
- 刻意设计的不对称布局
- 独特的字体组合
- 真实摄影或定制插画
- 带有个性的微交互
- 微妙的有机形状
- 品牌专属细节
- 用心设计的空状态
- 带有个性的文案

Quality Signals

质量判断标准

Aspect	Generic AI	Human-Polished
Color	Default blue	Custom brand palette
Layout	Perfect grid	Intentional variation
Images	Stock photos	Custom/curated imagery
Copy	Lorem ipsum	Real, personality-rich text
Animation	Standard fades	Purposeful, branded motion
Details	None	Hover states, micro-interactions

维度	通用AI设计	人工打磨设计
色彩	默认蓝色系	自定义品牌调色板
布局	完美网格	刻意的差异化布局
图像	库存照片	定制/精选图像
文案	占位文本	真实、富有个性的文案
动画	标准淡入淡出	有目的性的品牌化动效
细节	无额外细节	悬停状态、微交互

Research Tools

研究工具

Browser Extensions

浏览器扩展

Muzli - Design inspiration feed
Panda - News and inspiration dashboard
Stylify Me - Extract site colors/fonts

Muzli - 设计灵感信息流
Panda - 设计资讯与灵感仪表盘
Stylify Me - 提取网站色彩/字体

Screenshot Tools

截图工具

Full Page Screen Capture - Capture entire pages
Awesome Screenshot - Annotate and save

Full Page Screen Capture - 捕获整页内容
Awesome Screenshot - 标注并保存截图

Organization

整理工具

Figma - Create mood boards
Notion - Document research
Eagle - Visual bookmark manager
Pinterest - Quick collection

Figma - 创建情绪板
Notion - 记录研究内容
Eagle - 视觉书签管理器
Pinterest - 快速收集灵感

Research Output Template

研究输出模板

markdown

undefined

markdown

undefined

UI Research: [Component/Page Name]

UI研究：[组件/页面名称]

Context

项目背景

Building: [what]
Platform: [where]
Constraints: [limitations]

设计内容： [具体内容]
目标平台： [平台]
约束条件： [限制因素]

Inspiration (5-10 sources)

灵感案例（5-10个）

1. [Company/Site Name]

1. [公司/网站名称]

URL: [link]
Screenshot: [attached]
What works: [specific elements]
Adopt: [what to use]

链接： [地址]
截图： [已附加]
可取之处： [具体元素]
可借鉴点： [应用到项目中的内容]

2. [Company/Site Name]

2. [公司/网站名称]

...

Pattern Analysis

模式分析

Layout

布局

[Common layout patterns observed]

[观察到的通用布局模式]

Color

色彩

[Palette trends]

[调色板趋势]

Typography

排版

[Font and scale patterns]

[字体与字号层级模式]

Components

组件

[UI element patterns]

[UI元素模式]

Design Direction

设计方向

Must Have

必备元素

[Non-negotiable elements]

[不可缺少的内容]

Nice to Have

可选优化

[Enhancement opportunities]

[可增强的方向]

Avoid

需规避内容

[Anti-patterns to skip]

[应避免的反模式]

Technical Stack

技术栈

Components: [library choice]
Styling: [approach]
Animation: [library/method]

---

组件： [库选择]
样式： [实现方式]
动画： [库/方法]

---

Integration with Other Skills

与其他工作流的衔接

After research, proceed to:

Next Step	Skill to Use
Visual implementation	`frontend-enhancer`
Design system setup	`generic-design-system`
UX flow design	`generic-ux-designer`
Animation work	`ui-animation`
Brand alignment	`brand-identity`

完成研究后，可继续以下工作：

下一步工作	对应工作流
视觉实现	`frontend-enhancer`
设计系统搭建	`generic-design-system`
UX流程设计	`generic-ux-designer`
动画设计	`ui-animation`
品牌对齐	`brand-identity`