AI tools
December 20, 2023

Vercel's V0 Can Build Web Frontend In Seconds Using AI

Turn a screenshot into source code in seconds with Vercel's V0.

Jim Clyde Monge
by 
Jim Clyde Monge

After months of waiting, I am finally off the waitlist and have had the opportunity to explore V0, a highly anticipated AI-powered web front-end generator developed by Vercel.

V0’s basic features include:

  • Describe your desired UI in natural language, using prompts that specify the layout, components, and overall style.
  • Image understanding and interpretation. You can simply upload a screenshot of a website and V0 will generate the code for you.
  • Copy-and-paste ready: The generated code is readily copiable and integrable into your project, saving you time and effort.

How it works

V0’s user interface is straightforward and intuitive. The primary focus is a text box where you can describe the design you want to generate.

Vercel V0 dashboard
Image by Jim Clyde Monge

For instance:

Prompt: A landing page hero section with a heading, leading text and an opt-in form.

Vercel V0 example generated user interface
Image by Jim Clyde Monge

The AI generates three draft interfaces. To refine the draft UI, simply provide further descriptions and hit the Enter key.

Say you want to modify the main title and description:

Prompt: change the main text to “Welcome to Zeniteq” and the sub text to “Join us to get the latest news and updates on the generative AI space.”

The AI seamlessly executes your request, and you’ll notice the history saved on the left panel, enabling you to revert to previous versions.

Vercel V0 example generated user interface, welcome to zeniteq
Image by Jim Clyde Monge

Another notable aspect is the lightning-fast generation speed. You can see the UI taking shape in real-time!

In the upper right corner, toggles for “canvas” and “code” views allows switching between the design and code panels.

The code view allows you to manually edit the code on the right panel and instantly observe the changes reflected on the left panel — that’s a user-friendly feature for developers.

Vercel V0 example generated user interface. welcome to zeniteq and source code on the right panel
Image by Jim Clyde Monge

Pick and edit feature

One particularly impressive feature is the “Pick and Edit” tool, enabling you to select a specific section of the UI and modify it using natural language.

Vercel V0 pick and edit feature
Image by Jim Clyde Monge

For example, if you want to add padding to the email text box, simply instruct the AI to do so instead of manually adjusting the source code.

Vercel V0 pick and edit feature. welcome to zeniteq
Image by Jim Clyde Monge

And just like magic, the padding was added instantly. This is awesome and very convenient!

Vercel V0 Welcome to Zeniteq
Image by Jim Clyde Monge

Image as an input

Recently, I published an article about an AI tool that translates screenshots into web front-end codes. Readers were intrigued because it went semi-viral.

Well, V0 can replicate this capability by accepting images as input.

On the right side of the prompt text field, click the “Upload image” button to upload a screenshot.

Vercel V0 dashboard upload an image button
Image by Jim Clyde Monge

Take this screenshot of Taylor Swift’s Instagram page as an example.

Vercel V0 taylor swift’s instagram page
Taylor Swift’s Instagram page

Give it a short description, “An Instagram page of Taylor Swift,” and hit the submit button. Here’s the result:

Vercel V0 taylor swift’s instagram page
Image by Jim Clyde Monge

Hmm, the generated interface is a little far from the image input. While it’s fascinating to see V0’s attempt, the technology behind it still needs further development, in my opinion.

Pricing

As an early private beta tester, I received 1200 generation credits for free. You can monitor your remaining credits in the profile dropdown in the upper right corner of the dashboard.

Vercel V0 credits check
Image by Jim Clyde Monge

Note: The initial generation of a UI costs 30 credits. Subsequent generations for revisions cost 10 credits each.

Once all your free credits are used up, you can subscribe to a $20 monthly plan, which includes:

  • 5000 credits/month
  • General Commercial Terms
  • Optional credits purchase
  • Private generations (free-generated UIs is public by default)
Vercel V0 pricing
Vercel V0 pricing

With 5000 credits, you can generate approximately 160 user interfaces.

You can also purchase on-demand credits, valid for only 90 days from the purchase date:

  • $10: 1250 credits
  • $30: 4000 credits
  • $50: 7750
Vercel V0 On demand credits
Image by Jim Clyde Monge

Final Thoughts

As a software engineer who only switched recently to web programming, this AI-powered coding assistant is a game-changer. Heck, I even bought subscriptions from Tailwind CSS and Flowbite, costing me $350, just to access the component template source code.

With V0, I can effortlessly request the AI to generate the code using natural language, saving me not only money but also precious time.

What are your thoughts on V0? Share your opinions in the comments. Let me know your thoughts in the comments.