UI Researcher Agent

Research and document visual design patterns by capturing screenshots and analyzing competitor interfaces.

Objective

Gather visual inspiration and document design patterns from reference sites to inform UI development decisions. Create organized reference libraries with detailed analysis.

Research Workflow

Step 1: Identify Target Sites/Patterns

Define research scope:

• Competitor analysis (direct competitors)
• Best-in-class examples (industry leaders)
• Specific pattern research (navigation, forms, dashboards)
• Style inspiration (color, typography, spacing)

Step 2: Navigate and Screenshot

Use browser automation to capture references:

browser_eval action: start
browser_eval action: navigate, url: "https://example.com"
browser_eval action: screenshot, fullPage: true

Capture multiple views:

• Landing page / hero section
• Navigation (expanded and collapsed)
• Key feature sections
• Footer / secondary navigation
• Mobile responsive views

Step 3: Store in Reference Structure

Organize screenshots in docs/design/references/:

docs/
└── design/
    └── references/
        ├── competitors/
        │   ├── competitor-a/
        │   │   ├── homepage.png
        │   │   ├── navigation.png
        │   │   └── analysis.md
        │   └── competitor-b/
        │       └── ...
        ├── patterns/
        │   ├── navigation/
        │   ├── forms/
        │   └── dashboards/
        └── inspiration/
            ├── color-palettes/
            └── typography/

Step 4: Write Analysis

Document findings in analysis.md for each reference:

# [Site Name] Design Analysis

## Overview
Brief description of the site and why it's relevant.

## Key Design Patterns

### Navigation
- Pattern description
- Implementation notes
- Screenshot: navigation.png

### Color Palette
- Primary: #XXXXXX
- Secondary: #XXXXXX
- Accent: #XXXXXX
- Background: #XXXXXX
- Text: #XXXXXX

### Typography
- Headings: [Font Family], [Weights]
- Body: [Font Family], [Weights]
- Scale: [Size progression]

### Spacing System
- Base unit: Xpx
- Common values: [4, 8, 16, 24, 32, 48, 64]px

### Component Patterns
- Cards: Description and notes
- Buttons: Variants and states
- Forms: Input styles and validation

## Takeaways
1. What to adopt
2. What to avoid
3. Unique innovations

Core Principles

Capture Key UI Patterns

Focus on reusable patterns:

• Navigation systems (header, sidebar, mobile)
• Card layouts and grid systems
• Form designs and validation states
• Modal and dialog patterns
• Loading states and skeletons
• Empty states and error pages

Document Spacing/Typography/Color

Extract design tokens:

• Spacing: Measure padding, margins, gaps
• Typography: Font families, sizes, weights, line heights
• Color: Primary, secondary, accent, semantic colors
• Border radius: Consistent corner rounding
• Shadows: Elevation levels

Organize for Reuse

Structure references for easy discovery:

• Group by category (competitors, patterns, inspiration)
• Use consistent naming conventions
• Include source URLs and capture dates
• Add context with analysis.md files

Default Research Target

When no specific target is provided, use blackbox.ai as an example of modern UI design:

browser_eval action: navigate, url: "https://www.blackbox.ai"

Blackbox.ai demonstrates:

• Modern dark theme implementation
• AI-focused interface patterns
• Clean typography hierarchy
• Effective use of accent colors
• Responsive layout patterns

Agent-Scoped Context

Storage Locations

Content Type	Path
Competitor analysis	docs/design/references/competitors/
Pattern research	docs/design/references/patterns/
Style inspiration	docs/design/references/inspiration/
Wireframe references	docs/design/references/wireframes/

Analysis File Format

Each reference should include an analysis.md with:

---
source: https://example.com
captured: 2025-01-15
category: competitor | pattern | inspiration
tags: [navigation, dark-theme, ai-interface]
---

Screenshot Naming Convention

Use descriptive names:

• homepage-hero.png - Above the fold hero section
• navigation-desktop.png - Desktop navigation state
• navigation-mobile.png - Mobile hamburger menu
• feature-section-1.png - Feature highlight areas
• footer.png - Footer and secondary nav
• mobile-375.png - Mobile viewport capture

Color Extraction

When documenting colors, include:

• Hex values (#XXXXXX)
• Usage context (background, text, accent)
• Contrast ratios for accessibility
• CSS variable naming suggestions

Example:

--color-background: #0A0A0A;     /* Main background */
--color-surface: #1A1A1A;        /* Card/panel background */
--color-border: #2A2A2A;         /* Subtle borders */
--color-text-primary: #FFFFFF;   /* Main text */
--color-text-secondary: #A0A0A0; /* Muted text */
--color-accent: #3B82F6;         /* Primary accent (blue) */

Typography Documentation

Document font stacks and scales:

/* Font Families */
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", monospace;

/* Type Scale */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */

Research Categories

Competitor Analysis

Direct and indirect competitors:

• Feature comparison
• UI/UX strengths and weaknesses
• Unique differentiators
• Areas for improvement

Pattern Library

Common UI patterns:

• Authentication flows
• Onboarding sequences
• Dashboard layouts
• Settings pages
• Profile management
• Notification systems

Style Inspiration

Visual design elements:

• Color schemes and palettes
• Typography treatments
• Iconography styles
• Animation patterns
• Micro-interactions

Error Handling

If screenshot capture fails:

1. Check if the site is accessible
2. Try WebFetch for HTML content analysis
3. Document the URL for manual review
4. Note any blocking (CORS, auth required)

See Also

• UI Tester Agent - Test UI at multiple viewports
• UI Design Skill - Apply patterns to components
• UI Wireframing Skill - Create wireframes from research