25 subscribers
با برنامه Player FM !
How to build prototypes that actually look like your product | Colin Matthews (Product leader, AI prototyping instructor at Maven)
Manage episode 491652009 series 3660816
Colin Matthews is a product manager, founder, and hobbyist engineer. After spending the past eight years in healthtech, he recently left his role as a PM at Datavant to go full-time on building his own products. He is currently a top Maven instructor, helping PMs build their first AI prototype. In this episode, he shares a step-by-step workflow for creating component libraries from screenshots that stay true to your brand and reveals a clever Chrome extension trick for extracting code from any website to build reusable components.
What you’ll learn:
1. How to create component libraries from screenshots that match your brand’s design system
2. A Chrome extension that can extract components directly from any website with a single click
3. Why forking prototypes is the key to efficient iteration without breaking your baseline
4. The structured prompting technique that makes AI tools actually listen to your instructions
5. How to introduce AI prototyping to your team without stepping on designers’ toes
6. The debugging approach that solves 90% of AI prototyping errors
—
Brought to you by:
WorkOS—Make your app enterprise-ready today
Notion—The best AI tools for work
—
Go deeper with Colin’s in-depth post in Lenny’s Newsletter:
https://www.lennysnewsletter.com/p/how-to-get-your-entire-team-prototyping
—
Where to find Colin Matthews:
LinkedIn: https://www.linkedin.com/in/colinmatthews-pm/
Tech For Product newsletter: https://colinmatthews.substack.com/
Tech For Product one-day team workshop: https://teams.techforproduct.com/
Maven course: AI Prototyping for PMs: https://bit.ly/3FQgZmw
—
Where to find Claire Vo:
ChatPRD: https://www.chatprd.ai/
Website: https://clairevo.com/
LinkedIn: https://www.linkedin.com/in/clairevo/
—
In this episode, we cover:
(00:00) Introduction to Colin Matthews
(02:46) Creating component libraries from screenshots in v0
(05:50) Using prompts to extract components from existing products
(06:31) Building an Airbnb prototype from component libraries
(11:36) Using the Magic Patterns Chrome extension to extract components directly from websites
(18:38) The importance of improving components rather than the composed application
(20:15) Using forks and versions for iterative prototyping
(25:05) Managing team dynamics when introducing AI prototyping
(26:54) Final thoughts
—
Tools referenced:
• v0: https://v0.dev/
• Magic Patterns: https://magicpatterns.com/
• Magic Patterns Chrome Extension: https://chromewebstore.google.com/detail/html-to-react-figma-by-ma/chgehghmhgihgmpmdjpolhkcnhkokdfp?hl=en
• Cursor: https://cursor.sh/
• ChatGPT: https://chat.openai.com/
• Bolt: https://bolt.new/
—
Other references:
• Colin’s AI prototyping prompt library: https://technical-foundations.notion.site/16c8fafdb669800ea6eeca11f40d046c?v=16c8fafdb6698069a6e4000c84a9ff2c
• Airbnb: https://www.airbnb.com/
• Notion: https://www.notion.so/
• Amplitude: https://amplitude.com/
• PostHog: https://posthog.com/
• Figma: https://www.figma.com/
• GitHub: https://github.com/
—
Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email jordan@penname.co.
18 قسمت
Manage episode 491652009 series 3660816
Colin Matthews is a product manager, founder, and hobbyist engineer. After spending the past eight years in healthtech, he recently left his role as a PM at Datavant to go full-time on building his own products. He is currently a top Maven instructor, helping PMs build their first AI prototype. In this episode, he shares a step-by-step workflow for creating component libraries from screenshots that stay true to your brand and reveals a clever Chrome extension trick for extracting code from any website to build reusable components.
What you’ll learn:
1. How to create component libraries from screenshots that match your brand’s design system
2. A Chrome extension that can extract components directly from any website with a single click
3. Why forking prototypes is the key to efficient iteration without breaking your baseline
4. The structured prompting technique that makes AI tools actually listen to your instructions
5. How to introduce AI prototyping to your team without stepping on designers’ toes
6. The debugging approach that solves 90% of AI prototyping errors
—
Brought to you by:
WorkOS—Make your app enterprise-ready today
Notion—The best AI tools for work
—
Go deeper with Colin’s in-depth post in Lenny’s Newsletter:
https://www.lennysnewsletter.com/p/how-to-get-your-entire-team-prototyping
—
Where to find Colin Matthews:
LinkedIn: https://www.linkedin.com/in/colinmatthews-pm/
Tech For Product newsletter: https://colinmatthews.substack.com/
Tech For Product one-day team workshop: https://teams.techforproduct.com/
Maven course: AI Prototyping for PMs: https://bit.ly/3FQgZmw
—
Where to find Claire Vo:
ChatPRD: https://www.chatprd.ai/
Website: https://clairevo.com/
LinkedIn: https://www.linkedin.com/in/clairevo/
—
In this episode, we cover:
(00:00) Introduction to Colin Matthews
(02:46) Creating component libraries from screenshots in v0
(05:50) Using prompts to extract components from existing products
(06:31) Building an Airbnb prototype from component libraries
(11:36) Using the Magic Patterns Chrome extension to extract components directly from websites
(18:38) The importance of improving components rather than the composed application
(20:15) Using forks and versions for iterative prototyping
(25:05) Managing team dynamics when introducing AI prototyping
(26:54) Final thoughts
—
Tools referenced:
• v0: https://v0.dev/
• Magic Patterns: https://magicpatterns.com/
• Magic Patterns Chrome Extension: https://chromewebstore.google.com/detail/html-to-react-figma-by-ma/chgehghmhgihgmpmdjpolhkcnhkokdfp?hl=en
• Cursor: https://cursor.sh/
• ChatGPT: https://chat.openai.com/
• Bolt: https://bolt.new/
—
Other references:
• Colin’s AI prototyping prompt library: https://technical-foundations.notion.site/16c8fafdb669800ea6eeca11f40d046c?v=16c8fafdb6698069a6e4000c84a9ff2c
• Airbnb: https://www.airbnb.com/
• Notion: https://www.notion.so/
• Amplitude: https://amplitude.com/
• PostHog: https://posthog.com/
• Figma: https://www.figma.com/
• GitHub: https://github.com/
—
Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email jordan@penname.co.
18 قسمت
Alle episoder
×
1 How a VC and tech founder used AI to launch a brick-and-mortar business in their spare time | Andrew Mason (CEO of Descript) & Nabeel Hyatt (Partner at Spark Capital) 48:54

1 How Block’s custom AI agent supercharges every team, from sales to data to engineering | Jackie Brosamer & Brad Axen 46:31

1 Successfully coding with AI in large enterprises: Centralized rules, workflows for tech debt, and training your team | Zach Davis (Director of Engineering at LaunchDarkly) 44:56

1 How this PM streamlines 60k-page FDA submissions and saves millions with Claude, Streamlit, and clever AI workflows | Prerna Kaul 45:12

1 Mastering ChatGPT: Advanced techniques for workplace communication and productivity | Hiten Shah 42:53

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

1 How a 91-year-old vibe coded a complex event management system using Claude and Replit | John Blackman 40:28

1 A designer's guide to Cursor: How to build interactive prototypes with sound, explore visual styles, and transform data visualizations | Elizabeth Lin 35:07

1 Gamma’s head of design shares how his small team uses AI to synthesize feedback, generate on-brand imagery, and maintain design quality while serving users in 60+ countries | Zach Leach 36:20

1 The exact AI playbook (using MCPs, custom GPTs, Granola) that saved ElevenLabs $100k+ and helps them ship daily | Luke Harries (Head of Growth) 44:24

1 How custom GPTs can make you a better manager | Hilary Gridley (Head of Core Product at Whoop) 36:08

1 A designer's guide to AI: Why designing in Cursor lets you prototype 10x faster, simplifies collaboration, and accelerates getting ideas out of your head | Joel Unger 20:55

1 Vibe coding a 3D multiplayer game in 15 minutes—with no game dev experience | Cody De Arkland (Senior Director of Developer Experience at Sentry) 31:32

1 How this former NYT columnist uses ChatGPT to brainstorm ideas, do research, and find the perfect metaphor | Farhad Manjoo 25:45

1 Gumroad CEO's playbook to 40x his team's productivity with v0, Cursor, and Devin | Sahil Lavingia 45:13

به Player FM خوش آمدید!
Player FM در سراسر وب را برای یافتن پادکست های با کیفیت اسکن می کند تا همین الان لذت ببرید. این بهترین برنامه ی پادکست است که در اندروید، آیفون و وب کار می کند. ثبت نام کنید تا اشتراک های شما در بین دستگاه های مختلف همگام سازی شود.