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

0:00The 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.

0:15Brian Lovin:So explain to us what this prototype playground is. It's just an XJS 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, oh, 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. 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. I mean, even just sitting here watching this, I still just find this magical.

0:52Brian Lovin:Welcome back to How I AI. I'm Claire Vell, 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 cloud 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 CloudCode. Let's get to it. This episode is brought to you by WorkOS. AI has already changed how we work.

1:33Brian Lovin: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 copilot needs to see your entire code base. Your chatbot needs to search across internal docs. And 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 WorkOS comes in.

2:12Brian Lovin:WorkOS gives 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 WorkOS 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 Cloud Code.

2:57Brian Lovin: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? 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 uh or what i most often do now at notion is just prototype in 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 so explain to us what this prototype playground is and how you set it up and how you might use it okay so prototype playground is nothing magical it is just a next js project so uh actually here to source apps and there's an app directory and you'll notice here in our app directory where normally in a next js uh app you would see pages um well we've just namespaced every designer on the team or pm or engineer whoever signs up and wants to use it can just namespace some directory so here's brian and then every directory inside of that is some prototype and so it's just a next js app but each page is sort of a standalone there's no global layout there's no global i don't know like structure that you have to adhere to and so what that looks like on the front end is this this is what we call prototype playground and it's just a list of prototypes ordered by who is working on stuff recently so here's a few from december and then a bunch from november and it's really cool because having everybody's prototypes in one place is useful in two dimensions one just from a visibility point of view seeing what other people are working on is really fun and interesting and oftentimes you spot cool ideas and you're like oh i want to try that and then on the other dimension is like if you spot a cool idea and you want to try it 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 usually usually by just telling claude to do that uh yeah i think before prototype playground there was a lot of designers at notion who prototyped in code the difference was we were all creating our own repository our own next js instance and so it was hard to know where everyone's stuff was everyone was rebuilding it in different ways or if people were trying to recreate something that looked notion-y we were all doing it from scratch so anyways prototype playground next js app all of our prototypes are in one place and then we have a few shared components and shared styles so if you want to make something that looks notion-y you can do that pretty quickly so for example we have some templates here i can show you like notion ui is just a notion-y sidebar and actually this isn't even very notion-y i think at some point i slipped this new button in here which obviously doesn't exist in the the product i don't think these things do anything but it's close enough if you're like oh i needed to prototype something with a notion sidebar i can just come in here and duplicate this template and then we of course pull in a bunch of our colors typography icons so that again just getting to close enough notion styles uh without a whole lot of effort yeah and i want to call out for people a couple many episodes ago i showed how you could build a very similar next js app for yourself that had a combination of docs you were working on markdown docs you're working on and prototypes in a very similar format where it was like here's my folder of just stuff I'm working on very minimal shared components very minimal shared styles I like this too because it's nice to have that team level organization so you can pop in and see who your teammates are working with I have a question from an operational perspective did you set this up like was this like a passion project for you did engineering set it up for you like how did this actually get created yeah I set it up with another engineer I I mean, it's just a Next.js app, but then operationally, just a few approvals.

8:18It's deployed on Vercel, so we had to go through a little bit of process to get that project spun up, get a few people added as members. Otherwise, yeah, it's not that much. Again, it's just a pretty basic Next.js app, which you can literally use Claude to help me make a Next.js app, and it's just going to get you the default.

8:38Brian Lovin:I like keyboard hands. Everybody does the same keyboard hands motion where it's just this. I have one more question, which is, of the people now working in this repository, how many before were working in code versus this is their first repository that they've cloned to their desktop or deployed? Was the design team pretty technically adept already, so this was very natural, or were there some people that needed to be onboarded? I think so. I mean, to be honest, Prototype Playground is still really for me. Like, I think I use it the most. You can see here there's a bunch of other people that are creating things.

9:17But if you were to go through, I probably use it the most. I think there's maybe like five to ten people at Notion that use it quite a lot. And then a bunch of people who either have tried it and it didn't stick. And we can get into reasons why that is. Or they're just not interested. Or they prototype separately, right? Like we still have people prototyping in Figma. We have people that prototype in their own code base still. They just prefer their own stack. Maybe they don't like Next.js. Maybe they don't like React. So they do something else. and I think all that is totally fine in fact one of the the features I added recently was this ability to link to an external prototype so if you prefer using v0 or lovable or a figma make file whatever it might be you could just link to it here and in fact this is what it'll show up as in prototype playground just have this little external icon and so you can click it and it'll open in a new tab so in theory this could be the prototype playground or repo for any prototyping tool.

10:17My hope is that over time we make this thing useful enough that more people will want to prototype in it because it's just faster than those other tools. And we got to figure out how to lower the onboarding complexity for people who aren't technical before. So to answer your question, I don't know, I'd say some people who weren't technical made their very first code prototypes or like ai assisted prototypes in the playground but probably the majority of us that are still using it daily had some technical background got it perfect well let's prototype something i want to see how it actually works let's do it um okay so there's a few ways to make new things in xjs right like we could be in cursor and we could come in here and create a new folder and create a bunch of page.tsx and metadata files and that sucks i don't want to do it so there's two ways around that the first is when you're running in localhost you can actually just click this button that says new and you give your prototype a name and a description i'll call this one um how iai and then this is for fun and i create that and all that's doing under the hood if we bounce back over to cursor is it just created those files for me on my computer this is my favorite part is like there's no back end for prototype playground it's just all files on disk uh and then we can just push all this to github so here we have like a little metadata file these get sort of collated to render the list on the home page we have an actual uh prototype file here with some code and then this is kind of nice like it automatically gives you a button to open and cursor.

12:03So now I can just come in here and start prototyping. Now, typically my workflow is I just bust open Claude in the terminal. I know this isn't how you're supposed to use cursor, but it's just, it's just how I do it. It's probably not even how you're supposed to use Claude code, but I just do it.

12:20Brian Lovin:We're just equal opportunity offending these two tools. I know, I know. Sorry, everybody. But this is how I like to work. And in fact, I have a little shortcut here where I can just press caps lock G and then I can get these two things side by side in my computer. So I usually am clotting over here, reviewing the changes here, and then monitoring sort of the output over here. So let's see here. I want to make a prototype and I don't know, let's just come up with some contrived example. Like maybe you can help me think of a good use case. Can we make a prototype for, oh, like a little, a video and audio.

13:06Brian Lovin:This may be complicated. Video and audio, like display module for my podcasts. Video and audio. So it's like video and then maybe like an audio player. Let's see. You know, it's Opus 4.5. I think you can do it. Okay, let's try it. So normally, let's walk through like my actual workflow. There's sort of two steps. One is you can type a lot. That's not that fun. 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. So we can just talk and it's just much faster than typing our prompt. The second thing you'll notice with Cloud Code is I switched over to plan mode.

13:41I think it's really, really important to plan before doing anything. For whatever reason, you just get better outcomes. Now, the key thing about using plan mode is to actually read the plan. And I think this is where having a development background just gives you an edge. Because you can read the plan and be like, oh, that part actually doesn't look quite right. Whereas if you maybe don't have as much programming experience, it would be harder to tell that. But in either case, I still find that having the plan mode and creating some structure before actually writing code is better. So let's just do both of these things at the same time.

14:17So we're in plan mode and I'm going to invoke monologue here and it's recording. And so let's say I want to build a new prototype in this how I AI directory. and we are a podcast and I want to build a detail page for a podcast episode that has both a video player and an audio player underneath the page should have the title of the episode description and how about if you hit play there's little confetti that shoots up out of the player and so So we end that. And now I will delete this. And we plan.

15:05Brian Lovin:So I have to give you props on two things. One, I am also a plan mode slash like write your spec, write your PRD person, obviously. I think the second thing is I am still just such a read the code, read the outputs girl when it comes to AI. It's actually one of my challenges when I use something like Claude Code or watch people use cloud code is if you don't do it inside a cursor or something that gives you this sort of, I love your three pane window, your like code window, your cloud window, your output window, because I see people with like 17 tabs of cloud code going, just accepting a bunch of changes.

15:42Brian Lovin:And I have to read. I think this is also just like engineering development background where you can just spot things that make no sense in the moment, as opposed to having to go back and and debug something. So I am, I'm very much aligned with you on that. Yeah, it's helpful. And you know, this is probably obvious to a lot of people who are familiar with using cloud code, but maybe if, if you aren't like another piece, that's really important here is getting the right context up front, right? Like we just typed in some prompts, but under the hood, I can show you, we actually have some other files helping us out here.

16:22So we have a clod.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. It has like a rough outline of the project structure. Another thing that we do is anytime someone runs the project locally, we create a clod.local.md file. And that local file is not committed to the Git repo. So it's personal per computer. And it adds a little bit of extra context. like, hey, this is my username in Prototype Playground. It tells Claude where my directory is. And it gives some instructions like, hey, don't go around and mess with other people's files.

17:02Like prefer to work in my directory. And a little bit more about the workspace structure and how like individual projects can be built. So a couple of those things are working under the hood here.

17:14Brian Lovin:And while you're accepting some of these Claude code changes and questions, I do want to call this out for folks because I think people are pretty aware of the Cloud MD global settings, but I think people forget that there are actually locally scoped versions of these that you can implement. And so it's really useful to get one version deployed to everybody that gives you your master rules for using Cloud. And then you can set up your own custom one with your own particular preferences. And I think that's a really nice way to create a good collaborative environment where people are using a similar AI tool or agent to work in the repo.

17:53Totally. Yeah. Okay. I don't know. We'll see how this goes, but it's going to install some sort of confetti. It's going to have a player, audio player. Look at that wireframe. This is really awesome. Like it does a wireframe in the plan, which is crazy. And here, I don't know. We can just kind of skim this for the sake of this example. This looks fine. So let's auto accept edits. Now, I have a tip for for people, because I think when you spend enough time on Twitter or watching other people use these coding tools, people are always like, how do you get it to run for longer? You know, they find themselves constantly getting stuck or the agent does the wrong thing or it's asking for their input.

18:36it. And my philosophy on this has been anytime the AI asks you to do something, you should, before responding, try your best to see if you could teach the AI to answer that question for itself. There's a good example. Oh, wow. That was very fast. Well, here, let's hold on that and see

19:01Brian Lovin:if the confetti works. Well, actually here, the example is I've already taught Claude to like always lint itself after it's done right like what's really annoying is when it builds a bunch of stuff and then you go and look in your browser and there's some error right so for example i've taught claude hey check your work one you can run commands like uh what was this like es lint right and like look for actual type script errors the second is you can give it access to mcp tools so playwright is one the chrome dev tools mcp is another one and you can say well actually you know before installing this claude would say to you hey i've implemented your feature go take a look at it and let me know what you think and remember our rule is anytime claude tells you to do something ask if you can teach it to do that thing for itself so i don't want to have to look at the browser every time to see if i did it correctly so instead i teach claude actually you should be the one to go and open the browser so it knows how to launch chrome it knows how to navigate here.

20:02It knows how to click the play button, look for confetti, make sure the audio is working, all that kind of stuff. And so now we were able to run this task for much longer without my input and actually get to something that is working well.

20:17Brian Lovin:I'm actually very impressed with this prototype. It's much more lovely than I thought it was going to end up. Much more robust and the confetti looks great. The confetti looks great. Yeah. Well, here, I'll show you another example this is i think where the power of mcp gets crazy so let's let's actually clear this we're just going to start start a new new conversation here i'm going to just totally undo everything let's just start from scratch so uh a couple other things that i've built in you know i think uh remember like i'm trying to make the onboarding flow as simple as possible for people on my team yep um so what claude has is called slash commands and you can just build these yourselves and they're basically glorified prompts but they can also run scripts and so we have some slash commands in the project that help people get going really quickly so i have one called create prototype and then you can give it an optional name so we'll call this one how i ai and that's going to do the same thing as clicking the new button on on the the browser which is what we did earlier.

21:25The difference, of course, is I don't have to click things. I kind of want to design this so that I basically live over in the terminal. And can you show us really quickly

21:35Brian Lovin:in your repo just how these commands get defined? Perfect. Thank you. Yeah, sure. So again, it's basically a glorified prompt. It has a name, a description, and then some instructions. so in our case we say kind of how to come up with a name based on what the the user provides tells it where to look to determine the current user's username how to create the new thing it actually provides some sample code to use for both creating the page and the the metadata file i think i need to also approve this so it goes let's just do blank for now as well as creating the metadata. So, you know, AI is better with good context, but it's also really, really good if you just provided examples of how to do things.

22:31So the reason it's important to provide these code snippets is to show it what success looks like, right? If this was like just instructions to create blank files, it wouldn't know what to create. So in our case, we're just showing it an example of success. and we could probably simplify this it's actually quite a long command but but here we go so it created this and a blank piece of text that's great so that's just one way to start you just type slash create a prototype and then and then that'll create but maybe we have some design in figma and we want to build this this might not work but let's try it um so we can connect to the Figma MCP and I can just copy a link to this frame and say like let's build this uh this notion UI so uh before you could just paste a link to a Figma URL and try and manually invoke the Figma MCP and it would sometimes ask clarifying questions and sometimes it would build it and then sort of stop halfway through I don't like any of that so we actually built a command called slash Figma and it roughly does a couple of things.

23:47The first is it actually checks that you have the MCP server installed and running. You know, for people on the team who have never done MCP stuff before, they might not know how to do this. And so it detects if you have it installed. And if it doesn't, if it finds that it's not installed, it'll just teach you how to do it. So it actually returns instructions to the user on how to set all this stuff up. And then it moves on to phase A, designing or extracting the design from Figma, then it'll implement it. And then the most important thing is we enter this third phase called the verification loop, where it's going to open the browser and compare the implementation it created to the original Figma file.

24:27And I think my instructions are basically keep looping until you've gone through like two loops where there were no more changes. Oh yeah, here. Repeat until the implementation matches or after three iterations with no changes and then stop iterating so let's just see what happens this i would say it gets like 80 correct 80 of the time but that's just that's just how ai is right now i was going to say about 60 so i think i was right well actually you know i think it is 60 but this this command and this loop and these instructions and like the pairing of the two mcps actually gets us to 80%.

25:06Brian Lovin:I want to call this out for folks because one of the things that I find most frustrating using MCPs, even as a fairly sophisticated user, is one, you just have to use these like magic keywords to invoke the MCP and the right tool and the right thing. And, you know, sometimes I have, one of the challenges I have is I have a lot of MCPs that use the same tool names because so much across SaaS is named the same. Like everybody has the concept of projects. Everybody has the concepts of pages or documents. And so I like this idea of like force invoking a specific MCP via a slash command and not even just force invoking that specific MCP, but force invoking a specific set of tools in that MCP.

25:50Brian Lovin:Super, super useful. And then I will give you props for the instructions at the top that teach somebody, if you have no idea what you're doing here, how do you even get this thing installed? That's such a nice piece to add in as user experience for a consumer of this slash command that might not be you. And so that's something that people should really, really think about. Yeah, yeah. I would say also, it's funny because I've actually watched a bunch of these videos and looking even back at the ones from six months ago, it's crazy how far the tooling has come. And so I imagine that people who for whatever reason might be watching this video in six months will look at what we're doing here and be like oh how naive you know we've come so far mcp is no longer a thing or something like that right and i kind of feel that way now where mcp is it's like not the best thing but it's the best we have so far right like it's very context inefficient sometimes it runs forever sometimes yeah it just like blows up your context window but it's the best we have right now so even just watching this right like here's our design that got built this was literally just pasting the link to the figma file no other custom instructions and now over here on the right it should be uh i think i ran into an issue earlier yeah but something got busted with this let's try the chrome dev tools mcp again i think i quit it midway through because it was detecting some conflict with the window anyways this is pretty good by default and then from here i would iterate you You know, some things you might notice would be like there's no hover states.

27:32Some of these images are broken, but those are just easy follow up tasks.

27:36Brian Lovin:Well, and you're doing this from a kind of design perspective. But think about how many engineers sit there and like pixel pull over Figma prototypes into the front end. And, you know, if you have a great design system, maybe that's easier to do. But it's not what the 27 seconds that we just watched to scaffold stuff out. And so I just think, you know, the friction reduction in these, you know, asset to asset handoffs, which for my entire career, 20 plus years in tech have been the most expensive part of implementing something where a designer gives you a design and then you have to get into the front end or the front end has to be hooked up to the back end.

28:18Brian Lovin:all those little pieces can be smoothed out and done much faster and then you can spend the time on the optimizations the performance the how it feels how it how it works and i think that's just really it's really fun from a builder perspective totally it's so fun and yeah i mean even just sitting here watching this i still just find this magical right like now that it's using the the chrome dev tools mcp they like looped and fixed the broken images and like created this checklist of stuff like okay everything appears to be right it's got this bottom bar these things are obviously wrong but we could go and fix those with the follow-up prompt but again the goal is like can we get 80 percent in literally one prompt i just pasted a link and it just iterated itself towards something that's roughly complete i know and every time somebody is like a little anti-AI assisted coding.

29:10Brian Lovin:I'm like, do you know that I used to have to walk uphill both ways for my CSS? Like, it was not fun to do this. I find this just mesmerizing. This is so cool. Mesmerizing. This is great. This episode is brought to you by Orcus, the company behind Open Source Conductor, the platform powering complex workflows and process orchestration for modern enterprise apps and agentic workflows. Legacy business process automation tools are breaking down. Siloed low-code platforms, outdated process management systems, and disconnected API management tools weren't built for today's event-driven, AI-powered cloud-native world.

29:52Brian Lovin:Orcus changes that. With Orcus Conductor, you get a modern orchestration layer that scales with high reliability, supports both visual and code-first development, and brings human, AI, and systems together in real time. It's not just about tasks. It's about orchestrating everything. APIs, microservices, data pipelines, human-in-the-loop actions, and even autonomous agents. So build, test, and debug complex workflows with ease. Add human approvals, automate backend processes, and orchestrate agentic workflows at enterprise-scale, all while maintaining enterprise-grade security, compliance, and observability.

30:32Brian Lovin:Whether you're modernizing legacy systems or scaling next-gen AI-driven apps, Orcus helps you go from idea to production fast. Orcus. Orchestrate the future of work. Learn more and start building at orcus.io. That's O-R-K-E-S dot I-O. Are there any other commands that you think are super useful? Yeah, yeah, I can show you a couple. um so i want to scroll back up a little ways actually there was this step very early on where you can see it was running over and over again the skill called bun run clod skills find icon what's that well if you look over here in our design we actually have a bunch of very notion specific icons right like we have this ai face we've got home inbox we have all the icons in our project the problem is ai is really bad at estimating what the name of an icon should be or rather it uses like the most obvious name possible which doesn't always match what's in code so for example like this face icon there's no way ai would know what we call this or a very common one is it will if you have like a search magnifying glass right it will just assume that it's called search icon when in fact in our code it's called magnifying glass icon and so this icon hallucination was getting really really annoying so I wrote a little skill called find icon and the skill basically says like anytime you're going to implement an icon first go and actually look through the whole project but also look for synonyms or closely related words to the icon so if you're going to look up something called search icon also try search for magnifying glass icon and it actually wrote a typescript script to do this to just iterate through all of the the files in our icons directory which is like 5 000 right it's a lot so it'd actually be very inefficient for it to try and load all that up into context it needs to write itself a script to do more effective searching so in that that loop here um yeah you can see it like found it looked up magnifying and found the magnifying glass icon it looked up inbox and it looked up gear and trash in order to get all these things correctly now this only this skill had to exist after all of us on the team just got really really frustrated with it hallucinating over and over and over again um it's sad because it obviously missed these bottom three it didn't get them correct uh but the fact that it got these on on the first pass is a huge step up so the way i think about it is you know we have these commands that you run manually and skills are these capabilities that the ai should detect automatically and sort of use at the appropriate time and it'll know to do that based on the description and title you've given it so in this case find icon and then how to search for icons and of course the best part is just letting it do things programmatically on your computer by calling actual coded scripts.

33:49So this was really helpful. Saves us a lot of time and just fixing imports. And nope, search icon does not exist. Those kinds of annoying, annoying steps.

33:58Brian Lovin:Well, what I like about this is one, this is exactly what you would do to like a junior designer or engineer onboarding. You would like explain, you'd be like, sometimes we call it search, but not really. It's magnifying glass. You just got to go find like the closest synonym and the ability to be able to describe that to an agent or a skill or a tool and then let it do it programmatically for you is really useful. We do have a How I AI episode on Claude skills, but one piece we don't go into in detail, which I think is really important, is Claude skills can be bundled with scripts. and so the ability to combine both um you know natural language prompting which is in the skill dot markdown with a set of programmatic tools in terms of scripts is a very powerful combination and claude's very good at making these so oh yeah like all this like i did not type a single line of code in this right like this is a hundred percent like hey i just need this problem to be solved create a skill for it and then creating that skill also create a script so that you can work more effectively, like this is 100 % prompted.