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

February 23, 2026

AI Summary

5 min read

🎙️ The Voices & The Context

The Format: Interview with live demos—a casual, hands-on chat where the guest demos tools in real-time.
The Key Players:
- Guest: Brian Lovin, designer at Notion AI, known for prototyping AI experiences; shares insider Notion design workflows.
- Host: Claire Vell, product leader and AI enthusiast, guiding the convo with enthusiasm and tech savvy.
The Vibe: Fun, exciting, and educational—like geeking out over magic AI tricks, with humor and "mesmerizing" demos.

🗝️ Key Themes & Topics

The episode dives into AI-powered prototyping for designers, shifting from Figma to code-first workflows at Notion, with live Claude Code demos.

Topic 1: Code Prototyping Mindset
Brian explains why designers should prototype in the browser early to hit "reality" fast—spotting issues like loading states that Figma misses. AI tools like Claude supercharge this, enabling production-like prototypes quickly.
Topic 2: Prototype Playground Setup
A shared Next.js repo for Notion's team: namespaced folders per person, no global layout, shared Notion styles/icons. Fosters idea-sharing ("yoink cool ideas") and lowers barriers vs. scattered repos.

Continue reading the full summary in the app — free to try.

Read Full Summary →

Free • No credit card required

Listen to Audio Summary Open in App

What you'll learn

1 (00:00) **🎙️ Introduction: Brian Lovin**
2 (02:57) **Philosophy of Code-First Prototyping**
3 (04:42) **Prototype Playground Overview**
4 (08:00) **Setup and Adoption**
5 (10:53) **Demo: Creating a New Prototype**
6 (13:00) **Live Prototyping: Podcast Player**
7 (16:00) **Context Management for Claude**

+ Full timestamped outline available in the app

Show Notes

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:

How Brian built a shared Next.js app that serves as a collaborative prototyping environment for Notion’s design team
Why encountering “reality” early in the design process leads to better products
How to use Claude Code’s “plan mode” to get better results when prototyping
The power of custom Claude slash commands and skills to automate repetitive tasks
How to transform Figma designs into working code with a single prompt
Why AI-powered products can’t be effectively designed in static tools like Figma
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

Orkes—The enterprise platform for reliable applications and agentic workflows

—

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