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

**Brian Lovin** (0:00)
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 prototype in production.

**Claire Vo** (0:15)
So explain to us what this prototype playground is.

**Brian Lovin** (0:18)
It's just the next JS app. All of our prototypes are in one place. Seeing what other people are working on is really fun and interesting. And oftentimes, you spot cool ideas, and you're like, ooh, I want to try that. The code is all in one place. It's just in one repo. And so I can just yoink cool ideas from other people's prototypes and incorporate them into mine.

**Claire Vo** (0:35)
Every time somebody is like a little anti-AI-assisted coding, I'm like, do you know that I used to have to walk uphill both ways for my CSS? It was not fun to do this.

**Brian Lovin** (0:45)
I mean, even just sitting here watching this, I still just find this magical.

**Claire Vo** (0:52)
Welcome back to How I AI. I'm Claire Vo, product leader and AI obsessive, here on a mission to help you build better with these new tools. Today we have a designer-centric episode with Brian Lovin, designer at Notion AI, who's going to show us how he set up a prototype playground for the entire Notion design team to vibe code using Claude Code any prototype they need. This is a great one for someone looking to either shift their design organization into a code-first prototyping mode or learn some advanced techniques with Claude Code. Let's get to it. This episode is brought to you by Work OS. AI has already changed how we work. Tools are helping teams write better code, analyze customer data, and even handle support tickets automatically. But there's a catch. These tools only work well when they have deep access to company systems. Your co-pilot needs to see your entire codebase. Your chat bot needs to search across internal docs. For enterprise buyers, that raises serious security concerns. That's why these apps face intense IT scrutiny from day one. To pass, they need secure authentication, access controls, audit logs, the whole suite of enterprise features. Building all that from scratch, it's a massive lift. That's where Work OS comes in. Work OS gets you drop-in APIs for enterprise features, so your app can become enterprise ready and scale up market faster. Think of it like Stripe for enterprise features. OpenAI, Perplexity and Cursor are already using Work OS to move faster and meet enterprise demands. Join them and hundreds of other industry leaders at workos.com.
Start building today. Brian, welcome to How I AI. What I am so excited about in terms of our conversation today is you're going to show us about how one of the best designed products out there, Notion, is being designed by people like you using these new AI tools like Claude Code. So why did you make this shift to how you were doing design, what it meant to prototype design and build things, especially for a product and in a company who values design so highly?

**Brian Lovin** (3:09)
The way I think about designing B2B SaaS is you want your designs to encounter reality as early as possible. And if you imagine this gradient of like I'm scribbling on a napkin on one side to, I'm shipping to production and showing customers on the other side. Our goal as designers is to move up that gradient towards prod as quickly as possible. So I'd say for most of my career, I've sort of biased towards being interested in programming mostly at the prototyping level.
I just find that when you're designing something in Figma and then you actually try it in the browser, in the browser, you notice a ton of problems. You know, all of a sudden you're clicking things, you notice loading states, you notice, oh, that didn't quite work on this screen size. So you encounter some version of reality sooner and you end up getting to a better design more quickly. So, you know, 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 prototype in production. I can, or what I most often do now at Notion is just prototyping a little internal tool we've built called prototype playground. And again, the idea is just like, how do we get something that's somewhat realistic in a kind of real environment, in our case, the browser, as quickly as possible. And I think that just helps you move faster and end up with better designs.