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

CVClaire VohostCMColin Matthewsguest

Jun 30, 2025·32m·Watch on YouTube ↗

📖 CHAPTERS

1. 1

   Why AI prototypes fail inside companies: brand mismatch and low adoption

   Claire frames the core problem: chat-based prototyping tools empower PMs, but their outputs rarely match an organization’s design system, which frustrates designers and engineers and reduces adoption. Colin previews a component-first approach to make AI prototypes look and feel like the real product.

2. 2

   Component-first prototyping: build the LEGO set before the screens

   Colin introduces the main concept: start by creating a reusable component library rather than generating full pages/views. This approach is tool-agnostic (works beyond v0/Bolt) and improves consistency, reuse, and reliability when assembling new screens later.

3. 3

   Creating a component library from screenshots in v0

   Colin demonstrates a workflow in v0 where he repeatedly feeds screenshots to extract UI elements into individual components. Over time, the library grows by iterating: “continue adding components” from page-to-page screenshots.

4. 4

   Prompt techniques to reliably extract components (not whole pages)

   They discuss how prompting affects outcomes: the model often tries to recreate entire views unless constrained. Colin emphasizes being explicit and persistent so the output becomes a list of components rather than a composed application.

5. 5

   Assembling an Airbnb homepage from the component library (via forking)

   Colin shows how to fork the component library project to preserve the pristine components while generating new screens. He prompts the fork to “Create a homepage for Airbnb,” and the system composes a new page using existing components, adding missing ones as needed.

6. 6

   Quality bar: not pixel-perfect, but unmistakably ‘the product’

   Claire asks about fidelity; Colin clarifies the target is recognition and credibility, not perfect replication. The purpose is to keep reviewers focused on the new idea (e.g., an AI feature) instead of being distracted by an unfamiliar UI.

7. 7

   Reducing errors by improving modular components (stitching vs. spaghetti)

   Colin notes prototypes become more stable when built from modular parts because the AI mostly “stitches” rather than invents large structures. This improves the onboarding experience for teammates who otherwise hit repeated errors in tools like v0/Bolt.

8. 8

   Magic Patterns: generating product-faithful UI from a prebuilt component set

   Colin introduces Magic Patterns and demonstrates prompting it to build an AI chat interface resembling ChatPRD. Behind the scenes, it installs predefined components and wraps them into higher-level UI, enabling fast iteration with strong brand alignment.

9. 9

   Chrome extension workflow: extract components directly from a live website

   Colin shows the Magic Patterns Chrome extension: click an element on the real site, extract the HTML/styling, then convert it into a reusable component and publish it to a library. This bypasses the common bottleneck of asking engineers to package UI for prototyping.

10. 10

    Versioning and upgrades: treat components as evolving team assets

    They discuss managing components over time: improve individual components and propagate updates into older prototypes via “upgrade to latest.” This reframes effort from one-off prototypes to reusable assets maintained for long-term leverage.

11. 11

    Forks, baselines, and variants: a disciplined workflow for exploration

    Colin demonstrates a Figma-like project canvas where each chat/prototype can be duplicated and forked. Claire highlights best practices—checkpoints, versions, and forks—to prevent vibe-coding chaos and enable side-by-side comparison of variants.

12. 12

    Team dynamics: introducing AI prototyping without triggering role conflict

    Claire asks how to implement this in real organizations; Colin emphasizes empathy and positioning prototypes as communication tools, not replacements for designers/engineers. He advocates widening who can prototype (ops, CS) while letting engineering adopt outputs only if useful.

13. 13

    When AI won’t listen: debugging by forcing explanation before code

    Colin shares his most reliable tactic: ask the AI to explain why something is happening and explicitly instruct it not to write code. Claire adds a variant: ask for top hypotheses in priority order—useful for errors and stubborn UI changes.

14. 14

    Wrap-up: where to learn more and how Colin helps teams operationalize this

    Colin shares resources: a Maven course on AI prototyping for PMs and a team workshop offering that delivers component libraries and baseline prototypes. Claire closes with standard show outro and ways to follow the podcast.