How to build prototypes that actually look like your product | Colin Matthews (product leader, AI prototyping instructor at Maven)

Watch or listen now:
YouTube // Spotify // Apple

Brought to you by:

WorkOS—Make your app enterprise-ready today

Notion—The best AI tools for work

---

Colin Matthews is a product manager, founder, and hobbyist engineer. After spending the past eight years in healthtech, he recently left his role as a PM at Datavant to go full-time on building his own products. He is currently a top Maven instructor, helping PMs build their first AI prototype. In this episode, he shares a step-by-step workflow for creating component libraries from screenshots that stay true to your brand and reveals a clever Chrome extension trick for extracting code from any website to build reusable components.

What you’ll learn:

1. How to create component libraries from screenshots that match your brand’s design system

2. A Chrome extension that can extract components directly from any website with a single click

3. Why forking prototypes is the key to efficient iteration without breaking your baseline

4. The structured prompting technique that makes AI tools actually listen to your instructions

5. How to introduce AI prototyping to your team without stepping on designers’ toes

6. The debugging approach that solves 90% of AI prototyping errors

v0 prompt for creating a component library:

You are tasked with creating a component library based on a screenshot, using Next.js, 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.

Where to find Colin Matthews:

LinkedIn: https://www.linkedin.com/in/colinmatthews-pm/

Tech For Product newsletter: https://colinmatthews.substack.com/

Tech For Product one-day team workshop: https://teams.techforproduct.com/

Maven course: AI Prototyping for PMs: https://bit.ly/3FQgZmw

Where to find Claire Vo:

ChatPRD: https://www.chatprd.ai/

Website: https://clairevo.com/

LinkedIn: https://www.linkedin.com/in/clairevo/

X: https://x.com/clairevo

In this episode, we cover:

(00:00) Introduction to Colin Matthews

(02:46) Creating component libraries from screenshots in v0

(05:50) Using prompts to extract components from existing products

(06:31) Building an Airbnb prototype from component libraries

(11:36) Using the Magic Patterns Chrome extension to extract components directly from websites

(18:38) The importance of improving components rather than the composed application

(20:15) Using forks and versions for iterative prototyping

(25:05) Managing team dynamics when introducing AI prototyping

(26:54) Final thoughts

Tools referenced:

• v0: https://v0.dev/

• Magic Patterns: https://magicpatterns.com/

• Magic Patterns Chrome Extension: https://chromewebstore.google.com/detail/html-to-react-figma-by-ma/chgehghmhgihgmpmdjpolhkcnhkokdfp?hl=en

• Cursor: https://cursor.sh/

• ChatGPT: https://chat.openai.com/

• Bolt: https://bolt.new/

Other references:

• Colin’s AI prototyping prompt library: https://technical-foundations.notion.site/16c8fafdb669800ea6eeca11f40d046c?v=16c8fafdb6698069a6e4000c84a9ff2c

• Airbnb: https://www.airbnb.com/

• Notion: https://www.notion.so/

• Amplitude: https://amplitude.com/

• PostHog: https://posthog.com/

• Figma: https://www.figma.com/

• GitHub: https://github.com/

Go deeper with Colin’s in-depth post in Lenny’s Newsletter:

Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email jordan@penname.co.