# v0: from a prompt or a design to a real interface with Next.js

> v0 is Vercel's interface generator: it turns prompts, wireframes and screenshots into Next.js code with Tailwind and shadcn/ui. What it does and what it costs.

*Tags: ai, tools, vercel, prototyping*

---


> [!info] Quick Definition
> **v0** is Vercel's generator for interfaces and applications. It takes a prompt, a wireframe or a screenshot and returns interface code in Next.js, with Tailwind and shadcn/ui components, that you can preview, edit and deploy. It helps you reach a working prototype quickly.


## What does v0 do with a design?

According to the official documentation, v0 lets you describe an idea in your own language to build features, refine designs, change copy or create live prototypes. It can also generate high-fidelity interfaces from wireframes or mockups, and clone pages from screenshots or Figma files.

It can also connect to a backend, use your own APIs, databases and components, deploy with one click to Vercel's infrastructure, or open a pull request for review. The documentation mentions agent capabilities: web search, site inspection, automatic error fixing and integration with external tools, with a real-time preview.

## Why does it matter to a designer?

Because it shortens the time between an idea and something you can click. A designer can test a screen with users in a prototype that responds to real clicks, instead of a static image. The risk is that generated output looks finished when it is not: error states, accessibility and real content usually come last.

v0 is a good lab for understanding how an agent interprets your design. If the result drifts from the original, the difference tells you what was not clear enough in the file: a spacing without a token, an unnamed component or a state you did not draw.

## Which plans exist?

According to v0's pricing page and documentation, checked on October 21, 2026, in USD per user:

| Plan | Monthly price | What it includes, roughly |
|---|---|---|
| Free | 0 | Limit of 7 messages a day; 5 dollars of credits |
| Plus | 30 | 30 dollars of monthly credits per user |
| Business | 100 | Everything in Plus, plus training opt-out by default |
| Enterprise | Custom | Security, SSO and support tailored to the company |

Three details cause confusion. First, Plus used to be called Team: v0's changelog says it was renamed, so you will see both names in older articles. Second, on Free the 5 dollars of credits are a one-time grant for new accounts; Free accounts created before that change keep the 5 dollars a month. Third, there was a 20-dollar-a-month Premium plan that the documentation describes as being phased out, and the current pricing page no longer lists it.

The page shows no annual prices or effective date, and the Plus price appears with a strikethrough figure whose meaning the page does not explain. Credits determine how much you can generate and renew on your billing date, so check how many a typical screen consumes before you commit.

## How do you use it without losing control?

A practical workflow, in steps:

1. **Define the screen in a short, concrete prompt.** Include the goal, the data it shows and the states you need: empty, error and loading.
2. **Give a visual reference.** Upload the screenshot or the Figma file, and say what it must respect: typography, colors and spacing.
3. **Ask for shadcn/ui and your library.** If you have your own components, name them so duplicates are not generated.
4. **Review the code in the preview and the editor.** Compare against the design point by point and note the differences.
5. **Iterate with small changes.** One prompt per adjustment is easier to review than a full rewrite.
6. **Before deploying, test states and accessibility.** What looks right in the preview does not always work with a keyboard or a screen reader.

## How does it compare with other tools?

v0 starts from a new screen and hands back a deployable prototype. An agent tool inside your repository, such as [[cursor|Cursor]] or [[claude-code|Claude Code]], starts from your real code and changes what already exists. They are not mutually exclusive: you can prototype in v0 to validate the idea and then move the result into your repository to finish it with an agent. For the full picture of that workflow, read [[prototyping-with-ai|prototyping with AI]].

## When should you NOT use v0?

- When the project does not use Next.js or Tailwind. The code will need adapting, and the cost can outweigh the benefit.
- When you already have an established design system. v0 tends to generate new components if it does not know yours.
- When the prototype only needs to show an idea. A screenshot or a Figma flow is enough.
- When sensitive data would go into the prompt or the backend without checking the service's data policy.

## Example

Illustrative example: a product designer wants to test a "my payments" screen with three states: empty, with data and error on load. They upload the Figma file and write: "Generate this screen with Next.js and shadcn/ui. Use the `Card` component from my project. Include the error state with the approved text." v0 generates the version with sample data. The designer sees the error state is missing and asks only for that change. Then they check the spacing against the screenshot, fix one value and send it for review in a pull request.

What they learned: the prototype arrived fast, but the states they did not draw in Figma were the ones the agent had to invent.

## Quick comparison

| Question | v0 | An agent inside your existing repo |
|---|---|---|
| Where does it start? | A prompt or a design file | Your existing repository |
| Which stack? | Next.js, Tailwind, shadcn/ui | Your project's stack |
| Best for? | Prototypes and new screens | Changes to a product that already exists |

## Common mistakes

- Trusting the preview without testing the error and empty states.
- Asking for a full app in a single prompt instead of screens or components.
- Not naming existing components and ending up with duplicates.
- Deploying without reviewing accessibility, real content and legal text.
- Forgetting that credits are spent while iterating, not only when generating.

## Sources

- [v0: pricing page](https://v0.app/pricing)
- [v0: pricing documentation](https://v0.app/docs/pricing)
- [v0: changelog](https://v0.app/changelog)
- [v0: documentation](https://v0.app/docs)


---

Source: https://www.fernandoux.com/en/wiki/ai/v0/