Podcast Summary: How I AI – Episode: "How to Build Prototypes That Actually Look Like Your Product" with Colin Matthews

Released on June 30, 2025

Host: Claire Vo

Introduction

In this engaging episode of How I AI, host Claire Vo welcomes Colin Matthews, a seasoned product leader and AI prototyping instructor at Maven. Together, they delve into the transformative world of AI-powered prototyping tools, exploring how these technologies empower product managers and designers to create more accurate and brand-aligned prototypes without extensive coding or design expertise.

Empowering Product Managers with AI Tools

Claire kicks off the discussion by highlighting the evolution of prototyping tools enabled by AI. Traditionally, creating high-fidelity prototypes required deep coding knowledge or advanced skills in design tools like Figma. However, with the advent of chat-based AI prototyping tools, product managers are now empowered to translate ideas into visual prototypes effortlessly.

Claire Vo [00:20]: "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."

Colin confirms this shift, emphasizing that these AI tools democratize the prototyping process, allowing team members across various departments—operations, customer success, and more—to contribute ideas and create prototypes without bottlenecks.

Colin Matthews [00:48]: "These tools can be used by anyone on the team. There’s no limit on who's allowed to have ideas."

Building a Component Library

A central theme of the episode is the importance of a component library in maintaining design consistency. Colin explains his structured approach to prototyping, which starts with creating a comprehensive library of UI components derived from existing product screenshots.

Colin Matthews [03:41]: "The concept here is actually pretty simple, coming kind of from the design world of having a component library."

By extracting individual components—such as logos, search bars, and buttons—from screenshots, Colin ensures that all future prototypes adhere to the brand's design system. This method not only preserves visual consistency but also streamlines the prototyping process.

Demonstration: Prototyping Airbnb

To illustrate his methodology, Colin walks Claire through a live demonstration using Airbnb as an example. By inputting a screenshot of Airbnb's homepage into the AI tool, he showcases how the system intelligently identifies and extracts various UI components.

Colin Matthews [07:00]: "These tools are selecting the relevant components to use. It’s not just going to import my 30 components into the homepage just for fun."

This approach allows for the rapid assembly of a functional prototype that mirrors the look and feel of the actual product, enabling teams to visualize and test new features seamlessly.

Ensuring Brand and Design Consistency

Claire brings up a critical challenge: ensuring that AI-generated prototypes align with a company’s unique brand and design patterns. Colin acknowledges that while achieving pixel-perfect replicas can be challenging, the goal is to maintain enough visual consistency to reflect the brand accurately without getting bogged down in minor discrepancies.

Colin Matthews [08:44]: "Typically not pixel perfect, it is still a little challenging... The goal is to represent the product in a way that doesn’t make people feel like you’re talking about a different topic."

This balance allows teams to communicate new ideas effectively without the distraction of inconsistent UI elements.

Advanced Tools and Features

Beyond his primary tool, Colin introduces another AI prototyping solution called Magic Patterns. He praises the tool’s design-centric approach and its ability to create more refined components with less manual prompting.

Colin Matthews [11:54]: "There's one other tool that I am currently in love with, which is Magic Patterns... They've built something really special here, I think."

He demonstrates how Magic Patterns automates the assembly of UI components, further enhancing the efficiency and quality of prototypes.

Versioning and Forking Prototypes

A significant advantage of using AI-driven prototyping tools is the ability to manage versions and create forks. Colin explains how these features allow teams to experiment with different design variations without altering the original component library.

Colin Matthews [11:07]: "Using forks allows us to create copies of projects without making changes to the component library, maintaining the integrity of our base design."

This capability facilitates collaborative experimentation and iterative design, essential for refining product features.

Integrating AI Prototyping in Teams

Addressing team dynamics, Colin emphasizes the importance of empathy and collaboration when introducing AI prototyping tools. He advises against expecting designers to merely "clean up" AI-generated prototypes, advocating instead for a team-wide approach where everyone can contribute ideas and iteratively enhance prototypes.

Colin Matthews [25:37]: "It's just about enabling people to do their jobs faster, better, and being a little bit more inclusive with the set of people who can communicate their ideas effectively."

This inclusive strategy fosters a more dynamic and innovative product development environment.

Structured vs. Freeform Prototyping Approaches

When discussing prototyping methodologies, Colin admits his preference for a structured approach over a freeform, reactive one. He shares his experience of maintaining organized prompt libraries and component structures to minimize errors and streamline the prototyping workflow.

Clarie Vo [26:54]: "You are a very structured prototyper... I want to just go where the LLM takes me, ride the wave of the tokens, generate what we will."

Colin Matthews [27:13]: "I'm very structured in how I approach it... I spend less time debugging and more time developing actual features."

This disciplined approach contrasts with more spontaneous methods, highlighting the benefits of organization in achieving reliable and high-quality prototypes.

Handling AI Errors and Challenges

A common challenge with AI tools is managing unexpected elements within prototypes. Colin shares his strategy for addressing such issues, which involves prompting the AI to explain anomalies before requesting specific corrections.

Colin Matthews [28:53]: "My most common prompt is 'Explain to me why this is happening. Don’t write any code.'"

This methodical troubleshooting ensures that AI behaves as intended without introducing negative interactions or unwanted artifacts into the prototype.

Resources and Further Learning

Towards the end of the episode, Colin provides listeners with resources to deepen their understanding of AI prototyping:

• Courses on Maven: Comprehensive training on AI prototyping for product managers.
• Teams.techforproduct.com: One-day workshops for teams to build component libraries and baseline prototypes.
• LinkedIn and Substack: Platforms for more casual insights and updates.

This guidance equips listeners with actionable steps to implement AI-driven prototyping within their own teams and projects.

Conclusion

In this insightful episode, Claire Vo and Colin Matthews explore the potent combination of AI and prototyping, illustrating how modern tools can revolutionize product development. By leveraging component libraries, structured methodologies, and collaborative strategies, teams can create highly consistent and brand-aligned prototypes with unprecedented efficiency. Colin’s expertise provides valuable takeaways for product managers, designers, and anyone interested in harnessing AI to enhance their workflow.

Notable Quotes:

• Claire Vo [00:20]: "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."

• Colin Matthews [03:41]: "The concept here is actually pretty simple, coming kind of from the design world of having a component library."

• Colin Matthews [08:44]: "Typically not pixel perfect, it is still a little challenging... The goal is to represent the product in a way that doesn’t make people feel like you’re talking about a different topic."

• Claire Vo [26:54]: "You are a very structured prototyper... I want to just go where the LLM takes me, ride the wave of the tokens, generate what we will."

• Colin Matthews [28:53]: "My most common prompt is 'Explain to me why this is happening. Don’t write any code.'"

Connect with Colin Matthews:

• Maven Courses: Maven.AI Prototyping for PMs
• Workshops: teams.techforproduct.com
• LinkedIn & Substack: Search for Colin Matthews to access additional insights and updates.

If you enjoyed this episode, subscribe to How I AI on Apple Podcasts, Spotify, or your favorite podcast platform. Leave a rating and review to help others discover the show. Visit howiaipod.com for more episodes and information.