sunfmin 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:
- 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 |