Guides

General Best Practices

How to Prompt v0 Blog Article: https://vercel.com/blog/how-to-prompt-v0

Don’t Boil the Ocean

• Think through what you need for a prototype. What is the idea I’m looking to prove out and validate? Who am I building this for? What level of fidelity do I think I need? What stage am I within my product development life cycle? Is this early brainstorming, etc?
  • v0 can be used to create very advanced and functional prototypes with working DBs, APIs, AI models, etc, but it is very important to consider what is required for your use case. Don’t introduce unneeded complexity for the sake of it. If you need high fidelity/complexity for your use case then by all means do so, but don’t implement that by default as increased complexity does lead to more time/work/tro ubleshooting.

Start Small

• Work on features iteratively. You can ask v0 to implement multiple features in a prompt, but go at it step-by-step and that tends to help v0 in terms of consistently building what you want it to
  • Have v0 work at one area of a time and provide screenshots or Figma Frames on what that area should look like. For example, rather than have v0 recreate an entire page, have it recreate the header first, then the footer, then the sidebar, etc…
  • Here’s an example of recreating an existing app as a prototyping template in v0, which can be educational to review: https://www.notion.so/vercel/v0-Prompting-Best-Practices-Using-v0-to-recreate-an-existing-app-as-a-prototype-273e06b059c48040912df3f7aee8b419?source=copy_link
• Start by perfecting the UI and UX before adding full stack features
• [ADVANCED] If you’re building a more complex dashboard/application that will have many pages then at the start of the chat you can tell v0 to make sure to componentize the application as it starts building new features.
  • You can also remind v0 to do this throughout and it will help v0 stay on top of keeping the code well organized (this helps in how v0 will manage it’s context window as well as complexity scales).

Make a Game Plan

• When prompting both in project instructions and in chat, be as descriptive and clear as possible.
  • Use firm language like ‘not’, ‘must’, etc…
  • Emphasize language with CAPS if necessary
• To create more true to life/higher quality generations from the get go:
  • Explicitly state what and where you want v0 to make styling edits
  • Try using design mode to have v0 focus on a particular area of the generation
  • If you have a basic understanding of CSS, you can also explicitly describe the CSS property and/or value you want changed in your generation for more accurate changes

Troubleshooting

• When running into continuous logic issues:
  1. Downvote and delete the problematic messages
  2. Ask v0 different approaches to solve the problem
  3. Use your best judgement from the options listed by v0 to select one and tell v0 to implement that
  4. I like to have a 3 strikes and you’re out policy. If v0 fails to fix an error after three tries then just try going to the original chat that caused the error and delete it and try to tell it to approach the feature again
• You can lock files in the code editor for faster and higher quality generations