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

​
Summary

Brian Lovin from Notion discusses how the design team utilizes Claude Code for code-first prototyping, enhancing collaboration and efficiency in design workflows.

​
Key Insights

“When Claude asks you to do something, teach it to do that thing itself.” — Brian’s core rule for working with AI.
“Encounter reality as early as possible in the design process.” — Brian’s philosophy on moving designs from sketches to production code.
“Custom slash commands dramatically simplify complex workflows.” — Brian’s approach to making advanced AI techniques accessible to less-technical team members.

​
Topics

​
Full Article

I havent written a single line of front-end code in 3 months: How Notions design team uses Claude Code to designBrought to you by:WorkOSMake your app enterprise-ready todayOrkesThe enterprise platform for reliable applications and agentic workflowsBrian Lovin, a product designer at Notion, built a shared AI-powered prototype playground that lets the entire design team turn Figma designs into working code using Claude Code. Instead of staying in static mockups, the team prototypes directly in a shared Next.js environment connected to real AI modelsso they can test ideas in the browser, catch edge cases early, and design for whats actually possible. In this episode, Brian breaks down how the system works, how he uses plan mode, slash commands, and custom Claude Skills to automate repetitive tasks, and why his core rule for working with AI is simple: when Claude asks you to do something, teach it to do that thing itself.Detailed workflow walkthroughs from this episode: How Notion Designs with AI: Brian Lovins Prototype Playground and Claude Code Workflows: https://www.chatprd.ai/how-i-ai/how-notion-designs-with-ai-brian-lovins-prototype-playground-and-claude-code-workflows Automate Your Git and Deployment Workflow with a Custom AI Command: https://www.chatprd.ai/how-i-ai/workflows/automate-your-git-and-deployment-workflow-with-a-custom-ai-command Build an AI Workflow to Convert Figma Designs to Code with a Self-Correction Loop: https://www.chatprd.ai/how-i-ai/workflows/build-an-ai-workflow-to-convert-figma-designs-to-code-with-a-self-correction-loop Use Claude Code to Rapidly Build Interactive Prototypes from Ideas: https://www.chatprd.ai/how-i-ai/workflows/use-claude-code-to-rapidly-build-interactive-prototypes-from-ideasBiggest takeaways:Designs are shifting to code-first prototyping. While Brian still spends 60% to 70% of his time in Figma, he believes designers increasingly need to understand what AI models can actually do. This requires working with real models in code to design something thats plausible and possible.Encounter reality as early as possible in the design process. Brians philosophy is to move designs from napkin sketches toward production code as quickly as possible. When you try designs in a browser instead of Figma, you immediately notice problems with loading states, screen sizes, and interactions that static designs hide.The prototype playground is a shared Next.js app that centralizes all design prototypes. Instead of designers working in isolated repositories with different setups, this shared environment makes it easy to discover what others are working on and reuse code. The repository organizes prototypes by designer name and provides shared components for Notion-style UI elements.Brian found it impossible to design good AI experiences in Figma: You can design what the chat input looks like … but what you cant design in Figma is what it actually will feel like to use that thing. Code prototypes connected to real AI models are essential for understanding edge cases and failure modes.When Claude asks you to do something, teach it to do that thing itself. Brians most important rule for working with AI is to avoid manual intervention. For example, instead of manually checking if a prototype works in the browser, teach Claude to launch Chrome, test the functionality, and verify the results.Claude Skills can solve specific recurring problems. When AI consistently hallucinated icon names (using search instead of magnifying glass), Brian created a skill that programmatically searches for icons and their synonyms across thousands of files. This demonstrates how AI can be taught to overcome its own limitations.Custom slash commands dramatically simplify complex workflows. Brian created commands like /figma that handle everything from checking if MCPs are installed to extracting designs, implementing them as code, and verifying the results through multiple iterations. This makes advanced AI techniques accessible to less-technical team members. Listen now on YouTube | Spotify | Apple PodcastsIf youre enjoying these episodes, reply and let me know what youd love to learn more about: AI workflows, hiring, growth, product strategyanything.Catch you next week,LennyP.S. Want every new episode delivered the moment it drops? Hit Follow on your favorite podcast app.

“I haven’t written a single line of front-end code in 3 months”: How Notion’s design team uses Claude Code to prototype

Lenny Rachitsky · how-to · 91% similar

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

Lenny Rachitsky · how-to · 86% similar

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

Lenny Rachitsky · how-to · 81% similar
Originally published at https://www.lennysnewsletter.com/p/this-week-on-how-i-ai-how-notions.