How Notion designers ship live prototypes in minutes | Brian Lovin (Product designer)

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:* 1. How Brian built a shared Next.js app that serves as a collaborative prototyping environment for Notion’s design team 2. Why encountering “reality” early in the design process leads to better products 3. How to use Claude Code’s “plan mode” to get better results when prototyping 4. The power of custom Claude slash commands and skills to automate repetitive tasks 5. How to transform Figma designs into working code with a single prompt 6. Why AI-powered products can’t be effectively designed in static tools like Figma 7. 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—Make your app enterprise-ready today: https://workos.com?utm_source=lennys_howiai&utm_medium=podcast&utm_campaign=q22025 Orkes—The enterprise platform for reliable applications and agentic workflows: https://www.orkes.io/ *In this episode, we cover:* (00:00) Introduction to Brian (02:36) Building for B2B SaaS (04:42) Notion’s 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) Brian’s tool preferences (48:42) Prompting techniques when AI is not listening *Detailed workflow walkthroughs from this episode:* • How Notion Designs with AI: Brian Lovin’s 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-ideas *Tools 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-explained *Where to find Brian Lovin:* Website: https://brianlovin.com/ LinkedIn: linkedin.com/in/brianlovin X: https://twitter.com/brian_lovin *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 _Production and marketing by https://penname.co/._ _For inquiries about sponsoring the podcast, email jordan@penname.co._

Brian LovinguestClaire Vohost

Feb 23, 202651mWatch on YouTube ↗

WHAT IT’S REALLY ABOUT

Notion’s designer-led Next.js playground accelerates prototyping with Claude Code

Brian Lovin (Notion AI designer) argues B2B SaaS design improves when prototypes “encounter reality” early—ideally in the browser, not only in Figma.
Notion’s internal “Prototype Playground” is a simple shared Next.js repo where each designer/PM/engineer has namespaced folders for standalone prototypes, enabling visibility and easy reuse of code patterns across the team.
Brian demonstrates an AI-assisted workflow with Claude Code: planning first, using voice-to-prompt, leveraging project-level and local Claude instruction files, and creating reusable slash commands and skills.
Advanced automation includes MCP-driven Figma-to-code generation with an iterative verification loop and a deploy command that creates branches/PRs, runs checks, and monitors CI to reduce onboarding friction for less-technical designers.

IDEAS WORTH REMEMBERING

5 ideas

Design quality rises when prototypes hit “reality” earlier.

Lovin frames design as a gradient from napkin to production; moving toward real browser behavior sooner reveals issues like loading states, responsiveness, and interaction flaws that static mocks hide.

A shared prototype repo creates compounding leverage for a design org.

Keeping all prototypes in one Next.js project increases visibility into what others are building and makes it easy to “yoink” code patterns/components rather than rebuilding one-off stacks per designer.

“Nothing magical” beats “perfect tooling” for adoption.

Prototype Playground succeeds by being straightforward (Next.js + folders + shared styles) and deployed with minimal overhead (Vercel + access approvals), making it easy to start and iterate.

Plan-first prompting produces better agentic coding outcomes.

Lovin consistently uses Claude Code’s plan mode and emphasizes reading the plan—especially valuable for catching wrong assumptions before code is written.

Treat every AI request as a prompt to automate the workflow.

His guiding rule: if Claude asks you to check something (browser, lint, CI), teach it to do that itself via commands, tools, or scripts—leading to longer autonomous runs and fewer human interruptions.

WORDS WORTH SAVING

5 quotes

You want your designs to encounter reality as early as possible.

— Brian Lovin

I can prototype faster. I can prototype in production.

— Brian Lovin

There’s no back end for Prototype Playground. It’s just all files on disk.

— Brian Lovin

Any time the AI asks you to do something, you should… see if you could teach the AI to answer that question for itself.

— Brian Lovin

Do you know that I used to have to walk uphill both ways for my CSS?

— Claire Vo

Code-first prototyping vs. Figma fidelity limitsShared Next.js repo structure for team prototypesClaude Code workflow: plan mode, context, voice promptingClaude.md and claude.local.md governanceSlash commands as repeatable workflowsMCP (Figma + Chrome DevTools) and verification loopsClaude Skills + scripts to reduce hallucinations (icons)Automated deployment/CI monitoring to lower onboarding friction

High quality AI-generated summary created from speaker-labeled transcript.

Get more out of YouTube videos.

High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.