| 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:
- Structure — HTML-level element breakdown
- Variants — different states or types (selected, default, nested)
- 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:
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 |
