|
1
|
--- |
|
2
|
name: recreate-screenshot |
|
3
|
description: Recreate a UI from a screenshot or image with pixel-perfect accuracy. |
|
4
|
--- |
|
5
|
|
|
6
|
# Recreate Screenshot |
|
7
|
|
|
8
|
Recreate a UI screen from a screenshot or image reference. The goal is pixel-perfect accuracy — the rendered output should be visually indistinguishable from the source image. |
|
9
|
|
|
10
|
## When to Use |
|
11
|
|
|
12
|
- User pastes a screenshot and says "build this", "recreate this", "make this", "replicate this UI" |
|
13
|
- User uploads a design mockup image and wants it implemented |
|
14
|
- User shares a reference image from another app and wants an exact visual match |
|
15
|
- User provides a Figma screenshot, Dribbble shot, or any visual reference to reproduce |
|
16
|
|
|
17
|
## When NOT to Use |
|
18
|
|
|
19
|
- User wants a *functional app inspired by* a design — that's general development, not screenshot recreation |
|
20
|
- User wants to *clone a live website* by URL — use the website-cloning skill instead |
|
21
|
- User wants to *redesign or improve* an existing component — use design-exploration instead |
|
22
|
- User describes a UI in words without providing an image — that's standard design work |
|
23
|
|
|
24
|
## Phase 1: Analyze the Screenshot |
|
25
|
|
|
26
|
Before writing any code, study the image systematically. Extract every visual detail. |
|
27
|
|
|
28
|
### Layout Analysis |
|
29
|
|
|
30
|
- Identify the overall layout structure: single column, sidebar + content, grid, split-screen |
|
31
|
- Map the visual hierarchy: what draws the eye first, second, third |
|
32
|
- Note the container structure: full-width vs constrained, nested containers, card groups |
|
33
|
- Identify repeating patterns: card grids, list items, nav items, form groups |
|
34
|
|
|
35
|
### Color Extraction |
|
36
|
|
|
37
|
Extract exact colors from the image — do not approximate. |
|
38
|
|
|
39
|
- **Primary background** — the dominant background color |
|
40
|
- **Secondary backgrounds** — card backgrounds, section backgrounds, sidebar fills |
|
41
|
- **Primary accent** — buttons, links, active states |
|
42
|
- **Text colors** — headings vs body vs muted/secondary text (these are almost always different) |
|
43
|
- **Border and divider colors** — often subtle grays |
|
44
|
- **Gradient start/end colors** — if any gradients are visible |
|
45
|
- **Shadow colors** — note opacity and spread if box-shadows are present |
|
46
|
|
|
47
|
Record all colors as hex values. If the image shows a dark theme, note that explicitly. |
|
48
|
|
|
49
|
### Typography Analysis |
|
50
|
|
|
51
|
- **Font classification** — is it sans-serif (most common), serif, monospace, or display/decorative? |
|
52
|
- **Heading sizes** — estimate px sizes for h1, h2, h3 relative to surrounding elements |
|
53
|
- **Body text size** — typically 14-16px |
|
54
|
- **Font weights** — identify bold (700), semibold (600), medium (500), regular (400), light (300) usage |
|
55
|
- **Letter spacing** — is it tight (negative), normal, or wide (uppercase labels often have wide spacing) |
|
56
|
- **Line height** — compact (1.2-1.3) for headings, relaxed (1.5-1.7) for body text |
|
57
|
- **Text transforms** — any uppercase labels, capitalized nav items |
|
58
|
|
|
59
|
### Component Inventory |
|
60
|
|
|
61
|
Catalog every visible component: |
|
62
|
|
|
63
|
- **Buttons** — size, border-radius, fill vs outline vs ghost, icon placement, shadow |
|
64
|
- **Cards** — padding, border-radius, border vs shadow vs both, background |
|
65
|
- **Input fields** — height, border style, border-radius, placeholder style, focus state (if visible) |
|
66
|
- **Navigation** — horizontal vs vertical, active indicator style, icon + label vs label only |
|
67
|
- **Lists** — spacing between items, divider style, icon/avatar placement |
|
68
|
- **Modals/sheets** — overlay darkness, container radius, close button style |
|
69
|
- **Tags/badges** — size, radius (pill vs rounded-rect), color coding |
|
70
|
- **Avatars/images** — exact dimensions, border-radius (circle vs rounded), border/ring |
|
71
|
|
|
72
|
### Spacing System |
|
73
|
|
|
74
|
- **Container padding** — page-level horizontal padding |
|
75
|
- **Section spacing** — vertical gap between major sections |
|
76
|
- **Card internal padding** — consistent padding within cards |
|
77
|
- **Element gaps** — space between items in a list, grid gap, button groups |
|
78
|
- **Margin patterns** — consistent spacing multiples (4px, 8px, 12px, 16px, 24px, 32px) |
|
79
|
|
|
80
|
## Phase 2: Build |
|
81
|
|
|
82
|
### Setup |
|
83
|
|
|
84
|
Build the component using the project's existing framework. If the project uses React + Vite, build a React component. If Expo, build a React Native component. Match the stack. |
|
85
|
|
|
86
|
If there is no existing project context, or the user wants a standalone prototype, use the mockup sandbox (see the mockup-sandbox skill). Create the component as a self-contained mockup that can be embedded on the canvas. |
|
87
|
|
|
88
|
### Construction Rules |
|
89
|
|
|
90
|
Follow these rules with zero exceptions: |
|
91
|
|
|
92
|
**Layout fidelity:** |
|
93
|
|
|
94
|
- If the screenshot shows a column layout, build a column layout — do not reorganize |
|
95
|
- If elements are positioned absolutely in the reference, use absolute positioning |
|
96
|
- Match the exact number of grid columns, the exact flex direction, the exact alignment |
|
97
|
- If the screenshot shows content clipped at the bottom (implying scroll), add scroll behavior |
|
98
|
|
|
99
|
**Color fidelity:** |
|
100
|
|
|
101
|
- Use the exact hex colors extracted in Phase 1 |
|
102
|
- Define all colors as CSS custom properties or theme tokens at the top of the file |
|
103
|
- Do not substitute "close enough" colors — `#1A1A2E` is not `#1B1B30` |
|
104
|
- If there are gradients, match both the colors and the direction |
|
105
|
|
|
106
|
**Typography fidelity:** |
|
107
|
|
|
108
|
- Match font sizes, weights, and spacing as closely as possible |
|
109
|
- Use Google Fonts if the exact font is identifiable; otherwise pick the closest match in the same classification (geometric sans, humanist sans, transitional serif, etc.) |
|
110
|
- Match bold, medium, and regular weights exactly as shown |
|
111
|
|
|
112
|
**Component fidelity:** |
|
113
|
|
|
114
|
- Every button must match: size, color, border-radius, label text, shadow, icon placement |
|
115
|
- Every card must match: padding, background, border/shadow, internal layout |
|
116
|
- Every input field must match: height, border style, placeholder text, border-radius |
|
117
|
- Every list item must match: spacing, icon placement, divider style, text alignment |
|
118
|
|
|
119
|
**Content fidelity:** |
|
120
|
|
|
121
|
- Use the exact text visible in the screenshot — do not invent new copy |
|
122
|
- If text is partially obscured, use realistic placeholder text that matches the visible length |
|
123
|
- For images, use placeholder images at the exact same dimensions |
|
124
|
- For avatars, use generated avatars (DiceBear or similar) at the correct size |
|
125
|
- For icons, use the closest match from lucide-react or the project's icon library |
|
126
|
|
|
127
|
**Interaction states:** |
|
128
|
|
|
129
|
- Add hover states to all interactive elements (buttons, links, cards if they appear clickable) |
|
130
|
- Add pressed/active state styling to buttons |
|
131
|
- Add focus-visible styles to form elements |
|
132
|
- If the screenshot implies scroll behavior, implement it with proper overflow handling |
|
133
|
- Make the layout responsive to the container it's rendered in |
|
134
|
|
|
135
|
### What to Build |
|
136
|
|
|
137
|
Build a **complete, self-contained screen**: |
|
138
|
|
|
139
|
- Do not leave sections commented out or marked "TODO" |
|
140
|
- Do not add elements not present in the screenshot |
|
141
|
- Do not remove elements that are present in the screenshot |
|
142
|
- Do not add navigation to pages that aren't shown |
|
143
|
- If the screenshot shows a mobile viewport, build it at that viewport width |
|
144
|
|
|
145
|
## Phase 3: Validate |
|
146
|
|
|
147
|
After building, compare your output against the source image. |
|
148
|
|
|
149
|
### Visual Checklist |
|
150
|
|
|
151
|
Go through each category and verify: |
|
152
|
|
|
153
|
- [ ] **Layout structure** matches exactly — same columns, same flex direction, same alignment |
|
154
|
- [ ] **Background colors** match for page, sections, cards, and sidebars |
|
155
|
- [ ] **Text colors** match for headings, body, muted text, and links |
|
156
|
- [ ] **Accent/brand color** matches on buttons, active states, and highlights |
|
157
|
- [ ] **Font sizes** match the visual hierarchy in the screenshot |
|
158
|
- [ ] **Font weights** match — headings are the right boldness, body is the right weight |
|
159
|
- [ ] **Spacing** matches — padding inside cards, gaps between elements, section margins |
|
160
|
- [ ] **Border radius** matches on every element — buttons, cards, inputs, avatars |
|
161
|
- [ ] **Shadows** match — present where they should be, absent where they shouldn't |
|
162
|
- [ ] **Icons** are the right size and in the right position |
|
163
|
- [ ] **Content** matches — text, image placeholders, avatar placeholders are all present |
|
164
|
|
|
165
|
### Iteration |
|
166
|
|
|
167
|
If any item on the checklist is off, fix it before presenting to the user. Common issues: |
|
168
|
|
|
169
|
- Colors are slightly off — re-examine the screenshot, extract again |
|
170
|
- Spacing feels wrong — check padding and gap values against the reference |
|
171
|
- Font weight is wrong — try adjacent weights (500 vs 600, 600 vs 700) |
|
172
|
- Border radius is wrong — common values: 4px, 6px, 8px, 12px, 16px, 9999px (pill) |
|
173
|
- Cards look flat when they should have depth — add box-shadow |
|
174
|
- Layout doesn't match at the right viewport — check if you're building at the correct width |
|
175
|
|
|
176
|
## Working with Subagents |
|
177
|
|
|
178
|
For complex screenshots with many components, delegate to a DESIGN subagent: |
|
179
|
|
|
180
|
- Include the screenshot image in the subagent prompt |
|
181
|
- Pass the full color extraction, typography analysis, and component inventory from Phase 1 |
|
182
|
- Specify the exact target file path and dimensions |
|
183
|
- Include the construction rules from Phase 2 in the brief |
|
184
|
- Tell the subagent to mark the iframe as "live" when complete |
|
185
|
|
|
186
|
For multiple screenshots (e.g., recreating several screens of an app), fan out with one DESIGN subagent per screen and coordinate via the canvas. |
|
187
|
|
|
188
|
## Common Patterns |
|
189
|
|
|
190
|
### Dark UI |
|
191
|
|
|
192
|
Dark UIs are not just "white on black." Look for: |
|
193
|
|
|
194
|
- Layered dark backgrounds (e.g., `#0A0A0F` page, `#12121A` cards, `#1A1A26` hover) |
|
195
|
- Subtle borders (1px solid rgba(255,255,255,0.06-0.1)) |
|
196
|
- Muted text colors (not pure white — usually `#A0A0B0` or similar) |
|
197
|
- Glow effects on accent colors (box-shadow with the accent color at low opacity) |
|
198
|
|
|
199
|
### Gradient Backgrounds |
|
200
|
|
|
201
|
- Extract both start and end colors |
|
202
|
- Note the direction (most common: top-to-bottom, left-to-right, diagonal) |
|
203
|
- For mesh gradients or complex gradients, approximate with radial gradients |
|
204
|
|
|
205
|
### Glass/Blur Effects |
|
206
|
|
|
207
|
- Use `backdrop-filter: blur(12-24px)` with a semi-transparent background |
|
208
|
- Often combined with a subtle border (1px solid rgba(255,255,255,0.1)) |
|
209
|
- Background opacity typically 60-80% |
|
210
|
|
|
211
|
### Sidebar + Content Layouts |
|
212
|
|
|
213
|
- Sidebar is usually fixed width (240-280px) with its own background |
|
214
|
- Content area fills remaining space |
|
215
|
- On mobile, sidebar typically collapses to a hamburger menu |