---
name: ui-research
description: Research-first UI/UX design workflow. Use BEFORE any frontend visual work to research modern patterns, gather inspiration from real products, and avoid generic AI-generated looks. Mandatory prerequisite for quality UI work.
---

# 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](../_shared/UI_INSPIRATION_SOURCES.md)

---

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

```bash
# 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:**

| 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" |

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

```markdown
## 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

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

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

---

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

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

---

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

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

| 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` |

---

## 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](../_shared/UI_INSPIRATION_SOURCES.md) - Full source list with URLs
- [Design Patterns](../_shared/DESIGN_PATTERNS.md) - 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.*