---
title: "Develop user interface prototypes"
slug: "develop-user-interface-prototypes"
date: "2024-11-13"
updated: "2024-11-13"
status: "published"
featured: false
access: "pro"
difficulty: "intermediate"
one_liner: "Learn how to generate user interface prototypes with Vercel’s v0 AI-powered code assistant."
tools: ["Vercel"]
topics: ["Engineering", "Product"]
roles: ["Developer"]
categories: ["Coding and DevOps"]
---

<!-- migrated_from_webflow_csv -->

<!-- UNRESTRICTED -->

<div class="unrestricted">

<p id=""><a href="https://vercel.com/" target="_blank">Vercel</a> is primarily known as a web hosting platform, but it's been releasing a steady stream of AI-powered builder tools that can help developers move faster. Or, if you’re a non-developer, you can create code-based web pages and user interfaces—zero programming knowledge is required.</p><p id="">In this tutorial, we’ll dive deep into their <a href="https://v0.dev/" target="_blank" rel="noopener noreferrer">v0 product</a>, which allows you to generate React and Tailwind-based user interfaces from prompts and reference file uploads. It’s an incredible tool for quickly developing mid-fidelity prototypes of web pages, product interfaces, and web components.</p><p id=""><strong id="">Steps we’ll follow in this tutorial:</strong></p><ul id=""><li id="">Generate a landing page from a prompt</li></ul><ul id=""><li id="">Generate a landing page from a screenshot</li></ul><ul id=""><li id="">Create product UI prototypes</li></ul><ul id=""><li id="">Develop UI components</li></ul><p id="">Let’s get into it!</p>

</div>

<!-- RESTRICTED -->

<div class="restricted" data-access="pro">

<h3 id="">Generate a landing page from a prompt</h3><p id="">To get started, navigate to the <a href="https://v0.dev/chat" id="" rel="noopener noreferrer" target="_blank">landing page of v0</a> and create a free account.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d67c3de58c465d8023_2b2d014e615bfaa_670782bc7a3e480bfc37b4fc_image.webp" width="auto"/></div></figure><p id="">We’re going to generate a landing page from a single prompt in this first example. To do this, in the chat input field in v0, prompt it to generate a landing page based on a company or project description.</p><p id=""><strong id="">Sample Prompt:</strong></p><blockquote id="">Generate a landing page for the below business: [insert company description].</blockquote><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d67c3de58c465d8046_615bfa5_670782bc7a3e480bfc37b502_image_201.webp" width="auto"/></div></figure><p id="">In under a minute, v0 will generate the React and Tailwind code for the landing page and provide an interactive preview of the page on the right side of the screen. If you’ve used Claude Artifacts before, this should be a familiar user experience. </p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d77c3de58c465d8074_615bfdf_670782bc7a3e480bfc37b522_image_202.webp" width="auto"/></div></figure><div data-rt-embed-type="true"><div style="padding: 20px; margin: 10px 0; background-color: #ffe8ed; border-left: 5px solid #f78ae0;"><strong>💡 Tip:</strong> You can take a look at the code by clicking the “[document-name].tsx” tab next to the “Preview” tab in the preview pane.</div></div><p id="">You can request v0 to edit the page or add components by following up with a prompt in the chat window. In this example, I’m going to ask it to create two new components for the page.</p><p id=""><strong id="">Sample Prompt:</strong></p><blockquote id="">Can you add [insert number] sections to the landing page? [insert descriptions of sections].</blockquote><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d67c3de58c465d8040_615bfcd_670782bc7a3e480bfc37b516_image_203.webp" width="auto"/></div></figure><div data-rt-embed-type="true"><div style="padding: 20px; margin: 10px 0; background-color: #ffe8ed; border-left: 5px solid #f78ae0;"><strong>💡 Tip:</strong> If you run into issues with components not appearing in your landing page preview, you can ask v0 to simplify the implementation to help the components to appear.</div></div><p id="">And just like that, v0 will generate the new components, add them to the code base, and update the landing page preview accordingly.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d67c3de58c465d803a_615bfc6_670782bc7a3e480bfc37b519_image_204.webp" width="auto"/></div></figure><h3 id="">Generate a landing page from a screenshot</h3><p id="">In this next example, we’ll generate a landing page from a prompt and a reference image of another landing page. This is a handy workflow if you’re referencing an existing website and want to recreate it.</p><p id=""><strong id="">Sample Prompt:</strong></p><blockquote id="">Generate a landing page that looks like the attached image. [attach reference image].</blockquote><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d67c3de58c465d8027_615bfc3_670782bc7a3e480bfc37b4f2_image_205.webp" width="auto"/></div></figure><p id="">We uploaded the Ben’s Bites landing page and this is the initial result from v0.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d77c3de58c465d807f_615bfe5_670782bc7a3e480bfc37b528_image_206.webp" width="auto"/></div></figure><p id="">It’s by no means perfect, but we can follow up with some edit requests via a prompt in the chat input on the right side to improve the design. We’ll ask v0 to left justify most of the components as well as remove some unwanted items.</p><p id=""><strong id="">Sample Prompt:</strong></p><blockquote id="">Make the below edits: [insert edits].</blockquote><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d77c3de58c465d8071_615bfc0_670782bc7a3e480bfc37b539_image_207.webp" width="auto"/></div></figure><p id="">Not bad! With just a couple of prompts and a reference image, we’ve got a decent-looking landing page header for our next project. You can share the interface via the share button in the top right corner of the page, either as a link to this developer experience or as a live version of the website page.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d77c3de58c465d8082_615bfd9_670782bc7a3e480bfc37b4ff_image_208.webp" width="auto"/></div></figure><h3 id="">Develop product UI prototypes</h3><p id="">v0 isn’t just for landing page generation. We can use it to create product user interfaces too. In this example, we’ll ask it to generate a web app for an e-learning platform.<br/><br/><strong id="">Sample Prompt:</strong></p><blockquote id="">Generate a [insert product description].</blockquote><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d67c3de58c465d802d_615bfa1_670782bc7a3e480bfc37b4f9_image_209.webp" width="auto"/></div></figure><div data-rt-embed-type="true"><div style="padding: 20px; margin: 10px 0; background-color: #ffe8ed; border-left: 5px solid #f78ae0;"><strong>💡 Tip:</strong> Like most prompt-based tools, the more descriptive you are, the better the result will adhere to your vision.</div></div><p id="">With just that one prompt, we have a pretty impressive, interactive e-learning user interface for a lesson-based course platform.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d77c3de58c465d8087_15bfca_670782bc7a3e480bfc37b525_image_2010.webp" width="auto"/></div></figure><p id="">In the top right corner of the page, you can click the fullscreen button to interact with the interface in a larger format.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d67c3de58c465d803d_15bfd0_670782bc7a3e480bfc37b510_image_2011.webp" width="auto"/></div></figure><p id="">When interacting with our course platform in this view, we noticed that not all of the components on the page were interactive—but that’s an easy fix.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d67c3de58c465d8030_15bfba_670782bc7a3e480bfc37b505_image_2012.webp" width="auto"/></div></figure><p id="">Exit out of the fullscreen mode, and back in the chat input field, we’ll request v0 to make all the components that should be interactive in the UI actually interactive.</p><p id=""><strong id="">Sample Prompt:</strong></p><blockquote id="">Make all of the components that can be interactive, interactive.</blockquote><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d77c3de58c465d806e_15bfbd_670782bc7a3e480bfc37b533_image_2013.webp" width="auto"/></div></figure><p id="">Now, we can click on any of the buttons or components in the user interface, like this “Ask Instructor” button at the bottom of the page and the web app will be fully interactive.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d67c3de58c465d8037_15bfd6_670782bc7a3e480bfc37b536_image_2014.webp" width="auto"/></div></figure><p id="">In this example, a pop-up window appears where we can message the instructor of this course.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d77c3de58c465d807c_15bfd3_670782bc7a3e480bfc37b508_image_2015.webp" width="auto"/></div></figure><h3 id="">Develop UI components</h3><p id="">In our last example with v0, we’ll develop UI components. This is a more handy feature if you’re a developer and want to add a new React/Tailwind component to an existing project, or you’ve already generated a project with v0 and want to update it with a new component.</p><p id="">In this example, we’ll ask v0 to create a sticky navbar.</p><p id=""><strong id="">Sample Prompt:</strong></p><blockquote id="">Generate a [insert UI component].</blockquote><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d67c3de58c465d802a_15bfdc_670782bc7a3e480bfc37b4f6_image_2016.webp" width="auto"/></div></figure><p id="">It’ll render the sticky navbar component in the preview. You can click on the .tsx file tab to view the code.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d67c3de58c465d8043_15bfad_670782bc7a3e480bfc37b513_image_2017.webp" width="auto"/></div></figure><p id="">You can copy the code or download it as a local file on your computer from this code view.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d77c3de58c465d8079_15bfe2_670782bc7a3e480bfc37b51c_image_2018.webp" width="auto"/></div></figure><p id="">In addition, if you click on the “Add to Codebase” button in the top right corner of the page, v0 will provide you with a command you can copy/paste to automatically add this block of code to your codebase. </p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/672663d77c3de58c465d806a_15c00d_670782bc7a3e480bfc37b51f_image_2019.webp" width="auto"/></div></figure><p id="">And that’s it! With just a couple of prompts, you’ve gone from idea to landing page, web app, or component prototype, with underlying React and Tailwind code to boot. Enjoy the efficiency gains in developing your next project with Vercel’s v0!</p><p id="">‍</p><p id="">‍</p><p id="">‍</p><p id="">This tutorial was created by <a href="https://garretthoughton.com/" id="" target="_blank">Garrett</a>.</p>

</div>
