How to become a hero at v0

There are many AI tools around today—maybe a few too many. Luckily, v0 is not one of
them! I used this tool to create user interfaces for some of the internal tools at work,
and I recently prototyped a user interface for a client in a matter of minutes. It is a
tool that requires a somewhat specific approach to be successful.

In this post, I’ll help you understand v0 and how to use this tool to its maximum
effect.

Let’s dive straight in!

What is v0?

Before you can become a hero with this tool, we must discuss what we’re looking at. V0
is a tool developed by Vercel that can generate web applications based on prompts. To
access v0, you can use a browser and go to https://v0.dev. You’ll see
a screen like the one below.

The tool starts by asking for a description of what you want to build. Once you’ve
entered your idea, it will start working on the code to turn it into a semi-functional
program.

Initially, the tool is free to use with some limitations, but I’ve found that if you
want anything serious, you will have to swipe the credit card. Despite this limitation,
I think it’s great to try out! You’ll be surprised how powerful and valuable this tool
is for bootstrapping front-end components.

Now there are a few things that you need to be aware of when you want to become good at
using this tool to generate frontend code.

Be specific in your prompts

While v0 is great at building user interfaces, it can’t do so without a precise prompt.
The more specific your prompt is, the better the results. So don’t write a prompt like
“Create a page with my projects.” Instead, write a longer prompt like “Create a page to
list the projects in a table. Each project has a name, owner, creation date, and
modification date. Use pagination, with a maximum of 20 projects per page.”

During testing, I also noticed that v0 is built with NextJS, Shadcn, and TypeScript in
mind. That’s no wonder since the tool is made by Vercel, a company that backs the
development of NextJS and Shadcn. This means that if you’re not specific in what
framework you’d like to use, v0 will use those frameworks.

I come from a background in Python and .NET, so I didn’t like the combination of Shadcn,
NextJS, and TypeScript very much. But I learned to love it because if I use .NET, I can
still refer to the layout generated in v0. And to be fair, a lot of my projects involve
some kind of microservice architecture. So, I can choose to use the generated code to
build my front-end in NextJS and the back-end in Python or C#.

One thing I did notice is that while v0 does a great job if you write extended prompts
with lots of detail, it does mess up when you try to work on too many things at once.
Limit yourself to one screen at a time I recommend limiting yourself to one page at a
time in v0. So don’t start describing a complete system in a single prompt; focus on
that project overview or a detailed page. Leave out the navigation bar, breadcrumb, and
any other shared elements in the UI.

This sounds crazy, I know because you’ll end up with a weird set of loosely related
blocks. But that’s the power of v0. A single conversation in v0 results in a single
block that you can download, as the following picture demonstrates.

As you can see in the picture, there’s a “Add to codebase” option when you click the
dots in the top right corner of the screen. This is how it works.

Start by creating a new NextJS project on your machine. You can use the following
command:

npx create-next-app@latest my-app

Next, initialize shadcn in the project directory using the
following command:

npx shadcn init

After you’ve configured your project, go back to v0.dev and copy-paste
the command shown underneath “Add to codebase”. Execute this command in the project
directory. This will add the block to your project so you can extend, modify, or use it.

Adding a block to a project will copy the code to your computer. Syncing blocks at this
time is impossible, but I think you shouldn’t want to. V0 is all about bootstrapping
projects; it’s not an end-to-end code generation solution.

Another great feature will help in this regard. V0 supports working with projects. I
recommend using this option when working on more than one screen. You can work on
multiple conversations/blocks in a single project, which helps keep things together.

As much as scoping your prompts helps, the results will not be perfect the first time.
That’s why I recommend iterating on them.

Iteration is key to a good block of code

While v0 starts with a single prompt, it allows discussing the results using chat
functionality. You can give instructions on how to refine the results after the initial
prompt.

I’m happy you can iterate on the results because that means you can approach working
with v0 like a painting. You can first set up the main structure in broad strokes using
a prompt that may be less focused on things like exact positioning. Afterward, you can
refine details on the screen and add missing details.

It may sound funny that I’m approaching it like a painting, so here’s a more technical
angle. When you write your code, you typically write the main flow and then refine it
with alternative flows like error handling and validation. I suggest you use the same
approach to v0.

At some point, though, you’ll end up with something that can only be improved by
artisanal coding practices. But that’s okay.

Use the code editor

Don’t be afraid to step in and edit the code that v0 generated. I’ve seen the tool
generate some pretty broken things that it couldn’t fix. This is where I switched to the
code tab and changed the content myself to fix it.

Code generation only gets you so far, so I recommend fixing the final few details on
your local machine in VSCode or another programming editor. Tools like Github Copilot
can help you there and are good at fixing tiny problems.

Summary

If you haven’t tried v0, I recommend you look at v0.dev and generate something. I bet it
will surprise you how fast and well-behaved the tool is if you approach it correctly.

Have fun!