How to turn a screenshot into a prompt for v0
v0 can build from an image, but a screenshot on its own leaves a lot to guess: the font, the exact colors, the spacing, how it behaves on a phone. The more of that you write down, the closer the first result lands. Here’s how to turn a screenshot into a prompt v0 can follow, by hand or in one step with Recast.
1. Describe the structure first
Start with the page skeleton, top to bottom, before any styling. Name each region and how it’s laid out:
- The containers and their widths (full-bleed, or a max width such as 1200px, centered).
- Rows and columns, with approximate gaps (for example “3 cards in a row, 24px gap”).
- Where things sit: “headline starts about 40% down, left-aligned at 110px”.
Structure is what builders get wrong most often from an image alone, so it earns the most words.
2. Name the exact styles
Replace every adjective with a value:
- Colors as hex codes, ideally as named tokens (
--ink #14233A), not “dark navy”. A color picker on the screenshot gets you these. - Type as numbers: the family (or the closest Google Font), size, weight, letter spacing, line height, and case.
- Effects: borders, radii, shadows, overlays, with their values.
3. Copy the text exactly
Put every heading, label, and button text in quotes. Builders happily invent placeholder copy, and then you spend a round fixing words instead of design.
4. Say how it behaves
A screenshot can’t show hover states, focus, or what happens on a phone. Add them: “links draw an underline left to right on hover”, “below 768px the nav collapses to a Menu button”. This is the difference between a picture and a working page.
5. Paste it into v0, with the image
Paste the prompt, attach the screenshot as a reference if you like, and generate. When you iterate, change one thing at a time and use the same precise language: “make the headline weight 300” beats “make it lighter”.
The fast way: let Recast write it
Recast does steps 1–4 for you: drop in the screenshot and it writes the whole prompt (layout, exact copy, hex colors, fonts, components, and states) in about a minute. The excerpt below is real, from this example.
Visual style
- Colors
--ink#14233A: headline, nav text, icon fill.--ink-muted#5B6676: tagline.--line#14233A: active nav underline and arrow button border.--sky#E6EAEF: fallback background behind the photo.--mist#F2F4F7: brightest cloud tone.--rock#7C8799: mid-tone of the mountain shadows.
- Typography
- Font: "Inter Tight", falling back to Inter, "Helvetica Neue", Arial, sans-serif. Helvetica Now is the closest match to the reference.
- Nav links: 12px, weight 400, letter-spacing 0.12em, uppercase, line-height 1.
- Headline:
clamp(34px, 5.8vw, 76px), weight 400, line-height 1.06, letter-spacing -0.01em, uppercase, color #14233A. - Tagline: 14px, weight 400, letter-spacing 0.42em, uppercase, color #5B6676. There is a slightly wider gap before "PURPOSE" in the reference, which you can ignore.
- Effects
- Active nav underline: 1px solid #14233A, sitting 18px below the text and spanning the full link width.
- Arrow button: 1px solid #14233A border,
border-radius: 9999px, transparent fill.
Common questions
Can v0 build from a screenshot alone?
Yes, it can take an image, but it has to guess the styles it can’t name, so fonts, spacing, and colors usually drift. A prompt that names them exactly gets much closer on the first try.
What should a v0 prompt from a screenshot include?
The layout top to bottom, colors as hex codes, fonts with sizes and weights, the exact text, the components, and how things behave on hover and on mobile.
Does the same prompt work in other builders?
Yes. A precise text prompt works in any builder that takes one, including Lovable, Bolt, Claude Code, and Cursor.
More guides
Try it on your own design.
Drop in a screenshot, hero video, or screen recording, and Recast writes the exact prompt to rebuild it in v0, Lovable, Bolt, Claude Code, or Cursor.
Join the waitlist