analysis-screenshot

What this skill does

# Screenshot Analysis

## Overview

Extract precise, implementation-ready design tokens, components, and layout structure from screenshot images through a systematic eight-phase process. Every extraction must trace back to something observed in the screenshot, and every gap must be explicitly acknowledged.

## When to Use

- Analyzing a screenshot image to extract a design system
- Building a color palette from an existing interface
- Cataloging components visible in a UI screenshot
- Identifying typography scale and hierarchy from a reference app
- Measuring spacing patterns and grid structure from a screenshot
- Producing implementation-ready tokens from visual inspiration

## When NOT to Use

- Designing from scratch without reference screenshots
- Working from design files (Figma, Sketch) where tokens are already exported
- Pure interaction design without visual analysis
- When the user provides a design system spec and needs implementation only

## Phase 1: Initial Assessment

Before extracting any tokens, establish the context of the interface.

**Identify and document:**

| Attribute | What to Determine |
|-----------|-------------------|
| Platform | Mobile (iOS/Android), web (desktop/responsive), desktop app |
| Design language | Material, iOS HIG, custom, hybrid |
| Layout approach | Single column, multi-column, sidebar+content, dashboard grid |
| Density | Compact (data-heavy), comfortable (standard), spacious (marketing) |
| Color mode | Light, dark, or mixed |
| Apparent era | Current design trends vs. dated patterns |

**Output format:**
```
PLATFORM: [platform]
DESIGN LANGUAGE: [language]
LAYOUT: [approach]
DENSITY: [level]
COLOR MODE: [mode]
NOTES: [anything notable about the overall approach]
```

## Phase 2: Color Extraction

Extract every distinguishable color. Organize by role, not by where it appears.

### Extraction Process

1. **Backgrounds first** -- Identify every distinct background color. Number them from darkest to lightest (or lightest to darkest in dark mode).
2. **Text colors** -- Identify primary text, secondary text, muted/placeholder text, and any colored text.
3. **Interactive elements** -- Buttons, links, toggles, active states. Separate primary actions from secondary.
4. **Semantic colors** -- Success (green), warning (amber/yellow), error/destructive (red), info (blue). Note which are present and which are absent.
5. **Accent and brand** -- The dominant brand color. Any secondary accent.
6. **Borders and dividers** -- Often subtle. Zoom in mentally. Note opacity if borders appear semi-transparent.

### Output Format

```
PRIMARY PALETTE:
  Brand Primary:    #XXXXXX  (observed in: [element])
  Brand Secondary:  #XXXXXX  (observed in: [element])

NEUTRAL PALETTE:
  Background Base:  #XXXXXX  (observed in: [element])
  Background Elevated: #XXXXXX  (observed in: [element])
  Surface:          #XXXXXX  (observed in: [element])
  Border Default:   #XXXXXX  (observed in: [element])
  Text Primary:     #XXXXXX  (observed in: [element])
  Text Secondary:   #XXXXXX  (observed in: [element])
  Text Muted:       #XXXXXX  (observed in: [element])

SEMANTIC PALETTE:
  Success:          #XXXXXX  (observed in: [element])
  Warning:          #XXXXXX  (observed in: [element])
  Error:            #XXXXXX  (observed in: [element])
  Info:             #XXXXXX  (observed in: [element])

ACCENT PALETTE:
  [role]:           #XXXXXX  (observed in: [element])
```

Every color entry MUST include the `(observed in: ...)` attribution. If a semantic color is not visible in the screenshot, omit it and note its absence in the gaps section.

## Phase 3: Typography Identification

Identify every distinct typographic treatment visible in the screenshot.

### Extraction Process

1. **Scan top to bottom** -- Note every text element, grouping by apparent visual hierarchy level.
2. **Font family** -- Identify the typeface. If uncertain, provide the closest match (e.g., "appears to be Inter or similar geometric sans-serif").
3. **Size scale** -- Measure relative sizes. Anchor to body text and express other sizes as ratios or estimated pixel values.
4. **Weight scale** -- Note distinct weights visible (regular, medium, semibold, bold).
5. **Line height** -- Estimate for body text and headings. Note whether headings use tighter line height than body.
6. **Letter spacing** -- Note any visible tracking differences (tight headings, wider labels, uppercase with extra tracking).
7. **Special treatments** -- Monospace for code, tabular numbers for data, italic for emphasis.

### Output Format

```
FONT FAMILIES:
  Primary:    [family] (confidence: high/medium/low)
  Secondary:  [family] (confidence: high/medium/low)
  Monospace:  [family] (if present)

TYPE SCALE:
  Display:    ~[size]px / weight [N] / leading [N] (observed in: [element])
  Heading 1:  ~[size]px / weight [N] / leading [N] (observed in: [element])
  Heading 2:  ~[size]px / weight [N] / leading [N] (observed in: [element])
  Heading 3:  ~[size]px / weight [N] / leading [N] (observed in: [element])
  Body:       ~[size]px / weight [N] / leading [N] (observed in: [element])
  Caption:    ~[size]px / weight [N] / leading [N] (observed in: [element])
  Label:      ~[size]px / weight [N] / leading [N] (observed in: [element])
  Overline:   ~[size]px / weight [N] / leading [N] (observed in: [element])

LETTER SPACING:
  Headings: [value or "normal"]
  Labels:   [value or "normal"]
  Overline: [value or "normal"]
```

Mark all pixel values with `~` (approximate) unless the screenshot provides enough context for exact measurement. Note confidence level for font family identification.

## Phase 4: Spacing Measurement

Extract the spacing system by identifying the base unit and its multipliers.

### Extraction Process

1. **Find the base unit** -- Examine the smallest repeated spacing value. Common bases: 4px, 8px. Look at icon-to-text gaps, input padding, and tight element pairs.
2. **Internal component spacing** -- Padding inside buttons, cards, inputs, list items.
3. **Between-element spacing** -- Gaps between sibling elements (button groups, form fields, list items).
4. **Section spacing** -- Distance between major content sections.
5. **Page margins** -- Outer padding of the main content area.
6. **Consistent vs. inconsistent** -- Note whether spacing follows a strict scale or varies.

### Output Format

```
BASE UNIT: [N]px

SPACING SCALE:
  2xs:  [N]px  ([base] x [multiplier]) — used for: [context]
  xs:   [N]px  ([base] x [multiplier]) — used for: [context]
  sm:   [N]px  ([base] x [multiplier]) — used for: [context]
  md:   [N]px  ([base] x [multiplier]) — used for: [context]
  lg:   [N]px  ([base] x [multiplier]) — used for: [context]
  xl:   [N]px  ([base] x [multiplier]) — used for: [context]
  2xl:  [N]px  ([base] x [multiplier]) — used for: [context]

COMPONENT PADDING PATTERNS:
  Buttons:     [top] [right] [bottom] [left]
  Cards:       [top] [right] [bottom] [left]
  Inputs:      [top] [right] [bottom] [left]
  List items:  [top] [right] [bottom] [left]

GAP PATTERNS:
  Form fields:    [N]px between fields
  Button groups:  [N]px between buttons
  Section gap:    [N]px between major sections
```

## Phase 5: Component Cataloging

Identify and document every distinct UI component visible in the screenshot.

### Extraction Process

For each component:

1. **Name it** -- Use standard terminology (button, input, card, badge, avatar, tab, etc.).
2. **Count variants** -- How many visual variants are visible? (primary/secondary/ghost button, filled/outlined input).
3. **Identify states** -- Which states are visible? (default, hover, active, disabled, focused, selected, error).
4. **Measure it** -- Height, padding, border-radius, font size, icon size.
5. **Note composition** -- What sub-elements does it contain? (icon + label, avatar + name + subtitle).

### Output Format

For each component:

```
COMPONENT: [Name]
  Variants observed: [list]
  States visible: [list]
  States NOT visible: [lis