Difficulty: Beginner · Last updated: February 6, 2027 · By Mantlr Editorial
A practical walkthrough for designers using v0 by Vercel — from first prompt to deployed app, including the Figma-to-v0 pattern that works in 2026.
Key takeaways
Six things to know before your first v0 project:
1. v0 generates three variations per prompt by default — pick the strongest starting point, then iterate
2. The first prompt determines 60% of the output quality. Front-load context.
3. v0 outputs shadcn/ui components — best fit for projects using shadcn + Next.js + Tailwind
4. Visual Edits mode lets non-coders tweak colors, spacing, and typography without writing prompts
5. One-click Vercel deployment produces real production-grade hosting in minutes
6. For Figma context, use Cursor with Figma MCP instead of v0 — v0 doesn't read Figma files natively
On this page
- Before you start: what to know
- Step 1: Sign up and set up your account
- Step 2: Write your first prompt
- Step 3: Pick your variation
- Step 4: Iterate through chat
- Step 5: Use Visual Edits for fine-tuning
- Step 6: Connect to a backend (if needed)
- Step 7: Deploy to Vercel
- Step 8: Export to GitHub (when graduating)
- Common pitfalls during the workflow
- What to do after your first v0 project
- Frequently asked questions
- Related articles
v0 is conceptually simple: type a prompt, get a working component or app. In practice, the gap between "first attempt" and "shippable result" can take hours of trial and error if you don't know the workflow. This guide is the workflow. Eight steps from blank chat to deployed app, with the specific decisions that separate a useful output from a generic one.
This is for designers, design engineers, and PMs who've heard about v0, tried it once, and want to use it on real work. We've used v0 across the past year on marketing pages, internal tools, and component libraries. The steps below are what actually works — not the surface-level walkthroughs v0's docs cover, but the workflow logic underneath.
If you're not sure what v0 is yet, read What Is v0? first. Then come back here for the workflow.
Quick wins
1. Your first prompt should be a paragraph, not a sentence. Specify what, who, structure, style, and interactions.
2. v0 generates three variations per prompt. Pick the strongest before iterating — switching paths later wastes credits.
3. Use Visual Edits for color, spacing, and typography tweaks. Save chat prompts for structural changes.
Before you start: what to know
A few things to confirm before starting:
You need an account. v0 requires signup at v0.app. Free tier gives you limited daily generations — enough to evaluate. Pro tier ($20/month) is the practical minimum for real work.
Your stack matters. v0's output uses React + Tailwind + shadcn/ui by default. If your project uses a different framework or design system, the output won't drop in cleanly. Either commit to the shadcn ecosystem for v0 work, or pick a different tool.
Have your project context ready. The single biggest predictor of v0 output quality is the clarity of your first prompt. Before opening v0, know: what you're building, who uses it, the structure, and the visual style. Vague intent = vague output.
Decide on deployment. v0 deploys to Vercel by default. If your team uses different hosting (AWS, Netlify, custom), plan to export to GitHub instead and deploy elsewhere. The Vercel integration is tightest but not the only option.
Don't expect Figma integration. v0 doesn't read Figma files. If you're starting from existing Figma designs, you'll either describe them in prompts (loses precision) or set up Figma MCP via Cursor instead. Make this decision before starting.
Step 1: Sign up and set up your account
Go to v0.app. Click "Sign up" or "Get started." Three signup options:
Vercel account: Recommended if you already have one. Connects v0 directly to your Vercel deployment infrastructure.
GitHub: Useful if you want code to sync to a GitHub repository from the start.
Email: The simplest signup. You'll still need to connect Vercel or GitHub later if you want deployment or version control.
After signup, configure two preferences:
1. Default project framework. Next.js is the default and works best with v0. Other options exist but are second-class citizens — stick with Next.js unless you have a specific reason not to.
2. Default component library. shadcn/ui is the default and works best with v0. The other options are limited.
These defaults are sticky — changing them later means re-prompting from scratch. Pick once, then commit.
Step 2: Write your first prompt
This is the highest-leverage step in the entire workflow. Your first prompt determines roughly 60% of what v0 generates. Get it right and the rest is iteration. Get it wrong and you'll burn through credits fixing it.
Front-load these five elements in your first prompt:
1. What you're building. Be specific. "A SaaS pricing page" beats "a pricing page." "A habit-tracking mobile app for new parents" beats "a habit-tracking app."
2. Who it's for. The target user adds personality and tone. "For developer tools" suggests a different aesthetic than "for parents" or "for enterprise procurement teams."
3. The structure. List sections in order. "Hero section with headline and CTA, three pricing tier cards in a row, comparison table, FAQ section, footer."
4. The visual style. Reference styles by name AND describe concretely. "Clean Vercel-style modern design with a soft cream background (#fff9e8), vermillion accents (#c0392b), Inter font for body and Cormorant Garamond for headers, generous whitespace."
5. The interactions. Tell v0 what should be interactive. "Pricing toggle switches between monthly and annual prices with smooth animation. FAQ items expand on click. CTA button opens a modal asking for email."
Here's the difference in practice. A weak first prompt:
Build me a SaaS pricing page.
A strong first prompt:
Build a SaaS pricing page for a habit-tracking app called HabitFlow, aimed at new parents balancing work and family. Structure: hero with headline "Tiny habits, big change" and CTA "Start free," three pricing tier cards (Free with limited tracking, Pro at $9/month with unlimited habits and partner sharing, Team at $29/month for family members), monthly/annual toggle above the cards, comparison table below, FAQ section with 6 questions, footer. Visual style: clean modern, soft cream background (#fff9e8), vermillion accents (#c0392b), Inter for body, Cormorant Garamond for headers, generous whitespace. Use shadcn cards with subtle hover effects. Interactions: pricing toggle animates between monthly and annual, FAQ items expand on click, CTA opens a modal asking for email.
The weak prompt produces a generic SaaS page. The strong prompt produces a near-shippable HabitFlow page. Same tool, different prompts.
For deeper prompt engineering, see How to Write Better Lovable Prompts — the prompt framework transfers across AI tools.
Step 3: Pick your variation
v0 generates three variations per prompt by default (v0-0, v0-1, v0-2). Each takes a different interpretive path on your prompt. This is a feature, not a bug — three perspectives on the same brief.
How to evaluate the three variations:
Look at overall structure first. Which variation got the layout closest to what you wanted? If two have similar structure and one is different, the different one might have spotted something you missed.
Look at visual treatment second. Which variation's styling feels closest to your brand? Even if the structure of another variation is better, you can prompt it to match the better styling later — but starting closer saves credits.
Look at component choices third. Does one variation use shadcn components more thoughtfully than another? More polished hover states? Cleaner spacing? These details compound across iteration.
Pick one variation. Commit to it. Don't try to merge two variations — that path leads to muddled output.
If none of the three variations is close to what you wanted, the issue is your prompt, not v0. Revise the prompt, regenerate, and pick from the new variations.
Step 4: Iterate through chat
After picking your variation, refine through conversation. v0's strength is iterative refinement, not one-shot perfection.
Pattern 1: Single-change follow-ups. Each follow-up prompt should make one change. "Make the hero section more compact." "Increase the spacing between pricing cards." "Change the primary CTA color to a deeper red." Single changes produce predictable results.
Pattern 2: Multi-change prompts fail. Telling v0 to "make the hero compact, increase spacing, and change the CTA color" produces mixed results. v0 often does two changes well and butchers the third. Single-focus prompts compound into clean iterations.
Pattern 3: Anchor changes with "keep" instructions. "Keep the hero exactly as it is. Change only the pricing section spacing." Anchoring prevents v0 from rewriting parts you liked.
Pattern 4: Reference variation names. If you started from v0-1 but liked something from v0-2, reference it: "Use the FAQ accordion style from v0-2 but keep everything else from v0-1."
Pattern 5: Use specific values. "Reduce padding from 80px to 48px" works better than "make it less padded." If you know the value, give the value.
Iteration usually takes 3-7 follow-up prompts to reach shippable quality. Beyond 10 follow-ups, you're often fighting accumulated drift — restart from a strong starting point with a refined first prompt.
Step 5: Use Visual Edits for fine-tuning
For changes to specific elements, v0's Visual Edits mode is faster than text prompts.
How to access Visual Edits: Look for the "Edit" mode toggle in the v0 interface (top-right in most layouts). Click into Edit mode.
Use Visual Edits for:
- Color tweaks (changing button color, background tints)
- Spacing adjustments (padding, margins, gaps)
- Typography changes (font size, weight, line height)
- Component property tweaks (border radius, shadow intensity)
Use chat prompts for:
- Structural changes (rearranging sections)
- Adding new functionality (auth, database, new features)
- Replacing entire components
- Behavior changes (interactions, animations, state)
The combination is fast: structural work via chat, visual fine-tuning via Visual Edits. Visual Edits doesn't consume credits the way chat prompts do — for refinement, it's more economical.
Step 6: Connect to a backend (if needed)
If your v0 project needs authentication, database, or file storage, connect to a backend.
Supabase integration: v0's native backend. Prompt for it: "Add user authentication and a database to store user posts." v0 sets up Supabase, generates auth UI, and wires the frontend to the backend.
Database connections: Added in the January 2026 rebrand, v0 can connect directly to Snowflake, AWS, and other enterprise databases. Useful for connecting v0 apps to existing data sources.
Environment variables: v0 imports environment variables from existing Vercel projects automatically. If your team's Vercel account already has database URLs, API keys, or other secrets configured, v0 uses them.
For the full backend setup pattern (similar to Figma Make's Supabase integration), the principles transfer: see How to Add a Backend to Figma Make for the deeper walkthrough — the Supabase patterns are nearly identical across tools.
Step 7: Deploy to Vercel
v0's one-click deployment is the fastest path from prompt to public URL in the AI design tools category.
To deploy: Click the "Deploy" button in the v0 interface. v0 generates a Vercel deployment automatically. You get:
- A
*.vercel.appURL (instant) - HTTPS by default
- Vercel's edge network (global CDN)
- Preview deployments for every change
- Serverless functions for backend logic
- Automatic environment variable handling
For custom domains, configure them in the Vercel dashboard after deployment. Vercel supports any domain you control.
To unpublish: Go to the Vercel dashboard for the project and pause or delete the deployment. The public URL stops responding.
Step 8: Export to GitHub (when graduating)
For projects moving toward production, export to GitHub.
Why export: v0's cloud sandbox is fine for prototyping, but production work usually needs:
- Real version control with branches and PRs
- Code review workflows
- CI/CD pipelines for testing and deployment
- Local development environments
- Integration with your team's tooling
How to export: Connect your GitHub account in v0 settings. From any v0 project, click "Export to GitHub." v0 creates a real repository with all the project code.
What comes next: Once exported, the project lives in a normal GitHub repository. Clone it locally. Open it in Cursor for continued AI-assisted development. Deploy with Vercel (or any other host) on your own terms.
This export step is what enables the "graduate workflow" — start in v0, graduate to a real engineering environment when production work begins.
Common pitfalls during the workflow
Five things that trip up designers learning v0:
Pitfall 1: Picking the wrong variation early. Designers sometimes pick a weak variation because it looks superficially polished, then fight with it for hours. Pick the variation with the best STRUCTURE, then iterate on visual treatment — easier than the reverse.
Pitfall 2: Treating Visual Edits as a fallback. Visual Edits is often the better tool for tweaks. Designers stuck in chat-only workflows burn credits on changes that Visual Edits would handle for free.
Pitfall 3: Multi-change prompts. Combining 4-5 changes into one prompt produces inconsistent results. Single-change iterations work better.
Pitfall 4: Ignoring the shadcn ecosystem fit. If your project doesn't use shadcn, v0 isn't the right tool. Forcing v0 into non-shadcn projects wastes time.
Pitfall 5: Skipping the GitHub export. Designers comfortable in v0 sometimes try to maintain production projects in the v0 sandbox indefinitely. Graduate to GitHub + Cursor early — the production migration gets harder the longer you wait.
Skip the trial-and-error
Mantlr lists Figma AI ecosystem guides — including v0 tutorials, Lovable workflows, MCP setup, and design system prep.
Browse Mantlr →
No signup required. Just curated resources.
What to do after your first v0 project
Three things compound your speed on the next project:
Save your best prompts. v0 works on iteration. A first prompt that produced great results for a SaaS pricing page is reusable for similar projects. Keep a personal prompt library.
Build a component library on top of v0 outputs. As you ship v0-generated work to real codebases, the components accumulate. Treat them as reusable assets. Build your own library of v0 starting points for common patterns.
Pair v0 with Cursor. Most designers find their best workflow is "generate in v0, refine in Cursor." v0 produces the initial scaffold; Cursor polishes it with full codebase context. See Cursor for Designers for the setup.
Frequently asked questions
How do I use v0 for the first time?
Go to v0.app, sign up with your Vercel account or GitHub, then type a focused first prompt describing what you want to build. Include the structure, visual style, and content tone in the first prompt — quality of first prompt determines most of the output quality. v0 generates three variations; pick the strongest and iterate from there.
Do I need to know how to code to use v0?
Not for basic use. v0 generates code from natural-language prompts. You don't write code yourself. For deeper customization (modifying the generated React directly, integrating with existing codebases), some code comfort helps — but it's not required to ship v0 projects.
Can v0 use my brand's design system?
Only if your design system is shadcn/ui or very similar. v0's default output uses shadcn components. For custom design systems, v0 produces approximations that need refactoring. For exact design system fidelity, Figma Make with Make kits is the stronger choice.
Why does v0 generate three variations?
v0 produces three distinct interpretations of each prompt by default. The variations give you starting points to compare — different layouts, different visual treatments, different component choices. Pick the one closest to your vision, then iterate from there.
How do I deploy a v0 project?
Click the "Deploy" button in v0. v0 generates a Vercel deployment with a public URL automatically. For custom domains, configure them in the Vercel dashboard after deployment. The deployment includes HTTPS, edge network, and serverless functions by default.
Can I edit v0's generated code directly?
Yes. v0's code panel lets you view and edit the React + Tailwind code directly. For deeper editing, export to GitHub and continue development in Cursor — the workflow most designers prefer for ongoing development.
How do I make my v0 project responsive?
v0 generates responsive components by default. If responsiveness isn't working, prompt explicitly: "Make this fully responsive across mobile, tablet, and desktop." For mobile-first prompts, mention mobile in the first prompt to bias v0's initial generation toward mobile-optimized output.
What's the difference between v0 and v0.dev?
Same tool. v0 rebranded from v0.dev to v0.app in January 2026. The functionality continued. v0.dev URLs now redirect to v0.app.
Can v0 read Figma files?
Not natively. v0 doesn't have built-in Figma integration. You can attach screenshots, but structured Figma data isn't available. For Figma-first workflows, Figma Make or Cursor with Figma MCP are stronger choices.
Where can I find more v0 resources?
Mantlr publishes v0 tutorials, comparisons, and workflows weekly. Browse the full library at mantlr.com or subscribe to Mantlr Editorial for weekly guides.
Get the next article in your inbox
Mantlr publishes one practical, no-fluff article like this every Saturday. Free design resources, evaluation guides, and editorial takes on what's worth using.
Subscribe to Mantlr Editorial →
5,400+ designers and founders. No spam. Unsubscribe anytime.
Related articles
If you're learning v0, these articles cover the connected workflow:
- What Is v0? — The foundational article on v0.
- How to Use Lovable — Step-by-step workflow for the full-stack alternative.
- Cursor for Designers — The companion editor most designers pair with v0.
- v0 vs Lovable — Direct comparison with the full-stack alternative.
- The Complete Guide to Free Design Resources and AI Tools in 2026 — Mantlr's pillar guide to the full resource library.
About Mantlr Editorial
Mantlr is a free directory of designer-vetted, license-verified design resources. We test every resource before listing. No email walls. No paid placements. No affiliate dressing.
This article was written by Mantlr Editorial, the team behind a curated library of 521 free design resources. We work in production design daily and only recommend resources we'd use ourselves.
Last updated: February 6, 2027. Article reviewed quarterly for accuracy.