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

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 about