ui-research

UI Research

Research real products before designing new UI, so the result is grounded in how shipped products solve the problem.

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

Use before:

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

---

Research Workflow

Phase 1: Define

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

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:

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

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

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

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

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
- Cream/off-white page background by default
- Italic accent words inside headlines
- Numbered "01 / 02 / 03" section labels
- Monospace eyebrow labels
- Pill-shaped buttons everywhere

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

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