The UI Research skill implements a research-first UI/UX design workflow designed to ground frontend projects in modern, real-world patterns. It solves the problem of generic, 'AI-style' visual outputs by enforcing a structured inspiration phase—gathering data from industry leaders and curated galleries—before any code is written. This ensures that user interfaces are professional, human-centered, and aligned with current design standards across web and mobile platforms.

When should I use ui-research?

ui-research is useful in the following scenarios: • Case 1: Conducting competitive research before building a SaaS dashboard to identify effective layout and data visualization patterns used by market leaders. • Case 2: Creating a high-conversion landing page by analyzing curated design galleries like Land-book or Awwwards to avoid cookie-cutter templates. • Case 3: Designing mobile app screens for iOS or Android that adhere to platform-specific HIG or Material Design standards while maintaining a unique brand identity. • Case 4: Modernizing existing UI components by identifying and replacing 'AI-look' red flags (like generic gradients) with custom, polished design elements. • Case 5: Developing a comprehensive Design Brief that aligns stakeholders on visual direction, typography, and color palettes before the development phase begins.

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

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:

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:

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

# 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

ui-research

When & Why to Use This Skill

Use Cases