Brett Williams - How a Visual Designer Became a Builder

00:00:00Being able to like leverage all theskills that I've developed at this pointto like direct AI in the direction Iwanted it to gois the most exciting part about this forme. It's so much fun having that levelof control, which again just feels soweird and backwards to say cuz a monthago, a month and a half ago, I would nothave thought that at all. I would havethought that you have zero control. Likethat's the whole problem with AI is thatyou don't have control over anything.I feel like these toolsin the hand of someone with good tasteand good judgment is just crazy. [music]>> Welcome to Dive Club. My name is Rid andthis is where designers never stoplearning.This week's episode is with Brett fromDesignJoy, who's one of the more publicfigures in the design community todayand he's going to give us abehind-the-scenesof how he built his new Mac app [music]called Gather. So if you want to seewhat it takes to truly go zero to one asa builder, then this is the episode foryou. But before we get into the tacticsand what he actually built, I want tostart with the mental shift that ledBrett to pick up these tools andactually [music] see what he couldcreate because he started off a littlebit skeptical.>> I've been a designer, specifically morejust like a visual designer, for areally,

00:01:15really long time. I don't knowhow old you are, Rid, but I mean I'vebeen doing it since, gosh, for 15, 20years, something like that. So obviouslylike the discourse aroundum designers learning to code or orrecently like designers learning tobuild and just bypassing code altogetheris sort of been an unavoidableconversation if you're like me andyou're like religiously on X, right? SoI tried to internalize this a littlebit. I would never consider myself to bea really, really great visual designer,certainly put in the time and the effortto grow in that category and I've beenvery protective over that. Not that I'mscared of being replaced, but just likeII guess the cultural devalue of designand I saw that kind of coming with theintroduction of like AI andthat's sort of taken over everything andit's really distracted people from whatwe used to value and love in a productand in the process. So, I've been ratheroutspoken about it. I feel like maybeit's an annoying degree, maybe not,about just protecting the art and thecraft of design. And so, maybe that'swhy I haven't up until recently reallydove in into that sector of of my workand I've kind of abstained from evenplaying around with, you know, codingtools and things like that. But yeah,it's like when when you just keep seeingthe same thing over and over and overand over again day in and day out formonths and at this point it feels likeyears, you know, I finally

00:02:30was like, uh,maybe there's something I'm missing,right? Maybe maybe I'm looking at thiscompletely wrong and maybe there issomething for a visual design like me,uh, that I can leverage tools like thisto actually not like just replace what Ido or like or simplify it down or dumbit down or or whatever, but actuallylike enhance what I do and allow me toenter into areas of this work that Ireally haven't been able to enter intoup until this point. Both and for myclient work. And so, yeah, a month or soago I dove into it for the very firsttime. I had played around with like Boltand Lovable and these sort of like, youknow, text to app tools a bit on a verylight level, never launched anything,never even got close to launchinganything. At the most it was like, I putin a prompt, saw the output, was like,"Eh, that's kind of garbage." And then,you know, I went back to Figma, right?Like I'm a huge Figma guy. That is theworld that I live in for all of myclient work. But yeah, it wasn't until amonth ago that I really dove into Clawand all these other tools and really sawwhat they what they were I guessdifferent in the way that I looked atthem before. And so, I'm very new tothis. Um, this is not something thatI've been like trialing forever. You'llhear it in this conversation, like Idon't really know how to talk aboutthese things. I struggle with terminal,I struggle with GitHub, I struggle withunderstanding all these concepts, but

00:03:45I'm doing it, right? And, uh, then Ifinally what got to the point where Iactually released a product and, youknow, lo and behold it was a lot easierthan I thought. And it wasn't as scary,it wasn't, you know, it was it was somuch fun. It was like the the addiction,really. It was like the most satisfyingexperiment.>> I think it's that perspective that I'mso excited to just tap into, cuz it'sreally easy to bring on somebody who's adesign engineer, who, you know, I got aCS degree from Waterloo, and they'relike kind of a designer, but also likethey totally know their stuff, right?And so, to be able to capture thejourney from somebody who basically, myunderstanding is you have very little ofany technical background at all. You areliterally just a visual designer. Youjust made the jump to like, yeah, youcould call yourself a builder. Youlaunched a really polished Mac app overthe course of, you know, a month and ahalf, 2 months, whatever it is. So, Iwant to capture that story, cuz my hopeis that youand the way that you talk about it andthe lessons that you learn can inspire alot of people. So,where did you even start?>> Yeah, I mean, I wanted to pick somethingthat I naively thought was going to be avery simple thing that I could like notone shot, but like get there relativelyquickly, within like a week or two. But,I wanted to push myself. I I I didn'teven quite understand the difference oflike building a browser app, a Mac app,or a mobile app. I didn't know what allof that entailed, right? All

00:05:00thesethings I didn't understand, but I wantedwhat I wanted for myself, number one.And I remember just telling my wife, Ididn't really have any expectationsother than the fact that I wanted tojust see it through and see that I coulddo it. I didn't really know what wasgoing to be around every single cornerat all, but I was going to keep pushingthrough and get to actual likedistribution and people using it in andupdate making updates for them and justseeing how all of that even works,right? I just put one one foot in frontof the other. Um, I didn't plan anythingout, I didn't uh have to understandeverything at the start. I just took onestep at a time. The way Colt obviouslyteaches you is is at your level, and youcan kind of, you know, direct it to downto like distill it down to like myignorant first-time like level ofknowledge on this. So, it did a reallygood job with that, but yeah, I wantedto pick something that I could usepersonally, that I also thought maybethere was a gap in the market. And so Iyeah, I landed on Gather, which is a youknow, I would call it like a collectionapp, where you can collect designresources and inspiration. And now I'mgetting into like bookmarks from X andthings like that. Kind of just acollective repository of things that youenjoy that, you know, whether you're adesigner where you're building a houseright now. So my wife is using it likeshe's creating collections for everyroom and up to and uploading inspirationfor those rooms. So you can use it formore. It's more than just design, but

00:06:16it's primarily a designer's tool andit's a Mac app.>> Real quick message and then we can jumpback into it. Framer 3.0 just launchedand it is exactly how I want to buildpro websites. [music] You can get thepower of working with AI agents, butdirectly in a canvas that is [music]tailor-made for shipping productionsites. For example, I have like fivedifferent CMSs for Dive, which isn'texactly my favorite thing to deal with.But now I can have the Framer agent doeverything [music] related to CMSmanagement directly inside of Framer.And of course you get SEO, staginglinks, localization and everything elsethat you'd expect. But honestly, at theend of the day, the thing that I lovemost is just being able to exploredesign and build with agents all inside[music] of Framer. And if you head todive.club/framer,you can get 30% off [music] Framer Proto start building today.Jitter just released animatedcomponents. [music] So you can designonce, reuse across your file and updateevery instance [music] with a singleedit. I'm personally very excited aboutthis because I use Jitter for everythingfrom animating [music] the Inflight logoto animating the buttons in the Divenewsletter even. So this is going tomake it a breeze to keep everything insync and

00:07:31it's available today. Just headto [music] dive.club/jitterto get started. Now on to the episode.Where do you start? Like once yourealize what you wanted to [music]build, did you jump into Claude? Did youdesign a lot of it in Figma first? Likewhat were some of those first few steps?>> So, I thought that if I were to ever useAI in this way, I would inevitably startin Figma since that's where again likemy mind was at. Was like you got tostart with a good design first. Iactually in this case just jumpedstraight into Claude. I didn't quiteknow about electron. I didn't know anyabout frameworks or anything like thatto build apps. So, I I first juststarted prompting Claude and like justgetting the technology down on what Ineeded to be able to use and whataccounts I need to create. Like how do IHow does authentication work? How doesemails work? Like I've never used recentin my life. Like all these tools I'venever used. I've no exposure to itwhatsoever. APIs never connected an APIto anything. So,>> I love it.>> And then I didn't know like how was Igoing to integrate open AI into that? Noclue at all. I got all that kind offigured out first loosely so that I gaveit some sort of direction. And then Ihad it just kind of scaffolded out, youknow, build me a prompt that had the indifferent phases. I'm more like the waythat I work in AI in I again, I'm notspeaking at this from an expert levelcuz I've only been using it for a month,but the way that I personally like

00:08:46towork is like one little thing at a time.I'll start with like the big phases oflike hey, let's just get the back endbuilt. Then let's get the front endbuilt. Let's not get into like all theseother complex features yet. Let's onething at a time. Then once phase one'sbuilt, then I just drill into phase one.Each element one by one fine-tuning whata drop down looks like, what a filter,you know, set looks like, what what thewhat the tabs look like. You know, and II like to I like to really like get intothe nitty-gritty details of every littlething. I don't like to just create onesweeping prompt to do everything cuzthen I have to go back and tweak it andtroubleshoot and debug it and all thatsort of stuff. So, I just went bit bybit and I spent gosh, probably over ahundred and something hours buildingGather which some people nowadays arelike they're looking at it like I coulddo this in an hour, but I spent like Ion every every edge case you could thinkof, right? And every every type of likeI I I went through so many iterations ofeverything. I redesigned the app fromthe ground up multiple times in variousdifferent styles, aesthetics, all sortsof stuff. But yeah, I just started withClaude. I just had it educate me on whatthe heck I should even be doing and whatI should be building and how I should bebuilding it and then just kind of tookits lead and set up GitHub and kind ofwent from there.>> So, at what point did Figma come intothe process?>> Uh I would like there's a saying, Iforget who said it, but it's like thelast 20% of building an app with

00:10:01AI islike 80% of your time. Like I got tolike I had built the app relativelyfast, but Figma came in in the last like20% where I was experimenting with justlike even down to just like what abutton looks like and you know, I had toI wanted to do this sort of likeskeuomorphic button where the where thestroke was like a gradient and then theinfill was like was like anothergradient, but like they didn't Claudewasn't understanding like that I wantedthe stroke to be a gradient, so I didn'tinstruct it like, "Hey, here's the exactYou know, I started with CSS. I I wentinto dev mode with Figma. I built Idesigned out the asset, copied the CSSand just fed that into Claude and itjust nailed it. Then I later on waslike, "Oh, it's a something called anMCP." I don't even know what it standsfor. I don't know how it works, but Istarted using that. But yeah, it wasreally the last 20% of like reallygetting into like everything's built.Now it just looks like crap, so I needto get it to not look like crap. So,that's where Figma came in. But I reallydidn't use it as much as I thought Iwould. Like I would love to be able tosay I leveraged Figma a lot, but Ireally didn't. Like I I knew what Iwanted and I knew how to describe it.There was obviously some cases whereFigma was helpful, but I just I feellike I did a decent enough job ofdescribing exactly what I wanted fromlike using design language. Like strokesand like, you know, opacity and allthese sorts of

00:11:16things that like peoplenormally probably wouldn't use. And so,I think I was able to direct it goodenough without Figmaum for the majority of it, which wasthat surprised to me.>> Can you talk a little bit about theparts of the process where Figma wasmost valuable? Like where did you see alot of value in reaching for the tool?>> It was more most helpful in previousversions of the app where I went a lotmore like intovery unique kind of styles andaesthetics like a lot of the stuff Ishare on X is like very kind of likeskeuomorphic in nature like metals andand shininess and shimmer and thingslike that. This app has gone throughmany evolutions before it was released.So it was a lot more helpful thereversus like there's not a lot I couldpoint to in the app today that I can sayyeah, Figma was super helpful in this.>> Interesting.>> That was the surprising part to me and Iit feels really wrong of me to even saythat. It's not allowed, you know.>> you imagine 3 months ago saying that?>> No, dude. Like there really I can't I'mlook I'm sitting here looking at the appand I'm thinking what did Figma have inthis? Now again, there was some thingsin the past around just certain UIelements that it just was not getting itright. And I did leverage, like I said,the dev mode in in Figma and copied theCSS to get button styles and things likethat

00:12:31absolutely correct and it wasmind-boggling how easy it was. I like toknow that I can leverage that if I needto. But the way that the style directionthat I went in for this appdidn't really warrant using Figma allthat much. I used screenshots a lot. Ithink maybe for this top bar I usedFigma a little bit to kind of show theposition of it, but really honestly,man, like I99% of this is Claude and me kind ofvery much directing it. Not just meputting in a prompt and it Claudespitting out the perfect thing. Don'tget me wrong there. It's me being veryvery specificon what I want in describing that.>> Okay, let's talk about that piece alittle bit because I think there's stilla category of designers who associateworking with AI with like the loss ofcontroland prefer that [clears throat] directmanipulation and it's almost like youcan't get that working with the model.So what's your relationship with likethe level of control that you have inFigma versus in code.>> I mean, obviously you haveall control in Figma. Goes withoutsaying. And I like that for a lot of alot of things, especially like clientwork. But when I'm doing a tool for mewhere I can do really whatever I want, Iwill say I was very very very, I can'toverstate it enough,

00:13:47very surprised onthe level of control you actually havein Claude. I wasn't using Claude design.I wasn't like I never I have yet to useit. I don't really know how it works,but I wasn't pointing and clicking onthings and saying like move this here. Iwas just using generally like the Claudecode um web platform to to do this.But again, it comes down to likeobviously you have to know what youshould do, right? And then you have tobe able to describe how you should doit. You go through many iterations, ofcourse. Like it rarely gets it right thefirst time. I was shocked by I guessthen that was the biggest shift, right?Is like I thought of Claude is like youput in a prompt, you get something out.And you have to live with it or you haveto go back and forth and it's likeplaying the lotteryit may not. I didn't really look at itin the sense of like I could tell Claudeexactly what I want as long as I knowhow to describe it and it'll actuallyoutput that. It may not output it thefirst time or the second time or thethird time, but it'll eventually getthere. That was the biggest eye-openerfor me was the control piece and beingable to like there was nothing there wasno part of this of this app that I wasnot able to build exactly the way Iwanted it to build, which was again acomplete eye-opener game-changer for me.I can honestly say that there was nopiece functionally, feature-wise,complexity-wise, technically-wise, likedesign-wise that I wasn't able to do.>> And obviously like in Figma, you have100% of control

00:15:02of the visuals.But I do think working with Claude givesyou the ability to control differentlevers that are not exposed inside ofFigma. Like I was playing around withthis tab bar up at the top. And the waythat you're scaling the icon in, likethere's actually a lot of different waysto scale that icon in, right?>> There are. Yeah.>> I like talk to me a little bit about it.Like like that level of detail andanywhere else in the app that you wantto highlight too. Like where do you feellike you were really sweating thedetails with Claude and did you learnanything along the way around the bestways to do that even?>> Yeah, I mean the tab bar was certainlyone piece of it. I spent a good amountof time and I I did so many differentversions of this tab bar and there wasversions of this app that didn't have atab bar at all and had a completelydifferent way to navigate it. Now, I canalso say that icon that was justsomething that I knew that I wanted. Ididn't quite I'm not an animation guy.So, I didn't quite know all theterminology around like how do I directClaude to like pop this in in this exactway and sort of have like the trailing Ithink that's what you call it like thetrailing like active hover backgroundwhatever you want to call it. I don'tknow what it's called.>> I'm the same way. I just use skills.>> Yeah, and like I know I knew I wantedthat and honestly, I think that was likewhen I directed Claude that I don'tremember it taking more than one time

00:16:17toget that right once I got there.Obviously, I built>> Interesting.>> by default a basic tab bar that justworked normally. It actually had noicons and I was like, hey, I want theactive tab icon to show. Okay, cool.Now, I want it the now I want the tab tokind of trail to go fromtab to tab to tab where you can visuallysee it moving. And oh, now I want theicon to pop up to animate in a certainway. So, it was just like very that thatwas kind of the language that I used. Ididn't I wasn't very technically likecorrect when I was describing exactlywhat I wanted. That was a fun piece andagain, like nothing's perfect in thisapp. I don't need I've never evenclicked This is a what you're seeinghere is a dev version of it. So, there'scertain things that you don't see in theapp like the bookmarks. This view righthere was a view that I spent a lot oftime experimenting with getting it rightlike getting the right feeling cuz Iwanted it to feel different than themasonry grid or anything like that. Iwanted to feel like it's its own kind ofaesthetic based on the artwork thatyou're looking at, right? So, I spent alot of time on on page.>> Dude, the shimmer the shimmer is sonice. Oh, and the hover tilt, that is areally wonderful. So, these are all likethese are I guess old concepts, but I'mlike, you know what? This is kind of akind of a fun app. I'm going to dowhatever the heck I want to do, youknow? So, yeah, so when you when youload it in,

00:17:32it gives a cool like littlelike, you know, shimmer across it. Butyeah, I spent I spent a a considerableamount of time on this cuz I felt likethis was one of the most key pageswith where these elements go, what theylook like, down even like gosh, like Iwent through so many icon sets trying tofigure out which icon set works thebest. And thentroubleshooting all of that. I didn'twant to incorporate dark mode in thebeginning cuz I knew every change that Imade would have to be like duplicated.And so, once I introduced dark mode,that introduced a whole other level ofbugs and things I had to I had to retesteverything, right? There's actually aconsiderable amount to this app thatpeople don't quite like realize.Multi-select and how that works, be ableto drag and multi-select, like all thesethings down here with being able to bulkcollect it, you know, bulk add them tocollections and bulk tagging and thenlike you can even create this like youhave this like little thing down herewhere you can click in and create a moodboard. It like puts it onto a JPEG soyou could like share it with somebodyelse.Um,and then like you get into spaces,right? which to my knowledge Gather isthe first app to do this or might beother apps that's likedoes something similar but not they'renot necessarily collection apps. Butlike this introduces a whole otherworld. There's certain things about thisapp I knew once I once I added theinitial feature, it was just going toopen up a whole other can of worms.

00:18:48Andso this was another one of thosefeatures where you're like I wanted tobe able to have a free flow canvas kindof like Figma where you can like arrangethese and be like, yeah, like, you know,if you're creating a new brand, like youwant to be able to see I like thesecolors and I like these logos and I likethese these patterns or textures orwhatever. So being able to add, youknow, different things here. There's alot I had to work through with even downto like alignment lines and distri-distribution lines. There's a lot offeatures in here. There's a lot offeatures in here. There's a lot offeatures in here. There's a lot offeatures in here. There's a lot offeatures in here. There's a lot offeatures>> There's a lot>> lot. It doesn't look like a lot. Yeah, Imean, like I said, it would took meprobably I guessed I guessed initially75 hours. I asked my wife as that sheOh, probably close to 100 150. So, itwas a lot. Like, you you don't That'sthe That's the thing is like I I saidthat in a comment on X at one point, andsomebody was like, "Haha, like I I I'mgoing to do this tonight." And I'm like,it's kind of convenient for you to beable to say that because I've alreadyworked through all the edge cases. It'slike I thinkI feel like it's much easier to copy atool one-for-one than like start with ablank slate, you know, from scratch andthen like have to think through allthese edge cases and everything. Like,there's so much to this, especially onceyou introduce dark and light mode andall these different media types now withyou have video and then you have Like,I'm right now, for example, one of themost interesting things that I'veaccomplished I

00:20:03would not have thought Icould accomplish, and it's not out on inproduction yet, but is incorporating Xbooks bookmarks Twitter bookmarks intothis without using the API. Like, I'vealways wanted to build a Twitterbookmarking app cuz I hate the bookmarkexperience on X. But, the API is soincredibly expensive that it keepseveryone from doing it. But, I figuredout a way to build a Chrome extension.It watches your activity in Chrome. Whenyou bookmark something, it'sautomatically loaded into Gather.And but then you like you open that upand then you have all these variousdifferent tweets tweet formats. You havetext-only tweets. You havetext with images. You have threads. Youhave quote tweets. And incorporating outall of that works in here. And then youhave the edge case of like, "Well, whatif I bookmark something on mobile?How is my extension going to get thatand put it into Gather?" Well, I had theI had to problem-solve that and havefigure out how all that works. And it'sjust it just You just keep going. Itjust figures it out. And you're like,"Dang, man. Like, there's nothing thatIt seems like there's nothing that itcan't do or can't figure out awork-around for." Um so, that's kind ofthe next example>> Pause. Pause. Pause. I'm going to asklike a ridiculously specific questionhere. But, going from the point of Iwant to do this, I would imagine youdon't even know if it's possible. Likeliterally what did you prompt Claude?Like how did you start that veryspecific project?>> just basically tell it what I wanted todo and then I wouldI would hope

00:21:18that it could tell me, hey,yes, I can do it. Now, I will saythere was a couple of cases where itdidn't. It actually said like that's notpossible or whatever. And luckily likethis is where experience comes inbecause as an anecdotal example, right?Like I want to my Chrome extension tolook a certain way. And you know, Iwanted it to have rounded corners orwhatever it is. And it comes back andsays, actually the you know, Chrome islimits you to this. But I I I was awareof another extension that did somethingsimilar. And I'm like, well, they'redoing it. So, I fed that back intoClaude and he's like, oh, yeah, you'reright. They're doing it this way.They're actually putting an iframe ontop of the page. Let me do that. So,there it's like you do have to have someknowledge in order to get over some ofthose obstacles. I feel like with Claudeone of its one of its strengths and andI'm not saying this is exclusivelyClaude. I'm sure Codec does anythingelse. But it's very good at like kind ofranking your options of being like, hey,here's like the lowest risk like leastexpensive option. Here's some of thedownfalls that might occur for it fromit. Here's the most expensive option,the most instant option, let's say justfor this bookmark thing, right? So, itis really rather good at like giving youoptions by default. When you say like Iwant to do this, what's the best way todo it? That's where I would start withevery new feature that I wasn't quitesure if it was possible to do or not.Including like especially thebookmarking

00:22:33thing cuz I would never havethought to create a Chrome extension forthat. And so, yeah, that's that's whereI would start. I'd be like, hey, I wantto do this, what's the best way to doit?And then it would usually give me three,four, five, six options, rank them inorder. It would have its recommendedoption. Sometimes it would blend giveyou a like a last option that's kind ofa blend, right? And then you just kindof pick and choose which which you wantand you have the full context of it.>> Okay, I want to drill into more visualdetails because you were being humble inthe the but I do think you are aworld-class visual designer, and sothere's this gap that you have to close,right? Like you have the skills inFigma, but like can you bring them tolife in code? And I think there's a lotof little details that maybe peoplewouldn't even notice at first. And onething that stood out to me was like themulti-select, and you have this doubleborder effect where you have like alight inner and a dark outer, which islike it's it's really nice, right? It'sreally really nice. You're able toYou're able to nail that. Even down tothe shadows on this branding card. Likehow did you Just talk about shadowseven.>> [laughter]>> How did you dial in the shadows with thecard?>> honestly one of my favorite pieces ofthis, and I would be lying to you if Isaid that like I directed the shadows atall on that. It was literally it got itthe very first time, and I had neverchanged it. Like

00:23:48I told it I wantedcollection cards at the top. I wentthrough so many versions of thatparticular collection card. But it itgot the fan thing right away. I said itI just want a stack of cards that likefan out when you hover over it. And itgot that really I'd say like day one orday two of building this app, and Inever changed it.>> over Hover over it let so the people cansee.>> Yeah, so when you hover over it fansout. Even goes like things that wouldbother me like it goes behind the text,but I'm like it's kind of cool, right?It's like it's very natural and and andraw. I use that throughout. So if you goto collections, you know, it's the samesort of thing. Um but that's one of myfavorite pieces of the app. Andsomething that no other no othercollection tool really does. And thenlike there's even like little thingsagain. This is where you really Like youcan hover over in the bottom right-handcorner, and it pops open. Oh, I haven'tfigured out the video thing yet. But itpops open the image in like a quickview, right? Things you wouldn't evernotice. One One of the cool things Ilike I like to say fonts.So if you go down here to tags, and youactually type in font,it actually like is smart enough to giveyou fields, so you can like type thefont name, the font by URL, all thatgood stuff. And you can see I need tofix bug. Umcuz the the drop down is not workingwith dark mode.>> There is so many things that again,

00:25:04likeyou really have to use the app to todiscover. Like one of my favorite thingsis like the rediscover mode where it'slike you want to just kind of sortthrough things and you want to be ableto go through quickly and like, "Hey, Iwant to skip this one. I want to addthis one to a collection.">> Cool.>> And I want to add this one to trash. Andit's just kind of cool little coolthings. Or like if you go to unsorted,you have this focus sort button downhere. And so you can quickly I only haveone collection right now, but you canjust use your hot keys to like add it tocollections, right? To quickly sortthrough everything. So yeah, there's allkinds of things like that that you don'tsee on the surface until you really usethe app that I thought that was a lot offun to build and think [music] through.>> There's one question that I can't stopasking myself. What if companies applyto talk to you rather than the other wayaround? And that question is thefoundation for the all-new Dive [music]Talent Network. And it's working. Likeright 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 want toget on my list or maybe you're evenlooking for your next design hire, headto dive.club/talent [music]to join today.>> How often are you intentionally leavingwiggle room for Claude? Like we'vetalked a lot about how

00:26:19you canvery clearly articulate your intent atthis final 1% of polish. Are you everkind of that almost like that slotmachine mentality? Like do you ever leaninto that or not so much?>> I do in different formats. Like if it'ssomething if it's a new feature that Idon't quite know how I want it or howClaude will implement it, I'll usuallylike prompt back and forth with Claudeto like get some context around what itmight do and the options that it mightsift through.I don't like to just like wait for thebuild process and then have to it andall that sort of stuff. I'd rather likeClaude describe what it's going to dofirst. There's certain things thoughthat like I just know what I want,right? And I I I like to leave wiggleroom on everything. It's just the degreeof which I leave wiggle room depends onwhat it is that I'm doing. That's kindof the fun in this, right? It's like youhave to use Claude as like a companion,right? That's like it may know stuffthat you don't know. It may think ofthings that you might not think of,right? And so I do like to leverageClaude a lot in like thinking for me andbrainstorming and theorizing on ways todo certain things. More than more thanthe opposite. I don't like to just belike this is exactly what I want to do.Don't do anything else different. Butagain, like I'll if I do direct it, I'llusually end the prompt by

00:27:34saying likelet me know if I missed anything or ifthere's a better way to do this or maybeI haven't thought of some edge caseslike consider those and and so yeah, I Idon't know. I would say I leave it apretty high degree ofof margin for Claude to do what itthinks is right and then I'll justreview it and change it if I need to.>> Yeah, I think that's probably my answertoo. It's it kind of just depends onwhat the output is. Like if the outputis visual,a lot of times I'm like build thisexactly like pixel perfect, you know,match the selected frame kind of thing.Like I do still work on the canvas allthe time. If the output is a little bitmore transition-based, I am also not ananimator. Like I'm I'm trying to getbetter at interaction design, but a lotof times I'll just describe somethingvery loosely and and see. Like it'ssuper helpful to just see something andthen tweak it down rather than You know,that and I'll drill down from thereexactly. There's a lot of actuallyclever page transition things that arehappening even the way that like thegrid fades back in.How is that stuff intentional? Like didyou get a lot of that out of the box?Like I didn't got get a lot of that outof the box. I mean that was somethingthat like this is where as a designer,you're a designer but you have like theworld at your fingertips with theseapps. Like you can do anything. It'sreally difficult not to over-engineer.Right? Like I still wanted this to feelvery lightweight, very like verypleasant, not not

00:28:49too much in the way. Ireally wanted the art to like be theshowcase of this app. So, I didn't wantto do too much, but likefiguring out how subtle I want things orlike I would like shadows on the cardswas something that I leveraged in Figmacuz I just couldn't quite get it right.Like it would either be too drastic ornot enough and then figure out the rightshadow for like well, some some cardshave like a light gray background. Howare those going to work on there? And ofcourse, it doesn't like you can even seethis card over here is kind of likeseems floating in space, but you kind ofhave to like at the end of the day, youcan't account for every situation, makeeverything look perfect. But no, the waythe cards load in like even last night Iwas figuring out like, you know, whenyou save an image like what that shouldlook like. Before I had like a shimmerand a pop and thenyou know, I was like I wanted to kind ofdrill that kind of condense that downinto something more subtle and then Ipicked my pop sound, but like maybesomebody else doesn't like the sound.So, I went and actually went intosettings and it was likeuh you know, I asked Claude to give melike 10 or so differentso you can actually go through and likepick. But again, like Eagle app is theapp that I used previous to Gather. It'sa very similar collection tool, buttheir feature set is like massive. Andyou can tell it's like an app that'sbeen around forever and they just don'tknow what else to do with it, but justkeep adding new features. So, I was veryvery

00:30:04cognizant on like not adding toomuch, but adding the right kind ofthings. And so again, that's where itcomes down to taste and judgment andlike all the things you hear about likethat are obviously significant whenbuilding products and the things thatare going to separate good products frombad. But that is that is a strugglewhere it's like I can do this in 2seconds. So, should I do it or should Inot do it?And how you like how you go about thatand I'll add things in then I'll removeit because I feel like okay, that was alittle too much. I was having a littletoo much fun there.Let me dial that back.>> slope, man. So, I just saw a real loottweet where he talked about overcookingan app that I think about all the timebecause it's like in isolation everysingle thing that I do, it's genuinelyso fun to dial it in to a degree that Ican I'm just like deeply proud of thistiny little hover stage that maybe 1% ofpeople are going to experience and thenyou do that end number of times andyou're like, "Whoa, why does this appfeel weird?" You know? Uh it's it is thedanger of leaning into this moment intime where we kind of do getsuperpowers.>> Really quickly, talk to me about thesound design piece. Are those generated?Did you get that like>> I don't even know. So I I I actuallywent up so at at first at first well,maybe it's maybe that's not the maybethat's not the right answer. At first Iactually picked my own sound. So

00:31:19I wentto artlist.com, I think it's called,found the sound that I liked, uploadedit. It was kind of this like old retrolike Windows 97 sound or something. Butthen I'm like, that's is the more Istarted to save images, the more I'mlike, that's kind of gets annoying aftera while. I need something more subtle.So like last night I was like, you know,I said told Claude and I used myprototype MD um skill. I was like, "Hey,can you prototype me like 10 differentsounds to use?" And I could clickthrough them and actually test it outand save an image and that sort ofthing.And then it it gave me the all theoptions, right? And I picked one. Then Iwas like, "Well, I should actually allowthe user to pick." So I was like, "Just,you know, forget it. Just upload all ofthem to the app into a settings paneland then do it that way." And then I waslike, "Well, now I need a now I need asound for trash." And so I did the samething for trash. And I wanted adifferent sound for like when you'readding a image into the trash can andwhen you're emptying the trash can. Andit did that. It gave me both options forall of them like at various differentlevels. So yeah, that was I don't knowif they're actually AI generated or not.They just came from Claude. I don't knowwhere they came from. I assume they'refree to use, but I don't actually know.>> Interesting. So I've never prototypedsound before. I don't know why Ihaven't.>> It can be overdone. Yeah, you have to beyou have to be I think selective withwhen you do it and also give the optionto turn it off, I think.>> Well, I think that's another examplethough of like the type of design thatis now available

00:32:34to designers. Likepreviously those level of decisions Imean, there's a reason I didn't havesound in any products that I have madeup until about a year ago. Cuz>> Oh, for sure.>> it didn't feel like my job, you know?But now all of a sudden it's like, well,yeah, this is part of the UX. Like thisis UX design, you know?>> Mhm.>> And it's available to me and I can justdo it and I can prototype. How cool isthat?>> Yeah, I wouldn't have a clue I mean Iwouldn't have a clue how to do any ofthis, but let alone add sound effectsinto certain actions and stuff, but itnails it every single time. You just gotto pick out the sound or it'll pick itout for you and you can select optionsand so yeah, that was one of thosethings where I don't have sound allthroughout the app. I only have it whenyou add a new photo in and when you addsomething to trash. I kind of stopped itthere, but you know, you can definitelygo hog wild with sound and it'd be kindof annoying at a certain point.>> All right, tell me a little bit aboutthis prototype MD skill concept that youwere working through.>> I actually was watching a I think it wasa Claude engineer. Some people watchingthis might not even watch the samething. I didn't actually didn't watchthe whole thing. I watched like thefirst 4 minutes. I bookmarked it towatch later, but the first 4 minutes Iwatched was like,yeah, one thing that we do and I Somepeople watching this might be like, thisis so old news. I've already seen on mytweet that was like, I've been doingthis for like a year or two.But I'm like, I'm new to this. I juststarted this, so but I'm still going toshare it cuz it's super helpful for me.Now when I do anything, when I addanything into the app, that's why I washaving so much fun last nightredesigning

00:33:50everything or notredesigning, but just refiningeverything was like, I created a an MDskill file. It was like, hey, you know,Claude and I when I tell you toprototype something, I want you toprototype like five different options.But like putting in put it in a one HTMLfile that I can just open up from Claudeand I can tap through the dif- thedifferent options. And so I can actuallyprobably share>> Please.>> So this is an example of one of the HTMLdocuments. So like Claude will just spitout a link to this and you just put itin your terminal or whatever whereveryou're using this at. And this is thisis like the format that I've set up. Soyou always have I always have fiveoptions. Of course, you can do more ifyou don't really care too much aboutyour tokens. But this wasan example of last night I wastroubleshooting some of the new savelike entrance effects is what this iscalled here. So, when you when you savean image into the app, like what itactually looks like. So, like the firstone I can click, you know, this is likea fade and rise, which is ultimatelywhat I ended up going with, right? Butthen you have like your spring and pop.>> Cool.>> And then you have your your develop, andthen you have your kind of shimmer,right? Umand you have like this one, which Ithink was just too much. But this is anexample, and then I'll go back to Claudeand be like, "Hey, I really like one,like number one." And then it wasimplemented.It would it would it would obviously notimplement in this exact style. It wouldactually like take your tokens

00:35:05and yourCSS and like put it in your style. So,it's actually kind of fun to see likehow does this actually translate to myapp? Um and everything that it did. Butthis is an example of like what I do nowbefore doing any kind of UI work. And Iactually just I just discovered thisyesterday. So, I went through everythingin my app down to drop-downs, and wentthrough everything, and and ran itthrough this prototype skill, andcame up with way better UI.>> Oh, cool. How specific Like, did Are youdescribing anything about what theseoptions should be? Nice.>> No, no, no, no, absolutely. It's I justwant I I didn't want to prototype theway a card enters into the into the graymap if you save it. And then I don'thave to say like, you know, I just dothe, you know, just prototype it. And itreferences my skill file and knowsexactly what to do. And of course, youcan be way more directive with it. I I Iwas very much like, "Just create me askill that just prototypes fiveexamples." Like, I didn't I didn't havethis big long like master prompt foranything like that. But this alone righthere, like I don't know how I didn'tknow to do this before, but completelychanged the game.>> I don't think you're that far behind forwhat it's worth. Like, I think HTML iskind of having a moment recently. I'vestarted using HTML just in the last likemonth and a half.>> Yeah. It's just helpful to be able toreally quickly see all these things sideby side

00:36:20and have it inin one file.>> It's It's almost kind of becoming thisthirdway of exploring for me. Like, sometimesI explore in code and I'll just generatesomething that is a part of my productor maybe I'll spin up like a slashplayground route. I do that a lot,especially when I'm working inside of aweb app. Or I'll generate things I usepaper like a on the canvas, right? Butall of a sudden is like this middleground where>> Mhm.>> HTML's awesome. Like it's it's awesomecuz you can play with the interactivity.It's cheap and quick to make. You canreally quickly see things that againlike you. Like I would have a hard timedescribing five different ways that aninteraction should feel.>> Oh, absolutely. Yeah.>> You know, like it's kind of it's notthere's not a lot of language at leastin my brain that [laughter] that uh Icould reach for, you know? SoExactly. So like all the time I'll belike, "Give me five." Three of them willbe horrendous and then one and two willbe interesting. I'll be like, "Okay,actually just give me like three morelike number two." And then play with itthere. And and almost have like thislittle back and forth. Like even down tolike five days ago, I've started usingHTML not even just for prototyping, butfor my actual conversation

00:37:35with Claude.Like when I'm trying to figure somethingout, I will tell it to just create melike a visual answer in HTML and then Iwill just read this web page and juststart like I I dictate everything. SoI'll just start super whisper and I'lljust start reading and talking about it.And I have it specifically bake in likeopen-ended questions or things it wantsme to weigh in on as these little likeblurbs almost like a notion-stylecallout. And then I'll just I'll justtalk, dump the most raw messy prompt youcould possibly imagine, and then mycursor's just focused in conductor andI'll hit option space bar again and thenit just dumps this paragraph and thenClaude will spin up another HTML. Acouple examples. One is I was trying todesign this card and the hardest partabout the card was not even necessarilythe UI. It was thinking about whatmetadata can I even reach for cuz it waslike I'm just it's like a more technical>> Mhm.>> product. I was just having a hard timewrapping my head around like, what do Ihave available to me? Like, help methink abouthow I can communicate things. And itjust created this rundown of all of themetadata and then like a tiny littlevisual mock-up of how I could use eachone. And it gave me like three times asmuch as what was

00:38:50in my head and sparkedall of these ideas. And then I take itand I'm like, okay, let's let's likeprototype over here, you know?>> That's genius.>> I feel like I'm just barely scratchingthe surface of how I want to use HTML. Ithink it is the thing right now that I'mmost excited about in terms of where Isee opportunity to improve my ownprocess.>> Dang, especially since Claude can't doimage generation. It try it like it'sfunny that it is pretty creative the waythat it tries to use text in like avisual way. Like it does that sometimeswith me and I'm like, okay, that washelpful. But like I've never thoughtabout leveraging like anopen-ended HTML canvas to be able tovisualize things. That that's that'sthat's amazing.>> Another little pro tip is the value ofhaving a single folder of dummy contentand then you just tell Claude to usethat in the prototypes and you getrealistic imagery. Even when I'mgenerating things in paper, I'll like Ihave a folder of SVG logos cuz I use alot of like Figma lovable V0 Claudelogos in my own product and then I haveum a folder for like the landing pagethat has a bunch of mock-ups and faces.And so I just say like, hey, design withthat cuz otherwise it'll only give methe>> Sure.>> Or it'll like it'll use like a heartemoji for lovable. But if I say usethese folders from the landing page,

00:40:05then all of my prototypes become morerealistic.>> Dude, yeah. I it's it's it's so evidentwe're just all all of us, regardless ofhow experienced you are, are justscratching the surface of this thing andstill figuring out how to like useeverything at our disposal. It's yeah, II feel like every day I have a newepiphany and then I'm like, "Holy crap,game changer ever game changer idea."And I don't know. It's It's It's It'ssuper exciting and it's also verydistracting.But, [laughter] you know, I like I'mtrying to keep up with client work andI'm like but like in between projectsI'm like, "I'll award myself like 10minutes building in Claude." I haven'tused conductor. I don't know how any ofthat works. There's still like a worldof products and I I don't use agentseven like and now it's like loops is thebig thing. Like I don't I don't know. II'm I I I'm once one one step at a time.I'm very comfortablelike I love it.>> of this episode. Yeah, one step at atime. Cuz you usually are using like theClaude desktop app right now or are youusing Claude code?>> No, just just just the browser and theend terminal. Yeah, I use the terminal.The amount of times I have to promptClaude, "Hey, please give me the correctlike the command to open this locallycuz I don't I'm not even interested inmemorizing the commands like so I'mtrying you know, I and every time Istart a new context window I have tostart with the basics of like, "Hey, Idon't know how terminal works. You needto tell me very specifically how to doeverything." [laughter]>> Sometimes II'm

00:41:20screen sharing for an engineer who'shelping me like debug something.It's the most uncomfortable experiencebecause in front of an engineer you haveto be in terminal and then like realizelike, "Oh, I I don't actually use anyterminal commands." Like I don't typeget pull oranything. Like I just describe everysingle thing and then I wait for thespinner for Claude.>> But, dude, the dude I'm like I it itopened my eyes to be like, "How dodevelopers memorize all this stuff?" Youknow, I'm like there's so much here andso many things that I've encounteredthat the commands were so big and therewere so many different ones. I'm like,"I would have no Like where do you go toto find this stuff to like learn thisstuff?" Thank goodness like it's alljust there in Claude for us, but itreallygave me a new appreciation fordevelopers and that they would just knowhow to do all of this.>> This is random, but what I come librarydid you land>> I think I landed onLucid. I had most of everything that I>> myself that link. I literally, rightbefore this call, I was like, maybe Ishould play with Lucid, cuz I'm workingon a a new Mac app, actually. And I waslike, man, should I I always usePhosphor. I use Phosphor icons foreverything. I use Branch out, man. I useBranch out. And so, I I just was like,I'm going to try Lucid. Honestly, Ihaven't found an icon set that I that Ilove. Um I see all

00:42:35kinds of icons inother products and I'm like, I wish Iknew what icon set they were using.There's probably a way to figure it out,but yeah, I just use the basics likePhosphor. I use Streamline icons for alldesign work. I landed on Lucid cuz it itI I was tired of experimenting and I'mlike, this works for now.>> Yeah. They have a the animated like theyhave built-in animations, which is whatit is. I didn't know that. Yeah, there'slike a there's like animated Lucidlibrary that I found and I'm like, didnot know I'm going to play with that.Fun fact, I actually, in the last fewdays, for the very first time, generatedan icon that I used in production. AndI'm kind of feeling like we're close tobeing to>> Really?>> point at an existing cuz I'm using theQuiver API in Paper.>> Okay.>> Yes.>> generate through Quiver on the Papercanvas and I can point it at theexisting icon libraryand then say, hey, match that style.Like I want 16 pixels. I want likeroughly 13 to 14 pixel vector inside ofthe bounding box and I want 1.2 pixelstroke. Make it all consistent, youknow?>> Yeah. Yeah.>> And and then it can just generate like10 options for an icon and then I justpick one. In the same way that you'redoing with the HTML and I'm like, Iwonder if I was starting an app fromscratch today, it would be very temptingto try to generate

00:43:51icons. Honestly.>> Honestly, like I've used Quiver I'vebeen using Quiver for other things. Umand it's it's good. I think the thingsthat I'm using it for hasn't reallysuited the app yet. It's like it's alittle more complex line artwork. Why Ihaven't you to use Quiver for icons upuntil this very moment? I don't know,but that's Yeah, you you I've seen yourstuff. Like you like the you like thepaper stuff. I haven't really gotteninto paper that much other than like fordesign work. I use it for some thingslike with when I need shaders andthings, but like I really haven't usedpaper in the way you use paper at all.And I feel like there's definitelysomething there for me. But like I said,I'm so like I'm so engrossed in what I'mdoing right now. I'm like I'll get tothat at a>> Yeah, you you got to kind of pick yourbattles a little bit.>> I'll always be like 3 miles behindeverybody else, but I'll get there,right?That's just the way it's the way it is.So>> Okay, let's zoom out real quickly. Thishas been a heck of a 2 months and changelittle window for you where you've donewhat previously maybe you would I meanit's a hard thing. I'm not even going toobviously you're able to experience whatAI makes possible and maybe there wereparts of the process that were just wayeasier than you thought they would be orway less scary than you thought theywould be, but you still did a hardthing. You went zero to one on a Mac appand it's good, right? So how has that

00:45:06journey impacted the way that you thinkabout the future ofand not only the role, but also like thevalue that designers bring to the table?>> The biggest shift for me is going fromAI being a prompt and just build mesomething tool to likeit's like this like the way that I'vebeen thinking about it is like the mostpatient collaborator that you could everhavethat builds at such hyper speeds thatlike humans could ever build at. And youjust have to like know how to direct it.And also like taste and judgment, notonly in likewhat to build, but like how to go aboutit down to just like the finite UX UIdecisions. It's made me like less scaredof the future for designers and morehopeful, I think. Like it before Ireally didn't quite know what to make ofit. I didn't I knew that there werecertain things at risk. I wasn't quitesure who would be affected and how Iwould navigate that. Like it's I'malways trying to stay like two stepsahead of of like the industry and beinglike I I need to prepare for what thefuture holds and quite honestly thingsare moving at such a fast pace rightnow. I don't even know what that lookslike in a couple of years. To me now I'mstill trying to figure out how this howthis doesn't incorporate into my clientwork, which is what pays the bills forme. It's like it's my thing. Like that'swhat I do. This is all all of this isjust

00:46:21for fun for me, right? This is notlike I don't rely on this to to make aliving off of it. Like I don't need tobuild anything. But how do I incorporatethis into my client work is like my nextquestion that I'm asking and what thatactually looks like, right? Like that'sa much higher risk type of service tooffer and how I do I go about that andcan I do it myself? Do I need to finallylike scale and hire someone to help me?It's something that I'm still digesting,figuring out how does this affectthe industry, but also like how does itaffect me personally? What does my rolelook like in a year or two or even a fewmonths? I feel like these toolsin the hand of of a designerand someone with good taste and goodjudgment is just crazy. Like it itreally is crazy. And unfortunately likeif you're just in the Twitter bubble orwherever you're at, you don't see a lotof that. Like most of the people thatare like spouting off about these toolsdon't actually have any of those things.They're either likeI don't know, just a mouthpiece for AIcompanies or they're like they're justlike strictly influencers. Not they'renot they're not designers, right? Youdon't see too many I know you feature alot of them on your show, but those arethose are rare. Like they're they'reoften times not at the spotlight thatthey should be at. And

00:47:37so I think that'spartly why I have been shy about usingit up to this point and why it's takenme so long. Ironically it's like thething that has stopped me from gettinginto Claude is actually going to be thething that makes me most powerful withit. Like in that sense of like I don't Ihave a very low tolerance for like lowquality work. Being able to likeleverage all the skills that I'vedeveloped at this point to like directAI in the direction I want it to gois the most exciting part about this forme. And it just wasn't something that Iwas aware of before and I had reallyquite literally underestimated it to ahigh degree.>> Yeah, I think that's one of my maintakeaways from this conversation. It'sthe control piece. Like all of theprevious hesitations are where you'reable to shine now as a builder and allof that that final like 1% fiber anddetails. Everything that you've madethat makes the product feel amazing andfeel consideredand it's like that's all just beenopened upto you all of a sudden, which is so soexciting.>> Maybe it was there all along. Maybemaybe AI has advanced to the point whereit's now like it's actually, I don'tknow, smarter in some way or better atdesign in some way. I I don't think Idon't think that AI is it's still notgood at design, but it's good at takingdirection. And as long as you can directit clearly

00:48:52and you know what you'redoing and you're making the rightdecisions. Right? Like you can be goodat directing AI, but you you may go thatbe going down a bad road that's likeisn't very tasteful or isn't veryaesthetic or anything like that, whichis again the majority of stuff you seeonline. I don't know. I'm like wantingto go back through my entire app libraryof use that I use that like and justlike re-rebuild everything cuz it's justit's so much fun having that level ofcontrol, which again just feels so weirdand backwards to say cuz a month ago amonth and a half ago I would not havethought that at all. I would havethought that you have zero control. Likethat's the whole problem with AI is thatyou don't have control over anything.And that's where Figma comes in. Youhave control. It just it like it doestake time. Like it takes a lot of time,a lot of iterating, and a lot of liketroubleshooting, but you actually get aworking product in the end, which is funas heck, so.>> I appreciate you coming on and sharing alittle bit about the journey and it isamazing what you built. You've>> Thank you.>> You should just be proud, you know? It'scool. Like I I really hope that thisconversation inspires a ton of peoplewho maybe have either been on thesidelines orloosely tinkering but haven't actuallycommitted to shipping a thing, right?Like I I I'm so inspired by the journeyand what you've been able to do and I'mexcited [music] to see what you buildnext.>> Absolutely, man. Thanks for having meon.