←Back/Design/v0
IntermediateDesign

How to Build an On-Brand Component Library in v0 Using Screenshots

Turn screenshots of your product into a reusable v0 component library, then fork that library to prototype new pages without losing the visual language your team already recognizes.

How to Build an On-Brand Component Library in v0 Using Screenshots

Source episode · 02:46

How I AI: Colin Matthews' Workflows for Prototyping with Your Brand's UI

with Claire Vo

Colin builds an Airbnb component library from screenshots, forks it, and assembles familiar pages without changing the reusable source library.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • Screenshots from several representative product pages
  • A v0 project
  • Your preferred frontend stack and accessibility requirements

What you’ll make

A reusable component library plus a forked prototype assembled from those components.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

4 steps

Step01

Use the Master Prompt to Create a Library

Create a new v0 project for the library, attach one representative screenshot, and ask for separate reusable components. Require a catalog page that displays each component and its states instead of reproducing the full screen.

Example prompt
Build a reusable component library from the attached product screenshot using Next.js, React, and Tailwind CSS. Identify the logo, navigation, inputs, buttons, cards, typography, and any repeated patterns. Create each as an accessible component with useful props and states. The page must be a catalog of components with example usage. Do not recreate the screenshot as one composed view.
Step02

Iterate with More Screenshots

Add screenshots from other product areas one at a time. Ask v0 to preserve the existing primitives, identify only the new patterns, and add useful states such as selected, disabled, empty, loading, or error.

Example prompt
Review this additional screenshot against the existing library. Add only the reusable components or states that are missing. Reuse current tokens and primitives, and update the catalog page with examples of each addition.
Step03

Fork Your Component Library

When the library covers the main product patterns, fork the project. Keep the original as the shared baseline and make all page or feature experiments in named forks.

Name the source project “Component Library Baseline” so teammates can distinguish it from prototype branches.

Step04

Assemble a Page from Your Components

Inside the fork, ask v0 to assemble a real page from the existing components. Review whether the result feels recognizably like your product, then fix weak primitives in the library rather than repeatedly patching each page.

Example prompt
Create an Airbnb homepage using the components already in this project. Prefer existing components and styles. Add a new primitive only when the page requires a pattern the library does not contain.

What good looks like

  • The library page shows reusable components rather than one copied screen.
  • Repeated elements share consistent styling and props.
  • The prototype is recognizable as the source product without needing pixel perfect fidelity.
  • The original library remains unchanged while experiments happen in forks.

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

v0 recreates the screenshot as one page
Restate that the output must be a catalog of separate components and name the elements you expect it to extract.
Important states or components are missing
Add screenshots one page or state at a time and ask only for components that are not already in the library.
A prototype introduces generic styles
Improve the shared primitive or add the missing component, then rebuild the page from the updated library.

Keep building

Related workflows

Create a Meta-Workflow to Continuously Improve Your AI Assistant's Performance
advancedPersonalClaude

Create a Meta-Workflow to Continuously Improve Your AI Assistant's Performance

Design a weekly meta-workflow that analyzes your interactions with your AI assistant to make it smarter. This system learns your writing style from edits, suggests new automations for repetitive tasks, and helps you filter valuable AI techniques from hype.

Open
Build a Self-Improving AI Morning Brief to Capture Action Items and Learn Company Jargon
intermediateProductClaudeGranola

Build a Self-Improving AI Morning Brief to Capture Action Items and Learn Company Jargon

Create a daily AI workflow that summarizes yesterday's meetings, identifies urgent tasks, and proactively learns internal company terms it doesn't understand. This keeps your AI assistant's knowledge current and highly relevant to your work.

Open
Automate Your Weekly Planning with an AI-Powered PM Assistant
intermediateProductClaudeNotion+1

Automate Your Weekly Planning with an AI-Powered PM Assistant

Build a recurring AI task that automatically gathers updates from your calendar, Slack, and notes to suggest weekly priorities and prepare you for upcoming meetings. Start every Monday with a clear, comprehensive plan without the manual effort.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready