Skip to main content
Original: Lenny Rachitsky · 23/02/2026

Summary

Brian Lovin from Notion AI discusses how his team uses Claude Code for collaborative prototyping, enhancing the design process with AI-assisted coding.

Key Insights

“When Claude asks you to do something, teach it to do that thing itself.” — Brian’s rule for working with AI in the design process.
“AI-powered products can’t be effectively designed in static tools like Figma.” — Brian’s insight on the limitations of traditional design tools.
“Encountering reality early in the design process leads to better products.” — Brian emphasizes the importance of early testing in design.

Topics


Full Article

Brian Lovin is a designer at Notion AI who has transformed how the design team builds prototypes, by creating a shared code environment powered by Claude Code. Instead of designers working in isolated repositories or limited to static Figma designs, Brian built a collaborative prototype playground where the entire team can create, share, and iterate on functional prototypes. In this episode, Brian demonstrates how AI-assisted coding has dramatically accelerated the design process and why code-based prototyping is essential for building AI-powered products.Listen or watch on YouTube, Spotify, or Apple PodcastsWhat youll learn:How Brian built a shared Next.js app that serves as a collaborative prototyping environment for Notions design teamWhy encountering reality early in the design process leads to better productsHow to use Claude Codes plan mode to get better results when prototypingThe power of custom Claude slash commands and skills to automate repetitive tasksHow to transform Figma designs into working code with a single promptWhy AI-powered products cant be effectively designed in static tools like FigmaBrians rule for working with AI: When Claude asks you to do something, teach it to do that thing itselfBrought to you by:WorkOSMake your app enterprise-ready todayOrkesThe enterprise platform for reliable applications and agentic workflowsIn this episode, we cover:(00:00) Introduction to Brian(02:36) Building for B2B SaaS(04:42) Notions prototype playground: what it is and how it works(08:01) The technical background of designers using the playground(10:52) Demo: building a podcast player prototype(16:00) Actionable tips for better Claude Code results(20:16) Analyzing the result(20:30) Creating slash commands to simplify the workflow(23:03) Turning Figma designs into production-ready code(25:06) MCP frustrations and tips(30:54) Demo: creating a custom find icon skill(35:03) Demo: Creating a deploy command to simplify GitHub workflows(41:09) Quick recap(41:59) How code-based prototyping is changing design at Notion(46:48) Brians tool preferences(48:42) Prompting techniques when AI is not listeningTools referenced: Claude Code: https://claude.ai/ Cursor: https://cursor.sh/ Next.js: https://nextjs.org/ Figma: https://figma.com/ Monologue: https://www.monologue.to/ GitHub: https://github.com/ GitHub Desktop: https://desktop.github.com/ Tailwind CSS: https://tailwindcss.com/ Bun: https://bun.sh/Other references: Claude Skills explained: How to create reusable AI workflows: https://www.lennysnewsletter.com/p/claude-skills-explainedWhere to find Brian Lovin:Website: https://brianlovin.com/LinkedIn: linkedin.com/in/brianlovinX: https://twitter.com/brian_lovinWhere to find Claire Vo:ChatPRD: https://www.chatprd.ai/Website: https://clairevo.com/LinkedIn: https://www.linkedin.com/in/clairevo/X: https://x.com/clairevoProduction and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email jordan@penname.co.

🎙️ This week on How I AI: How Notion’s design team uses Claude Code to design

Lenny Rachitsky · how-to · 91% similar

From Figma to Claude Code and back | Gui Seiz & Alex Kern (Figma)

Lenny Rachitsky · how-to · 83% similar

🎙️ This week on How I AI: From Figma to Claude Code and back & From journalist to iOS developer

Lenny Rachitsky · how-to · 82% similar