scripod.com

How to build prototypes that actually look like your product | Colin Matthews (Product leader, AI prototyping instructor at Maven)

How I AI

2025/06/30
How I AI

How I AI

2025/06/30
In this episode, Claire Vo sits down with Colin Matthews to explore how AI-powered prototyping is transforming the way product teams build and iterate on user interfaces. The conversation dives into practical techniques that empower product managers to create high-fidelity, brand-aligned prototypes without relying heavily on design or engineering resources.
Colin shares a systematic approach to building component libraries from screenshots using AI tools like v0 and Bolt, ensuring prototypes align with brand design systems. By leveraging targeted prompts, teams can extract reusable UI elements—such as logos and navigation bars—from existing products. A key tool highlighted is the Magic Patterns Chrome extension, which pulls code directly from any website into modular components. He emphasizes forking prototypes to safely experiment while preserving baseline versions, enabling efficient iteration. Rather than improving entire applications, Colin advocates refining individual components to reduce reliance on complex prompting. For team adoption, he stresses empathy and collaboration, positioning AI as a tool to amplify—not replace—designers’ work. Finally, a structured debugging method is introduced: having AI explain errors before generating fixes, which resolves most issues efficiently. These strategies form part of a broader framework aimed at making AI prototyping accessible, scalable, and team-friendly.
05:24
05:24
Extracting UI components from screenshots ensures brand consistency in AI prototypes
05:51
05:51
Use the fork feature to copy the project without modifying the component library.
09:21
09:21
Building blocks from real components improve prototyping accuracy and team adoption.
16:56
16:56
AI reassembles imported code into functional, reusable components
18:38
18:38
Iterating on primitives and composition reduces reliance on prompting.
22:45
22:45
Make checkpoints when something works, fork when exploring new ideas.
25:05
25:05
These tools can be used by anyone on the team to improve communication and speed.
27:02
27:02
Ask the AI to explain the issue before writing code to fix it.