How to Use v0 to Build a Landing Page From a Screenshot

April 8, 2026 · Editorial Team · 5 min read · v0 landing-page next-js

The fastest way to go from a design reference to working Next.js code in 2026 is v0. You upload a screenshot, describe what you want, iterate a few times in the browser, and export code that's already using shadcn/ui and Tailwind. The whole process for a basic landing page takes 30-45 minutes. The export isn't always perfect, but it's substantially better than starting from scratch.

Here's a concrete walkthrough: screenshot in, production-ready component out.

What v0 actually does

v0 is a Vercel product that generates React components from text prompts and images. It targets the shadcn/ui + Tailwind stack specifically, which means the output code uses the component primitives (<Button>, <Card>, <Input>) that most Next.js projects already have installed.

The generated components are real code: no runtime dependency on v0, no proprietary wrapper. You export them as files and drop them into your repo. Vercel provides v0 as part of its product ecosystem, but you don't need to host on Vercel to use the exported code.

Access is at v0.dev. There's a free tier with limited generations per day, and a paid tier (v0 Pro, currently $20/month) for heavier use. For a one-off landing page, the free tier is usually sufficient.

Preparing your screenshot or Figma reference

v0 accepts image uploads directly in the prompt area. The better your reference image, the better the initial generation.

If you're working from Figma: export the frame as a PNG at 2x resolution (Figma export settings: format PNG, scale 2x). Include the full viewport width in the export, not just one section. Cropped partial screenshots confuse v0's layout analysis.

If you're working from a reference site: use a full-page screenshot tool (Firefox has one built in; on Chrome, open DevTools, press Cmd+Shift+P and search "screenshot"). A full-page screenshot gives v0 the complete layout context.

What v0 parses well from screenshots: color palette, general layout (hero, feature grid, CTA sections), typography scale, button shapes. What it doesn't parse: exact spacing values, custom fonts (it defaults to system fonts), and complex hover states.

The first generation: hero section

Go to v0.dev and start a new chat. Attach your screenshot and write a prompt like:

Build a landing page hero section matching this screenshot. 
Use shadcn/ui components. Stack: Next.js 15, TypeScript, Tailwind CSS.
Dark background (#0f172a). The headline should be editable via a prop.
Include a primary CTA button and a secondary outline button.

The specifics matter. "Matching this screenshot" without any additional context gets you a generic interpretation. Adding the color value, component library, and prop structure nudges v0 toward code you can actually use immediately.

v0 will generate a preview on the right side of the screen and code on the left. The preview is interactive; you can click buttons (though they won't do anything yet) to check hover states.

The first generation is rarely exactly right. That's expected. The workflow is iterative.

Iterating with follow-up prompts

After the first generation, you'll want to adjust things. The follow-up prompt box works like a chat; v0 maintains context from previous turns.

Useful follow-up patterns:

Layout corrections: "The headline and subheadline should be left-aligned, not centered. Keep the CTA buttons centered below."

Spacing: "Add more vertical padding above and below the hero. The section feels cramped."

Component changes: "Replace the outline button with a link that says 'See how it works' with an arrow icon."

Responsive behavior: "On mobile, stack the two-column feature grid to a single column."

A few things that work better with specific wording:

Say "mobile" not "small screens." v0 interprets mobile as the Tailwind sm: breakpoint.
Reference the section names you can see in the preview ("the feature grid", "the testimonial row"), not positional terms like "the middle section."
If colors are off, provide hex values. "Make the button background #2563eb" is more reliable than "make it blue."

For a full landing page, I typically spend 5-8 prompts getting the hero right, then generate additional sections (feature grid, pricing, footer) as separate chats and combine them manually in the codebase.

Exporting and integrating into Next.js

When you're happy with a component, click "Code" to see the full code view, then click "Copy" or use the export button.

The exported code will look something like this structure:

import { Button } from "@/components/ui/button"

interface HeroProps {
  headline: string
  subheadline: string
}

export function Hero({ headline, subheadline }: HeroProps) {
  return (
    <section className="bg-[#0f172a] px-4 py-24 text-white">
      ...
    </section>
  )
}

The imports assume you have shadcn/ui installed. If you don't:

npx shadcn-ui@latest init

Then add individual components as you need them:

npx shadcn-ui@latest add button card input

Drop the exported component into src/components/Hero.tsx and import it in your page. In most cases it works immediately. The main issues to watch for:

Missing components: v0 sometimes uses a shadcn component you haven't added yet. The import will fail with a module not found error. Run the npx shadcn-ui add [component-name] command to fix it.

Custom color classes: If v0 used a specific Tailwind color that's not in your default palette (like text-slate-950), check your tailwind.config.ts to make sure the color is in scope. Most Tailwind default colors are fine; custom colors need to be added to your config.

Font classes: v0 sometimes outputs font-sans or font-display assuming a specific font setup. If text renders in the wrong font, check your globals.css and layout font configuration.

Getting the full page done

For a complete landing page, the most efficient approach is to generate sections individually rather than trying to generate the entire page in one prompt. A single prompt for a full page produces a large component that's hard to adjust and harder to maintain.

My sequence for a typical SaaS landing page:

Hero section (logo, headline, CTA, hero image placeholder).
Feature grid (3-4 feature cards with icons).
Social proof (logo strip or testimonial row).
Pricing table (if applicable).
Footer.

Each section is its own v0 chat. I generate, iterate 3-4 times, export, and drop it into the codebase before moving to the next section. Total time for a five-section page: about 2 hours, including the integration work.

The final step is always a pass for accessibility: check that buttons have labels, images have alt text (v0 leaves these as placeholder strings), and interactive elements are reachable by keyboard. v0 doesn't always get this right out of the box.

The code you get out of v0 is production-quality Tailwind and shadcn. It doesn't need to be rewritten, just reviewed and adjusted. That's a different relationship with generated code than you get from most AI tools, and it's why v0 has become a standard part of front-end prototyping for a lot of Next.js teams.