← All episodes

How Notion’s design team uses Claude Code to prototype | Brian Lovin (Product designer)

| 13 products mentioned
How I AI How I AI host
Watch on YouTube design systems ai-assisted coding rapid prototyping claude code ai product design design-to-code automation team collaboration tools

Brian Lovin, a product designer at Notion, demonstrates how Notion's design team uses Claude Code to rapidly prototype AI-powered features by building a shared "Prototype Playground"—a Next.js repository where designers can quickly iterate from Figma designs to working code. The episode showcases how AI-assisted coding tools dramatically reduce friction in design-to-implementation workflows, particularly for AI products where static mockups fail to capture the actual user experience.

Key takeaways
  • • Prototype Playground is a shared Next.js app with per-designer namespaced directories and shared components, eliminating the need for individual repos and enabling designers to discover and reuse each other's ideas.
  • • When Claude asks you to do something (e.g., "check the browser"), teach it to perform that task itself using MCP tools and automation scripts, enabling longer, more autonomous runs without human intervention.
  • • Use Claude's Plan Mode before execution to catch logical errors upfront, read the plan carefully, and provide good context via root-level `.claude.md` files and local `.claude.local.md` configurations for team collaboration.
  • • AI-assisted Figma-to-code conversion using the Figma MCP can achieve ~80% accuracy with automated verification loops that compare browser output to design files, reducing manual handoff work significantly.
  • • Create Claude Skills and slash commands that bundle natural language instructions with executable scripts to handle repetitive problems like icon name hallucination, Figma imports, and multi-step deployment workflows.
  • • Code-first prototyping is essential for AI products because static designs cannot capture real model behavior, loading states, error handling, and user confidence during multi-step interactions that require live experimentation.
  • • Design workflows benefit from Opus 4.5's superior planning, execution, and communication style, which combined with structured tools (terminal UI, side-by-side windows) and good sleep/rest produces dramatically better prompting outcomes.

Recommendations (11)

Claude Code
Claude Code uses

"All of a sudden these AI coding tools come along and now I can prototype faster. I can prototype in production."

Brian Lovin · ▶ 4:11

Next.js
Next.js uses

"Prototype playground is nothing magical. It is just a Next.js project."

Brian Lovin · ▶ 4:50

Cursor
Cursor uses

"We could be in Cursor and we could come in here and create a new folder and create a bunch of page.tsx files."

Brian Lovin · ▶ 11:04

Figma
Figma uses

"I still use Figma. I probably still spend 60 to 70% of my time in Figma."

Brian Lovin · ▶ 42:40

Monologue
Monologue uses

"I do use this tool called Monologue where you can just talk to your computer. There's many products like this. I think Monologue is just nice and cute."

Brian Lovin · ▶ 13:28

Vercel
Vercel uses

"It's deployed on Vercel. We had to like go through a little bit of process to get that project spun up."

Brian Lovin · ▶ 8:20

MCP (Model Context Protocol) uses

"You can give it access to MCP tools. So, Playwright is one, the Chrome Dev Tools MCP is another one."

Brian Lovin · ▶ 19:28

Playwright
Playwright uses

"You can give it access to MCP tools. So, Playwright is one, the Chrome Dev Tools MCP is another one."

Brian Lovin · ▶ 19:28

GitHub Desktop recommends

"I just love the GitHub Desktop app. It just like it gives you buttons for all of this. You can see your diffs."

Claire Velo · ▶ 37:44

Tailwind CSS
Tailwind CSS uses

"We have a cloud.md file at the root of our project with just some rough instructions around like the tooling that we use like we use bun, we use Tailwind."

Brian Lovin · ▶ 16:29

Bun
Bun uses

"We have a cloud.md file at the root of our project with just some rough instructions around like the tooling that we use like we use bun, we use Tailwind."

Brian Lovin · ▶ 16:29

Mentioned (2)

v0
v0 "If you prefer using V0 or Lovable or a Figma make file, whatever it might be, you could just link..." ▶ 9:55
Lovable
Lovable "If you prefer using V0 or Lovable or a Figma make file, whatever it might be, you could just link..." ▶ 9:55

More from these creators

Claude Code for personal productivity: a step-by-step tutorial | Hilary Gridley

How I AI · Mar 30, 2026 · 6 recs

How Stripe deploys 1,300 AI-written PRs per week

How I AI · Mar 25, 2026 · 12 recs

How Microsoft's AI VP automates everything with Warp | Marco Casalaina

How I AI · Mar 23, 2026 · 9 recs

From journalist to app developer using Claude Code

How I AI · Mar 16, 2026 · 3 recs

How Figma engineers sync designs with Claude Code and Codex

How I AI · Mar 11, 2026 · 5 recs

5 steps to generate consistent brand images with Midjourney

How I AI · Mar 09, 2026 · 8 recs