Channel
Interviewed Person
v0
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._
Can you show us how you get these prototyping tools to prototype your product? So, here's our component. All I have to do is click convert to component, throw it into my chat purity library, and now it's going to import basically all of that styling and structure and regenerate it as like a proper component. So, you can see the prompt here is basically all of the code from your website. You used to have to know how to code or get really good at Figma, and now we have unleashed the product manager with these chatbased prototyping tools. you have this prompt that lets you extract those components out of a screenshot. So, I'll say create a homepage for Airbnb and basically
assemble a homepage using those components. You want to match your existing design with a screenshot. You can paste that in to start. Then, you add your new AI feature on top or whatever you want. Oh, look at this. It's Airbnb. These tools can be used by anyone on the team. Your operations team could prototype something and send a team or customer success could use these tools. There's no limit on who's allowed to have ideas. [Music] Welcome back to How I AI. I'm Claire Vo,
product leader and AI obsessive here on a mission to help you build better with these new tools. Yeah. Yeah. The word of the year is vibe code. But if I had to pick a close number two, it would be prototype. That's why I'm excited to have on Colin Matthews, who's going to show product managers and designers how they can take screenshots and turn them into component libraries for your favorite prototyping tool to use. Use a Chrome extension to rip your exact code to pull in to integrate with AI tooling and how to use a fork to bring some
sanity to your AI prototypes and designs. Let's get to it. This episode is brought to you by WorkOS. AI has already changed how we work. Tools are helping teams write better code, analyze customer data, and even handle support tickets automatically. But there's a catch. These tools only work well when they have deep access to company systems. Your co-pilot needs to see your entire codebase. Your chatbot needs to search across internal docs. And for enterprise buyers, that raises serious
security concerns. That's why these apps face intense IT scrutiny from day one. To pass, they need secure authentication, access controls, audit logs, the whole suite of enterprise features. Building all that from scratch, it's a massive lift. That's where work OS comes in. Work OS gives you drop-in APIs for enterprise features so your app can become enterprise ready and scale up market faster. Think of it
like Stripe for enterprise features. OpenAI, Perplexity, and Cursor are already using work OS to move faster and meet enterprise demands. Join them and hundreds of other industry leaders at workos.com. Start building today. Colin, thanks for being here. Yeah, super excited to join. So, one of the things product managers love right now is they are super empowered to prototype. You used to have to know how to code or get really good at Figma and
now we have unleashed the product manager with these kind of chatbased prototyping tools. But one of the problems that I found as somebody who is trying to bring these prototyping tools into a larger company is they're not, at least in my experience, particularly good at replicating your brand, your design system, your patterns. And so you sort of annoy the product managers and engineers first by doing all this work that no one asked you to do. And then two, you're not giving them assets that match the the brand and the design
system. But you seem to have figured this out. So, can you show us how you get these prototyping tools to prototype your product? This concept here is actually pretty simple. Um, comes kind of from the design world of having a component library. So, you can see here I have kind of a mock one of Airbnb. And I'll start by saying that this approach is applicable to any tool. So, it's not like a vzero thing or a bold thing or anything like that. It's just the idea of basically creating these components first rather than starting with your views. Uh so I'll talk a little bit
