Phase 2: Describing What You Want · 25 min · v0 · Lovable · Bolt.new

Prompting With Images and Screenshots

Sometimes a screenshot is worth a thousand words of spec.

Real-world application: What changes when you use this: you can reproduce designs and layouts you see in the wild — which means you can build apps that look professional without being a designer.

What you will learn

Know when images are better than words for describing what you want
Use screenshot-to-app workflows in v0 and Lovable
Combine images with text descriptions for best results
Understand the limitations of image-based prompting

Objective

Your mission

Find a layout you like, screenshot it, combine with a text description specifying functionality and constraints, and build from the combined input. Output: screenshot_build.md.

You need: v0, Lovable, or Bolt.new (must accept image input). A screenshot tool.

Time: 25 minutes.

Step 1: find a layout to replicate (5 min)

Find a website or app layout you like. Take a screenshot of the specific section you want to replicate — not a full-page screenshot. Target a single component or section.

Good targets: A pricing card layout, a dashboard sidebar, a hero section, a card grid.

Step 2: write the text companion (5 min)

Never send an image alone. Always pair it with text that specifies:

Functionality — what should it DO (not just look like)
Constraints — no backend, localStorage only, etc.
What to include — which parts of the screenshot to replicate
What to exclude — navigation, ads, footer from the original site

Write in your file:

## Screenshot
[Describe what you screenshotted — which site, which section]

## Text Description
[Your text companion — functionality, constraints, include/exclude]

Example:

[Upload screenshot of a pricing page] "Build a pricing page with this 3-card layout. Three tiers: Starter ($9/mo), Pro ($29/mo), Enterprise (Custom). Pro card has a Most Popular badge. Each card has a feature list with checkmarks. Sign-up button at the bottom of each card. Same color scheme as the screenshot. Exclude the navigation and footer — pricing section only. No backend — buttons can be non-functional for now."

Step 3: build from image + text (10 min)

Upload the image and paste your text description into v0, Lovable, or Bolt.new.

v0 (v0.dev): Start new chat → upload image → add text → generates Next.js component
Lovable (lovable.dev): Start new project → upload image in chat → add text → generates full app
Bolt.new (bolt.new): Start new project → upload image → add text → generates full app

Step 4: evaluate the result (5 min)

Write in your file:

## Result
Visual match: [estimate percentage — 80%? 90%?]
Does the functionality work? [yes/no]
What did the image handle better than text? [e.g., layout, spacing, visual hierarchy]
What did text handle better than image? [e.g., functionality, constraints, data behavior]
What would I do differently next time? [specific improvement]

The image+text rule
Never send an image alone. The image handles appearance; the text handles behavior. Together, they produce a build that looks right AND works right. An image alone produces something that looks right but doesn't do anything. Text alone produces something that works but may not look the way you want.

You upload a screenshot of a pricing section with no text. What are you likely to get?

The image carries appearance; text carries behaviour. Pair it with what it should do, what to include and what to exclude.

Key Terms & Next

You're done

Save your screenshot_build.md. You now have the image+text prompting pattern for any layout-heavy build.

That's the whole lesson. Now do the lab.

Its hands-on lab, and the lessons after it, open with a free account — the opening phases of 29 of 35 courses are free, no credit card.