Brett Williams - How a Visual Designer Became a Builder

[00:00] Being able to leverage all the skills that I've developed at this point to direct AI in the direction I wanted to go is the most exciting part about this for me. It's so much fun having that level of control, which again, just feels so weird and backwards to say. Because a month ago, a month and a half ago, I would not have thought that at all. I would have thought that you have zero control. That's the whole problem with AI is that you don't have control over anything. [00:30] Welcome to Dive Club, my name is Rid and this is where designers never stop learning. This week's episode is with Brett from DesignJoy, who's one of the more public figures in the design community today. And he's going to give us a behind the scenes of how he built his new Mac app called Gather. So if you want to see what it takes to truly go zero to one as a builder, then this is the episode for you. [01:00] I want to start with the mental shift that led Brett to pick up these tools and actually see what he could create. Because he started off a little bit skeptical. I've been a designer, specifically more just like a visual designer, for a really, really long time. I don't know how old you are, Ridd, but I mean, I've been doing it since, gosh, for 15, 20 years, something like that.

[01:30] and unavoidable conversation if you're [01:32] like me and you're like religiously on X, right? So I tried to internalize this a little bit. I would never consider myself to be a really, really great visual designer, but I've certainly put in the time and the effort to grow in that category. And I've been very protective over that. Not that I'm scared of being replaced, but just like, I guess the [01:50] cultural devalue of design and i saw that kind of coming with the introduction of like ai and [01:56] That's sort of taken over everything. It's really distracted people from what we used to value and love in a product and in the process. So I've been rather outspoken about it, I feel like maybe to an annoying degree, maybe not about just protecting the art and the craft of design. And so maybe that's why I haven't up until recently really dove into that. [02:15] sector of of my work and i've kind of abstained from even playing around with you know coding tools and things like that but yeah it's like when some when you just keep seeing the same thing over and over and over and over again day in and day out for months and at this point it feels like years you know i finally was like uh [02:31] Maybe there's something I'm missing, right? Maybe I'm looking at this completely wrong. And maybe there is something for a visual design like me that I can leverage tools like this to actually not like just replace what I do or like or simplify it down or dumb it down or whatever, but actually like enhance what I do. [02:48] And, you know, [02:49] allow me to enter into eras of this work that I really haven't been able to enter into up until this point, both for myself and for my client work. And so, yeah, a month or so ago, I dove into it for the very first time. I had played around with like Bolt and Lovable and these sort of like.

[03:04] text the app [03:06] tools but on a very light level never launched anything never even got close to launching anything at the most it was like i put in a prompt saw the output was like yeah that's kind of garbage and then you know i went back to figma right like i'm a huge figma guy that is the world that i live in for all of my client work but yeah it wasn't until a month ago that i really dove into clawed and all these other tools [03:28] and really saw what they were, I guess, different in the way that I looked at them before. And so I'm very new to this. This is not something that I've been like, [03:37] trialing forever. You'll hear it in this conversation. Like, I don't really know how to talk about these things. I struggle with terminal. I struggle with GitHub. I struggle with understanding all these concepts, but I'm doing it right. And then I finally got to the point where I actually released a product. And, you know, lo and behold, it was a lot easier than I thought. And it wasn't as scary. It wasn't, you know, it was so much fun. It was like the addiction, really. It was the most satisfying experiment. I think it's that perspective that I'm so excited it just happened to, because it's really easy to [04:07] got a CS degree from Waterloo and they're like kind of a designer, but also like they totally know their stuff. Right. And so to be able to capture the journey from somebody who basically my understanding is you have very little of any technical background at all. You are literally just a visual designer. You just made the jump to like, yeah, you can call yourself a builder. You launched a really polished Mac app over the course of a month and a half, two months, whatever it is. So I want to capture that story because my hope is that. [04:33] You

[04:34] And the way that you talk about it and the lessons that you learn can inspire a lot of people. So [04:39] Where did you even start? Yeah, I mean, I wanted to pick something that [04:43] I naively thought was going to be a very simple thing that I could like not one shot, but like get there relatively quickly within like a week or two. But I wanted to push myself. I didn't even quite understand the difference of like building a browser app, a Mac app or a mobile app. I didn't know what all that entailed. Right. All those things I didn't understand. But I wanted what I wanted for myself, number one. And I remember just telling my wife, I didn't really have any expectations other than the fact that I wanted to just see it through and see that I could do it. [05:13] every single corner at all. But I was going to keep pushing through and get to actual like distribution and people using it and an update, making updates for them and just seeing how all of that even works. Right. I just want one one foot in front of the other. I didn't plan anything out. I didn't have to understand everything at the start. I just took one step at a time. The way Claude obviously teaches you is is at your level when you can kind of, you know, direct it to down to like distill it down to like my ignorant first time like level of knowledge on [05:43] It did a really good job of that. But yeah, I wanted to pick something that I could use personally that I also thought maybe there was a gap in the market. And so, yeah, I landed on Gather, which is a... [05:51] I would call it a collection app where you can collect design resources and inspiration. And now I'm getting into bookmarks from X and things like that, kind of just a collective app. [06:02] repository of things that you enjoy that, you know, whether you're a designer, we're building a house right now. So my wife is using it like she's creating collections for every room and updating and uploading inspiration for those rooms. So you can use it for more. It's more than just design.

[06:16] It's primarily a designer's tool and it's a Mac app. Real quick message and then we can jump back into it. Framer 3.0 just launched and it is exactly how I want to build pro websites. You can get the power of working with AI agents, but directly in a canvas that is tailor made for shipping production sites. For example, I have like five different CMSs for Dive, which isn't exactly my favorite thing to deal with. [06:46] directly inside of Framer. And of course, you get SEO, staging links, localization, and everything else that you'd expect. But honestly, at the end of the day, the thing that I love most is just being able to explore, design, and build with agents all inside of Framer. And if you head to dive.club slash framer, you can get 30% off Framer Pro to start building today. Jitter just released [07:16] every instance with a single edit. I'm personally very excited about this because I use Jitter for everything from animating the in-flight logo to animating the buttons in the Dive newsletter even. So this is going to make it a breeze to keep everything in sync and it's available today. Just head to dive.club slash jitter to get started. Now onto the episode. Where'd you start? Once you realized what you wanted to build, did you jump into Claude? Did you design a lot of

[07:46] were some of those first few steps? So I thought that if I were to ever use AI in this way, I would inevitably start in Figma since that's where, again, like my mind was at, was like, you got to start with a good design first. I actually, in this case, just jumped straight into Claude. I didn't quite know about Electron. I didn't know any about frameworks or anything like that to build apps. So I first just started prompting Claude and like just getting the technology down on what I need to be able to use and what accounts I need to create. Like, how do I, how does [08:15] I've never used Resend in my life. Like all these tools I've never used. I have no exposure to it whatsoever. API is never connected an API to anything. So and then I didn't know, like, how was I going to integrate OpenAI into that? No clue at all. I got all that kind of figured out first loosely. So I gave it some sort of direction. And then I had it just kind of scaffold out. [08:35] build me a prompt that had in different phases. I'm more like the way that I work in AI, and again, I'm not speaking at this from an expert level because I've only been using it for a month, but the way that I personally like to work is like, [08:47] one little thing at a time. [08:49] I'll start with the big phases of like, "Hey, let's just get the back end built, then let's get the front end built." Let's not get into all these other complex features yet, let's do one thing at a time. Then once phase one's built, then I just drill into phase one. [09:01] each element one by one, fine tuning what a dropdown looks like, what a filter, you know, set looks like, what, what, what the tabs look like, you know, and I like to, I like to really like get into the nitty gritty details of every little thing. I don't like to just create one sweeping prompt to do everything. Cause then I have to go back and tweak it and troubleshoot and debug it and all that sort of stuff. So I just went bit by bit and I spent, gosh, probably over a hundred and something hours building gather, which some people nowadays are like, they're looking at like, I could do this in an hour, but I spent like I, on every, every edge

[09:31] think of, right? And every type of like, I went through so many iterations of everything. I've redesigned the app. [09:36] from the ground up multiple times in various different styles, aesthetics, all sorts of stuff. But yeah, I just started with Claude. I just had to educate me on what the heck I should even be doing and what I should be building and how I should be building it. And then just kind of took its lead and set up GitHub and kind of went from there. So at what point did Figma come into the process? I would like, there's a saying, I forget who said it, but it's like the last 20% of building [10:06] But Figma came in in the last like 20 percent where I was experimenting with just like even down to just like what a button looks like. And, you know, I had to I wanted to do this sort of like skeuomorphic button where the where the stroke was like a gradient. And then the infill was like was like another gradient. But they didn't call. I wasn't understanding like that. I wanted the stroke to be a gradient. So I did instruct it like, hey, here's the exact thing. [10:29] I started with CSS. I went into dev mode with Figma. I designed out the asset, copied the CSS and just fed that in the cloud and it just nailed it. Then I later on was like, oh, it's something called an MCP. I don't even know what it stands for. I don't know how it works. I started using that. But yeah, it was really the last 20 percent of like really getting into like everything's built now. It just looks like crap. So I need to get it to not look like crap. So that's where Figma came in. [10:54] But I really didn't use it as much as I thought I would. Like, I would love to be able to say I leverage Figma a lot, but I really didn't. Like, I knew what I wanted. I knew how to describe it. There's obviously some cases where Figma was helpful, but...

[11:06] I just, I feel like I did a decent enough job of describing exactly what I wanted from like using design language, like strokes and like, you know, opacity and all these sorts of things that like. [11:17] people normally probably wouldn't use. And so I think Gab was able to direct it good enough without Figma, [11:23] for the majority of it, which was a surprise to me. - Can you talk a little bit about the parts of the process where Figma was most valuable? Like where did you see a lot of value in reaching for the tool? [11:33] It was most helpful in previous versions of the app where I went a lot more like into... [11:39] very unique kind of styles and aesthetics. Like a lot of the stuff I share on X is like very kind of like skeuomorphic in nature, like metals and shininess and shimmer and things like that. This app has gone through many evolutions before it was released. So it was a lot more helpful there versus like, there's not a lot I could point to in the app today that I can say, yeah, Figma was super helpful in this. Interesting. That was the surprising part to me. And it feels [12:09] No, dude. Like, they're really, I can't, I'm sitting here looking at the app and I'm thinking, what did Figma have in this? Now, again, there was some things in the past around just certain UI elements that it just was not getting it right. [12:23] And. [12:24] I did leverage, like I said, the dev mode in Figma and copied the CSS to get button styles and things like that. Absolutely correct. And it was mind boggling how easy it was. I like to know that I can leverage that if I need to. But the way that the style direction that I went in for this app.

[12:41] didn't really warrant using Figma all that much. I use screenshots a lot. I think maybe for this top bar, I used Figma a little bit to kind of show the position of it. But really, honestly, man, like I [12:54] 99% of this is Claude and me kind of very much directing it, not just me putting in a prompt and it caused spitting out the perfect thing. Don't get me wrong there. It's me being very, very specific, [13:07] on what I want in describing that. Okay, let's talk about that piece a little bit, because I think there's still a category of designers who associate design [13:15] working with AI with like the loss of control [13:18] and prefer that direct manipulation and it's almost like you can't get that working with the model so what's your relationship with like [13:26] the level of control that you have, [13:28] In Figma versus in code. I mean, obviously you have... [13:32] all control and Figma goes without saying. And I like that for a lot of a lot of things, especially like client work. But when I'm doing a tool for me where I can do really whatever I want, I will say I was very, very, very, I can't overstate it enough, very surprised on the level of control you actually have in Cloud. I wasn't using Cloud Design. I wasn't like I never I have yet to use it. I don't really know how it works, but I wasn't pointing and clicking on things and

[14:02] web platform to do this. But again, it comes down to like, obviously, you have to know what you should do. Right. And then you have to be able to describe how you should do it. You go through many iterations, of course, like it rarely gets it right the first time. I was shocked by I guess then that was the biggest shift. Right. It's like I thought of caught is like you put in a prompt, you get something out. [14:22] And you have to live with it or you have to go back and forth. And it's like playing the lottery where it's like you may they may nail it or may not. I didn't really look at it in the sense that like I could tell Claude exactly what I want as long as I know how to describe it. And it'll actually output that. It may not output it the first time, the second time or the third time, but it'll eventually get there. That was the biggest eye opener for me was the control piece. [14:40] and being able to, like, there was nothing, there was no part of this [14:44] of this app that I was not able to build exactly the way I wanted it to build, which was, [14:49] Again, a complete eye-opener, game-changer for me. [14:52] I can honestly say there was no piece functionally, feature wise, complexity wise, technically wise, like design wise that I wasn't able to. And obviously, like in Figma, you have 100 percent of control of the visuals. [15:03] But I do think working with Cloud gives you the ability to control different levers that are not exposed inside of Figma. [15:09] I was playing around with this tab bar up at the top. [15:12] And the way that you're scaling the icon in, there's actually a lot of different ways to scale that icon in, right? There are, yeah. [15:20] Talk to me a little bit about that level of detail and anywhere else in the app that you want to highlight, too. Where do you feel like you were...

[15:27] really sweating the details with Claude? And did you learn anything along the way around the best ways to do that even? Yeah, I mean, the tab bar was certainly one piece of it. I spent a good amount of time and I did so many different versions of this tab bar. And there was versions of this app that didn't have a tab bar at all and had a completely different way to navigate it. Now, I can honestly say that Icon, that was just something that I knew that I wanted. I didn't quite, I'm not an animation guy, so I didn't quite know all the terminology around like, [15:57] this in in this exact way and sort of have like the trailing i think that's what you call it like the trailing like active hover background whatever you want to call it you know what it's called um but i knew i wanted skills yeah i'm like i know i knew i wanted that and honestly i think that was like when i directed claude that i don't remember it taking more than one time to get that right once i got there obviously i built by default a basic tab bar that just worked normally it [16:27] on this show. Okay, cool. Now I want the tab to kind of trail to go from [16:33] tab to tab to tab where you can visually see it moving. And oh, now I want the icon to pop up to animate in a certain way. So it was just like very that that was kind of the language that I used. I didn't I wasn't very technically like correct when I was describing exactly what I wanted. That was a fun piece. And again, like nothing's perfect in this app. I don't I've never even clicked. This is what you're seeing here is a dev version of it. So there's certain things that you don't see in the app, like the bookmarks. This view right here was a view that I spent a lot of time

[17:00] experimenting with getting it right like getting the right feeling because i wanted it to feel different [17:05] Then, [17:06] the masonry grid or anything like that i wanted to feel like it's its own kind of aesthetic based on the artwork that you're looking at right so i spent a lot of time on this page to the shimmer the shimmer is so nice oh and the hover tilt that is a really yeah so yeah these are all like these are i guess old concepts but i'm like you know what this is kind of a fun app i'm gonna do whatever the heck i want to do you know so yeah so when you when you load it in it gives a cool like little like you know [17:34] Shimmer across it be I spent I spent a considerable amount of time on this because I felt like this was one of the most key pages. With where these elements go what they look like down even like cash like I went through so many icon sets trying to figure out which icon set works the best and then. [17:50] troubleshooting all of that. I didn't want to incorporate dark mode in the beginning because I knew every change that I made would have to be like duplicated. And so once I introduced dark mode, that introduced a whole other level of bugs and things I had to retest everything, right? There's actually a considerable amount to this app that people don't quite like realize. Multi-select and how that works, be able to drag and multi-select, like all these things down here with being able to bulk collect it, you know, bulk add them to collections and bulk tagging. And then like, [18:20] little thing down here where you can [18:22] click in and create some mood board. [18:24] puts it all into a JPEG so you could like share it with somebody else. And then like you get into spaces, right? Which, which,

[18:31] to my knowledge, Gather is the first app to do this. There might be other apps that's like, [18:35] does something similar, but they're not necessarily collection apps. But like this interest is a whole other world. There are certain things about this app I knew once I added the initial feature, it was going to open up a whole other can of worms. And so this was another one of those features where like I wanted to be able to have a free flow canvas kind of like Figma where you can like arrange these and be like, yeah, like, you know, [18:56] If you're creating a new brand, like you want to be able to see I like these colors and I like these logos and I like these these patterns or textures or whatever. So you want to add different things here. There's a lot I had to work through with even down to like alignment lines and distribution. How do you do that stuff like that? There's a lot. I mean, this is a there's a lot of features in here. There is a lot. It doesn't look like a lot. [19:16] Yeah. I mean, like I said, it took me probably, I guess, I guess initially 75 hours. I asked my wife, she said, oh, probably close to 100, 150. So it was a lot. Like you don't, that's the thing is like I said that in a comment on X at one point. [19:31] And somebody was like, ha ha, like, I'm going to do this tonight. [19:34] And I'm like, it's kind of convenient for you to be able to say that because I've already worked through all the edge cases. I feel like it's much easier to copy a tool one for one than like. [19:44] Start with a blank slate from scratch and then have to think through all these edge cases and everything. There's so much to this, especially once you introduce... [19:54] dark and light mode and all these different media types now with you have video and you have like I'm right now, for example, one of the most interesting things that I've accomplished, I would not have thought I could accomplish. And it's not out on in production yet, but is incorporating X books, bookmarks, Twitter bookmarks into this without using the API. Like I've always wanted to build

[20:13] Twitter bookmarking out because I hate the bookmark experience on X. But the API is so incredibly expensive that it keeps everyone from doing it. But I figured out a way to build a Chrome extension. It watches your activity in Chrome when you bookmark something. [20:25] it's automatically loaded into gather. And, but then you like, you open that up and you have all these various different tweets, tweet formats. You have text only tweets. You have, [20:33] text with images, you have threads, you have quote tweets and incorporating out all of that works in here. And then you have the edge case of like, well, what if I bookmark something on mobile? [20:43] how is my extension going to get that and put it in to gather? Well, I had to problem solve that and figure out how all that works. And it's just, it just, you just keep going. It just figures it out. And you're like, dang, man, like there's nothing that it seems like there's nothing that it can't do or can't figure out a workaround for. So that's kind of the next evolution. Pause, pause, pause. I'm going to ask like a ridiculously specific question here, but going from the point of, I want to do this, I would imagine you don't even know if it's possible. [21:08] Like literally, what did you prompt Claude? Like, how did you start? [21:12] that very specific project. I would just basically tell it what I wanted to do and then I would [21:17] I would hope that it could tell me, hey, yes, I can do it. Now, I will say, [21:22] There was a couple of cases where it didn't. It actually said like that's not possible or whatever. And luckily, like this is where experience comes in, because as an anecdotal example, right, like [21:33] I wanted my Chrome extension to look a certain way. [21:36] and I wanted it to have rounded corners or whatever it is. And it comes back and says, actually, Chrome limits you to this. But I was aware of another extension that did something similar. And I'm like, well, they're doing it. So I fed that back into Cloud. I was like, oh, yeah, you're right. They're doing it this way. They're actually putting an iframe on top of the page. Let me do that. So it's like you do have to have some knowledge in order to get over some of those obstacles. I feel like with Cloud, one of its strengths, and I'm not saying this is exclusively Cloud. I'm sure Codex does and everything else.

[22:06] ranking your options of being like, hey, here's like the lowest risk, like least expensive option. Here's some of the downfalls that might occur for it from it. Here's the most expensive option, the most instant option, let's say just for these books, bookmark thing. Right. So it is really rather good at like giving you options by default. When you say like, I want to do this, what's the best way to do it? [22:27] That's where I would start with every new feature that I wasn't quite sure if it was possible to do or not, including like especially the bookmarking thing, because I would never have thought to create a Chrome extension for that. And so, yeah, that's that's where I would start to be like, hey, I want to do this. What's the best way to do it? [22:41] And they would usually give me three, four, five, six options, rank them in order. It would have its recommended option. Sometimes it would blend. It gives you like a last option. It's kind of a blend. Right. And then you just kind of pick and choose which you want. You have the full context of it. [22:55] Okay, I want to drill into more visual details because you were being humble in the beginning, but I do think you are a world-class visual designer. And so there's this gap that you have to close, right? Like you have the skills in Figma, but like, can you bring them to life? [23:08] And I think there's a lot of little details that maybe people wouldn't even notice at first. And one thing that stood out to me was like the multi select and you have this double border effect where you have like a light inner and a dark outer, which is it's really nice. Right. It's really, really nice. You're able to you're able to nail that even down to the shadows on this branding card [23:30] Just talk about shadows, even. How did you dial in shadows with glass? That's honestly one of my favorite

[23:38] pieces of this and i would be lying to you if i said that like [23:41] I directed the shadows at all on that. It was literally it got it the very first time and I had never changed it. Like I told it I wanted collection cards at the top. I went through so many versions of that particular collection card, but it got the fan thing right away. I said, I just want a stack of cards that like fan out when you hover over it. [24:00] And it got that [24:01] really, I'd say like day one or day two of building this app. And I never. Can you hover over it so people can see? Yeah. So when you hover over it, it fans out. Even goes like things that would bother 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 raw. I use that [24:17] throughout so if you go to collections you know it's the same sort of thing [24:21] But that's one of my favorite pieces of the app. [24:24] And something that no other collection tool really does. And then there's even little things again. This is where you really can hover over in the bottom right-hand corner and it pops open. Oh, I haven't figured out the video thing yet. [24:36] but it pops open the image in like a quick view, right? Things you would never notice. One of the cool things, like I like to say fonts. [24:43] So if you go down here to tags and you actually type in font, [24:47] It actually is smart enough to give you fields so you can type the font name, the font name, the URL, all that good stuff. [24:55] And you can see how you need to fix that bug. [24:57] Because the... [24:59] The dropdown is not working with Dark Mode. There's so many things that, again, like you really have to use the app to discover. Like one of my favorite things is like the rediscover mode where it's like you want to just kind of sort through things and you want to be able to go through quickly and like, hey, I want to skip this one. I want to add this one to a collection. Cool. You know, I want to add this one to trash. And it's kind of cool, little cool things. Or like if you go to unsorted, you have this focus sort button down here.

[25:25] And so you can quickly, I only have one collection right now, but you can just use your hotkeys to like add it to collections, right? To quickly sort through everything. So yeah, there's all kinds of things like that that you don't see on the surface until you're going to use the app that I thought that was a lot of fun to build and think through. There's one question that I can't stop asking myself. What if companies apply to talk to you rather than the other way around? And that question is the foundation for the all new Dive Talent Network. And it's working. [25:55] helping many of the most exciting startups that I know to hire the designers and builders who listen to this show. So if you're curious what might be out there and maybe you want to get on my list or maybe you're even looking for your next design hire, head to dive.club slash talent to join today. How often are you intentionally leaving wiggle room for Claude? Like we've talked [26:25] Are you ever... [26:26] kind of almost like that slot machine mentality? Like, do you ever lean into that or not so much? I do in different formats. Like if it's something, if it's a new feature that I don't quite know how I want it or how Claude will implement it, I'll usually like prompt back and forth with Claude to like get some context around what it might do and the options that it might sift through. I don't like to just like wait for the build process and have to debug it and all that sort

[26:56] There's certain things though that like, [26:59] I just know what I want. Right. And I I like to leave wiggle room on everything. It's just a degree of which I live wiggle room depends on what it is that I'm doing. That's kind of the fun in this. Right. It's like you have to use Claude as like a companion. Right. That's like it may know stuff that you don't know. It may think of things that you might not think of. Right. And so I do like to leverage Claude a lot in like thinking for me and brainstorming and theorizing on ways to do certain things more than more than the opposite. I don't like to just be like, this is [27:29] anything else different. [27:30] But again, like I'll if I do direct it, I'll usually end the prompt by saying, like, let me know if I missed anything or if there's a better way to do this. Or maybe I haven't thought of some edge cases like consider those. And so, yeah, I I don't know. I would say I leave a pretty high degree of. [27:45] of margin for Claude to do what it thinks is right. And then I'll just review it and change it if I need to. Yeah, I think that's probably my answer, too. It kind of just depends on what the output is. Like if the output is visual... [27:57] a lot of times i'm like build this exactly like pixel perfect you know match the selected frame kind of thing like i do still work on the canvas all the time if the output is a little bit more transition based i am also not an animator like i'm trying to get better at interaction design but a lot of times i'll just describe something very loosely and see like it's super helpful to just see something and then [28:18] - Tweak rather than that, and that'll drill down from there. Exactly. There's a lot of actually clever page transition things that are happening in the way that the grid fades back in.

[28:28] How is that stuff intentional? Like, did you get a lot of that out of the box? I didn't get a lot of that out of the box. I mean, that was something that like this is where as a designer, you're a designer, but you have like the world at your fingertips with these apps like you can do anything. It's really difficult not to over engineer. Right. Like I still wanted this to feel very lightweight, very like very pleasant, not not too much in the way I really wanted the art to like be the showcase of this app. [28:58] like I would like shadows on the cards was something that I leveraged in Figma because I just couldn't quite get it right like it would either be too drastic or not enough and then figuring out the right shadow for like well some some cards have like a light gray background how are those going to work on there and of course it doesn't like you can even see this card over here it's kind of like it seems like it's floating in space but you kind of have to like at the end of the day you can't account for every situation make everything perfect but no the way the cards load in like even last night I was figuring out like [29:26] you know, when you save an image, like what that should look like before it had like a shimmer and a pop and then, [29:31] I wanted to kind of condense that down into something more subtle. And then I picked my pop sound, but maybe somebody else doesn't like the sound. So I actually went into settings and it was like... [29:43] You know, I asked Claude to give me like 10 or so different. So you can actually go through and like pick. But again, like Eagle app is the app that I used previous to gather. It's a very similar collection tool, but their feature set is like massive. You can tell it's like an app that's been around forever. They just don't know what else to do with it, but just keep adding new features. So I was very, very cognizant on like not adding too much, but adding the right kind of things. And so, again, that's where it comes down to taste and judgment and like all the things you hear about,

[30:13] obviously significant when building products and the things that are going to separate good products from that but that is that is a struggle where it's like i can do this in two seconds so should i do it or should i not do it and how you like how you go about that and i'll add things in then i'll remove it because i feel like okay that was a little too much i was having a little too much fun there [30:29] Let me dial that back. It's slippery slope, man. I had a real loo tweet where he talked about overcooking an app that I think about all the time because it's like in isolation, every single thing that I do [30:40] It's genuinely so fun to dial it in to a degree that I can. I'm just deeply proud of this tiny little hover state that maybe 1% of people are going to experience. And then you do that N number of times. Then you're like, whoa, why does this app feel weird? It is the danger of leaning into this moment in time where we kind of do get superpowers. Really quickly, talk to me about the sound design piece. Are those generated? Did you get that? How do you think about that? I don't even know. [31:10] I actually went on. So at first, at first, well, maybe it's maybe that's not the maybe that's not the right answer. At first, I actually picked my own sound. So I went to artlist.com. I think it's called found the sound that I liked, uploaded it. It was kind of this like old retro, like Windows 97 sound or something. But then I'm like, that's just the more I started to save images, the more I'm like, that's kind of gets annoying after a while. I need something more subtle. So like last night, I was like. [31:35] And I said, told Claude, and I used my prototype MD skill. I was like, hey, can you prototype me? [31:40] 10 different sounds to use and I could click through them and actually test it out and save an image and that sort of thing.

[31:45] And then it gave me all the options, right? And I picked one, but I was like, well, I should... [31:50] actually allow the user to pick. So I was like, just, you know, forget it. Just upload all of them to the app into the settings panel and then do it that way. And then I was like, well, now I need a sound for trash. And so I did the same thing for trash. And I wanted a different sound for like when you're adding a [32:03] image into the trash can and when you're emptying the trash can and it did that it gave me both options for all of them like at various levels so yeah that was i don't know if they're actually ai generated or not they just came from claude and where they came from i assume they're free to use but i don't actually know interesting [32:18] So I've never prototyped sound before. I don't know why I haven't. It can be overdone. Yeah. You have to be, you have to be, I think, [32:25] selective with when you do it and also give the option to turn it off, I think. I think that's another example, though, of like the type of design that is now available to designers. Like previously, those level of decisions. I mean, there's a reason I didn't have sound in any products that I have made up until about a year ago. Oh, for sure. It didn't feel like my job. [32:46] But now all of a sudden it's like, well, [32:49] Yeah, this is part of the UX. Like this is UX design, you know, and it's available to me and I can just do it and I can prototype. How cool is that? [32:57] Yeah, I wouldn't have a clue. I mean, I wouldn't have a clue. I'd do any of this, but let alone add sound effects into certain actions and stuff. But it nails it every single time. You just got to pick out the sound or it'll pick it out for you and you can select options. And so, yeah, that was one of those things where I don't have sound all throughout the app. I only have it when you add a new photo in and when you ask me to trash. I kind of stopped it there. But, you know, you could definitely go hog wild with sound and it'd be kind of annoying at a certain point. All right. Tell me a little bit about this prototype MD skill concept that you were working through.

[33:27] the same thing. I didn't actually watch the whole thing. I watched the first four minutes. I bookmarked it to watch later. But the first four minutes I watched was like, [33:33] Yeah, one thing that we do and some people watching this like this is old news. I've already seen on my tweet that's like I've been doing this for like a year or two. But I'm like, I'm new to this. I just started this. So I'm still going to share it because it's super helpful for me. Now, when I do anything, when I add anything into the app, that's why I was having so much fun last night, redesigning everything or not redesigning, but just refining. Everything was like I created a an MD skill file. I was like, hey, you know, Claude, and when I tell you to prototype something, I want you to just prototype like five different options. [34:03] I can just open up from Claude, and I can tab through the different options. And so I can actually probably share... [34:09] How this looks. So this is an example of one of the HTML documents. So like Claude will just spit out a link to this and you just put it in your terminal or wherever you're using this at. And this is like the format that I've set up. So you always have I always have five options. Of course, you can do more if you don't really care too much about your tokens. But this was [34:27] An example of last night I was troubleshooting some of the new save, like entrance effects is what this is called here. [34:34] So when you... [34:35] when you save an image into the app, what it actually looks like. So the first one I can click, this is like a fade and rise, which is ultimately [34:42] what I ended up going with, right? But then you have like, [34:45] You spring and pop. [34:46] Cool. And then you have your develop, and then you have your shimmer, [34:52] And you have like this one, which I think was just too much. But this is an example. And then I'll go back to Claude and be like, hey, I really liked one, like number one. And then it was implemented. But like it would it would it would obviously not implement in this exact style. It would actually like take your tokens and your CSS and like put it in your style. So it's actually kind of fun to see like.

[35:08] how does this actually translate to my app? [35:10] and everything that it did. But this is an example of what I do now before doing any kind of UI work. [35:16] And I actually just... [35:18] I just discovered this yesterday. So I went through everything in my app down to dropdowns and went through everything and ran it through this prototype. [35:26] skill and [35:28] came up with way better UI. Oh, cool. How specific? Are you describing anything about what these options should be? [35:36] Nice. No, no, no, no. Absolutely. I didn't want to prototype the way a card enters into the grid after you save it. And I don't have to say like, you know, I just do the, you know, just prototype it and it references my skill file and knows exactly what to do. And of course, you can be way more directive with it. I was very much like just create me a skill that just prototypes five examples. Like I didn't think I didn't have this big, long, like master prompt or anything like that. But this alone right here, like I don't know how I didn't know to do this before. [36:06] completely changed. I don't think it's that far behind for what it's worth. I think HTML is kind of having a moment. [36:11] Recently, I've started using HTML just in the last like month and a half. Yeah, it's just helpful to be able to really quickly see all these things side by side and have it in. [36:21] in one file it's it's almost kind of becoming this third [36:26] way of exploring for me. Like sometimes I explore in code and I'll just generate something that is a part of my product or maybe I'll spin up like a slash playground route. I do that a lot, especially when I'm working inside of a web app. [36:38] Or I'll generate things. I use paper, like on the canvas. Right. But all of a sudden, there's like this middle ground where HTML is awesome. Like it's awesome.

[36:49] Awesome, because you can play with the interactivity. It's cheap and quick to make. You can really quickly see things that... [36:57] Again, like you, I would have a hard time describing five different ways that an interaction should feel. Oh, absolutely. Yeah. You know, like it's kind of it's not it's not a lot of language, at least in my brain that I could reach for. So exactly. So like all the time, I'll be like, give me five. [37:14] Three of them will be horrendous. And then one and two will be interesting. I'm like, okay, actually, just give me like three more like number two. [37:21] and then play with it there and almost have this little back and forth. Even down to like five days ago, I've started... [37:28] using HTML not even just for prototyping, but for my actual conversation with Claude. Like when I'm trying to figure something out, [37:39] I will tell it to just... [37:41] create me like a visual answer in html and then i will just read this web page and just start like i dictate everything so i'll just start super whisper and i'll just start reading and talking about it and i have it specifically bacon like open-ended questions or things it wants me to weigh in on as these little like blurbs almost like a notion style call out and then i'll just i'll [38:04] Dump. [38:05] the most raw, messy prompt you could possibly imagine. And then my cursor is just focused in conductor and I'll hit option spacebar again, and then just dumps this paragraph. And then [38:15] Claude will spin up another HTML. A couple examples. One is, I was trying to design this card and the hardest part about the card was not even necessarily

[38:24] the UI, it was thinking about what metadata can I even reach for? Because it's like a more technical product. I was just having a hard time wrapping my head around, like, what do I have available to me? Like, help me think about... [38:38] how I can communicate things. And it just created this rundown of all of the metadata and then like a tiny little visual mockup of how I could use each one. And it gave me like three times as much as what was in my head and sparked all of these ideas. And then I take it and I'm like, okay, let's prototype over here. You know? That's genius. I feel like I'm just barely scratching the surface of how I want to use HTML. I think it is the thing right now that I'm most excited [39:08] especially since Claude can't do image generation it tried like it's funny it is pretty creative the way that it tries to use text in like a visual way like it does that sometimes with me I'm like okay that was helpful but like I never thought about leveraging like an [39:22] open-ended HTML canvas to be able to visualize things. That's amazing. Another little pro tip is the value of having a single folder of dummy content [39:33] And then you just tell Claude to use that in the prototypes and you get realistic imagery. Even when I'm generating things in paper, I have a folder of SVG logos because I use a lot of Figma lovable V0 logos in my own product. And then I have a folder for the landing page that has a bunch of mockups and faces. And so I just say, hey, design with that. Because otherwise it'll only give me the portal. It'll use a heart emoji for lovable.

[40:03] one letters from the landing page, then all of my prototypes become more realistic. Yeah. It's so evident. We're just all of us, regardless of how experienced you are, are just scratching the surface of this thing and still figuring out how to like use everything at our disposal. It's yeah, I feel like every day I have a new epiphany and I'm like, holy crap, game changer after game changer. [40:24] idea and I don't know, it's it's it's super exciting and it's also very distracting. But, you know, I like I'm trying to keep up with client work and I'm like, but like in between projects, I'm all award myself like 10 minutes building in class. I haven't used conductor. I don't know how any of that works. There's still like a world of products. [40:42] I don't use agents even. And now it's like loops is the big thing. I don't know. I'm one step at a time. I'm very comfortable with Claude. That's the theme of this episode. Are you using the Claude desktop app right now? Or are you using Claude code? No, just the browser and the terminal. I use the terminal. The amount of times I have to prompt Claude, hey, please give me the command to open this locally. I'm not interested in memorizing the commands. [41:12] I have to start with the basics of like, hey, I don't know how terminal works. You need to tell me very specifically how to do everything. Sometimes I am screen sharing for an engineer who's helping me like debug something. It's the most uncomfortable experience. Oh, because in front of an engineer, you have to be in terminal and then like realize like, oh, I don't actually use any terminal commands. Like I don't type get whole or anything like I just describe every single thing and then

[41:42] But dude, I'm like, it opened my eyes to be like, [41:46] How do developers memorize all this stuff? You know, I'm like, yeah, there's so much here and so many things that I've encountered that the commands were so big and there's so many different ones. I'm like, I would have no like, where do you go to to find this stuff to like learn this stuff? Thank goodness. Like it's all just there in cloud for us. But it really gave me a new appreciation for developers and that they know how to do all this. [42:09] This is random, but what icon library did you land on? I think I landed on... [42:13] Lucid. I had most of everything that I wanted. I just texted myself that link. [42:17] I literally right before this call, I was like, maybe I should play with Lucid because I'm working on a new Mac app actually. And I was like, man, should I? I always use Phosphor. I use Phosphor icons for everything. I should branch out, man. I should branch out. And so I just was like, I'm going to try Lucid. Honestly, I haven't found an icon set that I love. I see all kinds of icons in other products. I'm like, I wish I knew what icons that they were using. There's probably a way to figure it out. But [42:41] Yeah, I just use the basics like Foster. I use streamline icons for all design work. I land on Lucid because I was tired of experimenting. I'm like, this works now. Yeah, they have the animated, like they have built in animations, which is what I didn't know that. Yeah, there's like a there's like animated Lucid. [42:58] library that I found. I'm like, "I'm going to play with that." Fun fact, I actually in the last few days for the very first time generated an icon that I used in production. I'm kind of feeling like we're close to being able to point at an existing... I'm using the Quiver API in paper. So I have Claude generate through Quiver on the paper canvas and I can point it at the existing icon library.

[43:27] And then say, hey, match that style. Like I want 16 pixels. I want like roughly 13 to 14 pixel vector inside of the bounding box. And I want 1.2 pixel stroke. Make it all consistent, you know? Yeah. And then it can just generate like 10 options for an icon. And then I just pick one. In the same way that you're doing with the HTML. And I'm like... [43:46] I wonder if I was starting an app from scratch today, it would be very tempting to try to generate. I just do honestly, like I've used I've been using Quiver for other things and it's it's good. [43:58] I think the things that I'm using it for hasn't really suited the app yet. It's like, it's a little more complex line artwork. Why haven't you thought to use Quiver for icons up until this very moment? I don't know, but, [44:09] That's, yeah, you, you, I've seen your stuff. Like you like the, you like the paper stuff. I haven't really gotten to paper that much other than like, [44:17] For design work, I use it for some things like with when I need shaders and things. But like I really haven't used paper in the way you use paper at all. [44:24] And I feel like there's definitely something [44:26] there for me but like i said i'm so like i'm so engrossed in what i'm doing right now i'm like i'll get to that [44:31] Yeah, you've got to pick your battles a little bit. I'll always be like three miles behind everybody else, but I'll get there, right? That's just the way it is. Okay, let's zoom out real quickly. This has been a heck of a... [44:43] two months and change little window for you where, uh, [44:48] You've done what previously maybe would. I mean, it's a hard thing. I'm not even going to. Obviously, you're able to experience what AI makes possible. And maybe there were parts of the process that were just way easier than you thought they would be or way less scary than you thought they would be. But you still did a hard thing. You went zero to one on a Mac app and it's good. Right. So how has that

[45:06] journey impacted the way that you think about the future of not only the role, but also like the value that designers bring to the table. The biggest shift for me is going from AI being a [45:19] prompt and just build me something tool to like, [45:23] It's like this, like, the way that I've been thinking about it is like the most patient thing. [45:27] collaborator that you could ever have that builds at such hyper speeds that like humans could ever build at and you just have to like know how to direct it and also like taste and judgment not only in like [45:38] what to build, but like how to go about it down to just like the finite UX UI decisions. It's made me like less scared of the future for designers and more hopeful, I think. Like before, I really didn't quite know what to make of it. I didn't. I knew that there were certain things at risk. I wasn't quite sure who would be affected and how I would navigate that. Like it's I'm always trying to say like, [46:00] two steps ahead of of like the industry being like I need to prepare for what the future holds. And quite honestly, things are moving at such a fast pace right now. I don't even know what that looks like in a couple of years to me now. I'm still trying to figure out how this how this doesn't incorporate into my client work, which is what pays the bills for me. It's like it's my thing. Like that's what I do. This is all all of this is just for fun for me. Right. This is not like I don't rely on this to to make a living off of like I don't need to build anything. But how do [46:30] work is like my next question that I'm asking and what that actually looks like. Right. Like that's a much higher risk type of service to offer. And how do I go about that? And can I do it myself? Do I need to finally like scale and hire someone to help me? It's something that I'm still digesting.

[46:45] figuring out how does this affect [46:49] the industry but also like how does it affect me personally what does my role look like in a year or two or even in a few months i feel like these tools [46:58] in the hand of [46:59] of a designer. [47:01] And someone with good taste and good judgment is just crazy. Like, it really is crazy. And unfortunately, like... [47:09] If you're just in the Twitter bubble or wherever you're at, you don't see a lot of that. Like most of the people that are like spouting off about these tools don't actually have any of those things. They're either like, I don't know, just a mouthpiece for AI companies or they're like. [47:24] They're just strictly influencers. They're not designers. You don't see too many [47:29] I know you feature a lot of them on your show, but those are rare. They're oftentimes not at the spotlight that they should be at. And so I think that's partly why I have been shy about using it up to this point, why it's taken me so long. Ironically, it's like... [47:45] The thing that [47:46] has stopped me from getting into Claude is actually going to be the thing that makes me most powerful with it. Like in that sense of like, I don't, I have a very low tolerance for like low quality work. Being able to like leverage all the skills that I've developed at this point to like direct AI in the direction I wanted to go is the most exciting part about this for me. And it just wasn't something that I was aware of before. And I had really quite literally underestimated it. [48:10] to a high degree. Yeah, I think that's one of my main takeaways from this conversation. It's the control piece. Like, all of the previous hesitations are...

[48:19] where you're able to shine now as a builder and all of that that final like [48:23] 1%, 5% details, everything that you've made that makes the product feel amazing and feel considered [48:30] And it's like that's all just been opened up to you all of a sudden, which is so exciting. Maybe it was there all along. Maybe maybe AI has advanced to the point where it's now like it's actually I don't know. [48:42] smarter in some way or better at design in some way i don't think i don't think the ai is [48:47] It's still not good at design, but it's good at taking direction. And as long as you can direct it clearly and you know what you're doing and you're making the right decisions, right? Like you can be good at directing AI, but you may be going down a bad road that like isn't very tasteful or isn't very aesthetic or anything like that, which is, again, the majority of stuff you see online. I don't know. I'm like wanting to go back through my entire app library of use that I use it like in this like rebuild everything because it's just it's so much fun having that level of control, which, again, just feels so weird and backwards to say. [49:17] a month and a half ago, I would not have thought that at all. I would have thought that you have zero control. That's the whole problem with AI is that you don't have control over anything. [49:24] And that's where Figma comes in. You have control. It just, like, it does take time. Like, it takes a lot of time and a lot of iterating and a lot of, like, troubleshooting, but [49:32] you actually get a working product in the end, which is fun as heck. I appreciate you coming on and sharing a little bit about the journey. And it is amazing what you built. [49:40] Thank you. You should just be proud. You know, it's cool. Like, I really hope that this conversation inspires a ton of people who maybe have either been on the sidelines or loosely tinkering, but haven't actually committed to shipping a thing. Right. Like, I'm so inspired by the journey and what you've been able to do. And I'm excited to see what you build next. Absolutely. Thanks for having me on.