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 ChatPRD 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 chat-based 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 then send it to you, or customer success could use these tools. There's no limit on who's allowed to have ideas. [upbeat 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 gonna 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 copilot needs to see your entire code base. 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 WorkOS comes in. WorkOS gives you drop-in APIs for enterprise features, so your app can become enterprise-ready and scale upmarket faster. Think of it like Stripe for enterprise features. OpenAI, Perplexity, and Cursor are already using WorkOS 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.