Loading summary
Transcript91 lines
- [00:00]
A
Being able to, like, leverage all the skills that I've developed at this point to, like, direct AI in the direction I want it 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. Like, that's the whole problem with AI is that you don't have control over anything. I feel like these tools in the hand of someone with good taste and good judgment is just crazy.
- [00:31]
B
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 0 to 1 as a builder, then this is the episode for you. But before we get into the tactics and what he actually built, 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.
- [01:10]
A
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, Red, but I mean, I've been doing it since, gosh, for 15, 20 years, something like that. So obviously, like, the discourse around designers learning to code, or recently like designers learning to build and just bypass code altogether, has sort of been an unavoidable conversation. If you're 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 the, I guess the cultural devalue of design. And I saw that kind of coming with the introduction of, like, AI, and 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 doven into that sector of. Of my work and have kind of abstained from even playing around with, you know, coding tools and things like that. But yeah, it's like when, 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, 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 and 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, you know, text app 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, 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 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 Claude and all these other tools and really saw what they, 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, 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, what 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, it was so much fun. It was like the addiction really. It was like the most satisfying experiment.
- [04:00]
B
I think it's that perspective that I'm so excited to tap into because it's really easy to bring on somebody who's a design engineer who, you know, 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 you, yeah, you can call yourself a builder. You launched a really polished Mac app over the course of, you know, month and a half, two months, whatever it is. So I want to capture that story because my hope is that you, and the way that you talk about it and the lessons that you learned can inspire a lot of people. So where did you even start?
- [04:41]
A
Yeah, I mean I wanted to pick something that 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, but I wanted to push myself. I, I, 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. I didn't really know what was going to be around every single corner at all. But I was gonna keep pushing through and get to actual like distribution and people using it and update, making updates for them and just seeing how all of that even works. Right. I just put 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 at your level and 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 this. So 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, you know, I would call it like a collection app where you can collect design resources and inspiration. And now I'm getting into like bookmarks from X and things like that. Kind of just a collective 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 update and uploading inspiration for those rooms so you can use it for more. It's more than Just as design, but it's primarily a designer's tool and it's a Mac app.
- [06:19]
B
Real quick message and then we can jump back into it. Framework 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 5 different CMSs for Dive, which isn't exactly my favorite thing to deal with. But now I can have the Framer agent do everything related to CMS management 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 animated components so you can design once, reuse across your file and update 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 Jitter to get started. Now onto the episode. Where'd you start? Like once you realize what you wanted to build, did you jump into Claude? Did you design a lot of it in Figma first? Like what were some of those first few steps?
- [07:48]
A
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 gotta start with a good design first. I actually in this case just jump 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, I first just started prompting Cloud on 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 authentication work? How does emails work? Like I've never used recent in my life. Like all these tools I've never used, I have no exposure to it whatsoever. APIs 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, you know, 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 one little thing at a time. I'll start with like 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 like all these other complex features yet. Let's one thing at a time. Then once phase one's built, then I just drill into phase one, each element one by one, fine tuning what a dropdown looks like, what a filter, you know, set looks like, 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 because 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 on every, every edge case you could think of, right? And every, every type of like I, I went through so many iterations of everything. I've redesigned the app 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 it 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.
- [09:53]
B
So at what point did Figma come into the process?
- [09:55]
A
I would like. There's a saying, I forget who said it, but it's like the last 20% of building an app with AI is like 80% of your time. Like I got to like, I built the app relatively fast, but Figma came in, in the last like 20% 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 like they didn't cloud wasn't understanding like that I wanted the stroke to be a gradient, so I did instruct it. Like, hey, here's the exact. You know, I started with css, so I went into dev mode with figma. I built, I designed out the asset, copied the CSS and just fed that in a Claude and I just nailed it. Then I later on was like, oh, there's something called an mcp. I don't even know what it stands for. I don't know how it works, but I started using that. But yeah, it was really the last 20% 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. 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 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, people normally probably wouldn't use. And so I think I was able to direct it good enough without figma for the majority of it, which was a surprise to me.
- [11:26]
B
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]
A
It was most helpful in previous versions of the app where I went a lot more, like into 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.
- [12:01]
B
Interesting.
- [12:02]
A
That was the surprising part to me and it feels really wrong of me to even say that out loud.
- [12:08]
B
Can you imagine three months ago saying that?
- [12:10]
A
No, dude, like, they're really. I can't. I'm look, 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. And 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 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 99% of this is Claude and me kind of very much directing it, not just me putting in a prompt and it Claude spitting out the perfect thing. Don't get me wrong there. It's me being. Being very, very specific on what I want in describing that.
- [13:10]
B
Okay, let's talk about that piece a little bit because I think there's still a category of designers who associate working with AI with like the loss of control 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 the level of control that you have in Figma versus Encode?
- [13:31]
A
I mean, obviously you have all control in 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, very. I can't overstate it enough, very surprised on the level of control you actually have in Claude. 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 saying like move this here. I was just using generally like the Claude code web platform to. 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 was shocked by. I guess then that was the biggest shift. Right. Is like I thought of Claude is like you put in a prop, you get something out 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 it 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 or 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 and being able to, like, there was nothing. There was no part of this. Of this app that I was not able to build exactly the way I wanted it to build, which was, again, a complete eye opener game changer for me. I can honestly say that there was no piece functionally, feature wise, complexity wise, technically wise, like, design wise, that I wasn't able to do.
- [14:59]
B
And obviously, like, in Figma, you have 100% of control of the visuals, but I do think working with cloud gives you the ability to control different levers that are not exposed inside of Figma. Like, I was playing around with this tab bar up at the top, and the way that you're scaling the icon in, like, there's actually a lot of different ways to scale that icon in. Right?
- [15:19]
A
There are.
- [15:20]
B
And, like, talk to me a little bit about, like. Like that level of detail and anywhere else in the app that you want to highlight too. Like, where do you feel like you were really sweating the details with Claude and did you learn anything along the way around, the best ways to do that even?
- [15:34]
A
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 the 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, how do I direct Claude to, like, pop 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, you know what it's called.
- [16:08]
B
But I knew I wanted skills.
- [16:10]
A
Yeah, Like, I know I knew I wanted that. And honestly, 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 actually had no icons. And I was like, hey, I want the active tab icon to show. Okay, cool. Now I want it. The. Now I want the tab to kind of trail to go from 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. 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 experimenting with getting it right, like, getting the right feeling, because I wanted it to feel different than the masonry grid or anything like that. I want it 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.
- [17:16]
B
Dude, the shimmer. The shimmer is so nice. Oh, and the hover tilt, that is a really.
- [17:21]
A
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 going to do whatever the heck I want to do. When you load it in, it gives a cool little, you know, shimmer across it. But, yeah, 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, gosh, like, I went through so many icon sets trying to figure out which icon set works the best and then 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 out 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, you can even create this, like, you have this, like, little thing down here where you can click in it creates a mood board. It, like, puts it all into a JPEG so you could, like, share it with somebody else. And then, like, you get into spaces, right? Which to my knowledge gather, is the first app to do this. There might be other apps that's like, does something similar, but they're not necessarily collection apps, but like this entry is just a whole other world. There's certain things about this app I knew once I, once I added the initial feature, it was just 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, 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 being able to add, you know, different things here, there's a lot I had to work through with even down to like alignment lines and distribute, do
- [19:11]
B
that stuff like that. Like there's a lot, I mean this is a, there's a lot of features in here.
- [19:15]
A
There is a lot. It doesn't look like a lot. Yeah, I mean like I said, it took me probably, I guess, I guess initially 75 hours and I asked my wife as she oh, probably close to 100, 150. So it was a lot like you, you don't, that's the, that's the thing is like I, I said that in a comment on X at one point and somebody was like haha, like I, I, I'm gonna do this tonight. 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. It's like I think I feel like it's much easier to copy a tool one for one than like start with a blank slate.
- [19:46]
B
Yeah.
- [19:47]
A
You know, from scratch. And then like have to think through all these edge cases and everything. Like there's so much to this, especially once you introduce dark and light mode and all these different media types now with your video. And then you have like I'm right now, for example. One of the most interesting things that I've accomplished that I would not have thought I could accomplish and it's not out on in production yet, but is incorporating X bookmarks, Twitter bookmarks into this without using the API. Like I've always wanted to build a Twitter bookmarking app 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 it's automatically loaded into gather and but then you like you open that up, then you have all these Various different tweets, tweet formats, you have text only tweets, you have text with images, you have threads, you have quote tweets. And incorporating how all of that works in here. And then you have the edge case of like, well, what if I bookmark something on mobile? How is my extension going to get that and put it in together? Well, I do. 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 pause, pause, pause.
- [21:02]
B
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. Like literally what did you prompt, Claude? Like, how did you start that very specific project?
- [21:14]
A
I would just basically tell it what I wanted to do and then I would, I would hope that it could tell me, hey, yes, I can do it. Now I will say 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, I wanted my Chrome extension to look a certain way and, you know, I wanted it to have rounded corners or whatever it is, and it comes back and says, actually the, you know, Chrome is limits you to this. But I, I was aware of another extension that did something similar and I'm like, well, they're doing it. So I fed that back in. The client's 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 there, it's like, you do have to have some knowledge in order to get over some of those obstacles. I feel like with Claude, one of its, one of its strengths. And I'm not saying this is exclusively Claude, I'm sure Codex does and everything else, but it's very good at like kind of 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? 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? And they would usually give me 3, 4, 5, 6 options. Rank them in order. It would have its recommended option. Sometimes it would blend, give you a, like a last option that's kind of a blend, right? And then you just kind of pick and choose which what you want and you have the full context of it.
- [22:55]
B
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 in code? 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, 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. Like, how'd you just talk about shadows even? How did you dial in shadows?
- [23:35]
A
That's, that's honestly one of my favorite pieces of this. And I would be lying to you if I said that like 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. And it got that. Really? I say like day one or day two of building this app and I never.
- [24:05]
B
Can you hover over it? Hover over it so that people can see?
- [24:07]
A
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 throughout. So if you go to collections, you know, it's the same sort of thing. But that's one of my favorite pieces of the app and something that nobody, no other collection tool really does. And then like there's even like little things again, this is where you really like, you can hover over in the bottom right hand corner and it pops open. Oh, I haven't figured out the video thing yet, but it pops open the image in like a quick view, right? Things you would never notice. 1 One of the cool things I like, I like to say fonts. So if you go down here to tags and you actually type in font, it actually like is smart enough to give you fields so you can like type the font, name the font by URL, all that good stuff. And you can see how you need to fix that bug because the, the dropdown is not working. With dark mode, there's so many things that again, like, you really have to use the app to, 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.
- [25:17]
B
Cool.
- [25:17]
A
And I want to add this one to trash and it's just kind of cool little cool things. Or like if you go to unsorted, you have this focus sort button down here 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 release the app that I thought that was a lot of fun to build and think through.
- [25:40]
B
There's one question that I can't stop asking myself. What if companies applied to talk to you rather than the other way around? And that question is the foundation for the all new Dive Talent network. And it's working. Like right now I'm helping many of the most exciting startups that I know to hire the designers and builders who listen to this show. So if you're curious what might be out there and maybe you 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 a lot about how you can very clearly articulate your intent at this final 1% of Polish. Are you ever kind of almost like that slot machine mentality, like, do you ever lean into that or not so much?
- [26:33]
A
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 of stuff. I'd rather like Claude describe what it's going to do first. There's certain things though that, like, I just know what I want, right? And I, 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, Is 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 exactly what I want do, don't do anything else different. 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 it a pretty high degree of, 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.
- [27:50]
B
Yeah, I think that's probably my answer too. Where it's, it kind of just depends on what the output is. Like if the output is visual. 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, 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 tweet rather than you Know that and I'll drill down from there. Exactly. There's a lot of actually clever page transition things that are happening in the way that, like, the grid fades back in. How is that stuff intentional? Like, did you get a lot of that out of the box?
- [28:31]
A
Like, 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. So I didn't want to do too much, but, like, figuring out how subtle I want things or like, I would like shadows on the cards was something that I leveraged in Figma because it 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, seems like it's floating in space, but you kind of have to. At the end of the day, you can't account for every situation, make everything look perfect. But no, the way the cards load in. Like, even last night I was figuring out, like, you know, when you save an image, like, what that should look like before it had like a shimmer and a pop. And then, you know, I was like, I wanted to kind of drill that, kind of condense that down into something more subtle. And then I picked my pop sound, but, like, maybe somebody else doesn't like the sound. So I went and actually went into settings and it was like, 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 use to 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, it's been around forever, and 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, like, that are 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
- [30:22]
B
I not do it?
- [30:23]
A
And how you like how 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. Let me dial it.
- [30:30]
B
Slippery slope, man. Slippery. A real Lou 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. 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 is this app feel weird? You know, it's. 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? Like, how do you think?
- [31:09]
A
I don't even know. So I. I actually went up. So at. 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 kind of gets annoying after a while. I need something more subtle. So, like, last night I was like, you know, I said, told Claude and I used my prototype MD skill. I was like, hey, can you prototype me, like, 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. And then it gave me the. All the options, right? And I picked one. Then I was like, well, I should 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. 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 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 different 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.
- [32:18]
B
Interesting. So I've never prototyped sound before. I don't know why I haven't.
- [32:23]
A
It can be overdone. Yeah, you have to be. You have to be, I think, selective with when you do it and also give the option to turn it off. I think.
- [32:30]
B
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
- [32:42]
A
ago, because, oh, for sure, it didn't
- [32:44]
B
feel like my job, you know, but now all of a sudden, it's like, well, 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 program. How cool is that?
- [32:57]
A
Yeah, I wouldn't have a clue. I mean, I wouldn't have a clue how to 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 add me to trash, I've 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.
- [33:19]
B
All right, tell me a little bit about this prototype MD skill concept that you were working through.
- [33:23]
A
I actually was watching a. I think it was a Claude engineer. Some people watching this might have even watched the same thing. I actually didn't watch the whole thing. I watched, like, the first four minutes. I bookmarked it to watch later. But the first four minutes I watched was like, yeah, one thing that we do. And some people watching this, like, this is so old news. I've already seen on my tweet. There's like, I've been doing this for like a year or two again, but I'm like, I'm new to this. I just started this. So. But I'm still going to share it, because that'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. It was like, hey, you know, Claude and I, when I tell you to prototype something, I want you to just prototype like five different options. But, like, putting in. Put in the one HTML file that I can just open up from. Claude and I can tab through the different options. And so I can actually probably share please 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 using this at. And this is. 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 an example of last night. I was troubleshooting some of the new saved, like, entrance effects is what this is called here. So when you. When you save an image into the app, like, what it actually looks like. So, like, the first one I can click. You know, this is like a fade and rise, which is ultimately what I ended up going with. Right? But then you have like your spring and pop.
- [34:46]
B
Cool.
- [34:47]
A
And then you have your. Your develop, and then you have your kind of shimmer. Right? 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 obviously not implement in this exact style. It would actually take your tokens and your CSS and put it in your style. So it's actually kind of fun to see how does this actually translate to my app and everything that it did. But this is an example of what I do now before doing any kind of UI work. And I actually just. 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 type skill and came up with way better ui.
- [35:31]
B
Cool. How specific, like, are you describing anything about what these options should be? Nice.
- [35:37]
A
No, no, no, no, Absolutely. I said I just want. I. I didn't want to prototype the way a card enters into the. Into the grid after you save it. And then I'll 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, I, I was very much like just create me a skill that just prototypes five examples. Like 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, but completely changed the game.
- [36:08]
B
I don't think you're that far behind. For what it's worth, like, I think HTML is kind of having a moment. Recently I've started using HTML just in the last like month and a half.
- [36:16]
A
Yeah, it's just helpful to be able to really quickly see all these things side by side and have it in, in one file.
- [36:22]
B
It's, it's almost kind of becoming this third 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 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, it's awesome because you can play with the interactivity. It's cheap and quick to make. You can really quickly see things that again, like you like. I would have a hard time describing five different ways that an interaction should feel.
- [37:03]
A
Oh absolutely.
- [37:04]
B
Yeah, you know, like it's kind of, it's not, there's not a lot of language at least in my brain that I could reach for. Exactly. So like all the time I'll be like, give me five. 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 and then play with it there and almost have like this little back and forth. Even down to like five days ago. I've started using HTML not even just for prototyping, but for my actual conversation with Claude. Like when I'm trying to figure something out, I will tell it to just 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, 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 just talk dump the most raw, messy prompt you could possibly imagine. And then my cursor is just focused in conductor and I'll hit option space bar again and then just dumps this paragraph and then 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 the ui. It was thinking about what metadata can I even reach for? Because it's like I'm just, 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 how I can communicate things. And it just created this rundown of all of the metadata and then like a tiny little visual mock up 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, let's like 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 about in terms of where I see opportunity to improve my own process.
- [39:08]
A
Dang. Especially since Claude can't do image generation. It tried. Like, it's funny that 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, like I've never thought about leveraging like an open ended HTML canvas to be able to visualize things. That, that's, that's, that's amazing.
- [39:28]
B
Another little pro tip is the value of having a single folder of dummy content. 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'll like, I have a folder of SVG logos. Cause I use a lot of like figma lovable v0comp logos in my own products. And then I have a folder for like the landing page that has a bunch of mockups and faces. And so I just say like, hey, design with that. Because otherwise it'll only give me the oral. Like it'll use like a heart emoji for lovable. But if I say folders from the landing page, then all of my prototypes become more realistic.
- [40:08]
A
Dude. Yeah. It's so evident. We're just all, 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 y, I, I feel like every day I have a new epiphany that I'm like, holy crap, game changer after game changer idea. And I don't know, it's, 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 like, I'll award myself like 10 minutes built in, in CL. I haven't used conductor. I don't know how any of that works. There's still like a world of products in a. I, I don't use agents even, like, and now it's like loops is the big thing. Like, I know, don't, I don't know. I, I'm, I, I, I'm once, one, one step at a time. I'm very comfortable.
- [40:51]
B
That's the theme of this episode. Yeah, one stuff. Because you are using like the Claude desktop app right now or are you using cloud code?
- [40:57]
A
No, just, just, just the browser and terminal. Yeah, I use the terminal the amount of times I have to prompt Claude. Hey, please give me the correct, like the command to open this locally. Because I don't, I'm not even interested in memorizing the commands. Like, so I'm trying, you know, I, and every time I start a new context window, 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.
- [41:19]
B
Sometimes I, I am screen sharing for an engineer who's helping me, like debug something. It's the most uncomfortable experience.
- [41:28]
A
Oh my God.
- [41:29]
B
Because in front of an engineer, you have to be in terminal and then like, realize like, oh, I, I don't actually use any terminal commands. Like, I don't type, git, polar, anything. Like, I just describe every single thing and then I wait for the spinner for call.
- [41:42]
A
But dude, dude, I'm like, I, it, it opened my eyes to be like, like, how do developers memorize all this stuff? You know, I'm like, 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 Force, but it really gave me a new appreciation for developers and that they would just know how to do all this.
- [42:10]
B
This is random, but what icon library did you land on?
- [42:12]
A
I think I landed on Lucid.
- [42:14]
B
I had most of everything myself. That link, 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. Never used to branch out, man, I should branch out. And so I, I just was like, I'm gonna try Lucid.
- [42:32]
A
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 yeah, I just use the basics like Foster. I use streamline icons for all design work. I landed on Lucid because it. I, I was tired of experimenting. I'm like, this works now.
- [42:51]
B
So yeah, they have a, the animated, like they have built in animations, which is what they say.
- [42:55]
A
I didn't know that.
- [42:56]
B
Yeah, there's like a, there's like an animated lucid library that I found. I'm like, I'm gonna 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. And I'm kind of feeling like we're close to being able to point at an exist. I'm using the Quiver API in Paper, so I'll claude. Yes, generate through Quiver on the paper canvas and I can point it at the existing icon library 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 string stroke. Make it all consistent, you know.
- [43:38]
A
Yeah. And.
- [43:39]
B
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, I wonder if I was starting an app from scratch today, it would be very tempting to try
- [43:51]
A
to generate icon, to just do them all. Honestly, like, I've used Quiver. I've been using Quiver for other things and it's, it's good. 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 I haven't thought to use Quiver for icons up until this very moment, I don't know, but that's. Yeah, you, you. I've seen your stuff. Like, you like the. You like the paper stuff. I haven't really gotten the paper that much other than, like, 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. And I feel like there's definitely something 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 at.
- [44:31]
B
At a. Yeah, you probably gotta pick your battles a little bit. I'll always.
- [44:34]
A
I'll always be like three miles behind everybody else, but I'll get there. Right. Um, that's just the way. That's the way it is. So.
- [44:40]
B
Okay, let's zoom out real quickly. This has been a heck of a two months and change little window for you where you've done what previously. Maybe you would. I mean, it's a hard thing. I'm not even gonna. 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'd be, but you still did a hard thing. You went zero to a Mac app and it's good. Right? So how has that 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?
- [45:16]
A
The biggest shift for me is going from AI being a prompt and just build me something tool to like, it's like this. Like, the way that I've been thinking about is like the most patient collaborator that you could ever have. Stuff that builds at such hyperspeeds that like, humans could never build at and you just have to, like, know how to direct it and also, like, taste and judgment not only in, like, 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, like two steps ahead of, of like the industry and being like, I. 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 years to me now. I'm still trying to figure out how this. How this is incorporated 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 thing. But how do I incorporate this into my client 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, figuring out how does this affect the industry, but also, like, how does it affect me personally? What does my role look like? Like, in a year or two, or even in a few months, I feel like these tools in the hand of. Of a designer and someone with good taste and good judgment is just crazy. Like, it. It really is crazy. And unfortunately, like, 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. Like, I don't know, just a mouthpiece for AI companies, or they're like. They're just, like, strictly influencers. Not. They're not. They're not designers. Right. You don't see too many. I know you feature a lot of them on your show, but those are. Those are rare. Like, they're. 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 at this point, why it's taken me so long. Ironically, it's like the thing that 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 want it 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 to a high degree.
- [48:12]
B
Yeah, I think that's one of my main takeaways from this conversation, is the control piece. Like, all of the previous hesitations are where you're able to shine now as a builder. And all of that, that final, like, 1%, 5% details, everything that you've made that makes the product feel amazing and feel considered, and it's like, that's all just been opened up to you all of a sudden, which is so exciting.
- [48:36]
A
Maybe it was there all along. Maybe AIs advanced to the point where it's now like. Like it's actually, I don't know, smarter in some way or better at design in some way. I don't think. I don't think the AI is. 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 go that. 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, and just, 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, 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. Like, that's the whole problem with AI is that you don't have control over anything. And that's where figma comes in. You have control. It just. It, like, it does take time. Like, it takes a lot of time, a lot of iterating and a lot of, like, troubleshooting, but you actually get a working product in the end, which is fun as heck.
- [49:35]
B
So I appreciate you coming on and sharing a little bit about the journey and. And it is amazing what you built. You have.
- [49:41]
A
Thank you.
- [49:41]
B
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. 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.
- [50:00]
A
Absolutely, man. Thanks for having me on.