Prompt
Extract the Design System From Any UI Screenshot
Screenshot a screen you like, paste this prompt, and get back the colours, type scale, spacing, and component structure as reusable tokens — so every screen you build after it stays consistent.
The prompt
Look at this screenshot and break down the design system behind it. 1. List every colour, type size, font weight, corner radius, shadow, and icon style you can see. 2. Map the spacing: padding, gaps, alignment, and the overall rhythm of the layout. 3. Identify what should be a component versus a container, and how everything nests. Return it all as clean JSON (or markdown) so I can reuse it across every screen.
Why: most AI-built interfaces drift because every screen gets designed from scratch. Extract the system once and every screen after it inherits the same rules.
Tip: give it more than one screenshot
One screenshot gets you one screen's worth of guesses. Paste in three or four — a list view, a detail view, a form, an empty state — and the model can tell the difference between a rule and a coincidence. Patterns that repeat across screens are the real system; the one-offs are just that screen.
- Include screens that differ: navigation, a dense data view, a form, a modal or empty state.
- Add both light and dark mode if the product has them — you get the colour pairs, not just one theme.
- Include a hover, focus, or pressed state if you can capture one, so interaction styling makes it into the system.
- Screenshot at full resolution and avoid scaling — crisp edges make radii, borders, and shadows far easier to read accurately.
What to do with the output
Save the JSON and paste it at the top of every future build request. It becomes the contract the model designs against, which is the whole point — consistency you get for free instead of correcting screen by screen.
Here's the design system to build against — follow these tokens exactly for colours, type, spacing, radii, and shadows. Don't invent new values; if something isn't covered, tell me what's missing instead of guessing. [paste the JSON] Now build: [describe the screen]
Why: asking it to flag gaps rather than improvise is what stops the drift. You'll extend the system deliberately instead of discovering ten shades of grey later.