Skip to content
How I AIHow I AI

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

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._

Claire VohostColin Matthewsguest
Jun 30, 202532mWatch on YouTube ↗

At a glance

WHAT IT’S REALLY ABOUT

AI prototyping with component libraries for brand-consistent product-like mockups fast

  1. 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.
  2. Colin shows how to capture UI elements from screenshots (e.g., Airbnb) to generate a reusable set of components, then “fork” a project to assemble new screens (home, detail pages) using those components for visual consistency and fewer errors.
  3. They then demo Magic Patterns, including a Chrome extension that can select an element directly from a live website (e.g., ChatPRD) and convert the underlying HTML/styling into reusable components that can be versioned and upgraded across prototypes.
  4. The conversation closes with team adoption tactics (empathy, positioning prototypes as communication artifacts), practical workflow discipline (checkpoints/versions/forks), and a debugging prompt pattern: ask the AI to explain what’s happening before writing code.

IDEAS WORTH REMEMBERING

5 ideas

Start with components, not full screens.

Instead of prompting an AI tool to recreate an entire view, first force it to generate a library of primitives (logo, nav, cards, buttons). New screens then become composition tasks, producing more consistent results.

Use screenshots to bootstrap a brand-consistent UI kit quickly.

Colin repeatedly feeds screenshots and prompts “continue adding components,” extracting recurring UX patterns. This builds a shared component set that makes prototypes look like the real product (or a close facsimile) without manual Figma work.

Forking separates “design system assets” from “prototype experiments.”

Keep a master project as the component library, then fork it to build specific flows. This prevents accidental changes to the underlying primitives while enabling rapid iteration on screens.

Aim for “recognizable fidelity,” not pixel perfection.

The goal is to avoid distracting stakeholders with unfamiliar UI, not to match every icon or image exactly. Close-enough fidelity helps teams focus on the new feature concept rather than the prototype’s visual inaccuracies.

Extracting from a live site can replace costly design-engineering help.

Magic Patterns’ Chrome extension lets you click a UI element on your site, capture its HTML/styling, and convert it into a reusable component—reducing dependence on engineers to manually package design-system code for prototyping tools.

WORDS WORTH SAVING

5 quotes

The concept here is actually pretty simple… creating these components first, rather than starting with your views.

— Colin Matthews

It is still a little challenging… The goal is typically to represent the product in a way that doesn't make people feel like you're talking about a different topic.

— Colin Matthews

Don’t think about improving the composed application, actually think about improving the components, and then the composed application can follow downstream from that.

— Claire Vo

When you've got something that works, the number one mistake is to keep vibe coding without a checkpoint or a commit or a version.

— Claire Vo

Explain to me why this is happening. Don’t write any code.

— Colin Matthews

Component-library-first prototypingScreenshot-to-components extractionForking to protect baselinesBrand/design-system consistency vs pixel-perfectMagic Patterns Chrome extension (DOM/HTML capture)Component versioning and “upgrade to latest”Prompting discipline and debugging without coding

High quality AI-generated summary created from speaker-labeled transcript.

Get more out of YouTube videos.

High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.

Add to Chrome