screenshot-to-design-spec

name	screenshot-to-design-spec
description	Use when analyzing UI screenshots or design mockups to extract structured design specifications. Use when the user provides an image and wants to capture its visual design for reproduction by AI. Triggers on "extract design", "design spec", "analyze this UI", "recreate this design", "screenshot to spec", "design from image".

Screenshot to Design Spec

Overview

Extract structured, reproduction-ready design specifications from UI screenshots. The output is optimized for AI consumption — another AI reading these points should be able to recreate a visually faithful version of the design.

When to Use

• User provides a UI screenshot and wants design points extracted
• User wants to capture a design so AI can reproduce it
• User needs a structured design spec from a visual reference

Extraction Process

Analyze the image in this exact order. Each layer builds on the previous.

Layer 1: Layout Structure

Describe the spatial arrangement as a component tree. Use indentation to show nesting. For each node, note the layout method (flex row/column, grid, stack) and sizing behavior (fixed, fluid, content-fit).

Root: flex row, gap 20px, padding 0, bg #F0F0F0
  Panel (x N): flex column, w ~300px, bg white, rounded-12, shadow-sm
    Header: flex row, justify space-between, align center, px 16, py 12
    Content: flex column, overflow-y auto, px 16
      Item (repeating): flex row, gap 12, py 10

Layer 2: Design Tokens

Consolidate all reusable values into a tokens table. Do NOT scatter these throughout the document.

**Colors**
| Token           | Value     | Usage                        |
|-----------------|-----------|------------------------------|
| --bg-page       | #F0F0F0   | Page background              |
| --bg-card       | #FFFFFF   | Card/panel background        |
| --accent        | #7C3AED   | Primary accent, selections   |
| --text-primary  | #111827   | Headings, body text          |
| --text-secondary| #9CA3AF   | Timestamps, metadata         |

**Spacing Scale**: 4, 8, 12, 16, 20, 24, 32 (identify the scale used)

**Typography**
| Role      | Size | Weight | Color          |
|-----------|------|--------|----------------|
| Heading   | 16px | 600    | --text-primary |
| Body      | 14px | 400    | --text-primary |
| Bold ref  | 14px | 600    | --text-primary |
| Caption   | 12px | 400    | --text-secondary|

**Radii**: card 12px, button 6px, avatar 50%
**Shadows**: card `0 1px 3px rgba(0,0,0,0.08)`
**Font**: Inter / system sans-serif

Layer 3: Component Catalog

For each distinct component, describe:

1. Structure — HTML-level element breakdown
2. Variants — different states or types (selected, default, nested)
3. Visual details — borders, backgrounds, icons, decorators

Keep it terse. Use shorthand CSS-like notation where helpful.

**VersionItem**
- Structure: [circle-icon 32px] + [text-stack: title(14px/600) + meta(12px/400)]
- Selected variant: left-border 3px solid --accent, bg --accent/8%, checkmark icon right
- Default variant: no left-border, bg transparent
- Nested variant: indent-left 32px, connected by vertical line 1px --border

**ActivityItem**
- Structure: [colored-circle-icon 32px] + [text-stack: inline(name bold + action) + timestamp below]
- Icon color varies by action type (table of action→color mappings)

Layer 4: Interaction & State Patterns

• Selection indicators (which visual cues show selected state)
• Expand/collapse patterns (e.g., "Show More")
• Dismissible patterns (close buttons)
• Scrolling behavior (which areas scroll independently)

Layer 5: Visual Rhythm & Polish

• Alignment rules (what aligns with what)
• Consistent gaps and whitespace patterns
• Visual hierarchy (what draws the eye first, second, third)
• Subtle details (connector lines, separators, shadows)

Layer 6: Sample Content

Capture the actual data visible in the image so the reproduction matches exactly. Without this, an AI will invent placeholder content that looks nothing like the original.

• List every text string, name, date, label visible in the image
• Preserve exact hierarchy (which items are nested under which)
• Note data patterns (e.g., "version format is 'Version: X.Y'", "timestamps use relative format")

**Versions Panel Data**
1. [selected] "New Version" — Aug 30, 2024
2. "Version: 3.0" — Aug 20, 2024 · By Jane Cooper
3. "Version: 2.3" — Jul 31, 2024 · By Wade Warren (parent)
   - "Version: 2.2" — Jul 31, 2024 · By Esther Howard
   - "Version: 2.1" — Jul 31, 2024 · By Jenny Wilson
   - "Version: 2.0" — Jul 31, 2024 · By Wade Warren
4. [Show More]
5. "Version: 1.0" — Jun 20, 2024 · By Robert Fox

**Activity Panel Data**
1. Kevin Dukkon changed status from **Draft** to **In Progress** — 19m ago
2. Monty Hayton created the **Energy Charter Treaty** — Yesterday
...

Output Format

# Design Spec: [Name]

## Layout Tree
[Layer 1 output]

## Design Tokens
[Layer 2 output]

## Components
[Layer 3 output]

## States & Interactions
[Layer 4 output]

## Visual Rhythm
[Layer 5 output]

## Sample Content
[Layer 6 output]

Quality Checklist

Before finishing, verify:

• Could an AI recreate this from ONLY these points? (no access to original image)
• Are ALL colors captured in the tokens table? (not scattered in prose)
• Is the component tree complete? (every visible element accounted for)
• Are states documented? (selected, hover, expanded, collapsed)
• Is spacing systematic? (identified the spacing scale, not random pixel guesses)
• Are icon styles described? (stroke/fill, size, container shape and color)

Common Mistakes

Mistake	Fix
Verbose prose instead of structured data	Use tables, trees, shorthand notation
Scattering colors/sizes throughout	Consolidate into design tokens table
Flat list instead of hierarchy	Show nesting with indentation in layout tree
Missing states (selected, hover)	Always check each component for variant states
Random pixel guesses	Identify the spacing scale, then use scale values
Describing content instead of design	"Version list with dates" is content; "flex column, gap 8, items have 32px icon + text stack" is design
Missing sample content data	Include all visible text/names/dates — without it, reproduction AI invents wrong placeholders
Wrong nesting hierarchy	Carefully note which items are children of which parent — get the tree structure right