Inspiration Analyzer

Inspiration Analyzer

Analyze websites to extract design inspiration including colors, typography, layouts, and UI patterns.

Purpose

When a user provides inspiration URLs, this skill:

• Visits each site using browser tools
• Takes screenshots for visual analysis
• Extracts specific design elements
• Creates structured inspiration report
• Identifies replicable patterns

Workflow

Step 1: Get Browser Context

// Get or create browser tab
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()

Step 2: Navigate to URL

navigate({ url: "https://example.com", tabId: tabId })

Step 3: Capture Screenshots

Take multiple screenshots to capture the full experience:

1. Hero/Above-fold: Initial viewport
2. Scrolled sections: Scroll and capture
3. Interactive states: Hover on navigation, buttons
4. Mobile view: Resize to mobile width

// Full page screenshot
computer({ action: "screenshot", tabId: tabId })

// Scroll and capture more
computer({ action: "scroll", scroll_direction: "down", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })

// Mobile view
resize_window({ width: 375, height: 812, tabId: tabId })
computer({ action: "screenshot", tabId: tabId })

Step 4: Analyze Elements

From screenshots and page content, extract:

Colors

• Primary color: Main brand color
• Secondary colors: Supporting palette
• Background color: Page and section backgrounds
• Text colors: Headings and body text
• Accent colors: CTAs, links, highlights

Note hex codes where visible.

Typography

• Heading font: Name if identifiable, or describe style
• Body font: Name or describe
• Font weights: Light, regular, bold usage
• Size scale: Relative sizes of elements
• Line height: Tight or generous
• Letter spacing: Tracking patterns

Layout

• Grid system: Column structure
• White space: Spacing philosophy
• Section structure: Full-width, contained, alternating
• Navigation style: Fixed, hidden, sidebar
• Footer structure: Minimal or comprehensive

UI Patterns

• Buttons: Shape, size, states
• Cards: Borders, shadows, corners
• Icons: Style (outlined, filled, custom)
• Images: Treatment, aspect ratios
• Animations: Motion patterns observed

Step 5: Generate Report

Create a structured analysis:

## Website Analysis: [URL]

### Screenshots
[Describe key screenshots taken]

### Color Palette
| Role | Hex | Usage |
|------|-----|-------|
| Primary | #xxx | [Where used] |
| Secondary | #xxx | [Where used] |
| Background | #xxx | [Where used] |
| Text | #xxx | [Where used] |
| Accent | #xxx | [Where used] |

### Typography
- **Headlines**: [Font name/description] - [weight]
- **Body**: [Font name/description] - [weight]
- **Scale**: [Size relationships]
- **Line height**: [Observation]

### Layout Patterns
- Grid: [Description]
- Spacing: [Description]
- Sections: [Description]

### UI Elements
- **Buttons**: [Description]
- **Cards**: [Description]
- **Navigation**: [Description]
- **Footer**: [Description]

### Key Takeaways
1. [What makes this design distinctive]
2. [Pattern worth replicating]
3. [Specific technique to use]

### What to Avoid
- [Any patterns from this site that are overused]
- [Elements that wouldn't translate well]

Multiple Sites

When analyzing multiple URLs:

1. Analyze each separately
2. Create individual reports
3. Summarize common themes
4. Note contrasting approaches
5. Recommend which elements to combine

Fallback Mode

If browser tools are unavailable:

1. Inform user that live analysis requires browser access
2. Ask user to:
   • Share screenshots of the sites
   • Describe what they like about each
   • Paste any visible color codes
   • Note font names if visible
3. Work with provided information to create analysis

Best Practices

For Accurate Color Extraction

• Look for color variables in page inspection
• Check buttons for primary brand color
• Note background color on different sections
• Capture hover states for accent colors

For Typography Identification

• Look for Google Fonts link in source
• Check font-family in computed styles
• Note relative sizes between h1, h2, body
• Observe tracking on headings vs body

For Layout Analysis

• Resize viewport to see responsive behavior
• Note breakpoints where layout changes
• Count columns in grid layouts
• Measure (visually) spacing consistency

Output

The analysis should provide:

1. Actionable color palette (hex codes)
2. Typography recommendations
3. Layout patterns to replicate
4. UI component inspiration
5. Clear direction for moodboard

See references/extraction-techniques.md for detailed extraction methods.

Source: davepoon/buildwithclaude → plugins/frontend-design-pro/skills/inspiration-analyzer/SKILL.md