By playing, you agree to uListen's Terms and Privacy Policy and YouTube's Terms of Service.

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.

Brian LovinguestClaire Vohost

Feb 22, 202651mWatch on YouTube ↗

Summaries, chapters, transcripts, and FAQs on this page are made by uListen, not 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

Read the available transcript

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.

Read along on your phone, search it beside the video, or ask your favorite AI app what was said.