Building a Component Library

Three steps to high quality AI prototypes

Hey, I’m Colin! I help PMs and business leaders improve their technical skills through real-world case studies. For more, check out my live courses, Technical Foundations and AI Prototyping.

---

One of the main challenges when using tools like Bolt, v0, and Lovable is getting a consistent look that closely matches your product. In this short post, I’ll walk through how you can create a reusable component library to quickly assemble unique prototypes over and over.

We’ll be using Airbnb and v0 as an example.

Step 1: Planning the Component Library

First, I provided v0 with the following prompt with a screenshot of the Airbnb home page:

You are tasked with creating a component library based on a screenshot, using React and Tailwind CSS. All components should be custom-made to match the screenshot as closely as possible.

Follow these instructions carefully: 
Analyze the provided screenshot.Identify distinct UI components in the screenshot. These may include, but are not limited to:
Buttons
Input fields
Navigation bars
Cards
Modals
Typography elements

For each identified component: a. Create a React functional component b. Use Tailwind CSS classes to style the component, matching the visual design in the screenshot c. Ensure the component is responsive and accessible d. Add any necessary props for customization e. Include a brief comment describing the component's purpose

After creating all individual components, the app.tsx file should import and display all components. Do not try to match the screenshot ui – only display a list of components.

Remember to use only custom-made components and Tailwind CSS classes. Do not use any external libraries or pre-built components. Strive to match the visual design in the screenshot as closely as possible while maintaining good coding practices and component reusability.

This prompt tells v0 to focus on building individual components, rather than replicating the actual layout from the screenshot. We end up with a list of components like this:

From the initial set of components, I continued passing in additional screenshots until I felt I had captured enough.

Here’s the full set:

Note that these components don’t match one-to-one on the initial prompt, but we can continue to improve on them if we want.

Step 2: Refining UI Components

The wonderful thing about this approach is that it allows you to make visual edits to your components before you use them in an actual prototype. This lowers the complexity of making changes and makes it much more likely your prompts will actually work. For example, I used the visual inspector to improve the Airbnb header. Here’s a quick before and after:

Trying to make similar changes in an existing prototype can sometimes be a frustrating battle of pushing the AI to make the correct changes to the correct files. Because we start with independent component files, v0 has no problem identifying and changing one file at a time.

Step 3: Building With Our Components

Now we’re ready to use our components. Before continuing, make sure you fork the project to create a new copy. This allows you to return back to your component library as often as you want to create new ideas without redoing the work.

In my case, I asked v0 to imagine a new and creative homepage for Airbnb using my components. Here’s what I got:

Results and Benefits

Now that we have our component library, we can have a centralized source of truth for our prototypes. At any point, we can make updates to the library and copy those changes over to our forks, maintaining the improvements over time.

This results in a few significant benefits:

1. Consistent design language

All prototypes maintained perfect consistency with our design system since they used the same underlying components. This allows you to invest once upfront in build high-quality components that are easy to reuse.

2. Easier iteration

When feedback required changes, you can modify specific components without rebuilding entire screens. These component updates could then be used in all future prototypes.

3. Faster onboarding for team members

Getting your team started with AI prototyping can be challenging. By providing a baseline set of components, they can start expressing their ideas right away with visually impressive prototypes.

Although this approach takes a bit more upfront work, I think you’ll find it quickly becomes worth it when prototyping the same application more than once. Give it a try and let me know how it goes!