Andy Madrick - Why AI changed design handoff forever

[00:00] How is AI changing the way that we collaborate with engineers? I took the directory that this was in, in the playground, fed it to an LLM and said, make this work in production, and it one-shotted it and did it like perfectly. It was like flawless. The engineer Rob and I were both like, this is so sick. I now have the skills using these tools to do most of the front ends and then ship PRs that I can get really high [00:30] mile of craft in code. These LLMs are not very good at the last mile of design, and that's still like our superpower.

It needs to be our superpower. Our engineers will bring it all the way like up to 80 to 90 percent, and then that's up to us as designers to just own the outcome is what we say here at Eption. And I think we have no excuse anymore to not be responsible for those changes that we want to see. Welcome to Dive Club. My name is Rid, and this is where designers never stop [01:00] This episode is with Andy Madrick, who's leading the design of Notion Meeting Notes. We're going to do a deep dive into his workflow with AI and all of the ways that it's changing what collaboration looks like at Notion.

It's a super practical conversation with a lot of screen sharing. And we're going to start with a behind the scenes look at how Andy designed one of Notion's most viewed interfaces. At Notion, we have our Make with Notion conference over here. [01:28] where we announce certain features. The in-product touchpoint for that is always a modal. We announce everything via this big modal that you see on the top left. [01:36] Um, [01:36] that announces all the features that we are excited about this year. And at Notion, I don't know if it's so much a rite of passage, but it's like, who...

[01:46] wants to build this modal. There's a ton of eyeballs on it. Ivan is very involved, which is so cool, because I started on this a month after I started in Notion, and then I got to work with Ivan every day. It was awesome. What does it take to actually go from zero to this modal that is celebrated and that everybody's going to see? We have this modal. This is what we ended up getting to, our final, most polished version. We were really excited about it. We thought it had a [02:14] It's really exciting.

Ivan was talking with [02:16] Alan Kay, two heroes of mine, same place. But to get started on this, we... [02:22] just jammed on a lot of different iterations, and [02:26] For me personally, what was really nice is that I was working with a really great PM. [02:30] who's also named Ivan here at Notion. He was able to kind of triage a lot of this stuff for me, and I got to just build. So I started out just creating... [02:39] A bunch of different iterations, right? So I have this guy, but then I have like a million different ones in parallel, jamming on all of them.

More or less fidgeting in tandem. Are these mock-ups? Like, are you doing this in Figma or are you building something nice? So this is all in Figma. So my workflow is I do a lot of pixel pushing in Figma still. I'm showing you slides right now because I'm a bit of a control freak. And so when it comes to crafting things like this, I'm pretty fast in Figma still. [03:09] migrating more and more toward my initial prototypes or my initial explorations being in code. But at this point, this was like September of 2025, [03:19] I'm still doing a lot of Figma.

So I do all these iterations in Figma, and then instead of just sharing Figma links with a bunch of people, I create this prototype in our prototype playground, which is a very lightweight version of our Notion code base, where I just mock these up in code, and now I have a bunch of different versions that I can send out to whoever is interested in seeing this. So it's a lot easier for sharing, right? Like, I have this all in one space, [03:47] Let's click through. I can just send a URL to folks and they can look through this.

Never in a million years did I think my design workflow would change so drastically in the last few months. And a big part of it is Paper's new snapshot tool. It's a Chrome extension that lets you copy any component or element from your live website and then paste it directly into Paper as editable layers. So all the time, I'll grab something from Prod, have Claude immediately spin it up six different ways on Paper's canvas. [04:17] to send a concept back to Claude, it's seamless because Papers Canvas uses real HTML and CSS.

That workflow feels a lot like the future of design to me, and you can start doing this today. Just head to club slash paper to try it out. People are getting answers from tools like ChatGPT and Perplexity a lot more than they're clicking on Google lately. So if your site isn't AI readable, then you're losing visibility that you can't see in your analytics. [04:47] just launched a free AEO tool, which shows you how these AI systems read and understand your website. So in 10 seconds, it can scan your site, score it on AEO readiness, surface what's hurting your visibility.

I ran it on the Dive Club website and I only got a 50 out of a hundred, but thankfully, Framer gives me the exact steps that I need to take to fix it. So definitely take a [05:17] A-E-O, to get started. Now on to the episode. What happened from here is that people start deciding what they like, what they don't like. We started to find that this was the motif that we started to gravitate towards, right? We have the nosy faces on the left with some kind of [05:34] asset on the right.

And we're like, okay, we're getting close to what we want. So I go in Figma, refine it a little, and then I go back into our prototype playground, and I create an additional prototype that uses that motif, and then I allow other people to... [05:49] to edit this however they want. [05:51] So instead of someone giving me feedback on a Figma file, I'm able to, like, allow a certain level of customizability here, and then different folks at Notion are able to go in [06:03] click around, change the titles, change the number of assets here, change the section headers, whatever, [06:11] and then they can take screenshots and send it back to me.

[06:14] and then we're all, like, co-designing together [06:17] But it's kind of like... [06:19] the home screen on your iPhone, where you can drag stuff around and drop stuff how you want it to be, but at the end of the day, you're still on Apple's rails, and it's still like, [06:29] I'm in this world that's a little curated and opinionated. I love this because I was just talking to a designer who is having so much difficulty collaborating with content teams again. Because when it was in Figma, somebody could just click and just edit the text.

For a content designer, there's so much value in being able to write within the context of where it would exist, and yet they're doing everything in code now, and so they didn't have this. Really, really cool what you built here. Building this was great. [06:56] Really pretty simple. I took the Chrome from our sidebar and I was like, "Hey, we need to make these text inputs that are linked to the content on the screen." [07:05] And I think at the time I was using Composer 1.5, or maybe it was Composer 1 at the time, and it handled this.

[07:13] No problem. That's cool. I have not seen something like this before. That makes total sense to me. [07:18] Oh, cool. Nice. Um... [07:21] So then we got feedback from Ivan, CEO Ivan, and he said... [07:26] I was jamming with him one day, and he's like, make it feel like a video game. [07:29] and he started pulling things around, and we got into Figma. [07:32] And he's like, I want the nosy faces to be off the screen, like off the modal. Like, I want this to feel... [07:38] Like I'm playing a video game and I got a prize or something like that.

Make it really exciting. So then it's like, okay, a little bit back to the drawing board. But that's the fun part of this, right? We took all these pieces, moved them around a little bit. And then I was thinking about how would I animate this? [07:57] and what would it look like in field? For me, I'm showing this screenshot because [08:02] I still like doing a little bit of animation in food. [08:06] I don't do a lot, but like I said, I'm a control freak. I feel like Figma still gives me a little bit of an ability to control things in a deterministic way.

So I did a little bit of prototyping in Figma, like very little. I never make click-through prototypes in Figma, but I will make really simple things like this. It's like, well, if this face does that, [08:26] then the text moves like this. And for someone like me, who's been using Figma for years, [08:31] This is... [08:32] a lot of the time can be faster than code. I've been doing front end for... [08:36] let's say 10 years, when I started doing this, Figma was still a lot faster. [08:40] But now these coding tools are getting so good.

[08:43] The speed is starting to increase, so at the time, [08:48] This is faster for me than Figma. But then I'm starting to sketch out, like, what this animation should look and feel like. And instead of telling an LLM, [08:57] I want... [08:58] the nosy face here to move to this pencil nosy, to move to the right and shrink and then fade out, and then this will move in. I've had a lot of success lately. [09:09] sketching keyframes, taking screenshots, and just feeding it to an LL. And it rocks. Computer vision is so good these days.

So I start polishing the UI a little bit here, and it's like, okay, we've got a composition we really like. I'm gonna get into the nitty gritty even more. I'm gonna show like, okay, I want the text to move. [09:30] with the nosy faces. And then I'm going to show like, okay, this is step one, two, three, but I want it to move in this direction. So again, I'm taking screenshots of this and feeding it to Composer. And then I get really, really nitty gritty. Oh, this is super granular. Yeah, I mean, like, I think with a lot of this motion design stuff, coding tools are so good at executing it.

[09:51] but you have to be very, very descriptive about what you want. Otherwise, you're going to be fighting these things for, like, hours. They're going to be pulling your hair out and going in circles. So for me, it's like a picture is literally where the thousand works. And so, like, I can just do this, make, like, okay, here's what nosy is going to do at the end. It's going to come back over here, and I'm going to label what state this is in. And then, like, we come out the other side, and we actually have something that works in code.

This was a one-shot. It's like you have to refine it over time. [10:21] But like [10:22] the animation actually worked really well. And what was really, really cool is when I go and I speak with our engineers who are working on this, it's like, how do we translate this from simple playground code [10:35] to production code. All I did [10:38] was I took the directory that this was in, in the playground, fed it to an LLM and said, make this work in production. [10:45] And it one-shotted it and did it, like, perfectly.

The animation was, like, flawless. Like, it was so simple. The engineer, Rob, and I were both like, this is so sick. And then I'd tell Max, our head of product, about that. He's like, this is so sick that we can do this, right? I feel like that's kind of the dream setup for so many teams. But we're still in this phase where everybody has to build it out of the box right now. But, like, what you just described, where you have, like, the lightweight prototype playground, I'm assuming it's probably even more than the 80-20 of Notion.

[11:15] really get the front end that you can kind of play with. And then that translation step, like if it's anything even close to a one-shot, like what you just described is... [11:23] It feels like the ideal workflow for Teams kind of everywhere. It's really, really cool to see your process, even involving the Canvas too, like that full pipeline. It's neat. It's neat. We have to build... [11:35] our own workflows for each other. [11:38] in these organizations. Giving people the tools to make really strong decisions is the strongest thing for us, right?

Like we as designers, we can do that, right? So we can create these prototypes that give people enough freedom [11:51] to involve them in the process, but also relying on our own training as designers to set some rules up. [11:57] be [11:58] we ended up [12:00] Actually, we had a hedge, right? And so we had to build three different versions of this because internally we're like, this new modal variant is really sick, but it could be confusing to people. Why is it a square? Modals aren't usually square. Like we were worried that it might not convert super well.

So when it came to ship this thing, we had to be like, okay, we need one with three heads. We need one with four heads that doesn't like animate as like interestingly. [12:30] on the right where it's like, here's our nosy faces and some kind of video playing on the right. And when it came to ship it, we had ecstatic gates for each one, and we were watching these really intensely. We shipped all three at the same time, [12:43] We're seeing which one would convert the best. [12:46] And I always love to ask you, Rid, or to guess which one of these converted the most, like the highest.

What would be your guess? I really want it to be the one on the left. But I'm nervous that you're going to say the safe one. Well, before I tell you, I want to say, like, Ivan and then our head of product, Max, had a bet. [13:03] And they're like, okay, let's bet, like, [13:04] 500 bucks on which one's going to win. [13:06] And I was like, well, we can't bet money. Let's bet like a gift. And they both... So I haven't bet on the one that you bet, or on the four-hand version, and Max bet on the three.

But I hate to say... [13:16] that the safe one did. Yeah, I knew it. I knew it. I was almost threading the reveal. The thing about it, the thing about it, my hypothesis, look at the size of the buttons, man. Like, one had a huge button, the other had like tiny buttons. So we sweat the details on this for like a month, right? [13:35] And then it just turns out, like, [13:37] It's probably just the size of the button. If you just made this button bigger, it would... But, yeah, that's that little...

[13:44] Digression. That's good. I appreciate you giving a little behind the scenes of the workflow. And it's fun to see... [13:52] the full end-to-end process for a product that I use every day. That's always one of my favorite parts of even doing this podcast. You touched a little bit on showing how you made it so people can edit the content inside of the modal, that kind of a thing. I'm wondering if maybe there's another layer that we can go into around... [14:11] Just given this shift, you talked about how it's a little bit faster to do things on the front end.

Now you're moving toward code, maybe starting code more often. How's that changing the way that you are collaborating with the team when you can't just hop into a Figma file and spotlight someone anymore? If I'm working on a really big... [14:32] like reframe, which we're doing right now in Notion, is like we're rethinking a really big foundational concept at Notion. [14:40] is [14:41] I could just go into Figma and redesign every single screen and, like, give feedback on that. [14:46] But I found that [14:47] it's so much faster to just spit up a crude representation of Notion with an LLM that allows people to click around and feel all these new proposals that we're making.

So the bigger the feature, the more likely I am to start in code. But if it's a smaller thing, like a modal or polish, visual polish, or something like that, I find Figma to still be really helpful. [15:10] And, like, personally, I'm long on Figma because you can just directly manipulate everything with your hand, you know, your mouse. But I still feel like it's an extension of me rather than, like, feeding an LLM or writing some front end. And so if it's a tight feature or... [15:25] Visual Polish, like I said, I'm going to get into Figma.

[15:28] sketch something out [15:30] and then share that with the team. But like I said, if it's something really big, [15:34] We'll just sketch out, have an LLM, [15:37] sketch out all these different flows, and then we can evaluate and work through those together, essentially. The collaboration part of things, it's more about, and this is a question that's come up a lot, [15:48] lately, you really have to suss out what the people you're working with [15:52] how they want to work with you. [15:54] And there's no one-size-fits-all answer. If I'm working with an engineer who really doesn't want to work on the front end, and this person just is obsessed with doing a deep dive on the back end and making this thing efficient and perform it, I now have the skills using these tools to do most of the front ends.

[16:11] and then ship PRs that I can get really high-quality reviews from these folks on. [16:16] and kind of share the work in that way, right? Like these titles are kind of breaking down a lot. But if I'm working with a team and they have bandwidth to just fly on the front end, [16:26] I can build a crude prototype or even like [16:29] quick Figma blocks, and then we go in and we can iterate on the code together. It even takes screenshots, redline stuff. And then sometimes, like, the source of truth is it's kind of, like, floating up there.

And it's more, like... [16:43] Well, [16:44] We wanted to... [16:45] polish this thing. We didn't put it in Figma... [16:49] but it looks good in code, so let's take a screenshot, and that's our source of truth. I think you'd be surprised how many Figma files in Notion [16:57] are just screenshots of the product. [16:59] And then, like, a little chunk of it is a new Figma frame over the top. Yeah, I did my share of screenshotting prod and drawing something over it, but also... [17:09] I'm a bit of a control freak when it comes to a design file too, so I was...

[17:14] almost always had, like, this is... [17:16] the source of truth or at least a really good representation of what is in prod and it's neatly organized. And I would almost feel this lack or FOMO when I knew that a piece of the design was not up to date with what is in prod. And now that is just completely went out the window. Like there's basically no documentation that lives in the canvas. The only time is like I'll use like the paper document. [17:39] Chrome extension to just copy a component from prod and paste it in.

Yeah, maybe you can kind of get there. But the source of truth has entirely shifted to production code. And my canvas is now the messiest that it has ever been in my entire career. And it was freaking me out for a little bit, but I totally settled into it now. I was like, I just don't really care what's in the canvas anymore. That's what everyone says when you're... [18:01] applying to a job as a designer. It's like, what is the number one skill we will look for? Dealing with ambiguity, right?

Like, how do we live in this world where everything's changing and how the roadmap might be nebulous and we might be, like, grasping at different, you know, objectives and things like that. And I think to your point, I honestly want you to teach a lesson on how to use paper because I'm following your journey with that. I'm like, I feel like I'm in the Stone Age sometimes, but, uh, [18:29] Yeah, you just have to be cool with... [18:31] Looking at the thing that users are going to actually see and obsessing over that artifact...

[18:38] and making sure whatever form of iteration on that takes, make sure that is going to be 100%, right? And that Figma and these mocks, they're just... [18:49] reference tools at the end of the day. [18:51] And so they have to be accessible by your team, and they have to know what they're looking at. I know the answer is it depends, but I want to go a little bit deeper just to understand how often you as someone, your job title is just designer, right? You're not a design engineer or anything.

Okay, so given that, how often are you... [19:08] actually responsible for some element or some piece of the front end that is shipping on a given feature. [19:14] Like, is code just a better prototyping tool? Are you owning the front end at all? Or, you know, how often is it just pure mocks? Because I'm kind of experiencing that too right now, where it feels like every single project has to be completely ad hoc, where I message the engineer and I'm like, how do you want to work on this one? Because we're all just kind of figuring it out.

So can we get one level more specific in terms of how the concrete deliverables work? [19:38] change for you, project to project, and roughly what the spread is. [19:42] For the majority of our projects, [19:45] I would say our engineers take things seriously. [19:48] to 80%. Some will go 100% if there's bandwidth, but I think that what I've found, my personal workflow here at Notion, is [19:57] I think our engineers will wire everything up, make it very performance, make it actually work. But then it looks like we call it the Tmue version of the product, right?

It's like it's not 100% there. And so what we can do is parallelize the work. [20:14] where I could come in and make itty-bitty PRs for just visual polish. [20:20] and finish that last mile, right? These LLMs are not very good at the last mile of design. [20:26] And that's still like our superpower. It needs to be our superpower. Our engineers will bring it [20:31] all the way up to 80% to 90%. [20:35] And then working at a company like Notion where we are obsessive craft, taste and delivering a very well-boxed tool, [20:43] well packaged tool.

That's up to us as designers to just own the outcome, is what we say here at Notion. Like, it's just on us. If it's not going to get done, [20:52] then someone has to do it, right? And I think we have no excuse anymore. [20:57] to not [20:58] be responsible for those changes that we want to see. And at the end of the day, these artifacts are [21:04] extensions of us. I'm on a tangent now. But, like, these... [21:08] Digital artifacts are extensions of our work and [21:12] our practice, and we have the ability now to just own how that gets delivered.

So, yeah, the answer to your question is, [21:19] Most of the time for me, [21:21] I'm picking up the last 20, or let's say 5 to 20% of the front-end work. And I'm not doing a lot of building features from scratch. [21:30] I'm not building a lot of wiring things up. [21:33] But I am doing... [21:34] a lot of animation, a lot of visual design, and just anything that [21:39] an LLM can be really good at if I'm very descriptive and have [21:44] the language to tell it what to do.

- So is it safe to say then that if your process is going to start in code, given something larger where you want to have an LLM just scaffold a bunch of different concepts, [21:55] All of that is going to be throwaway. That's not going to be much of a handoff. At some point, you're just going to be like, okay, this is what we're going to do. The engineer is going to probably start from scratch, and then you're going to come in again at the end. Does that feel correct, or is there situations where that doesn't apply?

I think that's it exactly. But I wouldn't say that necessarily that initial scaffolding work, the big prototyping that you're doing, even if it's a massive prototype, I think classifying [22:25] because at the end of the day, like... [22:27] I don't think I'd want anyone to build the app I use every day, just one-shotting it with clock, right? I would want a very thoughtful team of engineers to, like, [22:38] do what they do and go to town on it. [22:40] And then the work that I put together, it was just a different medium of putting something on canvas.

I kind of want to hang out here for a second. It's so top of mind for me. I know we're getting really deep. But it's so – it's challenging. Like, I'm experiencing this too. There's just so many different sequencing ideas to play with. And, like, when do you insert yourself? And what do you own? And who actually ships the thing? Because I'm right now, like, before we – [23:04] jumped on this call, I have a teaming version of something, and I'm doing the exact same thing that you're describing. I'm probably the last maybe 15%, and I'm owning everything about the front end.

I'm going to be the last person that touches this code, too. Before this goes out the door, I'm the one that's owning every single piece of the UX, how it feels, how it looks. And I love that. That is a little bit more cut and dry for me. Where it gets trickier is, yesterday, I'm doing a prototype where I'm going to introduce an entirely new visual primitive [23:34] even going to be good. That's the whole point. I'm prototyping to explore it. I want to send it to people. I want to have them use it, record themselves playing with it and give me feedback.

Then it gets a little bit trickier because... [23:44] I can get 80% of that prototype wired up using the production code base perfectly. But then there's like one schema level change and one or two little mutators that have to be added. And I don't really want to go down there if I don't have to. I'm just trying to make a quick prototype. So now I'm making something that is maybe 50% mock data. It feels real enough, but it's obviously not production ready. But the visuals are pretty good. The engineer definitely does not want to have to start over on this.

[24:14] sequencing a little bit where it's like, hey, I've built the scaffold. It's good. Can you just get the data layer to work on the back end and [24:24] There's so many different pros and cons, and it just keeps changing, but I don't know how much you're experimenting with that type of stuff, but it really changes the process depending on when and how you insert yourself when you're playing in code. Selfishly, I'm curious, has that been resolved? How do you like working with that? I think it goes back to what you were saying, where you almost have to message the engineer, have an understanding of who they are, too, and just like...

[24:49] "How do you want to handle this thing?" And I don't have a good answer yet. I'm actively exploring a lot of things, which is why I was kind of seeing what you're thinking about because I'll give one other shift that I've noticed in... [25:02] my own practice, and you can tell me if this resonates or sparks other ideas too, but when we are... [25:08] building a smaller feature that the goal is to actually put something out the door. Most of the time, if it's just front-end code, it's good. It's not hard to make good [25:19] UI-based code as soon as it touches anything else more strategic is where it gets iffy.

I've sent some PRs where the engineer is like, [25:27] The fundamental premise of how you built this is wrong. [25:30] Like, why am I looking at a code diff right now? Like, the fundamental approach that you took is wrong. And it doesn't matter how many little Claude and Codex reviews you have. This is wrong. So now more of the review is actually shifting to planning mode rather than the code itself, where I will, like, go through a planning mode, get an idea of what I want to do, and then I'll just send that as an MD file.

The engineer will review that. [26:00] You know, like everything else is designed at this point. [26:03] That I'm starting to do that a little bit more, but this is why I was bringing it up and why I'm talking way more than I normally do. Because like, I'm really trying to figure this out right now because I don't know what to do. We're all in this state where you start talking about this. I'm like, give me, give me, give me the same. I want to steal these. I want to steal this.

[26:33] the right thing for me, right? I'm just not a software engineer by trade. These agents can be really... [26:41] good at acting as translation layers. So, like, I could build something that, like, just absolutely sucks in production code base, but, man, it looks so good. And then what I found is, like, we can do that. [26:54] And then an engineer can build the actual feature. [26:57] And then [26:58] instead of throwing away all the work that we did is like, [27:02] Have an agent be like, "Okay, I have this feature.

I built it. I'm a designer. [27:06] It sucks, but it looks so sick. And then we have a... [27:11] engineers feature that's like so performant, but it's the Tmue version of this. [27:16] keep [27:16] All the functionality of the engineer's version [27:20] and give it all the styling that I have here. And I think that can get you so much closer than I think our intuition says it would. Because all of a sudden, [27:32] It doesn't have to translate anything. It already has the front-end code. It just has to apply the right values to the right things.

And so even on the Make With Notion model that we did, [27:43] That was a totally different code race, right? Like Notion doesn't use Tailwind or ShatZN. [27:49] But the code base I built that in, [27:50] used both. And this was like six months ago with, I think it was Opus 4 or 5. [27:55] It crushed it. It did it in one shot. That's surprising. I wouldn't have expected that. I mean, at the end of the day, it's CSS and JavaScript and Opus in particular and Cloud in general. [28:07] really, really great at frontend.

Composer, really great at frontend, right? Like, [28:12] and they're only getting better every day. One of the reasons why I've really enjoyed using cursor [28:16] It's because their harness is incredible. [28:18] And I just know if I have Composer do a front-end feature, I'm like ultra confident that it's going to do a really good job at that. [28:26] Rather than me hacking in clock code and trying to find my way to the right thing. [28:32] I think there are these tools where you can use them as scaffolds. [28:36] And like, there's a bunch of pre-work that already went in there that I can just kind of steal from and vibe with, essentially.

[28:42] It's the first time somebody has actually said that to me, where maybe the harness from Cursor is making fun of it a little bit easier. So I'm just sitting with it as somebody who, yeah, I used Cursor six months ago, but I'm still in Conductor, which I know you've recently abandoned me and went back to Cursor. So it's just hard to keep up today. In your conversation with Brian Lover, he was... [29:05] very astute and said, we cannot get triable about these tools, right? We just have to use the right tool at the right moment.

[29:12] I'm still driving with conductor every now and then. [29:14] I think it's an amazing tool. But I think for the past month or so, one of the designers at Notion here was like, "Have you tried Cursor 3.0, Cursor Glass?" [29:24] I was like, no, dude, I am a conductor of life. [29:27] Like, I'm never going to churn. And then I open up Cursor. [29:30] And I'm like, holy shit. And, like, of course, like, Rio made it. [29:35] The team over there is just so good. [29:39] Composer is such a fun model to jam with.

And then, you know, they have work trees, they have multi-agent workflows. Something about Cursor that I'm loving these days is plan mode. [29:49] So I have whatever model make a plan, creates md file, and then it renders it really, really beautifully, and it even includes things like mermaid. [29:58] charts and things like that, where I'm like, oh, [30:01] As a visual person, this is a beautiful representation of what you're going to do. Yeah, that's cool. [30:07] And it's all in one frame, right? I've got my browser window, my terminal there.

If I want to run it in the cloud, I have a VM there, and I can just shut my laptop, go do my thing. I know conductors working on the same thing. As a designer... [30:19] seeing cursor just absolutely they're cooking with gas over there like really really sick and i feel like we have beautiful tools to create beautiful tools and i think that that's like a feedback loop and it's always inspiring to see people who are creating these things are so creative and [30:37] interesting. It just adds another layer of inspiration.

There's one question that I can't stop asking myself. What if companies apply to talk to you rather than the other way around? And that question is the foundation for the all new Dive Talent Network. And it's working. Like right now, I'm helping many of the most exciting startups that I know to hire the designers and builders who listen to this show. So if you're curious what might be out there, and maybe you [31:07] Maybe you're even looking for your next design hire. Head to club slash talent to join today. Can we talk about the last mile piece?

Maybe the last mile is as big as 20%, which in that case, that's a lot. You know, 20% of the design really, you know, the front end. Like, that's a lot. So I guess I'm kind of curious when you are prompting, I'm assuming there's some, you're actually like getting into the code and writing CSS in cursor. [31:37] of prompting too. So in the prompting category, how much of this, I guess there's like this spectrum, right? On one end of the spectrum is you are creating granular diagrams in Figma to describe exactly what you want, like you were showing with the modal animation.

On the other end, this is allowing for a little bit of wiggle room with AI where maybe I'm intentionally going to not be as descriptive because I kind of just want to see what [32:04] comes out. How often are you moving between different parts of that spectrum? How do you think about landing the plane on some of the finer front end details right now? But when I started using conductor, I [32:16] I got really freaked out. [32:18] because... [32:19] I was not looking at code 24-7. [32:23] Right. And I think this is part of their mission, right?

They want people to not use, to like, not write code. [32:28] Because I was writing a lot of front-end code before Conductor, and still working Cursor and doing tab complete, all these different manual coding methods. But now, if I'm... [32:39] doing the last, let's say, [32:41] 20 to 15% of a feature. I let the LLM [32:45] Bill did. [32:46] And I [32:47] get it to where I want it to be. [32:49] and I'm not trying to fight it and do a bunch of stuff manually while it's working. And then once it gets it to where I want it to be, I just look at a lot of diffs.

"Okay, what did it do here? What did it do there?" [33:01] And some of the advice that I tell a lot of folks who are asking you about these exact kind of workflows is like your PRs as a designer and not an engineer who's got all the training of an engineer, your PR should be very, very effective. [33:14] small and manageable. [33:16] if you're not comfortable reviewing the code yourself or writing the code yourself. And I think the rule of thumb here is that if you are expecting someone to put more time into reading something, like a PR, [33:29] that you put into making it, there's a mismatch of work being performed, right?

And that goes for, like, writing docs and stuff, too. I want to finesse the shit out of this five-line PR. And so then it's so small and easy to shit that I can review it and know, like, this isn't going to cause problems. And I give it to an engineer. They're like, okay, cool, stamp, boom, out the door. [33:51] we have to break the work into manageable chunks. Five lines is not very realistic, but [33:56] 100-line PR, that's my general advice of like, [33:59] Don't [34:00] five, code a bunch of stuff, and send an engineer a 500-line PR that you didn't even review yourself.

Because then it's just like an awkward conversation, right? They're like, hey, what's up with this PR, man? And it's like, you tell me, man. I just kind of had some fun. This conversation is hitting a little bit too close to home right now. [34:20] No, same for me. I learned these things the hard way, right? I'm going to go one little deeper on the beginning part of that answer, [34:30] initial thing onto the page with the model? How much of your goal with that initial thing [34:36] exactly what you were picturing in your mind versus do you ever kind of just see what happens a little bit like is that part of your practice and the reason i ask is because i was looking at your modals with the animation with the little notion faces i built something very similar yesterday and it was just for a website little feature card not as complex because i was able to fade out the edges with a little bit of like a css mask so i kind of got to play an easy mode a bit

[35:06] I wanted something to cycle through these logos. [35:09] But I kind of was like, [35:10] I just wanted to move horizontally. [35:13] and fade out at the edges. And that's it. I very intentionally did not give any more intent there because I kind of just wanted to see if it would take me a different direction. Is that part of your practice at all? Do you think that way or is it very much so like, [35:27] I see the thing. Let's build the thing. That is 1000% of my process. Like, okay, cool.

[35:33] I think a year and a half ago when I was at Tome/Lightfield, that was when I first started using Claude as a collaborative partner. And less so Claude Code and the front end that it's writing, but just asking Claude questions about, "Hey, [35:48] I built this feature. [35:50] I have it in Figma. What do you think about this? My favorite thing about working in Notion is you're just surrounded by really creative, super, super articulate people. But sometimes they're not available and like... [36:01] Last year, I was the only designer, right?

So I have to... [36:05] use these tools in a different way. I love seeing what [36:10] Claude, which has indexed the entire internet, comes up with how it evaluates my work. I don't think it's going to give me spot on advice every time. [36:20] but it'll generate a lot of [36:22] alternate ideas, and I'm like, "Oh my god, [36:24] I never thought about doing it that way. And then when it comes to your point to... [36:30] about making something... [36:32] while having something surprise you and then being like, "Okay, cool."

[36:36] I think [36:37] One thing that I've really enjoyed [36:39] is that working at a company like Notion, there's a lot of one-off components. And we made... [36:45] This menu, its own kind of thing... [36:48] Like, we made a menu item its own menu item style. But our codebase has an entire, like, [36:54] really robust menu system. What if we just built that? And I'll just ask Claude, I'm like, okay, we need to like, [37:00] remake this met for exploits. I want to use the design system as much as I can.

[37:05] And it'll put things together in a way that I'm like, oh, my God, we had all the pieces here. [37:10] We were just using legacy code for so long, and now we have this fresh version of it. We didn't even have to do anything. Now it's more performant, [37:18] It looks better. [37:19] It's more in line with what we've been jamming on recently. So all the way from the initial sketching version, and I was using clawed artifacts a lot. Show me what your version of this chart would look like, and it'll create something with a million gradients and a million tags, and it looks like a jelly bean factory, right?

You're like, oh, my God. But then you can kind of trim it down to something that you'd actually be comfortable shipping. I'm totally stealing jelly bean factory. I like that a lot. [37:49] immediately multiple UIs just popped into my head. Then I'm like, yes, that's exactly how to describe that. Let's talk about this piece then, because I think creating wiggle room for... [37:59] Claude or whatever, Codex. [38:01] is only valuable if you're able to push back what you're going to get that is generic. Because it can combine things in unique ways, but it's still going to be generic.

It's still going to be boring visually, emotion-wise, kind of almost everything. And so how do you think about that a little bit? Maybe we could talk to a designer who is potentially slightly earlier in their career where... [38:21] We used to say, do a bunch of copywork, make every single visual by hand, and now it's like, well, you don't really do that as often. And so in some ways, I think... [38:30] maybe I have some concern that we lose the practice of what makes for great visual design and what allows you to be creating things that are differentiated, show restraints.

So how do you think about the way to consistently push past what AI is going to give you out of the box? There is no shortcut to having... [38:50] taste or developing like a high craft, high velocity practice. I think that [38:57] With AI, we have shortcuts to creating a lot of things. [39:01] But at the end of the day, it comes back to discovering and learning the language of visual design. Through repetitions, understanding, like you said, you used the word restraint, which is like the perfect word. We as designers, our job now with limitless UI out there, [39:17] is how do we take it and make a restrained version of this where form follows function [39:22] and we're avoiding decoration for decoration's sake.

And so I think my boring answer to you is, like, do a lot of visual design. Talk to a lot of people. If there's someone you really respect as a designer, [39:34] Ask them about how they developed their eye, about their taste. What are they looking at? What movies are they watching? Like, what books, like, what art books do they like? I think... [39:44] For me, in a previous life where I was working in architecture, everyone's portfolio looked exactly the same. It's like KiroShot. [39:52] chunk of text, whatever. And it's because online there's just a bunch of portfolios that you can look at and get inspiration from.

And I was like, I don't want mine to look like that. [40:00] And at the time, I was, like, taking a painting class in school. And I was looking at a lot of art books. And the way that these art books, like, represented the work and the way that they chunked up the grid and, like... [40:12] the really restrained text is all about the work. Just show the work full bleed. [40:18] And I was able to create something really just by copying. And so to your point about we don't copy a UI pixel for pixel as much anymore, I still tell people that's a worthwhile exercise.

It's less so about doing a static frame pixel for pixel, but the linear sidebar... [40:35] logic is really interesting because if you minimize the window [40:39] pass a certain point, it'll automatically hide itself, and the window kind of refactors and reflows. [40:46] And then as you expand it back and forth, you see it's really elegant interaction. [40:51] And so instead of, like, remaking that in every instance of itself, [40:56] How can you redesign that interaction pattern, and how do you learn from the easing curve of something? That's good. [41:03] How do you know?

Like, what are the break points that they're using? We have, like, best practices for all this stuff, but I think all the great people, all the great designers are... [41:12] taking like this common knowledge advice and passing it through their filter of ultra taste [41:19] and putting something out into the world, and getting into the nitty-gritty and understanding the keyframes of a certain animation. [41:26] but still is worthwhile to me. I know. I like that a lot, actually. Like recreating interactions. You need the visual design foundation in all worlds, but recreating interactions is one of the best ways to practice.

And even as you're talking, it's reminding me like something that I've started paying attention to more is where are the best products available? [41:46] not using any interactions? Where are instant transitions applied? Because especially your mental model where you're talking about, I'm working on these bite-sized PRs, which is very much so for me too. I basically own every P3 bug, right? It's like when you're just staring at a single P3 bug, it's really easy to just make that thing immaculate, man. Every little detail is so dialed in and perfect and moves and it's gorgeous.

But then you run the risk of zooming out and you [42:16] the interface is overcooked because I've been looking at things in isolation and now I can control all of those interaction details. That's right, yeah. Where does linear, skip it, [42:24] Where do they do just instant transitions? Because the pendulum swung almost too far in the opposite direction. I can feel that for myself, and I'm sure people listening feel that as well. [42:33] That's another thing, like when I'm looking at or doing like a portfolio review, it's a young designer and it's like, [42:39] It's harder than ever to get a design job these days.

And so you've got to stand out. And I see so many portfolios where I'm like, holy shit, like, you did so much here. Like, you've got an animation here, this button does that, and you've got a whole section on this. And at the end of the day... [42:55] the best way to stand out [42:56] is to show your best work. [42:58] And to show your best work, like, let it speak for itself. The decoration for decoration's sake, no one wants that, right? Like, I don't need to see an interactive version photo of you on vacation or something like that.

Like, just show me what you made last week. And micro animations and animations in general, like, they're a whole can of worms. And, like, you could teach a whole class of those, right? There's books for you. [43:20] But I think the default is like, what does this thing look like with no decoration, with the same size typeface, with no animations? Take that, and it's like, okay, where can I add a little flourish of delight here? [43:31] And how does that help the user instead of detract over what they're trying to do with this thing?

[43:36] I know you have a course where you're thinking about a lot of these things, everything from like the tooling perspective, but also training this visual eye and all the reps and everything that's put into and everything that goes into that process. So before I get to the final couple of questions, I'm curious if you could just share a little bit more for people who do want to go deeper. Who's it's for what they can expect to get out of it kind of thing. [43:58] So the course is called Craft at Speed, right?

And the whole thing is about, like, even though there are no shortcuts to becoming a really, really strong designer, there are some really high-leverage things that you can learn as a designer or a PM or an engineer, someone trying to get into tech. There are really high-leverage things that you can learn. [44:17] that can train your eye and instantly make something that's like, you know, let's say a 40% on the visual scale to a 80%, right? Just thinking about typography and composition and all these different things. And it's like there's actually some what I think are objective principles of good design.

And I'm trying to just, like, share the knowledge that I've learned. [44:38] gained over the years into that course. And then when it comes to learning about these things, the best way to learn them deeply is to actually do them. So rather than teach everyone how to use clog code, it's like, [44:50] I just show what does my workflow look like on a day-to-day basis. It's like a two-pronged course of developing... [44:58] a visual understanding and being able to put that into practice, and then using all these skills to actually create an artifact yourself [45:06] And you'll leave the class with a new portfolio website or a, you know, a feature that you want to push to production.

And you and I can work on that and jam on that a little bit and, [45:17] We could talk about these itty-bitty PRs and things like that. The whole goal is to just build up the foundation of what it means to be a designer today. [45:25] Being able to ship PyCraft [45:28] tasteful things [45:29] using cutting edge, bleeding edge tools, essentially. [45:34] I'm there to give a lot of feedback. We work as a class, and I try to lead critique sessions. I think a lot of folks who aren't designers... [45:42] Critique is really...

[45:44] kind of intimidating, right? Totally. [45:47] I just want to set it up where it's like, hey, as designers, one of the things that we can do that's going to benefit us the most is [45:53] is working as a jazz band, right? Sharing our work with people, let people take it a certain way, and developing that thick skin, [46:00] so that we can just take the best idea and run with it, no matter where it comes from. And sometimes the brutal truth is like, hey, this thing isn't really good yet.

[46:08] But you have the tools, and we can help you. [46:11] get there. So, yeah, the course does a little bit of like, it's like a crash course on being one of these [46:17] title-less designers at a company like Notion these days. - Speaking of transformation experiences, I wanna call back to something that you said to me. [46:27] the last time we talked where you said how working at Tome felt like you came out of the other side. [46:34] feeling like a 10X designer. So I'm curious for your own journey, what was that transformation that happened for you?

So Tone was the highest of taste product out there on the market. And it was like a slide deck AI generation presentation tool. Right when these tools started coming along and it was like an 80% company [46:56] And then when I joined, it actually collapsed into like a 12-person company, and we pivoted from presentation tools to actually – [47:04] totally different market of being an AI CR. And so we still had our founders, Henry and Keith, who were like [47:12] bleeding edge, high taste individuals, and we're building this new tool.

And so for me there, like I was the only product designer. We had a really, really excellent creative director's name Alex Cannon. And like myself, [47:27] Alex and then Henry one of the co-founders Henry Liriani who his baby was a [47:33] Facebook Messenger forever, and then you built home. [47:36] It was just us three in a room every day for three hours talking about the work that we were doing. What that did for me is it forced me to be able to articulate why I made the decisions that I made.

[47:49] based when I was creating something. I'm in a room, like, talk about, like, imposter syndrome. It's like I'm in a room with these heavy hitters. Yeah. And I make something, and they're like, why did you choose to do that? I'm like, bro, it looked really cool. And they're like, I think Henry's word was, it's like, [48:05] Graphic Design Theater. [48:07] Like, you can't do something for the sake of doing. And so you'd have to explain the work, and you'd have to, like... [48:12] dig into its first principles. Why did you do that thing the way you did it?

[48:17] And it made me so much more, like... [48:20] It gave me a meta-awareness of my process. And so it's like, well, I want this to look a certain way. Why are you putting everything in a card? Uncontain it. Just present the information. Use space instead of lines. All these very... [48:34] base level UI tricks. [48:36] that automatically [48:37] make your work better, but at the end of the day it's just like the taking away [48:42] of all these things that we layer on top of our work. [48:45] Because I think a lot of the time it's like, here in a room with really great designers, you want to over-design the product.

I think it's like the midwit chart of like, [48:53] the really great designers just do less, right? And so I think, like, just three hours a day for a year of just... [49:01] like really intense crit. Sometimes I came out of it and I feel so good. I'm like, "Oh, [49:06] Like, Henry loved my work today. I'm going to go home, and I'm going to have a beer and celebrate. Other days, it'd be like a five-hour day because I did not... [49:15] I did so bad, and I'd be like, oh, my God.

And I'm at the office until midnight reworking something. So having those opportunities, like critical feedback is intimidating. It's scary. [49:26] putting ourselves out there as vulnerable. But at the end of the day, it is the best possible thing that you can do as a creative in any field, really. [49:35] to level up your work. Well, maybe as a parting question, I'd love to learn just a little bit more about your experience at Notion, because I think you're coming up [49:43] kind of getting close to a year now. I started working on Notion meeting notes.

That culture is so incredible, right? I've always looked up to that group of people and the designers, just the quality of product that's come out for years now. So are you able to reflect on your journey so far and see ways that being in that environment has continued to grow and shape you as a designer? [50:04] The saying, like, if you're the smartest person in the room, you're in the wrong room. [50:09] And I feel like... [50:10] Like any room I go to in Notion, I'm like, okay, I'm in the right room because that person's here and that person's here.

[50:16] And I sit right next to one of our design engineers, Cole Bemis, and then I got Brian Lovin two desks away, and then I got all these, just the most talent-dense row over here in the world. [50:29] And I think that just on a day-to-day basis, the small habits you pick up from other people. Kathy, our designer, is so, so good at collaborating with other people. I watch her and how she brings other people into the process at all times. And then like, Ken Chen, he's the best designer I've ever met who can look at something that you've been working on for six months.

You're like, "Oh, it just needed to be perfect, but it's not working." He'll look at it and he'll be like, [50:54] oh, well, that one thing is off. If you do that, the whole thing's going to be good. You're like, oh, my God. Oh, my God. And it's just so nice. But it all starts at the top, Endocean. And Ivan and Simon, our co-founders, are like... [51:06] Ivan, he freaks me out because... [51:09] not only is he... [51:10] the most tasteful, timeless designer at the company. [51:14] He's also extremely... [51:16] an extremely good engineer.

Simon, our other co-founder, is constantly on the bleeding edge of [51:23] using these tools to build different things and things like that. So I came in here, like the first time I interviewed here, I didn't get the job. And so the second time I interviewed, I was like, I'm going to make sure. [51:33] that don't regret this decision, right? And so I just try to take everything that I'm learning day to day, put it into my workflow. It's such a wonderful place to be because... [51:42] There's always some new thing we're going to build, and we have so many customers that use our product in so many different ways that the possibilities are endless.

It's the most ambiguous place I've ever worked. Because of that, we have such broad range of work, and it's just a blast. Doing something hard every day, you go home at night, and you're tired, and you're like, oh, my God. [52:04] how am I going to do this again tomorrow? But like the work is so interesting, fun that just keeps coming back and we'll just keep chewing on it. Well, I'm grateful that you took the time to come on today and give us a little glimpse into this workflow. It's, [52:17] very clear that you think deeply about this stuff, that you care about it.

And so it's just, man, we're in a time right now where it's so helpful to riff and experiment, but then have these moments where we can just kind of like share notes. Hey, what are you doing? What's working? So I really appreciate you kind of bringing your notepad today with us. And it's great hanging in. Thank you. Thank you, Ridd. This is amazing. I'm going to keep stealing ideas from you. So keep on coming.