How I AI

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

  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 system2. A Chrome extension that can extract components directly from any website with a single click3. Why forking prototypes is the key to efficient iteration without breaking your baseline4. The structured prompting technique that makes AI tools actually listen to your instructions5. How to introduce AI prototyping to your team without stepping on designers’ toes6. The debugging approach that solves 90% of AI prototyping errors—Brought to you by:WorkOS—Make your app enterprise-ready todayNotion—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/X: https://x.com/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 [email protected].

  --------  

  32:07
• How a 91-year-old vibe coded a complex event management system using Claude and Replit | John Blackman

  John Blackman, a 91-year-old retired electrical engineer, shares how he used Claude and Replit to build a complex application for his church’s community service events—with no prior software development experience and for less than $350. His app allows event organizers to create events, recruit volunteers, and manage sign-ups, with a standout feature for organizing free oil changes for participants.What you’ll learn:How John used Claude to create detailed product requirements and user storiesJohn’s philosophy on embracing new technology throughout his careerThe exact process for integrating third-party APIs (like VIN lookup for oil changes) with minimal technical knowledgeHow he automated report generation for volunteer management and resource planningHow the software generates personalized Impact Passports for event participantsWhy letting AI build without preconceived notions of “correct” implementation can lead to faster, more functional resultsHow to troubleshoot common development-to-production issues when working with AI coding tools—Brought to you by:WorkOS—Make your app enterprise-ready todayOrkes—The enterprise platform for reliable applications and agentic workflows—Where to find John Blackman:Website: http://johnbeng.com/—Where to find Claire Vo:ChatPRD: https://www.chatprd.ai/Website: https://clairevo.com/LinkedIn: https://www.linkedin.com/in/clairevo/X: https://x.com/clairevo—In this episode, we cover:(00:00) Introduction to John Blackman and his background(02:55) John’s impressive career(03:59) How the church project started(05:06) Using Claude to create a development roadmap and requirements document(07:29) The concept of the Impact Passport for event participants(08:57) Generating user stories and requirements with Claude(10:32) The multi-tenant architecture with system and local church administrators(12:54) Building the application with Replit(13:32) Demo of the administrator interface and event management features(17:56) Specialized reports for different services (food pantry, vision center, oil changes)(20:30) The participant registration flow with QR code scanning(21:55) Adding new features like volunteer name tag generation(24:40) Troubleshooting AI “rabbit trails” during development(26:09) Challenges moving from development to production(27:13) John’s lack of coding experience(29:42) The advantage of having no preconceived notions about implementation(30:25) Total development costs and timeline(31:31) Impact and reception from the church community(32:42) Lightning round and final thoughts—Tools referenced:• Claude: https://claude.ai/• Replit: https://replit.com/• SendGrid: https://sendgrid.com/• AutoCAD: https://www.autodesk.com/products/autocad/—Other references:• OpenAI API: https://openai.com/api/• VIN (vehicle identification number): https://en.wikipedia.org/wiki/Vehicle_identification_number• Multi-tenant architecture: https://en.wikipedia.org/wiki/Multitenancy• Role-based access control: https://en.wikipedia.org/wiki/Role-based_access_control• Excel: https://www.microsoft.com/en-us/microsoft-365/excel• Docusign: https://www.docusign.com/—Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].

  --------  

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

  Elizabeth Lin is an independent design educator who has crafted learning experiences for Khan Academy, Primer, and Lambda School. She currently runs design is a party, an alternative online design school where she teaches courses like The Art of Visual Design and Prototyping with Cursor. In this episode, she shares how designers can leverage Cursor to create interactive prototypes with sound, explore different visual aesthetics, and transform basic designs into polished interfaces—all without deep coding knowledge.What you'll learn:How to use Cursor to explore different design aesthetics—from brutalist to Y2K to cyberpunkA simple workflow for creating interactive sound elements in prototypes that would be difficult with traditional design toolsA step-by-step process for transforming an ugly dashboard into a polished design using strategic promptingWhy broadening your inspiration sources helps Cursor generate more unique and creative designTechniques for teaching AI tools to understand your design preferences and tasteA practical approach to creating data-driven prototypes by connecting Cursor with Notion databasesHow to use Cursor Rules to streamline your prototyping workflow and avoid repetitive setup tasks—Brought to you by:Lovable—Build apps by simply chatting with AIRetool—AI that's designed for developers, and built for the enterprise—Where to find Elizabeth Lin:Website: https://www.lalizlabeth.com/LinkedIn: https://www.linkedin.com/in/elizabethylin/X: https://x.com/lalizlabeth—Where to find Claire Vo:ChatPRD: https://www.chatprd.ai/Website: https://clairevo.com/LinkedIn: https://www.linkedin.com/in/clairevo/X: https://x.com/clairevo—In this episode, we cover:(00:00) Introduction to Elizabeth(02:20) Demo: Exploring different visual styles with Cursor(08:20) Comparing different design iterations from the same prompt(12:35) Building a working piano prototype with one prompt(16:30) Understanding what’s happening behind the scenes(18:28) Practical design team scenarios using Cursor(21:00) Step-by-step walkthrough of transforming an ugly finance dashboard(27:29) Using targeted prompts to improve layout and visual design(29:22) Building data-driven prototypes powered by Notion databases(31:12) Lightning round and final thoughts—Tools referenced:• Cursor: https://cursor.sh/• Notion: https://www.notion.so/• v0: https://v0.dev/• ChatGPT: https://chat.openai.com/—Other references:• Edward Tufte: https://www.edwardtufte.com/• Robinhood: https://robinhood.com/• Cash App: https://cash.app/• Stripe: https://stripe.com/• Neopets: https://www.neopets.com/• Goodreads: https://www.goodreads.com/• Shad CN: https://ui.shadcn.com/• Sketch: https://www.sketch.com/• Figma: https://www.figma.com/• Goodreads: https://www.goodreads.com/—Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].

  --------  

  35:07
• 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

  Zach Leach, head of design at Gamma, reveals how his small team uses AI to analyze global feedback, create on-brand imagery, and maintain design quality while serving users in more than 60 countries.What you’ll learn:How Gamma analyzes feedback from their 60% international user base using ChatGPT’s deep research capabilitiesHow to transform hundreds of multilingual feedback items into actionable design insightsA simple workflow for creating on-brand imagery using Midjourney-style referencesHow to use AI to maintain brand consistency across a globally distributed productThe secret to removing image backgrounds instantly using ReplicateHow to create consistent, high-quality job descriptions in minutes using AI templates—Brought to you by:WorkOS—Make your app enterprise-ready todayRetool—AI that’s designed for developers and built for the enterprise—Where to find Zach Leach:LinkedIn: https://www.linkedin.com/in/zleachX: https://x.com/thisiszach—Where to find Claire Vo:ChatPRD: https://www.chatprd.ai/Website: https://clairevo.com/LinkedIn: https://www.linkedin.com/in/clairevo/X: https://x.com/clairevo—In this episode, we cover:(00:00) Intro(02:42) Building the Gamma AI image editing feature(05:25) Using ChatGPT’s deep research for feedback analysis(09:10) How feedback was analyzed before AI tools(10:10) Benefits of deep research vs. basic scripting(12:40) Insights from ChatGPT's deep research(16:41) Demo of Midjourney workflow for creating on-brand art(23:54) Using Replicate for background removal(25:40) Style references (SREF) and brand consistency in Midjourney(29:19) An AI workflow for creating consistent job descriptions(32:27) Conclusion and final thoughts—ChatGPT feedback prompt“This is some feedback we’ve received about our AI image editing feature. I want you to analyze the feedback and find where we are doing poorly and where we are doing well. Break down for our product team what kinds of things we are doing well and why, and what kinds of things we are doing poorly and why. What do people love? What do people hate? Where can we improve?”—Tools referenced:• Gamma: https://gamma.app/• ChatGPT: https://chat.openai.com/• Midjourney: https://www.midjourney.com/• Midjourney Style Reference (SREF): https://docs.midjourney.com/hc/en-us/articles/32180011136653-Style-Reference• Replicate: https://replicate.com/• Figma: https://www.figma.com/• Claude Projects: https://claude.ai/projects• GPT 4o image model https://openai.com/index/introducing-4o-image-generation/—Other reference:• LaunchDarkly: https://launchdarkly.com/—Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].

  --------  

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

  Luke Harries, Head of Growth at ElevenLabs, the leading AI voice technology company, shares how he’s automating marketing workflows with AI—from case studies to translations to WhatsApp integrations—saving his company over $140,000 while making everything a launch.What you’ll learn:1. How to create polished case studies in minutes using AI transcription and a custom GPT2. How ElevenLabs built a custom AI translation system that saved them $140,000 annually and eliminated agency headaches3. How to use Model Context Protocols (MCPs) to connect AI assistants to your WhatsApp messages4. The “everything is a launch” philosophy that helps ElevenLabs maintain consistent marketing momentum5. Why marketers should learn to code with AI tools like Cursor6. How to create effective custom GPTs by focusing on prompt engineering rather than output editing—Brought to you by:Orkes—The enterprise platform for reliable applications and agentic workflowsRetool—AI that’s designed for developers, and built for the enterprise—Where to find Luke Harries:Website: https://harries.co/LinkedIn: https://www.linkedin.com/in/luke-harries/GitHub: https://github.com/lharriesX: https://x.com/lukeharries—Where to find Claire Vo:ChatPRD: https://www.chatprd.ai/Website: https://clairevo.com/LinkedIn: https://www.linkedin.com/in/clairevo/X: https://x.com/clairevo—In this episode, we cover:(00:00) Intro(02:41) The future of AI in marketing(04:22) Using Granola and custom GPTs to write case studies(12:10) Generating tweet threads using ChatGPT(13:58) Building case studies into a systematic workflow(15:14) Best practices for prompt engineering(19:39) Building a custom translation system that saved $140k(25:10) Open sourcing the translation solution(29:47) Building a WhatsApp MCP(38:07) Creating specialized AI agents on demand(41:08) Lightning round and final thoughts—Tools referenced:• Granola: https://www.granola.ai/• ChatGPT: https://chat.openai.com/• Cursor: https://www.cursor.com/• Claude: https://claude.ai/• ElevenLabs: https://elevenlabs.io/• WhatsApp: https://www.whatsapp.com/• GitHub: https://github.com/• Zapier: https://zapier.com/• Calendly: https://calendly.com/• Salesforce: https://www.salesforce.com/—Other references:• MCP (Model Context Protocol): https://www.anthropic.com/news/model-context-protocol• WhatsApp MCP repo: https://github.com/lharries/whatsapp-mcp• Whatsmeow library: https://github.com/tulir/whatsmeow• LaunchDarkly: https://launchdarkly.com/• Introducing ElevenLabs MCP: https://elevenlabs.io/blog/introducing-elevenlabs-mcp• Ordering a pizza using the ElevenLabs MCP server: https://x.com/elevenlabsio/status/1909300782673101265• Chess.com: https://www.chess.com/• Lovable: https://lovable.ai/• v0: https://v0.dev/• Figma: https://www.figma.com/• Launch and launch again — how to launch your products: https://harries.co/launch-your-product• Your first growth hire: https://harries.co/first-growth-hire—Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].

  --------  

  44:24

More Technology podcasts

Trending Technology podcasts

About How I AI