Learn to create a custom UI component library in v0 by feeding it screenshots of your product. This ensures all AI-generated prototypes automatically match your brand's visual identity, solving the problem of generic AI designs.
with Claire Vo
Start by instructing the AI to create a *component library* based on a screenshot of your product, rather than a full page. This initial prompt guides the AI to focus on building reusable 'Lego bricks' first.
You are tasked with creating a component library based on a screenshot, using NextJs, React, and Tailwind CSS. All components should be custom-made to match the screenshot as closely as possible. Follow these instructions carefully:
1. Analyze the provided screenshot
2. Identify distinct UI components in the screenshot. These may include, but are not limited to:
◦ Buttons
◦ Input fields
◦ Navigation bars
◦ Cards
◦ Modals
◦ Typography elements
3. 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
4. After creating all individual components, create an index page that imports and displays each component with example usage.
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.Feed the AI additional screenshots from different parts of your application. With each new image, use a simple prompt to instruct the AI to identify and add new UI elements to the growing component library.
Please continue adding components.Once you have a solid component library, use the 'Fork' feature in v0 to create a clean copy of the project. This is crucial for preserving your original library as a reusable asset for future prototypes.
In your newly forked project, ask the AI to build a full page or view. Because you've pre-built the on-brand components, the AI will use them to assemble a high-fidelity prototype that matches your product's look and feel.
create a homepage for Airbnb
Follow Sahil Lavingia's method for delegating small but impactful maintenance tasks, like fixing an internal Slack report, to the AI agent Devin. This workflow shows how to use simple, clear prompts to fix code and update system prompts without distracting your engineering team.
Learn Gumroad CEO Sahil Lavingia's process for rapidly prototyping a UI with v0, then using the AI agent Devin to autonomously code, implement, and submit the feature for review, turning a multi-day task into a one-hour workflow.
Improve your writing in real-time by using ChatGPT as a first reader. Get instant feedback on structure, clarity, and flow as you write, allowing you to polish your work section by section.
We've made ChatPRD affordable so everyone from engineers to founders to Chief Product Officers can benefit from an AI PM.