How to build prototypes that actually look like your product | Colin Matthews

ℹ️ EPISODE INFO

Released

June 30, 2025

Duration

32m

Channel

How I AI

Watch on YouTube

▶ Open ↗

📝 EPISODE DESCRIPTION

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

*Brought to you by:* WorkOS—Make your app enterprise-ready today: https://workos.com?utm_source=lennys_howiai&utm_medium=podcast&utm_campaign=q22025 Notion—The best AI tools for work: https://www.notion.com/howiai *Go deeper with Colin’s in-depth post in Lenny’s Newsletter:* https://www.lennysnewsletter.com/p/how-to-get-your-entire-team-prototyping *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/

_Production and marketing by https://penname.co/._ _For inquiries about sponsoring the podcast, email jordan@penname.co._

🎤 SPEAKERS

• Claire Vo

  host

• Colin Matthews

  guest

🧾 EPISODE SUMMARY

In this episode of How I AI, featuring Claire Vo and Colin Matthews, How to build prototypes that actually look like your product | Colin Matthews explores AI prototyping with component libraries for brand-consistent product-like mockups fast Claire Vo and Colin Matthews demonstrate a workflow that makes AI prototypes look and feel like the real product by starting with a component library rather than generating full pages from scratch.

🔗 RELATED EPISODES

Successfully coding with AI in large enterprises: Centralized rules, workflows for tech debt, & more

How this PM streamlines 60k-page FDA submissions with Claude, Streamlit, and clever AI workflows

Mastering ChatGPT: Advanced techniques for workplace communication and productivity | Hiten Shah

How a 91-year-old vibe coded a complex church event management system using Claude and Replit

How to use Cursor for interactive prototypes, sound design, and data visualization

Gamma’s head of design on using AI to synthesize feedback and generate on-brand imagery | Zach Leach