Inspiration Analyzer

---
name: inspiration-analyzer
description: "Analyze websites for design inspiration, extracting colors, typography, layouts, and patterns. Use when you have specific URLs to analyze for a design project."
allowed-tools: "mcp__claude-in-chrome__tabs_context_mcp mcp__claude-in-chrome__tabs_create_mcp mcp__claude-in-chrome__navigate mcp__claude-in-chrome__computer mcp__claude-in-chrome__read_page mcp__claude-in-chrome__get_page_text"
category: frontend-and-design
source_repo: davepoon/buildwithclaude
source_path: "plugins/frontend-design-pro/skills/inspiration-analyzer/SKILL.md"
source_url: https://github.com/davepoon/buildwithclaude/blob/HEAD/plugins/frontend-design-pro/skills/inspiration-analyzer/SKILL.md
---


# 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

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

### Step 2: Navigate to URL

```javascript
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

```javascript
// 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:

```markdown
## 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`](https://github.com/davepoon/buildwithclaude) → `plugins/frontend-design-pro/skills/inspiration-analyzer/SKILL.md`