ui-research

What this skill does

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