How I AI: Colin Matthews' Workflows for Prototyping with Your Brand's UI
Learn how to transform screenshots into fully functional component libraries with v0 and instantly extract code from any website with a clever Chrome extension trick. Product expert Colin Matthews shares his step-by-step AI workflows for creating high-fidelity prototypes that perfectly match your brand.
Claire Vo
Welcome back to How I AI. I'm your host, Claire Vo, and if there's one word that's giving 'vibe code' a run for its money this year, it's 'prototype.' As product people, we've been supercharged by a new wave of chat-based tools that let us bring ideas to life faster than ever before. The only problem? These tools tend to spit out generic, monochrome designs that don’t look anything like our actual product, which makes it really tough to get buy-in from the rest of the team.
That's why I was so excited to sit down with Colin Matthews, a PM, founder, and a top instructor on Maven who has mastered the art of structured AI prototyping. He’s figured out how to solve this exact problem—how to make AI prototypes that not only work well but also look and feel just like your product. I know this pain personally from trying to bring these new tools into a bigger company that already has a well-established design system.
In our chat, Colin walks us through his entire playbook. He shows us how to create solid component libraries from simple screenshots, a fantastic Chrome extension that rips components directly from any website, and why forking is the most important concept you need to adopt for sane, iterative design. If you’ve ever had that sinking feeling presenting a prototype that just doesn't capture your brand's feel, then you’re going to love this conversation.
Workflow 1: Building a Component Library from Screenshots in v0
Getting AI prototypes to look on-brand is probably the biggest first hurdle for most of us. Colin’s solution is to flip the process around. Instead of building pages first, he starts by building the foundational 'Lego bricks'—the component library. This ensures every prototype you generate already speaks your brand's visual language.
Step 1: The Master Prompt
Instead of starting with a prompt like "create a homepage," Colin begins by instructing the AI to create a component library based on a screenshot of an existing product. He uses a detailed master prompt that sets the stage for the entire project. This first instruction is what guides the AI away from its default of building full pages.
He shared his go-to prompt for v0, which you can find in his AI prototyping prompt library and adapt for your own use:
You are tasked with creating a component library based on a screenshot, using NextJs, React, and Tailwind CSS. All components should be custom-made to match the screenshot as closely as possible. Follow these instructions carefully:
1. Analyze the provided screenshot
2. Identify distinct UI components in the screenshot. These may include, but are not limited to:
◦ Buttons
◦ Input fields
◦ Navigation bars
◦ Cards
◦ Modals
◦ Typography elements
3. For each identified component:
a. Create a React functional component
b. Use Tailwind CSS classes to style the component, matching the visual design in the screenshot
c. Ensure the component is responsive and accessible
d. Add any necessary props for customization
e. Include a brief comment describing the component's purpose
4. After creating all individual components, create an index page that imports and displays each component with example usage.
Remember to use only custom-made components and Tailwind CSS classes. Do not use any external libraries or pre-built components. Strive to match the visual design in the screenshot as closely as possible while maintaining good coding practices and component reusability.
Step 2: Iterating with Screenshots
Once the initial library is set up, Colin feeds the AI more screenshots from different parts of the application (Airbnb in our example). With each new screenshot, he prompts: Please continue adding components. The AI then identifies new UI elements—like property cards, rating systems, or navigation bars—and adds them to the library. It’s a manual process, but it’s a really effective way to build out a complete set of on-brand components.
Step 3: Forking to Build Your Prototype
With a solid component library in place, you're ready to build. But here’s a crucial tip: never work directly on your component library. Colin uses v0's "Fork" feature to create a clean copy of the project. This preserves the original library as a reusable asset that you or your teammates can use for future prototypes, making sure everything stays consistent across different explorations.
Step 4: Assembling the View
Now, in your forked project, you can finally ask the AI to build a page. Colin used a simple prompt:
create a homepage for AirbnbBecause you did the prep work, the AI has a massive head start. Instead of generating generic UI, it pulls from the custom components you've already created. The result is a high-fidelity prototype that looks remarkably like the real thing. If it needs a component that doesn't exist, it will create one, but most of the page is assembled from your pre-approved, on-brand elements. The final page looked almost identical to the real Airbnb site. I was blown away.
Workflow 2: Instantly Rip Components with the Magic Patterns Chrome Extension
The screenshot method works great, but it can take some time. If you want to move even faster, Colin showed me a tool that honestly feels like magic: the Magic Patterns Chrome Extension. This workflow lets you skip the screenshots and extract production-ready components directly from any live website.
Step 1: Select and Extract
The process couldn't be simpler. You go to your own product's website (or any site for inspiration!), fire up the Magic Patterns extension, and click on any UI element you want to grab. In the demo, Colin went to my own site, ChatPRD, clicked on a table component, and instantly pulled it out.
Step 2: Convert to a Reusable Component
Once you’ve extracted an element, Magic Patterns takes the raw HTML and CSS and uses AI to regenerate it as a clean, reusable React component. You can then add it directly to your component library within the tool. The AI prompt in the background is basically, "Here's the code from the website; rebuild it as a proper component that can accept data."
This is a huge deal for product managers and designers. You no longer have to ask a front-end engineer to pull code for you or try to recreate components from scratch. You can build out your entire design system in minutes just by clicking around your own website.
Step 3: Improve the Primitives, Not the Output
This whole workflow really drives home a new way of thinking I've been trying to adopt. When you're working with AI, instead of obsessing over tweaking the final output, you should focus on making the building blocks better. By creating high-quality, reusable components, you give the AI less heavy lifting to do. The assembly process becomes more reliable, you get fewer errors, and you can stop playing the frustrating game of "prompt incantations." Your prototypes become a direct reflection of the quality of your component library.
Workflow 3: Structured Iteration with Forks and Debugging
Whether you're using v0 or Magic Patterns, you need a structured way to iterate. Vibe coding is fun until you break something and can't get back to a working version. Colin's approach, borrowed from software engineering, brings some welcome order to the creative chaos.
Use Forks for Exploration
Magic Patterns offers a visual canvas, similar to Figma, where each chat-based prototype exists as a frame. When you have a version you like (a "baseline"), you simply duplicate it. Colin recommends a clear naming convention:
- Baseline: The clean, working version of your current product screen.
- Var 1 - [Feature Name]: A fork to explore a new idea.
- Var 2 - [Another Approach]: A different fork to explore an alternative.
This lets you explore multiple creative directions in parallel without ever losing your stable starting point. It's like a modern version of design_final_v2_FINAL_really_this_one.psd, but with all the power of interactive code.
The Ultimate Debugging Prompt
But what happens when the AI doesn't listen? We've all been there. You ask it to delete an element, and it stubbornly stays put. Instead of getting angry or trying a meaner prompt, Colin gets structured. He uses a two-step process:
- Diagnose First: Ask the AI to explain the problem without writing any code. This forces the model to analyze the situation and figure out the root cause.
- Implement Second: Once you understand the 'why,' you can ask for the solution.
His go-to prompt for this is simple and works incredibly well:
Tried to delete this but it didn't work. Can you explain why? Don't write any code.
This explain, then solve pattern works for visual glitches, runtime errors, and pretty much any other unexpected behavior. It’s like asking the AI to think before it acts. You get much more reliable results than when you let it just jump straight to writing code.
Conclusion: A New Era of Empowered Prototyping
The workflows Colin shared really feel like a shift in how we can approach product development. By creating structured, reusable component libraries, we bridge the gap between generic AI outputs and our unique brand identities. The goal here isn't to replace designers or engineers. It's about giving everyone on the team—from product to ops to customer success—a way to communicate their ideas with more detail and clarity.
The big takeaways for me were to build your component library first, use tools like the Magic Patterns Chrome Extension to speed things up, and adopt engineering concepts like forking and structured debugging. By focusing on improving your building blocks, you create a system where the AI consistently works for you, helping you explore, iterate, and build better products, faster.
I’m definitely taking these techniques back to my team. I encourage you to try them too—start with one component and see where it takes you!
---
Brought to you by
A huge thank you to our sponsors for making this episode possible:
- WorkOS—Make your app Enterprise Ready today
- Orkes—The enterprise platform for reliable applications and agentic workflows
---
