ui-research（用户界面研究）

UI Research

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

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.

Research Workflow

Phase 1: Define (5 min)

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)

Phase 2: Research (15-30 min)

Search Strategy:

# For each UI task, search at least 3 sources:

# 1. Real products (MOST IMPORTANT)
Search: Mobbin, UI Sources, Refero
Why: See how real companies solved this problem

# 2. Curated galleries
Search: Land-book, Awwwards, Godly
Why: High-quality, vetted designs

# 3. Component patterns
Search: shadcn/ui, Collect UI, Dribbble
Why: Specific UI element inspiration

Search Queries by Task:

Phase 3: Collect (10 min)

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]

Phase 4: Analyze (10 min)

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

Phase 5: Design Brief (5 min)

Before implementing, document:

## UI Research Brief

### 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.]

Source Selection Guide

By Project Type

By Platform

Avoiding the "AI Look"

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

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

Research Tools

Browser Extensions

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

Screenshot Tools

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

Organization

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

Research Output Template

# UI Research: [Component/Page Name]

## Context

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

## Inspiration (5-10 sources)

### 1. [Company/Site Name]

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

### 2. [Company/Site Name]

...

## Pattern Analysis

### Layout

- [Common layout patterns observed]

### Color

- [Palette trends]

### Typography

- [Font and scale patterns]

### Components

- [UI element patterns]

## 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:

Quick Start Checklist

Before ANY UI work:

• [ ] Defined what I'm building
• [ ] Searched 3+ inspiration sources
• [ ] Collected 5+ relevant examples
• [ ] Identified repeating patterns
• [ ] Noted unique differentiators
• [ ] Created brief design direction
• [ ] Checked for "AI look" red flags
• [ ] Planned human touch elements

See Also

• UI Inspiration Sources - Full source list with URLs
• Design Patterns - Visual design tokens
• frontend-enhancer - For implementation after research
• generic-design-system - For design system work
• graphic-design - For visual design principles

_Research is not optional. It's the difference between generic and exceptional._