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

Overview

Shownote

Highlights

Transcript

Chapters

Pins

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

How I AI

5 DAYS AGO
How I AI

How I AI

5 DAYS AGO
OverviewShownoteHighlightsTranscriptChaptersPins

Shownote

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

Highlights

Brian Lovin, a designer at Notion AI, discusses how he reimagined design collaboration by building a shared, code-based prototyping environment powered by AI—specifically Claude Code.
00:00
AI coding tools like Claude Code enable faster and more efficient prototyping
02:37
AI coding tools let designers prototype faster and more realistically by encountering design problems earlier
04:42
Designers can namespace directories for prototypes in Notion's Next.js playground
08:01
Some non-technical people made their first AI-assisted prototypes in the playground
13:40
Using plan mode before coding leads to better outcomes
19:08
Teach Claude to run ESLint and access MCP tools to self-check instead of relying on browser verification
20:24
The power of MCP is amazing
20:32
Typing '/create prototype' can start the creation process
23:03
The /figma command automates Figma-to-Notion UI implementation with ~80% accuracy
25:06
Pasting a Figma file link builds a working design with minimal setup
30:54
'Find icon' skill searches for icons using synonyms and related words to avoid hallucinated names
40:46
Enabled auto-merge in a somewhat risky way (Yolo)
41:12
The key rule is to teach Claude to do tasks when it asks.
44:54
Designers must prototype with actual code to see model performance and design plausible products
46:48
Each AI model has a unique 'mouth feel' reflecting its subjective user experience and interaction style
48:43
Good prompts depend on the quality of context and one's state

Chapters

Introduction to Brian
00:00
Building for B2B SaaS
02:36
Notion’s prototype playground: what it is and how it works
04:42
The technical background of designers using the playground
08:01
Demo: building a podcast player prototype
10:52
Actionable tips for better Claude Code results
16:00
Analyzing the result
20:16
Creating slash commands to simplify the workflow
20:30
Turning Figma designs into production-ready code
23:03
MCP frustrations and tips
25:06
Demo: creating a custom “find icon” skill
30:54
Demo: Creating a deploy command to simplify GitHub workflows
35:03
Quick recap
41:09
How code-based prototyping is changing design at Notion
41:59
Brian’s tool preferences
46:48
Prompting techniques when AI is not listening
48:42

Transcript

Brian Lovin: The way I think about designing B2B SaaS is you want your designs to encounter reality as early as possible. I've always been into prototyping, and then all of a sudden these AI coding tools come along. And now I can prototype faster, I can pr...