“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
“I haven’t written a single line of front-end code in 3 months”: How Notion’s design team uses Claude Code to prototype
“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
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.
Brian built Notion’s internal 'prototype playground': a collaborative Next.js app where designers rapidly build, test, and share functional prototypes—moving beyond static Figma mockups. This environment enables early exposure to technical reality, surfacing design flaws before engineering handoff. He demonstrates using Claude Code’s plan mode, custom slash commands (e.g., '/create prototype', '/figma'), and skills like 'find icon' to automate repetitive tasks and improve fidelity. A key insight is teaching Claude to self-correct—running ESLint, validating outputs, or deploying via GitHub—rather than manually fixing errors. The workflow converts Figma designs into ~80% production-ready UIs and supports rapid iteration on AI-native features, which demand real-time interaction modeling impossible in static tools. Brian emphasizes that for AI-powered products, designers must engage directly with code to understand latency, variability, and model behavior—shifting design from visual speculation to grounded, executable experimentation. His tool stack centers on Claude Code for quality, Cursor for debugging, and Opus 4.5 for structured planning—all guided by the principle: when Claude asks you to do something, teach it to do that itself.
00:00
00:00
AI coding tools like Claude Code enable faster and more efficient prototyping
02:37
02:37
AI coding tools let designers prototype faster and more realistically by encountering design problems earlier
04:42
04:42
Designers can namespace directories for prototypes in Notion's Next.js playground
08:01
08:01
Some non-technical people made their first AI-assisted prototypes in the playground
13:40
13:40
Using plan mode before coding leads to better outcomes
19:08
19:08
Teach Claude to run ESLint and access MCP tools to self-check instead of relying on browser verification
20:24
20:24
The power of MCP is amazing
20:32
20:32
Typing '/create prototype' can start the creation process
23:03
23:03
The /figma command automates Figma-to-Notion UI implementation with ~80% accuracy
25:06
25:06
Pasting a Figma file link builds a working design with minimal setup
30:54
30:54
'Find icon' skill searches for icons using synonyms and related words to avoid hallucinated names
40:46
40:46
Enabled auto-merge in a somewhat risky way (Yolo)
41:12
41:12
The key rule is to teach Claude to do tasks when it asks.
44:54
44:54
Designers must prototype with actual code to see model performance and design plausible products
46:48
46:48
Each AI model has a unique 'mouth feel' reflecting its subjective user experience and interaction style
48:43
48:43
Good prompts depend on the quality of context and one's state