🐴 V0 Crash Course: Tips and Tricks for AI Prototyping

How to get better results with more control

V0 is an AI-powered tool that can turn prompts into interfaces, prototypes, and even fully functional apps.

Like other similar tools, it is easy to generate an initial concept.

But what if you want more than just a first draft?

What if you need more control over the results?

What if you want a design that gets closer to your vision?

Getting to the 50%-60% mark is quick, but refining beyond that is the tricky part.

Today, I'll share 8 methods to help you maximize V0’s potential, giving you greater precision and control over the AI-generated results.

---

Overview

V0 is built by Vercel, a popular cloud platform that helps developers host and manage web applications with ease.

Beyond developers, I also see big potential for designers, product managers, entrepreneurs, and other people to use V0, particularly for creating proof-of-concepts.

I think that's where tools like V0 are most useful.

Alright, let’s dive in the methods!

---

1️⃣ Provide a detailed requirement

A detailed requirement can help you achieve a better result than a broad, vague, one-liner prompt.

But I know it’s not easy to come up with one.

You can always ask ChatGPT or Claude to help you craft the first draft based on your needs and you can revise from there.

I actually built a personal bot (custom GPT) to help me quickly generate a detailed prompt specifically for AI prompting tools.

Here's an example of what I received after sharing my needs, which I can then easily copy and paste into V0’s prompt box:

# Generate a clickable prototype based on the Design Spec below: 

## 1. Product Overview

- **Platform:** Responsive Web (Desktop-optimized)  

- **Target Users:** Food enthusiasts  

## 2. Core Objective

- Help users find the best pizza places in their city.  

## 3. Key User Flow

- **Search for Pizza Places**  

## 4. Key Pages & Components  

### **Search Page**  

- **Components:**  

  - Search bar (for entering city or restaurant name)  

  - Filter options (ratings, price, distance, etc.)  

  - List of pizza places with ratings and images  

- **Key Interactions:**  

  - User types a city or restaurant name and sees results  

  - User applies filters to refine the search  

  - User clicks a pizza place to view more details 

I’ll write a detailed newsletter about how I built that GPT at another time.

---

2️⃣ Revise a specific component

After the initial generation, you'll likely want to make revisions.

That’s where the “select” feature comes in handy.

Click the “select” icon to enter selection mode, then hover over the components of the generated design.

Once the component you want to revise is highlighted, you can click on it and use natural language to request changes directly based on that component.

The “select” feature

This is much easier compared to having to describe which components to revise.

---

3️⃣ Provide a reference

URL Reference

If you have a website that you want to use as inspiration, you can simply provide the site’s URL in the chat prompt and ask it to “clone it.”

Note that it essentially takes a snapshot of the page, and V0 tries to create a matching version. It uses shadcn/ui components and Tailwind CSS for styling by default.

Here’s an example of me using the URL of Design with AI’s welcome page:

Providing a URL reference

Well, you may notice that the image above "Design with AI" was displaying oddly.

So I visited the site, opened the image in a new tab, and copied the image URL.

Then I pasted the URL into the code where the image link is referenced.

Identifying the image URL

Issue fixed.

After replacing the image

Snapshot Reference

You can also attach a snapshot and ask V0 to “Create the UI based on the snapshot.”

The result is almost the same with if you were to provide the webpage URL.

---

4️⃣ Share or deploy the app

I find V0 most helpful for proof-of-concept, and a key part of that is sharing it with others to get feedback and ensure alignment.

If you want to share a preview of the app along with the chat history, simply click on the “Share” icon. Usually, this is enough.

However, if you want to deploy the app (make it "live") and ready for use by the intended users, click on the “Deploy” button.

Since V0 is built by Vercel, the deployment part is quick and easy.

The “Share” and “Deploy” features

It’s easy to disable the deployment too.

---

5️⃣ Use Version Control

Version control is important because it allows you to track the changes that you’ve made.

You can easily revert to a previous version if needed.

The “Version Control” feature

---

6️⃣ Pull components from shadcn/ui

Components are the building blocks of a user interface.

If you have a clear vision and want to have the most control of the outcome, then it’s helpful to start building from the component level.

Once you are happy about the components, you can ask V0 to put them together.

Since V0 uses shadcn/ui components under the hood, you can go to its official website, find the component that you want, and click the button “Open in v0”.

Opening the component in V0

After opening in V0, you can choose to customize the component with chat if needed.

Then after the customization, you can ask v0 to add to the codebase, so you can use it in the project you are building.

Adding to the codebase

Since shadcn/ui is an open-source, freely customizable, popular UI component library, many libraries and components built on top of it are also available online.

You can pull them to build your project too.

Here are some of my favorite shadcn/ui resources:

• Component Library: https://ui.aceternity.com/

• Component Library: https://www.shadcnui-blocks.com/

• Component Library: https://21st.dev/

• Form: https://www.shadcn-form.com/

• Button: https://enhanced-button.vercel.app/

• Modal (Desktop): https://credenza.rdev.pro/

• Modal (Mobile): https://vaul.emilkowal.ski/

• Chatbot: https://www.assistant-ui.com/

---

7️⃣ Integrate with Figma

Last month, V0 launched an exciting feature—Figma integration.

You can provide the link(s) of your Figma and V0 will generate the UI accordingly.

Again, starting from the component level can help you get better results.

Instead of expecting V0 to magically create an exact “clone” of your Figma design, try breaking it into smaller components and having each in its own frame.

This also helps AI to process each part correctly.

Providing Figma components

By the way, it is also worth trying out shadcn/ui Figma kits in your designs if you want the interface generated in V0 matches your Figma design closely:

• Paid Kit: https://www.shadcndesign.com

• Free Kit: https://www.figma.com/community/file/1203061493325953101

---

8️⃣ Fork a chat

“Fork” is a common term for developers.

I was confused when I first heard this jargon.

It is essentially taking a copy of the existing code and starting a “new branch”.

The “Fork” feature

This is helpful when you want to keep the base version and want to play around without disturbing the work you’ve done so far.

Or, you can fork a chat when you want to modify based on someone else’s work in V0 that you found.

For example, V0’s homepage provides a wide variety of projects shared by other users. If you are interested in any, you can click on it, open in V0, and fork it.

The various templates in V0

Under the project name, you can even see how many times it has been "forked."

If there were lots of folks, it means it's popular.

---

That’s it for this week.

Thanks for reading!

Xinran

-

P.S. The other day, my daughter asked me, “Daddy, what is ChatGPT?” and “What is Wi-Fi?”.

I tried answering the first one but gave up on the second.