How I AI

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._

BLBrian LovinguestCVClaire Vohost

Feb 23, 2026·51m·Watch on YouTube ↗

📖 CHAPTERS

1. 1

   Why prototypes should “encounter reality” early (and why AI changed the speed limit)

   Brian explains his philosophy for designing B2B SaaS: move from static mocks toward real usage as quickly as possible. AI coding tools let him prototype dramatically faster—often in a near-production environment—so design flaws surface earlier (loading states, responsiveness, interaction details).

2. 2

   Prototype Playground: a simple Next.js repo as a shared prototyping hub

   Prototype Playground is described as a straightforward Next.js project where every designer/PM/engineer can create isolated prototype pages. The payoff is centralization: everyone’s work is visible and reusable, making it easy to borrow ideas and code across the team.

3. 3

   What the UI looks like: browsing, templates, and “Notion-y” shared styles

   Brian walks through how the playground presents prototypes and how templates accelerate building familiar Notion-like layouts. Shared colors, typography, and icons help prototypes feel realistic without re-creating the design system from scratch.

4. 4

   How it got created and deployed: lightweight ops, real collaboration constraints

   Claire asks about the operational reality: who built it, how it’s hosted, and what approvals were needed. Brian emphasizes the minimal overhead—basic Next.js + Vercel—with just enough process to make it accessible to the team.

5. 5

   Adoption reality: who uses it, why some don’t, and linking external prototypes

   Brian is candid that he’s the heaviest user, with a smaller core group using it frequently. To include different workflows, he added support for external prototype links (e.g., other tools or personal stacks) so the hub can still be a centralized index.

6. 6

   Creating a new prototype without boilerplate: in-app “New” button and file-based metadata

   Brian demonstrates the fastest way to start: generating a prototype folder and files automatically rather than manually creating Next.js routes. The system is intentionally backend-less: prototypes are just files on disk, committed and shared via GitHub.

7. 7

   Brian’s working setup: three-pane workflow + voice prompting + Plan Mode

   Brian shows his personal setup: Claude Code in terminal alongside the editor and live preview, plus a voice-to-prompt tool (Monologue) to iterate faster. He stresses using Plan Mode first, then actually reading the plan to catch mistakes early.

8. 8

   Teaching Claude to self-check: linting, MCP tools, and reducing human babysitting

   Brian shares a core principle: when the AI asks you to do something, teach it to do that step itself. He builds habits like automatic linting, plus browser-driven verification using MCP tools (Playwright/Chrome DevTools) so Claude can validate functionality (e.g., confetti on play).

9. 9

   Slash commands for fast onboarding: “/create-prototype” and command definitions

   To make the playground more approachable, Brian adds custom slash commands—structured prompts that can also run scripts. He shows how commands are defined (name/description/instructions/examples) and why examples dramatically improve reliability.

10. 10

    Figma → code pipeline with MCP: extraction, implementation, and a verification loop

    Brian demonstrates a dedicated “/figma” command that orchestrates Figma MCP and browser verification. It checks prerequisites, extracts design data, implements the UI, then loops comparing the output to the Figma frame until changes stabilize—often reaching ~80% fidelity quickly.

11. 11

    Reducing “icon hallucinations” with Claude Skills + bundled scripts (Find Icon)

    Brian explains a recurring pain: models guess icon names incorrectly. He created a “Find Icon” skill that programmatically searches a large internal icon set (thousands of files) using a script, including synonym logic (e.g., ‘search’ vs ‘magnifying glass’).

12. 12

    One-command deployment for non-engineers: “/deploy” to branch, PR, CI monitoring, and fixes

    To lower intimidation around Git and deployment, Brian built a deploy command that checks prerequisites (GitHub CLI/auth), creates a branch, commits, opens a PR, and monitors CI until checks are green—auto-fixing and pushing updates when needed. The goal is end-to-end sharing without requiring deep Git knowledge.

13. 13

    How AI changes design work: when Figma is enough vs when code is required (especially for AI UX)

    In lightning-round discussion, Brian explains he still spends most time in Figma—but AI experiences demand code-first prototyping. For chat/agent products, realistic model behavior (errors, delays, follow-up questions) can’t be accurately designed with static “golden path” mocks.

14. 14

    Tooling preferences and prompting advice: why Opus 4.5 + what to do when AI ‘isn’t listening’

    Brian describes why Claude/Opus 4.5 feels best for his workflow, while still using Cursor features for quick fixes. His most pragmatic prompting advice: quality correlates with human clarity and energy—if prompts get sloppy, step away and come back rested.