UI Research Skill | Agent Skills

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

Agent Skills: UI Research

Install this agent skill to your local

Skill Files