Andy Madrick - Why AI changed design handoff forever

00:00:00How is AI changing the way that wecollaborate with engineers? I took thedirectory that this was in in theplayground, fed it to an LLM, and said,"Make this work in production." And itone-shotted it and did it likeperfectly.It was like>> [music]>> flawless. That engineer, Rob, and I wereboth like, "This is so sick." I now havethe skills, using these tools, to[music] do most of the front end, andthen ship PRs that I can get reallyhigh-quality reviews from these folkson. What are the best designers doing toown that last mile of craft in code?>> These LLMs are not very good at the lastmile of design. And that's still likeour superpower, needs to be oursuperpower. Our engineers will bring itall the way like up to 80 to 90%, andthen it's up to us as designers to justown the outcome, is what we say here atNotion. And I think we have no excuseanymore to not be responsible for thosechanges that we want to see. Welcome toDive Club. My name is Rid, and this iswhere designers never stop learning.This week's episode is with AndyMadrick, who's leading the design ofNotion meeting notes. We're going to doa deep dive into his workflow with AIand all of the ways that it's changingwhat collaboration looks like [music] atNotion. I mean, it's a super practical

00:01:15conversation with a lot of screensharing, [music] and we're going tostart with a behind-the-scenes look athow Andy designed one of Notion's mostviewed interfaces. At Notion, we haveour Make with Notion conference everyyear,where we announce certain features. So,the in-product touchpoint for that isalways a modal. We announce everythingvia this big modal that you see on thetop left, umthat announces, you know, all thefeatures that we that we are excitedabout this year. And at Notion, I don'tknow if it's so much a rite of passage,but it's like, "Who wants to build thismodal?" And there's a ton of eyeballs onit. Ivan is very involved, which is socool, cuz like I I started on this amonth after I started at Notion, andthen I got to work with Ivan like everyday. New subs. That's awesome. What doesit take to actually go from zero to thismodal that is celebrated and thateverybody's going to see? We have thismodal. Now, this is what we ended upgetting to, our final most polishedversion. We were really excited aboutit. We thought it had a lot of visuallike intrigue, you know, make withNotion. It's really exciting. Ivan wastalking with Alan Kay, two heroes ofmine, same place. But to get started onthis, we just jammed on a lot ofdifferent iterations. And for mepersonally, what was really nice is Iwas working with a really great PM

00:02:30who'salso named Ivan here at Notion. And hewas able to kind of triage a lot of thisstuff for me and I got to just build.So, I started out just creating bunch ofdifferent iterations, right? So, I havethis guy, but then I have like a milliondifferent ones in parallel, jamming onall of them, more or less fidgeting intandem. Are these mock-ups? Like are youdoing this in Figma or are you buildingSo, this is this is all in Figma. So, myworkflow is I do a lot of pixel pushingin Figma still. I'm showing you slidesright now because I'm a bit of a controlfreak. And so, when it comes to likecrafting things like this, I'm prettyfast in Figma still. I'm actuallymigrating more and more toward myinitial prototypes or my initialexplorations being in code.But at this point, this was likeSeptember of 2025, I'm still doing a lotof Figma. So, I do all these iterationsin Figma. And then instead of justsharing like Figma links with a bunch ofpeople, I create this prototype in ourprototype playground, which is like avery lightweight version of our Notioncode base. Where I I just mock these upin code and now I have a bunch ofdifferent versions that I can send outto whoever is interested in seeing this.So, it's a lot easier for sharing,right? Like

00:03:46I have this all in onespace. It's click-through. I can justsend a URL to folks and make them lookthrough [music] this.Never in a million years did I think mydesign workflow would change sodrastically in the last few months. Anda big part of it is Paper's new snapshottool. It's a Chrome extension that letsyou copy any component or element fromyour live website and then paste itdirectly into Paper as editable layers.So, all the time I'll grab somethingfrom prod, have Claude immediately spinit up six different ways on Paper'scanvas, and then when I'm ready to senda concept back to Claude, it's seamlessbecause Paper's canvas uses real HTMLand CSS. That workflow feels a lot likethe future of design to me, and you canstart doing this [music] today. Justhead to dive.club/paperto try it out. People are gettinganswers from tools like ChatGPT andPerplexity a lot more than they'reclicking on Google lately. So, if yoursite isn't AI-readable, then you'relosing visibility that you can't see inyour analytics. So, Framer just launcheda free AEO tool, which shows you howthese AI systems read and understandyour website. So, [music] in 10 secondsit can scan your site, score it on AEOreadiness, surface what's hurting

00:05:01yourvisibility. I ran it [music] on thediveclub website, and I only got a 50out of 100, but thankfully Framer givesme the exact steps that [music] I needto take to fix it. So, definitely take aminute to use Framer's new AEO scanneron your website. You can head toframer.com/aeoto [music] get started. Now, on to theepisode. What happened from here is thatpeople start deciding what they like,what they don't. Like, we started tofind that this was the motif that westarted to gravitate towards, right? Wehave the nosey faces on the left withsome kind ofasset on the right. And we're like,"Okay, we're getting close to what wewant." So, I go in Figma, refine it alittle, and then I go back into ourprototype playground, and I create anadditional prototype that uses thatmotif, and then I allow other people toedit this however they want. So, insteadof someone giving me feedback on a on aFigma file, I'm able to like allow acertain level of customizability here,and then different folks at Notion areable to go in, click around, you know,change the titles, change the the thenumber of assets here, change thesection headers, whatever, and then theycan take screenshots and send it back tome.And then we're all like co-designing

00:06:16together, but it it's kind of like uhyou know, the home screen on on youriPhone, where you can drag stuff aroundand drop stuff how you want it to be,but at the end of the day, you're stilllike on Apple's rails, and you're stilllike okay, I'm in this world that's alittle curated and opinionated. I lovethis because I was just talking to adesigner who is having so muchdifficulty collaborating with contentteams again, because when it was inFigma, somebody could just click andjust edit the text. And for a contentdesigner, there's so much value in beingable to write within the context ofwhere it would exist, and yet they'redoing everything in code now, and sothey didn't have this. Really, reallycool what you built here. Building thiswas wasreally pretty simple. I took the chromefrom our sidebar, and I was like, "Hey,we need to make these text inputs thatare links to the the content on thescreen."And I think at the time I was using uhComposer 1.5, or maybe it was Composer 1at the time, and it handled thisno problem.>> Um that's cool.I have not seen something like thisbefore. It makes total sense to me. Oh,cool. Nice. Umso then like we got feedback from Ivan,uh CEO Ivan, and he said, I was jammingwith him one day. He's like, "Make itfeel like a video game."And he started pulling things around,and we got into

00:07:31Figma, and he's like, "Iwant the nosey faces to be off thescreen like off the modal. Like I wantthis to feel like I'm playing a videogame, and I got like a prize orsomething like that. and make it reallyexciting. So then it's like, "Okay, alittle bit back to the drawing board."But that's that's like the fun part ofthis, right? We took all these pieces,moved them around a little bit. And thenI was thinking about like, "How would IHow would I animate this? And what wouldit look like and feel like?" For me, I'mshowing this screenshot becauseI still like doing a little bit ofanimation in Figma. I don't do a lot,but like I said, I'm a control freak. Ifeel like Figma still gives me a littlebit of an ability to control things in adeterministic way. So I did a little bitof prototyping in Figma, like verylittle. I never make click-throughprototypes in Figma, but I will makereally simple things like this. It'slike, "Well, if this face does that,then the text moves like this." And forsomeone like me who's been using Figmafor years, this is a lot of the time canbe faster than code. I've been doingfront-end for, let's say, 10 years. WhenI started doing this, Figma was still alot faster. But now these coding toolsare getting so good that like the speedis starting to increase. So like

00:08:46at thetime,this is faster for me than Figma. Butthen I'm I'm starting to sketch out likewhat this animation should look and feellike. And instead of telling an LLM, Iwant the nosey face here to move to thethis pencil nosey to move to the rightand shrink and then fade out and thenthis will move in. I've had a lot ofsuccess sketching key frames, takingscreenshots, and just feeding it to anLLM. Mhm. And it rocks. Keep computervision is so good these days. So I startpolishing the UI a little bit here. Andit's like, "Okay, we've got acomposition we really like." I'm goingto get into the nitty-gritty even more.I'm going to show like, "Okay, I wantthe text to move with the nosey faces."And then I'm going to show like, "Okay,this is step one, two, three." And Iwant it to move in this direction. Soagain, I'm taking screenshots of thisand feeding it to composer. And then Iget really, really nitpicky about>> Oh, this is super granular. Yeah, I Imean, like I think with a lot of thismotion design stuff, coding tools are sogood at executing it,but you have to be very, verydescriptive about what you want,otherwise you're going to be fightingthese things for like hours. You'regoing to be pulling your hair out, goingin circles. So, for me, it's like a

00:10:02picture's literally worth a thousandwords. And so, like I can just do this,make like, okay, here's what Nozi isgoing to do at the end, it's going tocome back over here, and I'm going tolabel what state this is in. And then,like we we come out the other side, andwe actually have something that works incode. This wasn't one shot, it's likeyou have to refine it over time, butlike the animation actually like workedreally well. And what was really, reallycool is when I when I go and I speakwith, you know, our engineers who areworking on this, it's like, how do wetranslate this from simple playgroundcode to production code? All I did was Itook the directory that this was in inthe playground, fed it to an LLM, andsaid, "Make this work in production."And it one-shotted it and did it likeperfectly.The animation was like flawless. Like Ilike it was so simple that engineer Roband I were both like, "This is so sick."And then I tell Max, our head ofproduct, about that, he's like, "This isso sick that we can do this, right?">> I feel like that's kind of the dreamsetup for so many teams, but you kind ofwe're still in this phase whereeverybody has to build it out of the boxright now, but like what you justdescribed, where you have like thelightweight prototype playground, I'massuming it's probably even more thanthe 80/20 of Notion. Like you really getthe front end that you can kind of play

00:11:17with, and then that translation step,like if it's anything even close to aone-shot, like what you just describedis it feels like the ideal workflow forteams kind of everywhere. It's really,really cool to see your process eveninvolving the canvas, too, like thatfull pipeline is neat. It's neat. Wehave to build our own workflows for eachother in these organizations. Givingpeople the tools to make really strongdecisions is the strongest thing for us,right? Like, we as designers, we can dothat, right? So, we can we can createthese prototypes that give people enoughfreedom to involve them in the process,but also like relying on our owntraining as designers to set some rulesup theopinion. We ended upactually like we had a hedge, right? Andso, we had to build three differentversions of this because internallywe're like, this new modal variant isreally sick, but it could be confusingto people. Why is it a square? Modalsaren't usually square. Like, we wereworried that it might not convert superwell. So, when it came to ship thisthing, we had to be like, okay, we needone with three heads. We need one withfour heads that doesn't like animate aslike interestingly. And then we had, youknow, what I call the safe version onthe right where it's like, here's ourour

00:12:32nosey faces and some kind of videoplaying on the right. And when it cameto ship it, we had static gains for eachone and we were watching these reallyintensely. We shipped all three at thesame time. We were seeing which onewould convert the best. And I was leftto ask you, Rid, what are your guesswhich one of these converted the most,like the highest? What would be yourguess? I really want it to be the one onthe left.>> [laughter]>> But, I'm nervous that you're going tosay the safe one. Well, before I tellyou, I want to say like Ivan and thenour our head of product, Max, had a bet.And they're like, okay, let's bet like500 bucks on which one's going to win.And I was like, well, we can't betmoney. Let's bet like a gift. And theythey both So, Ivan bet on the one thatyou bet or on the four-head version andMax bet on the three. But, I I hate tosaythat the safe one did. Yeah, I knew it.I knew [laughter] it. I I did I was justlike almost dreading the reveal.The the the thing about it the thingabout it that my hypothesis Look at thesize of the buttons, man. Like one had ahuge button, the other had like tinybuttons. So we sweat the details on thisfor like a month, right? And then itjust turns out like it's probably justthe size of the button. Could you justmade this button bigger, it wouldBut yeah, that's that's that littledigression.>> Uh that's good. But I appreciate yougiving a little

00:13:47behind the scenes of theworkflow and it's fun to seethe full end-to-end process for aproduct that I use every day. Likethat's always one of my favorite partsof even doing this podcast. You toucheda little bit on like showing how youmade it so people can like edit thecontent inside of the modal, that kindof a thing. I'm wondering if maybethere's another layer that we can gointo around just given this shift, youknow, you talked about how it's a littlebit faster to do things on the frontend. Now you're moving toward code,maybe starting code more often. How'sthat changing the way that you arecollaborating with team when you can'tjust, you know, hop into a Figma fileand spotlight someone anymore. If I'mworking on a really big like reframe,which which we're doing right now atNotion, it's like we're rethinking areally big foundational concept atNotion.And I could just go into Figma andredesign every single screen and likeget feedback on that. But I found thatit's so much faster to just spin up acrude representation of Notion with anLLM that allows people to click aroundand feel all these new proposals thatwe're making. So the bigger the feature,the more likely I am to start in code.But if it's a smaller

00:15:03thing, like amodal or polish, visual polish,something like that, I find Figma tostill be really helpful. And likepersonally, I'm logged on Figma becauseyou can just directly manipulateeverything with your hand, you know,your mouse. But I still feel like it'san extension of me rather than likefeeding an LLM or writing somefront-end. And so, if it's a tightfeature or visual polish, like I said,I'm going to get into Figma, sketchsomething out, and then share that withthe team. But, like I said, if it'ssomething really big, like we'll justsketch out like having an LLM,sketch out all these different flows,and then we can evaluate and workthrough those together, essentially. Thecollaboration part of things, it's moreabout like and and this is a questionthat's come up a lot lately. You reallyhave to suss out what the people you'reworking with, like how they want to workwith you.And there's no one-size-fits-all answer.If I'm working with an engineer whoreally doesn't want to work on thefront-end, and and this person just isobsessed with doing a deep dive on theback-end making this thing efficient andperformant, I now have the skills usingthese tools to do most of thefront-ends, and then ship PRs that I canget really high-quality reviews fromthese folks on, and kind of share thework in that

00:16:18way, right? Like thesetitles are kind of breaking down a lot.But, if I'm working with a team and theyhave bandwidth to just fly on thefront-end,I can build a crude prototype or evenlikequick Figma mocks, and then we go in andwe can iterate on the code together andlike even take screenshots, redlinestuff, and then sometimes like the thesource of truth is it's kind of likefloating up there, and it's more like,"Well, we wanted to, you know, polishthis thing. We didn't put it in Figma,but it looks good in code. So, likelet's take a screenshot that's oursource of truth." And I think you'd besurprised how many Figma files in Notionare just screenshots of the product, andthen like a little chunk of it is, youknow, a new Figma frame on a little tab.So, Yeah, I did my share ofscreenshotting prod and drawingsomething over it, but also I'm a bit ofa control freak when it comes to adesign file, too. So, I wasalmost always had like this is thesource of truth or at least a reallygood representation of what is in prodand it's neatly organized and I wouldalmost feel thisthis lack or FOMO when I knew that apiece of the design was not up to datewith what is in prod. And now that isjust completely went out the window.

00:17:33Like there's basically no documentationthat lives in the canvas. The only timeis like I'll use like the paper Chromeextension to just like copy a componentfrom prod and paste it in. Like yeah,maybe you can kind of get there. But thesource of truth is entirely shifted toproduction code and my canvas is now themessiest that it has ever been in myentire career and it was freaking me outfor a little bit but I totally settledinto it now. It's like I just don'treally care what's in the canvasanymore. That's what everyone says whenyou'reyou're applying to a job as a designer.It's like, what is the number one skillwe look for? Dealing with ambiguity,right? Like how do we live in this worldwhere everything's changing and how theroad map might be nebulous and you mightbe like grasping at different, you know,objectives and things like that and Ithink to your point, I I honestly wantyou to teach a lesson on how to usepaper cuz I'm following your journeywith that. I'm like I feel like I'm inthe stone age sometimes, but uhyeah, you just have to be cool withyou know, looking at the thing thatusers are going to actually see andobsessing over that artifact and makingsure whatever form of like iteration onthat takes, like make sure that is goingto be 100% right? And then like Figmaand these mocks, they're just

00:18:49referencetools at the end of the day. And so theyhave to be accessible by your team andthey have to know what they're lookingat, but I know the answer is it depends,but I want to go a little bit deeperjust to understand how often you assomeone your job title is just designer,right? You're not a design engineer oranything. Okay, so given that, how oftenare you actually responsible for someelement or some piece of the front-endthat is shipping on a given feature.Like, is code just a better prototypingtool? Are you owning the front-end atall? Or, you know, how often is it justpure mocks? Like, cuz I'm kind ofexperiencing that, too, right now, whereit feels like every single project hasto be completely ad hoc, where I messagethe engineer and I'm like, "How do youwant to work on this one?" Cuz we're alljust kind of figuring it out. So, can weget one level more specific in terms ofhow the concrete deliverables change foryou project to project and roughly whatthe spread is? For the majority of ourprojects, I would say our engineers takethings to 80%. Some will go 100% ifthere's bandwidth, but I think that whatI've found, my personal workflow here atNotion, is I think our engineers willwire thing up everything up, make itvery performant, make it actually work,but then it looks like

00:20:05we call it likethe T-move version of the product,right? Where it's like it's not 100%there. Yeah. And so, what we can do isparallelize the work, where I could comeinand make itty-bitty PRs for just visualpolish and finish that last mile, right?These LLMs are not very good at the lastmile of design. And that's still likeour superpower and needs to be oursuperpower. Our engineers will bring itall the way like up to 80 to 90%and then, you know, working at a companylike Notion, where where we are obsessedwith craft, taste in delivering a verylike well-boxed tool,well-packaged tool, it's up to us asdesigners to just own the outcome, as wesay here at Notion. Like, it's just onus. If it's not going to get done,then someone else someone has to do it,right? And I think we have no excuseanymoreto not be responsible for those changesthat we want to see. And and at the endof the day, these artifacts areextensions of us. I'm on a tangent now.But, like, these digital artifacts areextensions of our work andour practice. And we have the abilitynow to just own how that gets delivered.So, yeah, the answer to your question ismost of the time

00:21:20for meI'm picking up the last 20, or let's say5 to 20% of the front-end work. And I'mnot doing a lot of building featuresfrom scratch. I'm not building a lot ofwiring things up, but I am doinga lot of animation, a lot of visualdesign, and just anything that an LLMcan be really good at if I'm verydescriptive and have the language totell it what to do. So, is it safe tosay then that if your process is goingto start in code given something largerwhere you want to have an LLM toscaffold a bunch of different concepts,all of that is going to be throwaway.That's not going to be much of ahandoff. At some point you're just goingto be like, "Okay, this is what we'regoing to do." The engineer is going toprobably start from scratch, and thenyou're going to come in again at theend. Does that feel correct, or is theresituations where that doesn't apply? Ithink that's it exactly. But But I Iwouldn't say that necessarily that thatinitial like scaffolding work, the bigprototyping that you're doing, like evenif it's a massive prototype, I I thinklike the the classifying that asthrowaway work, I don't know, it mightbe a misnomer because at the end of theday likeI don't think I'd want anyone to buildthe app I use every day just oneshotting it with Claude, right? I wouldwant a

00:22:35very thoughtful team of engineersto like do what they do and go to townon it. And then the the work that I puttogether, it was just a different mediumof putting something on canvas. I kindof want to hang out here for a secondcuz this is so top of mind for me. Iknow we're goingreally deep, but it's so it'schallenging. Like I'm experiencing thistoo. There's just so many differentsequencing ideas to play with, and likewhen do you insert yourself, and what doyou own, and who actually ships thething, and cuz I'm right now like beforewe jumped on this call, I have a Teemuversion of something and I'm doing theexact same thing that you're describing.Like I'm probably the last like maybe15% and I'm owning everything about thefront end. I'm going to be the lastperson that touches this code, too. Likebefore this goes out the door, I'm theone that's owning every single piece ofthe UX, how it feels, how it looks, andI love that. That is a little bit morecut and dry for me.Where it gets trickier is, you know,yesterday I'm doing a prototype whereI'm going to introduce an entirely newvisual primitive that doesn't exist inthe code. And I have no idea if it'seven going to be good. It's the wholepoint. I'm prototyping to explore it. Iwant to send it to people. I want tohave them use it, record themselvesplaying with it, and give me feedback.Then it gets a little bit trickierbecause I can get 80% of that prototypewired up using the production code baseperfectly. But then there's like

00:23:50oneschema level change and one or twolittle mutators that have to be addedand I don't really want to go down thereif I don't have to. I'm just trying tomake a quick prototype. So, now I'mmaking something that is maybe 50% mockdata. Feels really enough, but like it'sobviously not production ready. But thevisuals are pretty good, you know, likethe engineer definitely does not want tohave to start over on this. And so, nowwe've kind of flipped the sequencing alittle bit where it's like, "Hey, I'vebuilt the scaffold. It's good. Can youjust get the data layer to work on theback end?" And there's so many differentpros and cons and it just keepschanging, but I I don't know how muchyou're like experimenting with that typeof stuff, but it's it's really changesthe process depending on when and howyou insert yourself when you're playingin code. Selfishly, I'm curious, hasthat been resolved? Like how do you likeworking like that? I think it goes backto what you were saying where you almosthave to message the engineer, have anunderstanding of who they are, too, andjust like"How do you want to handle this thing,you know?" And I I don't have a goodanswer yet. I'm I'm actively exploring alot of things, which is why I kind ofseeing what you're thinking about cuzI'll give one other shift that I'venoticed in my own practice, and you cantell me if this resonates or

00:25:05sparksother ideas, too. But like, when we arebuilding a smaller feature that the goalis to actually put something out thedoor, most of the time like if it's justfront-end code, like it's it's good, youknow? Like we're not It's not hard tomake good UI-based code as soon as ittouches anything else more strategic iswhere it gets iffy. I've seen some PRswhere the engineer is like, "Thefundamental premise of how you builtthis is wrong. Like why am I looking ata code diff right now? Like thefundamental approach that you took iswrong." And it doesn't matter how manylittle Claude and Codex reviews you had,this is wrong. So now more of the reviewis actually shifting to planning moderather than the code itself. Where Iwill like go through a planning mode,get an idea of what I want to do, andthen I'll just send that as an MD file.The engineer will review that. If theplan looks good, he can mostly trustthat like this is going to not destroythings, you know? Like everything elseis designed at this point. That I I'mstarting to do that a little bit more,but this is why I was bringing it up andwhy I'm talking way more than I normallydo cuz it's like I'm really trying tofigure this out right now cuz I don'tknow what to do. We're all in this statewhere you start talking about this, I'mlike, "Give me Give me like give me thepitch." Yeah, [laughter] same. I want tosteal these I want to steal these.

00:26:20Onething that I found personally is likewhat I'm going to tell an LLM to do,that like an agent to do in ourproduction code base, I don't know a lotof the language that I need to use toget it to do the right thing for me,right? Like>> Mhm. I'm just not a software engineer bytrade. These like agents can be reallygood at acting as translation layers. Solike I could build something that likejust absolutely sucks in production codebase, but man, it looks so good. Mhm.And then what what I found is like wecan do that. And then an engineer canbuild like the actual feature.And then, instead of throwing away allthe work that we did, is likehave an agent be like, "Okay, I havethis feature. I built it. I'm adesigner. It sucks, but but it looks sosick." And then we have a engineer'sfeature that's like so performant, butit's the team version of this. Can youkeep all the functionality of theengineer's versionand give it all the styling that I havehere. And I think that can get you somuch closer than I think like ourintuition says it would. Cuz like all ofa sudden, like it just is it doesn'thave to translate anything. It alreadyhas the front-end

00:27:35code. It just has toapply the right values to the rightthings. And so, like even on the makewith notion mode when we did,that was a totally different code base,right? Like notion doesn't use Tailwindor shatsui.But the code base I built that in usedboth. And this was like 6 months agowith I think it was Opus 4.5.It crushed it. It did it in one shot. Solike>> That's surprising. I wouldn't haveexpected that. I mean at the end of theday it's CSS and JavaScript and Opus inparticular and Claude in general reallyreally great at front-end. Composerreally great at front-end, right? LikeAnd they're only getting better everyday. And one of the reasons why I'vereally enjoyed using Cursor is cuz theirharness is incredible. And I just knowif I like if I have Composer do afront-end feature, I'm like ultraconfident that it's going to do a reallygood job at that, right? Rather than mehacking in like Claude code and tryingto like find my way to the right thing.I think there are these tools where youcan kind of use them as scaffolds. Andlike there's a bunch of pre-work thatalready went in there that I can justkind of steal from and vibe with,essentially. It's the first timesomebody has actually said that to mewhere maybe the harness from Cursor ismaking front end a little bit easier. SoI'm just sitting with it as

00:28:51somebody whoyeah, I used cursor 6 months ago, but II'm still in conductor, which I know youhave you've recently abandoned me and myback to cursor. So it's it's hard tokeep up today.>> [laughter]>> In your conversation with Brian Love, hewas very astute and said we cannot gettribalabout these tools, right? We just haveto use the right tool at the rightmoment. I'm still driving with conductorevery now and then. I think it's anamazing tool, but I think for the pastmonth or so, one of the designers atNotion here was like, "Have you triedcursor 3.0, cursor glass?" I was like,"No, dude. I am a conductor life. LikeI'm never going to turn." And then Iopen up cursor and I'm like, "Holyshit." And like of course like Rio madeit. Like the the team over there is justlike so good. Composer is such a funmodel to jam with. And then, you know,they have work trees, they havemulti-agent workflows. Something aboutcursor that I'm loving these days isplan mode. So I have like whatever modelmake a plan, creates an MD file, andthen it renders it really reallybeautifully, and it even includes thingslike mermaid charts and things likethat. And I'm like, "Oh, as a visualperson, this is a beautifulrepresentation of what you're going todo."

00:30:06>> Yeah, that's cool.And it's all in one frame, right? I'vegot my browser window, my terminalthere. If I want to run it in the cloud,I have a VM there, and I can just shutmy laptop, go do my thing. I knowconductor's working on the same thing.As a designer,seeing cursor just absolutely they'recooking with gas over there. Like reallyreally sick. And I feel like we havebeautiful tools to create beautifultools. And I think that that is like a afeedback loop, and it's always inspiringto see people who are creating thesethings are so creative and interesting.It just adds another layer ofinspiration. [music]There's one question that I can't stopasking myself. What if companies appliedto talk to you rather than the other wayaround? And that question is thefoundation for the all new Dive TalentNetwork. [music] And it's working. Like,right now, I'm helping many of the mostexciting startups that I know to hirethe designers and builders who listen tothis show. So, if you're curious whatmight be out there, and maybe you wantto get on my list, or maybe you're evenlooking for your next design hire, headto dive.club/talentto 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, youknow, 20%

00:31:21of the design, really, in thefront end. Like, that's a lot. So, Iguess I'm kind of curious, when you areprompting, I'm assuming there's someyou're actually like getting into thecode and writing CSS in Cursor. I wouldalso assume there's still a decentamount of prompting too. So, in theprompting category,how much of this Like, I guess there'slike this spectrum, right? On one end ofthe spectrum is you are creatinggranular diagrams in Figma to describeexactly what you want, like you wereshowing with the modal animation. On theother end is allowing for a little bitof wiggle room with AI, where maybe I'mintentionally going to not be asdescriptive because I kind of just wantto see what comes out. How often are youmoving between different parts of thatspectrum? How do you think about landingthe plane on some of the finer front-enddetails right now? But, when I startedusing Conductor, I got really freakedout becauseI was not looking at code 24/7, right?And I think this is part of theirmission, right? They want people to notuse to like not write code. Cuz I waswriting a lot of front-end code beforeConductor, and still just working inCursor and doing, you know, tabcomplete, all this all these differentlike manual coding methods.

00:32:37But now likeif I'm doing the last let's say 20 to15% of a feature, I let the LLM build itand I get it to where I want it to be.And I'm not trying to fight it and do abunch of stuff manually while it'sworking. And then once it gets it towhere I want it to be, I just look at alot of diffs. Okay, what did it do here?What did it do there? And some of theadvice that I tell a lot of folks whoare asking you about these exact kind ofworkflows is like your PRs as a designerand not a an engineer who's got all thetraining of an engineer, your PR shouldbe very very small and manageable.If you're not comfortable reviewing thecode yourself or writing the codeyourself. I think the rule of thumb hereis that if you are expecting someone toput more time into reading somethinglike a PRthan you put into making it, if there'sa mismatch of Yeah, that's good.>> of work being performed, right? And thenit goes for like writing docs and stuff,too. I want to finesse the out ofthis five-line PR. And so then it's sosmall and easy to ship that I can reviewit and know like this isn't going tocause problems. And I give it to anengineer, they're like, "Okay, cool.Stamp. Boom. Out the door." We have tobreak the work

00:33:52into like manageablechunks. Like five lines is not veryrealistic, but a hundred-line PR, that'smy general advice of like don'tfive-code a bunch of stuff and send anengineer a 500-line PR that you didn'teven review yourself. Cuz then it's justlike an awkward conversation, right?You're likeThey're like, "Hey, uh what's up withthis PR, man?" And it's like, "You tellme, man. I I just kind of like had somefun." Uh this conversation's hitting alittle bit too close to home right now.>> [laughter]>> No, same for me. I learned these thingsthe hard way, right? Yeah. I'm going togo one level deeper on the beginningpart of that answer where you talkedabout how you kind of just get theinitial thing onto the page with themodel. How much of your goal with thatinitial thing is exactly what you werepicturing in your mind versus Did youever kind of just see what happens alittle bit? Like is that part of yourpractice? And And the reason I ask isbecause I was looking at your modelswith the animation with the littlemotion faces. I built something verysimilar yesterday.And it was just for a website littlefeature card. Not as complex cuz I wasable to fade out the edges with a littlebit of like a CSS mask. So I kind of gotto play on easy mode a bit. But I didn'treally actually have that much in myhead. I knew I wanted something to cycle

00:35:07through these logos.But I kind of was like I just wanted itto move horizontally and fade out at theedges. And that's it. And I I veryintentionally did not give any moreintent there because I kind of justwanted to see to see if it would take mea different direction. Is that part ofyour practice at all? Like do you thinkthat way or is it very much so like Isee the thing, let's build the thing.That is 1,000% of my process. Like>> I think a year and a half ago when I wasat Tone/Lightfield, that was when Ifirst started using Claude as acollaborative partner. And less so likeClaude code and like the the front endthat it's writing, but just like askingClaude questions about, "Hey, I builtthis feature. All right, I have it inFigma. What do you think of this?" Myfavorite thing about working in Notionis you're just surrounded by reallycreative, super super articulate people.But sometimes they're not available. Andlike last year I was like the onlydesigner, right? So I have to like usethese tools in a different way. I loveseeing what Claude, which has indexedthe entire internet, comes up with andhow it evaluates my work. I don't thinkit's going to like give me spot-onadvice every time, but it'll generate alot of alternate

00:36:22ideas. And like, "Oh mygod, I never thought about doing it thatway." And then when it comes to yourpoint to about making something wild,like having something surprise you andthen be like, "Okay, cool."I think one thing that I've reallyenjoyed is that working at a companylike Notion, there's a lot of likeone-off components. And we like madethis menu its own kind of thing. Like wemade a menu item its own menu itemstyle. But our code base has an entirelike really robust menu system. What ifwe just built that? Like and and andI'll just ask Claude. I'm like, "Okay,we need to like remake this menu, forinstance. I want to use the designsystem as much as I can."And it'll put things together in a waythat I'm like, "Oh my god. Like we hadall the pieces here.We were just like using legacy code forso long. And now we have this freshversion of it. We didn't even have tolike do anything. Now it's moreperformant. It looks better. It's morein line with like what we've beenjamming on recently." So like all theway from the initial sketching version.And this is I was using like Claudeartifacts a lot. Like, "Show me whatyour version of this chart would looklike." And it'll create something withlike a million gradients and like amillion tags. And it looks like a jellybean factory,

00:37:37right?>> [snorts]>> You're like, "Oh my god." But then, youknow, we can you can kind of like trimit down to something that you'd actuallybe comfortable shipping. I'm totallystealing jelly bean factory. I like thata lot. Like immediately multiple UIsjust popped into my head. Then I'm like,"Yes, that's exactly how to describethat." Yeah. Let's talk about this piecethen, because I think creating wiggleroom for Claude or whatever Codex isonly valuable if you're able to pushback what you're going to get that isgeneric, because it can combine thingsin unique ways, but like it's stillgoing to be generic. It's still going tobe boring visually, motion-wise, andkind of almost everything. And so,how do you think about that a littlebit? Maybe we could talk to a designerwho is potentially slightly earlier intheir career wherethat you know, we used to say like, "Doa bunch of copy work, make every singlevisual by hand and now it's like well,you don't really do that as often. Andso in some ways I think maybe I havesome concern that we lose the practiceof what makes for great visual designand what allows you to be creatingthings that are differentiated, showrestraint. So, how do you think aboutthe way to consistently push past whatAI is going to give you out of the box?There is no shortcut to havingtaste or developing

00:38:52like a high crafthigh velocity practice.I think that with AI, we have shortcutsto creating a lot of things. But at theend of the day, it comes back todiscovering and learning the language ofvisual design. Through repetitions,understanding like you said that youused the word restraint, which is likethe perfect word. We as designers, ourjob now with limitless UI out there, ishow do we take it and make a restrainedversion of this where form followsfunction and we're avoiding decorationfor decoration's sake. And so I think myboring answer to you is like do a lot ofvisual design, talk to a lot of people.If there's someone you really respect asa designer, ask them about how theydeveloped their eye, about their taste.What are they looking at? What moviesare they watching? Like what books likewhat art books do they like? I thinkfor me in a previous life where I wasworking in architecture, everyone'sportfolio looked exactly the same. It'slike heroshot, chunk of text, whatever. And it'sbecause online there's just a bunch ofportfolios that you can look at and getinspiration from. And I was like I don'twant mine to look like that. And I wasat the time I was like taking a paintingclass in school. And I was looking at alot of art books. And the way that theseart books

00:40:07like represented the work andthe way that they chunked up the gridand like the really restrained text thatis all about the work, just show thework full bleed.And I was able to create somethingreally just by copying. And so, to yourpoint about like we don't like copy a UIpixel for pixel as much anymore, I stilltell people that's a worthwhileexercise. It's less so about, you know,doing a static frame pixel for pixel,but like the linear sidebarlogic is really interesting because ifyou minimize the window past a certainpoint, it'll automatically hide itself.And the window kind of refactors andreflows.And then as you expand it back andforth, you see it's really elegantinteraction.And so, instead of like remaking that inevery instance of itself, how can youlike redesignthat interaction pattern? And how do youlearn from like the easing curve ofsomething?>> That's good. How do you know like whatare the break points that they're using?We have like best practices for all thisstuff, but I think all the great people,all the great designers are taking likethis common knowledge advice and passingit through their filter of ultra tasteand like putting something out into theworld and like getting into thenitty-gritty

00:41:23and understanding like thekeyframes of a certain animation.It still is worthwhile to me. I know, Ilike that a lot, actually. Likerecreating interactions. You need thevisual design foundation in all worlds,but recreating interactions is one ofthe best ways to practice. And even asyou're talking, it's reminding me likesomething that I've started payingattention to more is where are the bestproducts not using any interactions?Where are instant transitions applied?Because especially, you know, yourmental model where you're talking about,you know, I'm working on thesebite-sized PRs, which is you very muchso for me, too. Like I basically ownevery P3 bug, right? It's like whenyou're just staring at a single P3 bug,it's really easy to just make that thingimmaculate, man. Every little detail isso dialed in and perfect and moves andit's gorgeous. But then you you run therisk of zooming out and you realize likeevery single piece of the interface isovercooked because I've been looking atthings in isolation and now I cancontrol all of those interactiondetails. So I'm That's right. Yeah.Where does linear exhibit? Where do theydo just instant transitions? Because thependulum swung almost too far in theopposite direction. I can feel that formyself, you know, I'm sure peoplelistening feel that as well. That'sanother thing like when I'm looking ator doing like a portfolio review andit's a young designer

00:42:38and it's likeit's harder than ever to get a designjob these days. And so you've got tostand out. And I see so many portfolioswhere I'm like, holy like you didso much here. Like you've got ananimation here and this button does thatand you've got a whole section on this.And at the end of the day, the best wayto stand out is to show your best work.And to show your best work, like let itspeak for itself. The decoration fordecoration's sake, no one wants that,right? Like I don't need to see aninteractive version photo of you onvacation or something like that. Likejust show me what you made last week.And micro animations and animations ingeneral like they're cool 10 words.And like you could teach a whole class.Right, there's books written on them.But I think the default is like, whatdoes this thing look like with nodecoration? With the same size typeface,with no animations. Take that and say,okay, where can I add a little flourishof delight here? And how does that helpthe user instead of detract away fromwhat they're trying to do with thisthing? I know you have a course whereyou're thinking about a lot of thesethings, everything from like the toolingperspective, but also training thisvisual eye and all of the reps andeverything that's put into andeverything that goes into that process.So before I get to the final couplequestions, I'm curious if you could justshare a little bit more for

00:43:53people whodo want to go deeper. Just who's it'sfor, what they can expect to get out ofit, that kind of thing. So the course iscalled Craft at Speed, right? And andthe whole thing is about like eventhough there are no shortcuts tobecoming a really really strongdesigner, there are some really highleverage things that you can learn as adesigner or PM or an engineer or someonetrying to get into tech. There arereally high leverage things that you canlearn that can train your eye andinstantly make something that's like,you know, let's say a 40% on the visualscale to a 80%, right? Just thinkingabout typography and composition and allthese different things. And it's like,there's actually some what I think areobjective principles of good design. AndI'm trying to just like share theknowledge that I've I've I've gainedover the years into that course. Andthen, when it comes to like learningabout these things, the best way tolearn them deeply is to actually dothem. So, rather than like teacheveryone how to use cloud code, it'slike I just show what does my workflowlook like on a day-to-day basis. It'slike a two-pronged course developinga visual understanding and being able toput that into practice, and then usingall these skills to actually like createan artifact yourself. And you'll leavethe class with a new

00:45:08portfolio websiteor a no a feature that you want to pushto production. And you and I can work onthat and jam on that a little bit. Andwe could talk about these itty-bitty PRsand things like that. Andthe whole goal is to just build up thefoundation of what it means to be adesigner today. And being able to shiphigh-craft tasteful things usingcutting-edge leading-edge tools,essentially. And then, you know, I'mthere to give a lot of feedback. We workas a class and I try to lead critiquesessions. I think a lot of folks whoaren't designers,critique is really like kind ofintimidating, right?>> Totally. So, I just want to set it upwhere it's like, "Hey, as designers, oneof the things that we can do that'sgoing to benefit us the most is workingas a jazz band, right? Sharing our workwith people, let people take it acertain way, and developing that thickskin so that we can just take the bestidea and run with it, no matter where itcomes from. And sometimes the brutaltruth is like, "Hey, this thing isn'treally good yet, but you have the toolsand we can help you get there." So,yeah, the course does a little bit oflike it's like a crash course on beingone of thesetitleless designers at a company likeNotion these days. Speaking oftransformation experiences,

00:46:24I want tocall back to something that you said tome the last time we talked where yousaid how uh working at Tome felt likeyou came out of the other side feelinglike a 10x designer. So, I'm curious foryour own journey, what was thattransformation that happened for you?So, Tome uh was the highest of tasteproduct out there on the market. And itwas like a slide deck AI generationpresentation tool. Um then right whenyou know, these tools started comingalong and it was like an 80-personcompany.And then when I joined it actuallycollapsed into like a 12-person companyand we pivoted from presentation toolsto actually like totally differentmarket of being an AI CRM. And so, westill had, you know, our founders Henryand Keith who were like bleeding edge,high taste individuals and we'rebuilding this new tool. And so, for methere like I was the only productdesigner. We had a really reallyexcellent creative director his name'sAlex Cannon.And like myself, Alex, and then Henry,one of the co-founders Henry Liriani whohis baby was uh Facebook Messengerforever and then he built Tome.It was just us three in a room every day

00:47:39for three hours talking about the workthat we were doing. What that did for meis it forced me to be able to articulatewhy I made the decisions that I madebased when I was creating something. I'min a room like talk talk about likeimposter syndrome. It's like I'm in aroom with these heavy hitters. Yeah.>> And I make something and they're like,did you choose to do that?" I'm like,"Bro, it looked really cool." Andthey're like, I think Henry's word wasit's it's like graphic design theater.Like, you can't do something for thesake of doing. And so, you have toexplain the work and you have to likedig into like first principles. Like,why did you do that thing the way youdid it?And it made me so much more like it gaveme a meta awareness of my process. Andso, it's like, well, I want this to looka certain way. Why are you puttingeverything in a card? Like, uncontainit. Just present the information. Usespace instead of lines. All these likevery likebased level UI tricks that automaticallymake your work better. But at the end ofthe day, it's just like the taking awayof all these things that we layer on topof our our our work. Cuz I think a lotof the time it's like you're in a roomwith really great designers. You likeyou you want to overdesign the problem.I think it's like the the midwit chartof like the really great designers

00:48:55justdo less, right? And so, I think likejust 3 hours a day for a year of justlike really intense crits. Sometimes Icame out of it, I feel so good. I'mlike,like Henry loved my work today. Like,I'm going to go home and I'm going tohave a beer and celebrate. Other days, Iit'd be like a 5-hour day because I didnotI did not I did so bad. I'd be like, "Ohmy god." And I'm at the office till likemidnight or even like reworkingsomething. So, having thoseopportunities like critical feedbacksintimidating, scary, putting ourselvesout there is vulnerable. Like, but atthe end of the day, it is the bestpossible thing that you can do as acreative in any field, really, to levelup your work. Well, maybe as a partingquestion, I'd love to learn just alittle bit more about your experience atNotion cuz I I think you're coming upkind of getting close to a year now. Youstarted working on Notion meeting notes.Mhm. And that culture is so incredible,right? Like, I've always looked up tothat group of people and the designersand just the quality of product that'scome out for years now. So, are you ableto reflect on your journey so far andsee ways that being in that environmenthas continued to grow and shape you as adesigner? The saying like if you're thesmartest person in the room, you're inthe wrong room. And I feel like

00:50:10like anyroom I go to in Notion, I'm like, "Okay,I'm in the right room because thatperson's here and that person's here."And like I I sit right next to one ofour design engineers, Colby Miss, andthen I got Brian Lovin, you know, twodesks away, and then I got all theselike just the most like talent dense rowover here in the world. And I think thatjust on a day-to-day basis, the smallhabits you pick up from other people.Kathy, our designer, is so so good atcollaborating with other people, and Iwatch her and how she brings otherpeople into the process at all times.And then like Ken Chen, he's the bestdesigner I've ever met who can look atsomething that you've been working onfor 6 months. You're like, "Ah, it'sneeded to be perfect, but it's notworking." He'll look at you and he'll belike, "Oh, well, that one thing is off.If you do that, the whole thing's goingto be good." You're like, "Oh my god. Ohmy god." And it's just so nice, but itall starts at the top and Notion andIvan and Simon, our co-founders, arelikeIvan, he freaks me out because not onlyis he the most tasteful timelessdesigner at the company, he's alsoextremelyan extremely good engineer. And Simon,our other co-founder, is on constantlyon the bleeding edge ofusing these tools to build differentthings and things

00:51:25like that. So, I camein here like the first time Iinterviewed here, I didn't get the job.And so the second time I interviewed, Iwas like, "I'm going to make sure theydon't regret this decision, right?" Andso I just try to like take everythingthat I'm learning day-to-day, put itinto my workflow. It's such a wonderfulplace to be becausethere's always some new thing we'regoing to build, and we have so manycustomers that use our product in somany different ways that thepossibilities are endless. It's the mostambiguous place I've ever worked becauseof that. We have such broad range ofwork, and it's it's just a blast. Anddoing something hard every day, you gohome at night and you're tired, andyou're like, "Oh my god, likehow am I going to do this againtomorrow?" But like the work is sointeresting and fun that you just keepcoming back and you just keep chewing onit more and more. Well, I'm gratefulthat you took the time to come on todayand give us a little glimpse into thisworkflow. It's very clear that you thinkdeeply about this stuff, that you careabout it, and so it's just Man, we're ina time right now where it's so helpfulto riff and experiment, but thenhave these moments where we can justkind of like share notes. Hey, what areyou doing? What's working? What's, youknow? So I really appreciate you kind ofbringing your notepad today [music] withus, and it's great hanging in. Thankyou. Thank you, Red. This is This isamazing. I'm going to keep stealingideas from [music]

00:52:40you, so keep themcoming.