v0.dev complete usage tutorial, 2026 AI one-click generation of web front-end

v0.dev is an AI web page generation tool launched by Vercel in 2023. In 2026, its cumulative users exceeded 8 million. Its core capability is to automatically convert a natural language description into runnable React front-end code. The generated page is based on the Next.js + Tailwind CSS + shadcn/ui technology stack by default. This article takes you through a complete generation process from registration to deployment and online.

There are three things that zero-based readers are most concerned about. First, can it be used if I don’t know how to write code? Second, can the generated code be commercially used? Third, what is the difference between it and Cursor and Bolt.new? These three questions are answered one by one below.

Product positioning and pricing of v0.dev

v0.dev official website domain name v0.dev or v0.app, a product of Vercel. Vercel is the parent company of the Next.js framework, with a valuation of US$3.2 billion in 2024, and its products cover 2 million developers.

The free version has a monthly quota of 200 messages and can generate about 30 to 50 pages. Suitable for individual enthusiasts to try.

Premium version is $20 per month, 5000 messages, unlimited generation, supports v0-1.5-md model, adjustable advanced parameters.

Team version $30 per person per month, multi-person collaborative workspace, shared component library, Slack integration.

Enterprise version custom quotation, SSO login, private deployment, SLA, compliance audit. Suitable for large enterprises.

Domestic users pay with Visa/Master credit card or virtual cards such as OneKey and WildCard. Supports automatic renewal.

Step 1 Register v0 account

Open v0.dev and click Sign Up. You can register using GitHub, Google or email. GitHub registration is the most convenient, and the subsequently generated code can be pushed to your GitHub repository with one click.

After registration, you will automatically enter the Workspace main interface, and the top input box is the prompt area. For new users, the system will first pop up 5 sample prompts to help you quickly understand what can be done.

Domestic access to v0.dev is not blocked. However, OpenAI API, Anthropic API, and Vercel's own model will be called when generating code, and the response speed depends on network stability. Connecting to overseas nodes will be 2 to 3 times faster than naked connection.

Step 2: Write the first prompt

Type a description of the page you want in the center input box. v0 supports both Chinese and English prompts, and English recognition is more accurate.

Example 1. A SaaS product homepage, including product screenshots in the hero area, 3 feature cards, three levels of pricing table, FAQ folding panel, and bottom CTA.

Example 2. A blog article details page, with the article text on the left, a table of contents outline on the right, author information and publication time at the top, and 6 cards recommending related articles at the bottom.

Example 3. A dashboard, navigation bar on the left, 4 statistics cards on the top, order list table in the middle, and recent activity timeline on the right.

After v0 sees the prompt, it will generate the first version within 5 to 30 seconds. Generation time is proportional to prompt complexity.

Step 3 Preview and Iterate

After generation, the page is divided into two columns: left and right. The left side is the chat conversation and code preview, and the right side is the real-time rendered page screenshot.

Click Switch in the upper right corner to switch between Preview and Code views. Preview to see the effect, Code to see the actual code.

Iteration depends on continuing to chat. For example, if you are not satisfied with the color of the head, say "Change the head to dark blue" in the dialog box. Or "price card with gradient background". v0 is partially modified based on the original version to generate Version 2.

Each modification will create a new version number, and you can switch back to any historical version in the version list on the left. This is better than writing code in ChatGPT, which often truncates tokens or forgets context.

Unsatisfied with the whole page redo. Click Start Over or directly enter a new prompt to overturn and start again.

Supports component-level refinement. Move the mouse to any area of ​​the page and click, and "Edit this section" will pop up to specifically change this section, leaving other parts unchanged.

Step 4 Upload images or screenshots

v0 supports image input. Drag competing product screenshots, design drafts, and Figma export images to the prompt box, and v0 will generate them according to the images.

Example. Drag the screenshot of Linear's official website into it and say "make a project management tool landing page in this style". v0 will imitate the color, layout, and font rhythm to generate a 90% similar replica.

Upload design draft. If you have a Figma file, export the main page PNG and upload it to v0. v0 automatically identifies layout elements and generates corresponding component trees. This feature will be added in 2025, with an accuracy rate of about 75%.

Hand drawn sketch uploaded. Draw a wireframe on paper, take a photo and upload it, v0 can also identify the basic structure and generate a responsive page. The lines must be clear, otherwise the recognition will be biased.

Step 5 Download or deploy code with one click

When you are satisfied, click Deploy on the upper right to enter the deployment process. One of three ways.

Way 1. Deploy Vercel directly. Click Deploy to Vercel to automatically create the project and publish it to the yourname-projectname.vercel.app subdomain name. It will go online in 5 minutes. The free version of Vercel Hobby has unlimited projects and unlimited bandwidth, enough for personal use.

Way 2. Download the ZIP locally. Click Download Code to download the complete Next.js project compressed package. Local npm install && npm run dev is started, the default port is 3000.

Way 3. Push to GitHub. Click Push to GitHub to create a new repository or push to an existing repository. You can use Cursor and VSCode to change it later.

Code structure. Next.js 14 App Router, Tailwind CSS, shadcn/ui component library, TypeScript. All components are standard React, there is no proprietary syntax, and any developer familiar with React can take over directly.

Domestic domain name binding. Projects deployed by Vercel use the *.vercel.app domain name to be accessible domestically. If you want to bind a domestic registered domain name, you need to pull it to your own Cloudflare or migrate it to Alibaba Cloud or Tencent Cloud.

Step 6 Advanced Usage

v0 v2 will greatly expand its capabilities in the second half of 2025. v0 in 2026 will not only write the front end, but also have a much wider range of functions.

Backend integration. You can directly say "add a login registration interface and use Supabase as the database". v0 will call Supabase Auth, generate complete server actions, and the database table will be automatically created.

Payment access. Say "Connect to Stripe for a monthly subscription of $9.99", v0 will automatically generate Stripe Checkout components, webhook processing, and order status management.

AI functionality built-in. Say "Add an AI customer service chat box in the lower right corner and use OpenAI GPT-4", v0 automatically connects to the OpenAI API and generates chat UI and back-end calling code.

Database schema design. Give v0 several business fields and it will automatically design the PostgreSQL table structure, index strategy, and relationship mapping.

internationalization. Say "Add Chinese and English switching", v0 automatically accesses the next-intl library and extracts all copywriting into the language package.

What scenarios is v0 suitable for?

Marketing landing page. When a SaaS company releases a new product called Landing Page, v0 will have 5 versions available within a few hours.

MVP prototype verification. The entrepreneurial team verified the new idea, and v0 completed the demo in one week. Investors viewed the demo 10 times more intuitively than the PPT.

Designer turned developer. If a designer wants to implement the design draft by himself, v0 will automatically generate the code for him without having to learn React from scratch.

Internal tools. For the company's internal dashboard, forms, and admin background, v0 is 5 times faster than handwriting and the code quality is not bad.

Product managers draw prototypes. Product managers use v0 to directly draw the UI when writing requirements documents, and make changes directly to the demo during discussions, which is closer to the real experience than Figma static prototypes.

Teaching and learning. When students learn React, they use v0 to look at the generated code to understand best practices and learn backwards.

Limitations of v0

Customization capabilities are limited. v0 is templated and has less freedom than handwriting. When you need to do complex animations, 3D effects, or special interactions, you still have to make manual changes.

Rely on the Vercel ecosystem. The generated code is deployed by Next.js + Vercel by default. If your team uses Vite + Nginx for self-deployment, code migration will be a workload.

Weak back-end capabilities. v0 is mainly a front-end tool, and the back-end integration only involves calling BaaS such as Supabase. Complex business logic still needs to be written by back-end engineers.

Chinese prompt is not as good as English. The training data of v0 is mainly in English, and the Chinese prompt occasionally recognizes incorrectly. For complex requirements, it is recommended to write prompt in English.

No offline mode. v0 is a cloud service and does not have a local version. When the network is not good, the entire process is stuck.

price threshold. Premium at $20 per month is on the expensive side for students and beginners. The 200 messages in the free version are used up quickly in a month.

Comparison between v0 and Cursor and Bolt.new

v0. Focus on front-end UI generation, templating, and deployment integration. Suitable for going from scratch to the first version online.

Cursor. The AI ​​code editor derived from the VSCode fork is good at modifying, reconstructing, and debugging existing code. Suitable for subsequent maintenance and complex projects.

Bolt.new. Produced by StackBlitz, the in-browser IDE and WebContainer technology can run the complete Node backend. Suitable for quick verification of full stack demo.

Replit Agent. Cloud development environment, built-in AI assistant, integrated deployment. Suitable for teaching and getting started.

Workflow recommendations. v0 started by building the first version of the front end, exporting the code to GitHub, and then using Cursor to further develop the back-end logic. The two tools complement rather than substitute.

FAQ

Can I use v0 if I don’t know how to write code?

Absolutely. The design goal of v0 is to enable people who do not write code to produce web pages that can run. You only need to describe clearly what you want to do, and v0 will produce code, preview, and deployment. But if you don’t understand the code at all, you will get stuck in certain aspects. For example, if you want to change the copywriting, add links, and change pictures on the generated page, 80% of it can be done by operating the v0 dialogue, and the remaining 20% ​​needs to be changed directly to the code file. It is recommended that non-technical users first use v0 to do 1 or 2 demos. They will naturally be exposed to the basic syntax of JSX and Tailwind and get started in half a month.

Who owns the copyright of the code generated by v0?

The code copyright belongs to you. The v0 terms of service clearly state that 100% ownership of user-generated content belongs to the user. Can be used commercially, modified, and resold. But v0 uses the shadcn/ui component library. This library itself is open source under the MIT protocol and is allowed for commercial use. Tailwind CSS and Next.js are also open source protocols. Note that the code generated by v0 may contain third-party image placeholders such as the placeholder.com domain name. This must be replaced with your own image resources before official release, otherwise the online image loading will fail.

Which one is more worth subscribing to, v0 or Cursor?

Both are worth it depending on the focus. The strength of v0 is to generate a new page from scratch and produce a viewable prototype in 5 minutes. Cursor's strengths are modifying, refactoring, and debugging existing code. If you are just starting a project, choose v0 for fast speed. If your project already has tens of thousands of lines of code, Cursor is more stable. The monthly fees are all 20 US dollars. If you have a tight budget, you can only choose one depending on your work content. Many people subscribe to both, with v0 doing new feature demos and Cursor doing the main project in-depth development.

Does v0 support mobile responsiveness?

support. All pages generated by v0 by default are Tailwind responsive breakpoints, automatically adapting to mobile phones, tablets, and desktops. You can specify "mobile first" in the prompt, and v0 will optimize the mobile experience. When previewing, click the device icon on the upper right to switch to different sizes to see the effect. If there is a problem with the generated mobile layout, continue chatting and say "change the mobile navigation to a hamburger menu" or "change the cards to a single column on small screens", v0 will iteratively fix it. However, v0 is not optimized enough for edge scenes on extremely small screens such as the 320-wide iPhone SE, and you may need to manually adjust CSS.

Can domestic servers deploy projects generated by v0?

Can. v0 generates a standard Next.js project, which can be run on any server that supports Node.js 18 or above. ECS of Alibaba Cloud, Tencent Cloud, and Huawei Cloud can be deployed. Deployment process. Download the v0 project ZIP and unzip it. Local npm run build is packaged into the .next directory. Upload the project and .next to the server. To install Node 18, run npm install --production && npm start at port 3000. Nginx backgeneration to 80/443. If you want to bind a domestic domain name, ICP registration is required. Or directly choose Vercel to deploy on overseas nodes, and domestic access is accelerated through Cloudflare CDN.