Kapitelklicken springt direkt hin
Shownotes
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.
What you’ll learn:
• How Brian built a shared Next.js app that serves as a collaborative prototyping environment for Notion’s design team
• Why encountering “reality” early in the design process leads to better products
• How to use Claude Code’s “plan mode” to get better results when prototyping
• The power of custom Claude slash commands and skills to automate repetitive tasks
• How to transform Figma designs into working code with a single prompt
• Why AI-powered products can’t be effectively designed in static tools like Figma
• Brian’s rule for working with AI: “When Claude asks you to do something, teach it to do that thing itself”
—
Brought to you by:
WorkOS (workos.com/?utm_source=lennys_howiai&utm_m…)—Make your app enterprise-ready today
Orkes (orkes.io)—The enterprise platform for reliable applications and agentic workflows
—
In this episode, we cover:
() Introduction to Brian
() Building for B2B SaaS
() Notion’s prototype playground: what it is and how it works
() The technical background of designers using the playground
() Demo: building a podcast player prototype
() Actionable tips for better Claude Code results
() Analyzing the result
() Creating slash commands to simplify the workflow
() Turning Figma designs into production-ready code
() MCP frustrations and tips
() Demo: creating a custom “find icon” skill
() Demo: Creating a deploy command to simplify GitHub workflows
() Quick recap
() How code-based prototyping is changing design at Notion
() Brian’s tool preferences
() Prompting techniques when AI is not listening
—
Tools referenced:
• Claude Code: claude.ai
• Cursor: cursor.sh
• Next.js: nextjs.org
• Figma: figma.com
• Monologue: monologue.to
• GitHub: github.com
• GitHub Desktop: desktop.github.com
• Tailwind CSS: tailwindcss.com
• Bun: bun.sh
—
Other references:
• Claude Skills explained: How to create reusable AI workflows: lennysnewsletter.com/p/claude-skills-explained
—
Where to find Brian Lovin:
Website: brianlovin.com
LinkedIn: linkedin.com/in/brianlovin
X: twitter.com/brian_lovin
—
Where to find Claire Vo:
ChatPRD: chatprd.ai
Website: clairevo.com
LinkedIn: linkedin.com/in/clairevo
X: x.com/clairevo
—
Production and marketing by penname.co. For inquiries about sponsoring the podcast, email jordan@penname.co.
