How Notion designers ship live prototypes in minutes | Brian Lovin (Product designer)

1. 0:00 – 2:36

   Introduction to Brian

   1. BLBrian Lovin0: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.

   2. CVClaire Vo0:15

      So explain to us what this prototype playground is.

   3. BLBrian Lovin0:18

      It's just a 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.

   4. CVClaire Vo0: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 [chuckles] to do this.

   5. BLBrian Lovin0:45

      I mean, even just sitting here watching this, I still just find this magical.

   6. CVClaire Vo0:50

      [upbeat music] 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 gonna 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 WorkOS. 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 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. WorkOS gives you drop-in APIs for enterprise features so your app can become enterprise-ready and scale upmarket 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.

2. 2:36 – 4:42

   Building for B2B SaaS

   1. CVClaire Vo2:36

      Start building today. Brian, welcome to How I AI. What I am so excited about in terms of our conversation today is you're gonna 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?

   2. BLBrian Lovin3:09

      The way I think about designing B2B SaaS is you want your designs to encounter reality as early as possible, and, you know, 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, 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, ah, that didn't quite work on this screen size. So you encounter, um, 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, 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, uh, as quickly as possible? And I think that just helps you move faster and end up with better designs.

3. 4:42 – 8:01

   Notion’s prototype playground: what it is and how it works

   1. CVClaire Vo4:42

      So explain to us what this prototype playground is, and how you set it up, and how you might use it.

   2. BLBrian Lovin4:47

      Okay, so prototype playground is nothing magical. It is just a Next.js project, so, uh, actually here, just 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, um, some directories. 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 was 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: "Ooh, I want to try that."... And then on the other dimension is, like, if you spot a cool idea and you wanna 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 wanna 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, I slipped this new button in here, which obviously doesn't exist in the, the, the product. I don't think these things do anything, but it's close enough. If you're like, "Oh, I needed to, 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.

   3. CVClaire Vo7:31

      Yeah, and I wanna 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, mock- uh, Markdown docs you were 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-

   4. BLBrian Lovin7:59

      Yeah

   5. CVClaire Vo7:59

      ... and see who your teammates

4. 8:01 – 10:52

   The technical background of designers using the playground

   1. CVClaire Vo8:01

      are working with. I have a question from an operational perspective. Did you set this up? Why-- Like, was this, like, a passion project for you? Uh, did engineering set it up for you? Like, how did this actually get created?

   2. BLBrian Lovin8:12

      Yeah, I, I set it up with another engineer. I mean, it's just a Next.js app, but then operationally, just a few approvals. It's deployed on Vercel, so we had to, like, go through a little bit of process to get that project spun up, get a few people added as members. Otherwise, yeah, uh, it's not that much. Again, it's just a pretty basic Next.js app, which you can literally use Claude to, like, "Help me make a Next.js app," and it's just gonna get you the, the default-

   3. CVClaire Vo8:38

      I like-

   4. BLBrian Lovin8:39

      You know?

   5. CVClaire Vo8:39

      I like keyboard hands. Everybody does the same keyboard hands [chuckles] motion, where it's just this.

   6. BLBrian Lovin8:43

      [chuckles]

   7. CVClaire Vo8:44

      Uh, I have one more question, which is-

   8. BLBrian Lovin8:46

      Yeah

   9. CVClaire Vo8:46

      ... of the people now working in this repository, how many before were working in code versus this is their first-

   10. BLBrian Lovin8:55

       Mm

   11. CVClaire Vo8:55

       ... repository that they've cloned to, you know, their desktop or deployed? It... Was the design team pretty technically adept already, so this was very natural, or were there some people that needed to be onboarded?

   12. BLBrian Lovin9:06

       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, that are creating things, but 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, um, and we can get into to 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. Um, 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. My 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 gotta figure out how to lower the, the onboarding complexity for people who aren't technical before. So to answer your question, um, 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. Um, but probably the majority of us that are still using it daily had some technical background.

5. 10:52 – 16:00

   Demo: building a podcast player prototype

   1. CVClaire Vo10:52

      Got it. Perfect. Well, let's prototype something.

   2. BLBrian Lovin10:55

      Yeah.

   3. CVClaire Vo10:55

      I wanna see how it actually works.

   4. BLBrian Lovin10:57

      Let's do it. Um, okay, so there's a few ways to make new things in Next.js, 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 wanna do it. Um, 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 I AI, 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 homepage. We have an actual, uh, prototype file here with some code, and then this is kinda nice. Like, it automatically gives you a button to open it in Cursor. So now I can just come in here and start prototyping. Now, typically, my workflow is-... I just fussed 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-

   5. CVClaire Vo12:17

      You're not allowed

   6. BLBrian Lovin12:17

      - how you're supposed to use Claude Code, but I just do it. Um, but I usually-

   7. CVClaire Vo12:20

      We- we're just equal opportunity offending these two tools. [chuckles]

   8. BLBrian Lovin12:24

      I know. I know. Sorry, everybody. Um-

   9. CVClaire Vo12:26

      [chuckles]

   10. BLBrian Lovin12:26

       ... but this is how I like to work. Um, and in fact, I have a little shortcut here where I can just press, uh, Caps Lock+G, and then I can get these two things side by side in my computer. So I usually am Clauding over here, reviewing the changes here, and then monitoring sort of the output over here. So let's see here. Uh, 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, a good, good use case.

   11. CVClaire Vo13:00

       Can we make a prototype for... Oh, like a little l- a, a video and audio, this may be complicated, a video and audio like display module for my, my podcasts.

   12. BLBrian Lovin13:11

       Video and audio module?

   13. CVClaire Vo13:12

       So it'd show, like, video and then maybe, like, an audio player. Let's see. Uh, it, you know, it's, it's... Opus 4.5, I think it can do it.

   14. BLBrian Lovin13:18

       Okay, let's try it. So normally, uh, let's walk through, like, my actual workflow.

   15. CVClaire Vo13:22

       Mm-hmm.

   16. BLBrian Lovin13:22

       There's sort of two steps. One is you can type a lot. Uh, that's not that fun. Um, 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. Um, so we can just talk, and it's just much faster than typing our prompt. The second thing you'll notice with Claude Code is I switched over to plan mode. I 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. 'Cause 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. So we're in plan mode, and I'm gonna invoke Monologue here, and it's recording. And so let's say I wanna 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, a description, and how about if you hit play, there's little confetti that shoots up out of the player? And so we end that, and now I will delete this, and we plan.

   17. CVClaire Vo15:05

       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 Claude Code, is if you don't do it inside a cursor or something that gives you this sort of-

   18. BLBrian Lovin15:31

       Yeah

   19. CVClaire Vo15:31

       ... I love your three-pane window.

   20. BLBrian Lovin15:32

       Yeah. [chuckles]

   21. CVClaire Vo15:32

       Your, like, code window, your Claude window, your output window. Because I see people with, like, 17 tabs of Claude Code going, just ch-ch-ch-ch-ch-ch, accepting a bunch of changes, and I have to read.

   22. BLBrian Lovin15:44

       Yeah.

   23. CVClaire Vo15:44

       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.

   24. BLBrian Lovin15:58

       Yeah, it's helpful.

6. 16:00 – 20:16

   Actionable tips for better Claude Code results

   1. BLBrian Lovin16:00

      Um, and, you know, this is probably obvious to a lot of people who are familiar with using Claude 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, um, but under the hood, I can show you, we actually have, uh, some other files helping us out here. So we have a claude.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 claude.local.md file, and that local, uh, 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, you know, don't go around and mess with other people's files. Like, prefer to work in my directory," and a little bit more about the workspace structure and, and how, like, individual projects can be built. So a couple of those things are, are working under the hood here.

   2. CVClaire Vo17:14

      And while you're accepting some of these Claude Code changes and questions, I do wanna call this out for folks because I think people are pretty aware of the Claude MD global, um, 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 Claude-

   3. BLBrian Lovin17:38

      Yeah

   4. CVClaire Vo17:38

      ... 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, to work in the repo.

   5. BLBrian Lovin17:53

      Totally. Yeah. Okay, I don't know. We'll, we'll see how this goes, but it's gonna install some sort of confetti. It's gonna have a player, audio player.

   6. CVClaire Vo18:02

      Look at that wireframe!

   7. BLBrian Lovin18:02

      This is really awesome. Like, it does a wireframe in the plan, which is crazy. Um, and here, I don't know, we can just kind of skim this for the sake of this example.... Ah, 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, and my philosophy on this has been: any time 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.

   8. CVClaire Vo18:58

      Ooh, la la!

   9. BLBrian Lovin18:59

      Well, here, let's, let's hold on that and see if the-

   10. CVClaire Vo19:01

       Yeah, let's finish your example.

   11. BLBrian Lovin19:02

       See 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, ESLint, right? And, like, look for actual TypeScript errors. The second is you can give it access to MCP tools. So Playwright is one, the Chrome DevTools, 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 any time Claude tells you to do something, ask if you can teach it to do that thing for itself. So I don't wanna 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. It 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, we were able to run this task for much longer without my input and actually get to something that is working well.

7. 20:16 – 20:30

   Analyzing the result

   1. BLBrian Lovin20:16

      Um-

   2. CVClaire Vo20:17

      I- I'm actually very impressed with this prototype. It's much more lovely than I thought it was going to, to end up, much more robust, and the confetti looks great.

   3. BLBrian Lovin20:26

      The confetti looks great, yeah. Well, here, I'll, I'll show you another example. This is,

8. 20:30 – 23:03

   Creating slash commands to simplify the workflow

   1. BLBrian Lovin20:30

      I think, where the power of MCP gets crazy. So let's, let's actually clear this. We're just gonna 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.

   2. CVClaire Vo20:57

      Yep.

   3. BLBrian Lovin20:58

      Um, so what Claude has is called slash commands.

   4. CVClaire Vo21:02

      Mm-hmm.

   5. BLBrian Lovin21:02

      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 gonna do the same thing as clicking the New button on, on the, the browser, which is what we did earlier. Uh, the difference, of course, is I don't have to click things. I kinda wanna design this so that I basically live over in the terminal. Um, so here's-

   6. CVClaire Vo21:34

      And can you show us really quickly in your repo just how these, these commands get defined? Perfect. Thank you.

   7. BLBrian Lovin21:39

      Yeah, sure. So, uh, again, it's basically a glorified prompt. Um, it has a name, a description, and then some instructions. So in our case, uh, we say, uh, kind of how to come up with a name based on what the, the user provides, tells it, uh, 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. Uh, 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. So the reason it's important to provide these code snippets is to show it what success looks like, right?

   8. CVClaire Vo22:36

      Yep.

   9. BLBrian Lovin22:37

      If this was, like, just instructions to create blank files, it wouldn't know-

   10. CVClaire Vo22:42

       Yeah

   11. BLBrian Lovin22:42

       ... what to create. So in our case, we're just showing it an example of, 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

9. 23:03 – 25:06

   Turning Figma designs into production-ready code

   1. BLBrian Lovin23:03

      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, uh, 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, a couple of things. The 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, 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, uh, or extracting the design from Figma, then it will 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. And 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-

   2. CVClaire Vo24:50

      Perfect

   3. BLBrian Lovin24:50

      ... that's just how AI is right now.

   4. CVClaire Vo24:52

      I was gonna say-

   5. BLBrian Lovin24:53

      So we can kind of-

   6. CVClaire Vo24:53

      ... about 60%, so [chuckles]

   7. BLBrian Lovin24:54

      Okay.

   8. CVClaire Vo24:55

      I think that was right.

   9. BLBrian Lovin24:56

      Well, actually, you know, it, 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

10. 25:06 – 30:54

    MCP frustrations and tips

    1. BLBrian Lovin25:06

       80%.

    2. CVClaire Vo25:07

       I wanna call, 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, um, 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. 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, um, slash command that might not be you.

    3. BLBrian Lovin26:10

       Yeah. Yeah.

    4. CVClaire Vo26:10

       Um, and so that's something that people should really, really think about.

    5. BLBrian Lovin26:14

       Yeah. Yeah. Um, I would say also [chuckles] it's funny because I, 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."

    6. CVClaire Vo26:34

       [chuckles]

    7. BLBrian Lovin26:34

       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 it, 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, the- something got busted with this. Let's try the Chrome DevTools MCP again. I think I quit it midway through 'cause it was-

    8. CVClaire Vo27:24

       Yep

    9. BLBrian Lovin27:24

       ... detecting some conflict with the window. But anyways, this is pretty good by default, and then from here, I would iterate. You know, some things, things you might notice would be, like, there's no hover states, some of these images are broken, but those are just easy follow-up tasks.

    10. CVClaire Vo27:36

        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-

    11. BLBrian Lovin27:52

        Yeah

    12. CVClaire Vo27:52

        ... but it's not, what, the 27 seconds that we just watched-

    13. BLBrian Lovin27:56

        Yeah, yeah

    14. CVClaire Vo27:57

        ... to scaffold stuff out. And so I just think, you know, the friction reduction in these, um, 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-

    15. BLBrian Lovin28:12

        Yeah, yeah

    16. CVClaire Vo28:13

        ... where a designer gives you a design, and then you have to get it into the front end, or the front end has to be hooked up to the back end. 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.

    17. BLBrian Lovin28:35

        Totally. It's so fun. And yeah, I mean, even just sitting here watching this, I still just find this magical, right? Like, [chuckles] now that it's using the, the Chrome DevTools MCP, it, 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% in literally one prompt? I just pasted a link, and it just iterated itself towards something that's roughly complete.

    18. CVClaire Vo29:05

        I know, and 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?"

    19. BLBrian Lovin29:15

        Yeah. Yeah.

    20. CVClaire Vo29:15

        Like, it was not fun [chuckles] to do this.

    21. BLBrian Lovin29:17

        Like, I-

    22. CVClaire Vo29:18

        Oh, boy

    23. BLBrian Lovin29:18

        ... I find this just mesmerizing. This is so cool.

    24. CVClaire Vo29:22

        Mesmerizing. This is great.

    25. SPSpeaker29:25

        This episode is brought to you by Orkes, 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. Orkes changes that. With Orkes 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 back-end processes, and orchestrate agentic workflows at enterprise scale.

    26. CVClaire Vo30:28

        ... all while maintaining enterprise-grade security, compliance, and observability. Whether you're modernizing legacy systems or scaling next-gen AI-driven apps, Orkes helps you go from idea to production fast. Orkes, orchestrate the future of work. Learn more and start building at orkes.io. That's O-R-K-E-S dot I-O.

11. 30:54 – 35:03

    Demo: creating a custom “find icon” skill

    1. CVClaire Vo30:54

       Are there any other, uh, commands that you think are super useful?

    2. BLBrian Lovin30:58

       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, this skill called, uh, Bun Run Claude 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. Uh, we have all of 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 gonna implement an icon, first go and actually look through the whole project, but also look for, uh, synonyms or, or closely related words to the icon. So if you're gonna 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, five thousand, right? It's a lot. So it'd actually be very inefficient for it to try and load all of 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 of 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 'cause it obviously missed these [chuckles] 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, uh, 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, uh, coded scripts. So this was really helpful, saves us a lot of time in just fixing imports and, "Nope, search icon does not exist," those kinds of annoying, annoying steps.

    3. CVClaire Vo33:59

       Well, what I like about this, uh, 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 gotta go find, like, the closest-

    4. BLBrian Lovin34:13

       Yeah, yeah.

    5. CVClaire Vo34:14

       -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. Um, we do have a How I Ep- 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.

    6. BLBrian Lovin34:32

       Yes.

    7. CVClaire Vo34:32

       And so the ability to combine both, um, you know, natural language prompting, which is in the skill.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-

    8. BLBrian Lovin34:49

       Oh, yeah

    9. CVClaire Vo34:50

       ... you can have Claude-

    10. BLBrian Lovin34:50

        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

12. 35:03 – 41:09

    Demo: Creating a deploy command to simplify GitHub workflows

    1. BLBrian Lovin35:03

       is a hundred percent prompted.

    2. CVClaire Vo35:04

       Show us your, your last command, 'cause I think this is a really useful one.

    3. BLBrian Lovin35:08

       Okay, this is fairly new. I think I merged this last week. Going back to sort of the problem with prototype playground, it's still a Next.js app. It's still React and TypeScript and Git and branches, and it's just a lot of concepts to throw at someone who maybe is used to only prototyping in Figma, or they're intimidated by a terminal or code. And so I'm trying to figure out, like, how do we make this thing more approachable? How do we make it easier to onboard, but also not dumbed down, right? Like, I want people to learn how to use computers. I want people to even subconsciously absorb the ideas of Git and branching and pull requests and merging. So I don't know the best way to do that, but my first attempt is to create this skill called... or this command called Deploy, and Deploy does basically two things. The first is it, like, goes through prerequisites and makes sure that it has the GitHub CLI tool installed on your computer and that you're authenticated, and if you're not, it, like, walks you through those steps, how to do it. And then the second step is it will just walk you through, step by step, how to get this prototype you've just created deployed so that you can share the link with someone on your team. Uh, let's see what happens. I'm gonna try it now. I'm gonna hit Deploy, and we'll see what happens. Um...... There's a couple of really cool loops in here that I think save people a lot of time. So we can see it going through the prerequisite steps here. It's making sure I'm logged into GitHub. Now, the first thing here, look, it's looking to see if I'm on a Git branch. It notices I'm not. I'm on main, and it shouldn't be doing that, right? Like, we never wanna push to main. So I think what it should do is help me create a new branch. Um, and we'll see if [chuckles] it actually does it correctly.

    4. CVClaire Vo37:09

       [chuckles]

    5. BLBrian Lovin37:09

       It's also trying to find some TypeScript errors, and it's gonna run some tests. I basically told it to do all this stuff 'cause it's really annoying if you push code to GitHub, wait for all the checks there to pass, if they fail, then you gotta come back to your computer, fix stuff.

    6. CVClaire Vo37:24

       Yeah.

    7. BLBrian Lovin37:24

       Okay, great. So it created a branch. Now it's staging our changes.

    8. CVClaire Vo37:28

       Nice branch name.

    9. BLBrian Lovin37:30

       It's perfect. Creating the commit.

    10. CVClaire Vo37:34

        I'll give... I love this. This is a great idea. I will also give my just, like, hack to learning Git for anybody who hasn't used it. I just love the Git, Git De- GitHub Desktop app.

    11. BLBrian Lovin37:45

        Mm. Mm-hmm.

    12. CVClaire Vo37:45

        It just, like, it gives you buttons for all of this. You can see your diffs. You can, like, create branches with buttons. So I think this is awesome, and if you are intimidated by the command line, there's, like, literally a beautifully designed desktop app [chuckles] that you can use.

    13. BLBrian Lovin37:59

        That's true.

    14. CVClaire Vo37:59

        It's pretty nice.

    15. BLBrian Lovin38:01

        That's true. Well, now check this out. So it's created the PR, and in the instructions, I've told Claude, "Hey, whenever you create the PR, open it in the user's default browser."

    16. CVClaire Vo38:12

        Yeah.

    17. BLBrian Lovin38:12

        So now we have-

    18. CVClaire Vo38:13

        Ah, it's connecting

    19. BLBrian Lovin38:13

        ... our, our PR open here, and, uh, this check to deploy it to Vercel will fail, but that's okay because I give it one more step here, and all this red looks scary, but it's not. I tell Claude to just monitor the CI every 30 seconds or every 60 seconds until all of the checks pass, and I tell him the, the specific checks that I care about, and if any of the checks fail, just fix yourself and then push the changes. So, you know, if people push something to GitHub, and there's a TypeScript error, they'll see some error over here in the GitHub UI, they'll take a screenshot, they'll send it to me on Slack, and be like: "Why is my thing not working?" I wanna just avoid that entirely. And, you know, going all the way back to my first principles, like, if the AI is asking you to do something, like, "Check the PR," or, "Tell me the CI status," you should really be thinking about, how do I teach Claude to just do that for itself? So over here, this slash deploy command literally is just end to end. I just sit back and watch it loop over and over and over again, checking its, its commit status, its CI status, making sure everything works, and then when all of the check marks over here are green, the script will stop. I think this is pretty awesome. I, I feel, uh... I hope it lowers the barrier and, like, the intimidation factor of having to learn all of these tools, but at the same time, you know, if you are curious, you can just sort of read along and understand what's happening. It's, like, instructed to communicate in clear English what it's doing.

    20. CVClaire Vo39:54

        My favorite part of this, and it's not gonna be what people think... I think the slash command is amazing. I think running through all the, um, pre-project checks, great. I love that you just open it up in a browser window. It's one of those things-

    21. BLBrian Lovin40:08

        Yeah, yeah

    22. CVClaire Vo40:08

        ... that, you know, even if you created the branch, created the pull request, said it was ready to go, people are like: "Okay, well, now, now, now what do I, like, now what do I do?" And just forcing-

    23. BLBrian Lovin40:18

        Yeah

    24. CVClaire Vo40:18

        ... open the browser window and saying, like, "This is where it lives on GitHub." My question is, do you have to get your code reviewed in Prototype Playground, or do you just-

    25. BLBrian Lovin40:29

        Uh, for Prototype Playground, no.

    26. CVClaire Vo40:31

        [chuckles]

    27. BLBrian Lovin40:31

        I mean, people can always ask for it, but no, we pretty much just YOLO merge. I think the thing that-

    28. CVClaire Vo40:36

        I love it

    29. BLBrian Lovin40:36

        ... I mostly check for is, like, did my PR accidentally mess up someone else's prototype?

    30. CVClaire Vo40:43

        Yeah, yeah.
13. 41:09 – 41:59

    Quick recap

    1. BLBrian Lovin41:09

       it's close. [chuckles]

    2. CVClaire Vo41:10

       So I'm just gonna zoom out. Everything that we went over, you created a shared repo for your entire team, where you could have name-level directories, no database. We're just using metadata JSON and, and, and, um, shared code-

    3. BLBrian Lovin41:24

       Yeah

    4. CVClaire Vo41:24

       ... to put different prototypes inside this repo. You've set it up with both global Claude rules as well as local Claude rules, plus Claude commands and Claude skills to sort of guide people along common paths. My favorite one is gonna be Figma to code.

    5. BLBrian Lovin41:44

       It's so cool.

    6. CVClaire Vo41:44

       Beautiful.

    7. BLBrian Lovin41:45

       It's so cool.

    8. CVClaire Vo41:45

       It's so good, and then the number one rule that I've heard from you today is, when asked to do something by Claude, teach Claude to do it. It's [chuckles] it's so-

    9. BLBrian Lovin41:57

       Yeah.

14. 41:59 – 46:48

    How code-based prototyping is changing design at Notion

    1. CVClaire Vo41:59

       [chuckles] So you have this amazing prototype, um, playground. You've set all this stuff up. How has... Let's, let's just do a couple lightning-round questions and get you on your way, and my first one is: How has this shift from doing things, you know, maybe exclusively in Figma or in these lower-fidelity prototype models to really leaning on things like Claude Code, code-based prototyping, how has that changed the design team? Has it changed a small part of the design team? Do you feel like overall, things in the organization are shifting in, in a way? How do you feel like it's changing the way people work together?

    2. BLBrian Lovin42:39

       I still use Figma. Um, I probably still spend-... 60 to 70% of my time in Figma. You know, there's just certain things that you're making that don't need to be in the browser. They don't need to be coded up. You can just look at it and be like, "Yeah, that's roughly right. We should just ship that." I find that as you're designing for things that use AI, that is not true, though. So, for example, if you are building a chatbot, or in my case, I work on Notion AI, I don't think you can design a good chat experience in Figma. You can design what the chat input looks like. You could design a little chat bubble and a send button, and, like, a dropdown for model picker. I think all that's fine in Figma, but what you can't design in Figma is what it actually will feel like to use that thing. I probably should have said this at the very beginning, but the reason Prototype Playground existed is because when I started working on Notion AI, I was literally designing conversations in Figma. You know, it was like, "The user's gonna say this, and then the AI is gonna say this, and then it's gonna work perfectly and create a page or a database." And, like, you mock these golden paths in-

    3. CVClaire Vo44:02

       Mm.

    4. BLBrian Lovin44:02

       -Figma, and then the engineers go and they build it, and then it just doesn't work that way, right? It... You send a message, the AI gets stuck, or it asks a follow-up question, or it does the wrong thing, and you need to correct it. And Prototype Playground was, for me, a way to connect to real AI models and just start feeling out, like, "Okay, how are the models gonna work if I submit this kind of prompt? What happens if I connect it to the Notion MCP? It doesn't even know how to create a page. What happens if it runs into an error? Oh, right, we need to design an error state for this. What happens if the model is thinking for two minutes and the user's staring at an empty chat screen?" Like, what should we do in that intermediary time to help them feel confident that it's working, that it's doing the right thing? Is there any way to show incremental progress? I, I just found those things very, very hard to design in Figma. So to go all the way back to answering your question, I think as more and more people are designing apps that both are f- for AI or incorporate AI in some way, they're gonna need some other, like, native code-first way of working to actually understand what the models can do. It feels honestly kind of bad. It feels like a lot of wasted time, where every month, the whole freaking industry has to learn, like, "Oh, what are the new capabilities of this model, four dot three dot two Max Pro?"

    5. CVClaire Vo45:28

       [chuckles]

    6. BLBrian Lovin45:29

       And then a month later, it's all irrelevant, 'cause the new thing has come out, and then you learn that. Um, it feels like a waste of time. Unfortunately, I think it's necessary because the model capabilities are still advancing quite steadily with each release, and it's really important as designers to understand what models are capable of doing, so that we can create product experiences and designs that sort of live a- right at the edge of what the model's gonna be able to do well. What's really frustrating is, if you design something that's like, you know, "Oh, a user's just gonna ask for a cool website, and it's gonna be this perfect output website on the other side," models can't do it, right? Or, or they require a bunch of fine-tuning and, and sort of, like, intermediary prompting to get that right. Designers just have to know what's going on under the hood there to, to design something that's plausible and possible. So I, I suppose the more products incorporate AI, the more designers will have to shift to thinking sort of prototype first, but probably prototype first with actual code under the hood, where you can incorporate modern models and see where they break, and see where they're good, and see where they're bad, and actually form an opinion about which models are good for which things, uh,

15. 46:48 – 48:42

    Brian’s tool preferences

    1. BLBrian Lovin46:48

       that kind of stuff.

    2. CVClaire Vo46:49

       So speaking of which models are good for which things, and you're using my, my current fave, my babe-

    3. BLBrian Lovin46:55

       Uh-huh

    4. CVClaire Vo46:55

       ... Opus 4.5.

    5. BLBrian Lovin46:56

       Oh, it's so good.

    6. CVClaire Vo46:57

       Why- why Cla- I mean, why Claude Code? Why Cursor in this non-cursory configuration? Tell me how you arrived at this as your, your tool stack.

    7. BLBrian Lovin47:08

       I need to play with more of the Cursor stuff. I actually think Cursor agent mode is pretty awesome. I've, like, clearly tried it a little bit. I just haven't gotten that, that far. The thing that I still really appreciate about Cursor [chuckles] I actually technically use both. Like, if I have, I don't know, like, some file, and there's, there's, like, some error here-

    8. CVClaire Vo47:30

       Mm-hmm

    9. BLBrian Lovin47:31

       ... I still really appreciate being able to just hover over the error-

    10. CVClaire Vo47:34

        Yeah

    11. BLBrian Lovin47:34

        ... and there's a button that says, "Fix in chat."

    12. CVClaire Vo47:36

        Yep.

    13. BLBrian Lovin47:36

        That's still faster than, like, copying and pasting it down into, to Claude Code. So I actually use both a little bit. I just think Claude Code does the best work. I don't know how else to describe it. There's this weird feeling as you use all the different models for different things. It's like, to different people, they just feel right. For me, Opus 4.5 is just insanely good at doing what I want, and I like the way it approaches problems. I like the way it plans. I like the way it executes. I like the way it communicates back to me, and the, the follow-up questions it asks. And then, w- you know, why not use Opus four dot five in Cursor versus in the, the terminal UI? I don't know. I think this is just purely personal preference. Like, some people look at this, and they're like, "This looks like shit. Like, give me buttons, and UI, and components, and, and dropdowns, and things like that." And for me, I don't know, this just feels nice and easy to-

    14. CVClaire Vo48:33

        It just feels good

    15. BLBrian Lovin48:34

        ... to read.

    16. CVClaire Vo48:34

        A- as our friends over at Everyce-

    17. BLBrian Lovin48:36

        Yeah

    18. CVClaire Vo48:36

        ... each model has a mouth feel. [laughing]

    19. BLBrian Lovin48:38

        [chuckles] Yeah, yeah, exactly.

    20. CVClaire Vo48:40

        And Claude Code and Opus-

16. 48:42 – 51:45

    Prompting techniques when AI is not listening

    1. BLBrian Lovin48:42

       Yeah

    2. CVClaire Vo48:42

       ... have a good one. Okay, and then my very last question, 'cause you are-- you seem like a, uh, expert prompter, but when AI is not listening, when it's not listening, when it makes up-... you know, CI checks that passed where it didn't, it didn't actually pass, what is your prompting technique?

    3. BLBrian Lovin49:00

       Basically, I notice there's a direct correlation with how good of things I can make and how tired I am. And if I ever get to the point where, "Man, Claude just sucks, it's doing the wrong stuff," and I go back and I reread the thing that I said, I realize I made no sense. And so the best solution for me to write better prompts is, like, go to bed, try again tomorrow. Um, which, [chuckles] I don't know if that's a cop-out answer. It's not actually writing better prompts, but, uh, you know, your, your output's just directly correlated with how good of context you give the thing, and if you're giving it sleepy, tired, lazy, please fix this type, uh, commands, it's gonna do bad work.

    4. CVClaire Vo49:45

       I don't know if this is what you intended, but you gave me very good, both relationship and parenting advice, [laughing] advice there, which I'm thinking about.

    5. BLBrian Lovin49:52

       Yes.

    6. CVClaire Vo49:52

       I was trying to ask my kid this morning to do something. I'm pretty tired-

    7. BLBrian Lovin49:56

       Yeah

    8. CVClaire Vo49:56

       ... and I clearly, the inputs were not [chuckles] gonna get the outputs that I want.

    9. BLBrian Lovin50:03

       Just... Well, it's easy. I mean, just go take a nap. Can't you do that at any point-

    10. CVClaire Vo50:06

        Yeah

    11. BLBrian Lovin50:06

        ... that you need?

    12. CVClaire Vo50:06

        I love that.

    13. BLBrian Lovin50:07

        [chuckles]

    14. CVClaire Vo50:07

        You know what? My, my... One of my favorite little agents, Devin, does have a sleep. [chuckles] You can, you can send the agent to sleep.

    15. BLBrian Lovin50:14

        Oh, nice, nice.

    16. CVClaire Vo50:14

        Maybe we just need- we need the agents to send us to sleep. Well, Brian, this has been awesome. Just a deep dive, I think, in a very forward-looking view into how design teams, as you say, especially ones that are gonna be building AI products, are gonna start doing their work. So where can we find you, and how can we be helpful to you in Notion?

    17. BLBrian Lovin50:32

        Uh, you can find me-- I'm mostly on Twitter or X, uh, brian_lovin, or my website, brianlovin.com. And then I work on Notion AI, and I think it's genuinely, uh, one of the few useful sort of knowledge work agents. So if you haven't tried it, try it, and send me feedback. We're always trying to make it better, help it do more things better, faster, so try Notion AI, yeah.

    18. CVClaire Vo51:01

        And we're big fans of Notion AI, too, here at the podcast.

    19. BLBrian Lovin51:04

        Nice.

    20. CVClaire Vo51:04

        So definitely give it a look, and definitely give some feedback, and we will send it directly to Cla- Claude and put it in prototype playground.

    21. BLBrian Lovin51:11

        Yes, yes.

    22. CVClaire Vo51:11

        Brian, thank you for joining How I AI.

    23. BLBrian Lovin51:15

        Thank you for having me.

    24. CVClaire Vo51:17

        [upbeat music] Thanks so much for watching. If you enjoyed the show, please like and subscribe here on YouTube, or even better, leave us a comment with your thoughts. You can also find this podcast on Apple Podcasts, Spotify, or your favorite podcast app. Please consider leaving us a rating and review, which will help others find the show. You can see all our episodes and learn more about the show at howiaipod.com. See you next time! [upbeat music]

Episode duration: 51:45