A (0:00)

One of the biggest parts of my practice as a designer today is knowing which tools to reach for when coding with AI. I've tried a lot of different workflows over the last year, and I've come up with a mental model that I find very useful. So I'm going to share it with you today. These are the quadrants that exist inside of my brain. And the X axis is the size of whatever I'm working on. Is it a quick P3 bug fix, or are we going 0 to 1 on some really big, meaty, ambiguous idea? And the Y axis is how much of the material that I'm gonna work with already exists in production. Is this feature work that is starting from a blank slate? Or maybe we're just iterating on something that is already shipped. There's a lot of hype right now on Twitter about how the canvas is dead and everything has to exist in code. And honestly, I think it's kind of ridiculous. And not to overuse the double diamond metaphor, but I think there is merit to thinking of our work that way, because a lot of times it's very unshaped. We have no idea what problem we're even solving or what way to approach it. And if that's the case, man, I love making a mess on a canvas. And I actually use a lot of writing. Like this is often what the initial stages of my design looks like. And you can see how ridiculous this is, right? Like, I'm just not ready to start playing in code. I just want to get the general shape of an idea. Now, when we look at the bottom left quadrant, there are currently three AI prototyping tools that I reach for. The first is figma Make, Lovable and desen. And if I already have UI that is ready to go, then figma make is pretty great at spinning up that initial scaffold. I'll give you a couple examples. A few months ago, I was blank canvas exploring a new type of publish flow for inflight, and this was all happening in the canvas. And as a part of that, I had this little top component here. I had the idea for this spinning progress component that would actually count down and jiggle once you get to your limit. And since I already had the component outlined in figma, it was really easy for me to just port this over to make, nail down exactly how I want the interaction to feel. And then I actually just grabbed this URL and included that on the canvas as a part of handoff. Another example is the Figma plugin. Like, I designed all of this pixel by pixel inside of Figma. And then I realized, ah man, I need some kind of a little success animation. And so I whipped this up really quickly, made it so that the developer could grab just the animation code below, and then that was shipped to Prod within the hour. And it's a nice example of when Figma make can be really useful like this. Did not take me many prompts at all. Now if you're dealing with something where maybe you don't have a bunch of UI ready to go, or maybe it's slightly larger where you think you're going to have 10, maybe even 20 prompts, then I do find that Lovable ends up being a little bit faster in the long run and I'm able to wield the tool more effectively. This example here, here is the Vibe slider where we knew we were going to build this inside of Rive and I wanted to just get a really rough proof of concept that I could send to Bartek the animator to bring it to life pixel by pixel. So I did some exploring with Lovable and eventually landed on this general interaction after about 30 minutes. And I had none of this UI up front. So it was a pretty good use case for Lovable. Real quick message and then we can jump back into it. So I got a new computer recently and what do you think was the very first app that I installed? If you've been listening to this show for a bit, then you probably guessed that the answer is Raycast. And at this point it is an extension of my fingertips and a fundamental way that I use my computer. And I'm not alone. I mean, I see this sentiment from people I looked up to on Twitter all the time. So if you're still on the fence, just do it. Download Raycast and thank me later. Just head to Dive Club Raycast to get started. Don't be the person with the portfolio that doesn't have a custom domain. With Framer's latest release, you don't have that excuse anymore because they partnered with Hover to provide a seamless flow where you can select free or discounted domains that will automatically be connected to your Framer site after purchase. You heard me right. Framer is offering free custom domains for the first year when you upgrade your site to a yearly plan. So definitely don't miss out on this offer. You can head to Dive Club Framer to claim your domain today. Okay, now on to the episode. Another slam dunk use case for Lovable is whenever you're working with Lottie or Rive which I find really helpful, especially with just how easy it is to create Lottie animations inside of Jitter. Like these were made in, I don't know, like five minutes in Jitter and I just wanted to test them out in this component, which didn't already exist in production. So I whipped up these cards really quickly and just played with this hover effect. And then I would go back into Jitter and tweak some things and then reload it in Lovable. And that creative process worked really well. And still to this day, these animations exist inside of production. The important thing to remember though, when you're working inside of this bottom left quadrant is you're creating incredibly small, focused prototypes. And the trap that you fall into is trying to rebuild production inside of an AI prototyping tool that doesn't sit on top of your production code base. And I've totally been guilty of this. Six months ago, I was spending days prototyping fully functional components inside of lovable like this one, and they turned out kind of great actually. Like, I was really happy with how this worked. There's no way that I have been able to do something like this inside of Figma because there's a bunch of different animations and anytime you're working inside of a text based environment, like you kind of got to get into production code. So all of this made a lot of sense to me, me. But I'm also self aware enough to admit that I spent way too long sweating the details on all of these pixels and interactions and doing it in a way that wasn't built on top of my design system at all. Now I do have a newcomer to this quadrant, which is Desen, which gives me the speed and convenience of a lovable, where, you know, it's just a single input box. And I get it, not everybody is able to pull down like a production code base. You might not work in that environment. And so this is a really great way to spin up a prototype that uses all of my styles and components pretty quickly. Like this is the inflight design system. It is connected to the inflight code base and it automatically updates for me. So I tested it out on a few different prototypes and it worked incredibly well. So this is definitely starting to creep into my practice. But the biggest shift for me over the last few months has been the emergence of Opus 4. 5 with Claude Code and just how easy it makes it to ship something directly to production. With the disclaimer again being, you know, I'm working on Inflight. It's a startup we're shipping quickly, and I crank out multiple PRs every single day, which I get it. Not everybody can do. Now, I've tried a few different tools and workflows for using Claude code. I actually started off using the Warp terminal with the GitHub desktop app. I then moved to Claude's native Mac app, which is really good. I kind of just get frustrated about how quickly I'm able to move. Sometimes. I freaking hate having to wait for Claude to reply every two minutes. So the tool that has pretty much consumed the majority of my AI coding as of late is Conductor. It's an easy way to run multiple CLAUDE codes in parallel, and each one is their own isolated workspace. So I can work on multiple features at once, which kind of solves that flow state problem where I'm stopping and starting every single two minutes. Obviously, this is great for speed, but what I love, again, is that it helps me stay in a flow state because I don't have all of these little stop, start, stop, start, where I'm waiting for Claude to process my request. So if we go back to our four quadrants, the placement of these agent groups is pretty intentional. It's not up in this quadrant. It's kind of eating at this middle ground right here, and that's because it's swallowing more and more of my design work. Because, honestly, and I cannot stress this enough, it's so freaking easy. So let's look at some of these quick fixes. And for me, most of the time, this starts in linear, and I'll batch an hour or two to just kind of work through some of my issues that I'm recording. Sometimes it starts with a little research, like, I just want Claude to go figure out what the state of things is, so I know what to do. So if I take this issue for instance, I saved a little loom where a user was having this issue where we used to have this ability to pin a question inside of inflight. So you had spatial context, and we removed it through some of my design work. So I'm going to bring it back. So I'll just create a new workspace which automatically spins everything up for me. And I'll probably dictate something like this. Hey. So in a previous build, when you were creating your feedback guide, users had the ability to pin a question to a place on the canvas, and that way there was some spatial context associated with that question item. I'm wondering how much of that currently exists in the code base. Can you please do a little bit of research around adding pins on the canvas and report back around what the state is, what's possible, and anything else that I need to know in order to mix some changes in this space. Side note, I pretty much dictate all of my prompts. It's so much faster and it's a little bit rambly, but I just. Just works. So I find myself speaking a lot now. What that did is it created a new work tree and Claude is going to go off and do a bunch of research. And the cool thing again is I don't have to wait for it to report back. I can just pop back into linear and, you know, I'll mark this as in progress and maybe I'll just grab something else like this here. We need to increase the version title character limit by 10 pixels. So I'm going to just grab this image and I'm literally going to grab the title. Exactly. And I'll come in here, hit new workspace command n and I'll paste the text. And honestly, for this, this is going to be super one shot able. I can just hit enter and I bet that it automatically figures it out for me. And maybe I'll come in here and grab one more. I often like to work on three at a time, so. So let's grab this here, copy this text, come back into Conductor. I'm going to hit command N again and just dump it all in. Okay. Just for your understanding, when someone initially fills out or answers one of the feedback requests, it marks it as complete. And then an Add comment button appears below. When users click that Add comment button, I automatically want to focus the text input that appears in its place. So my favorite sound is that choo choo. And you can see here you get this little update. Let me get rid of Super Whisper. In this situation, it's a little bit meatier. So Claude just dumped everything that I need to know in order to give it future changes. And what I can actually do is spin up multiple agents in parallel. And you can see here it one shot. Except I just realized that when my split brain while making this video, I said 10 pixels instead of 10 characters, revert that I actually wanted to increase by 10 characters, not pixels. Whoops. Not pixels. Okay, embarrassing, but this kind of stuff happens all the time. Okay, that was a really simple one. So I might just create a PR at this point. But the button that I absolutely love is this up here I can just hit Command Shift R and it's automatically going to spin up a new agent for me and then review my code. And again, this one's very, very simple. But when I'm starting to get into waters that maybe I don't have as firm of an understanding for this is that extra boost of confidence to make me feel like my engineer is not going to hate me for this pr. So I've been relying on this more and more, and oftentimes it will do a good job of highlighting the couple things that I should clean up or maybe a slight refactor to write code more efficiently. Maybe I want to abstract something into a reusable component. That all comes up during this review here, so it's become a pretty big part of my practice. In this case, it actually did catch something where I also want to update that little character counter pattern that I shared earlier from Figma make and make it so that it still only counts down when 10 characters left rather than 20. Yeah, that makes a lot of sense. Can you please update that so it's still starting when only 10 characters remain? I've been designing products every day for the last 15 years, but in the last six months everything has changed. With AI in the mix, I'm cranking out ideas faster than ever. But none of that matters if I can't get the feedback that I need to get the team aligned. And right now, getting async feedback still kind of sucks. So I'm building the product I've always wanted and it's called Inflight. I use it every day to share ideas and get feedback from the team, and it's totally changing the way that I work, so I'm excited to show you. Right now I'm only giving access to Dive Club listeners, so head to Dive Club Inflight to claim your spot. At this point, I don't have to wait again. I'll pop over and see how is this guy doing? Most of the time I want to test things visually so you can just hit Command R and that is automatically going to spin up a dev server for you. In this case it's live at 302, which I can open it up and now I'll play with it. So I answer the vibe slider and if I hit add comment it's automatically focused. Test it again for good measure. We are looking good. So at this point I can hop back into Conductor, confirm that adding comment autofocus is working great. I'll go ahead and create a PR and then while that's processing I can pop back over here. We increase the max title length so this looks good. I'll create another pr, hop back into my auto focusing the comment and you can see it's here. I can go ahead and click on this and it's going to automatically open it up in GitHub, write a little description, test plan and I can ask for a quick review. Now, obviously not all design work is one shot in this top left quadrant. So if we think about this top right quadrant, this is where, you know, maybe I do have some building blocks to work with in production. Maybe a good amount of it is, you know, backend logic that I'm trying to understand and extrapolate. Regardless, it's probably, probably, you know, a pretty big meaty idea that I have to strategically break down with AI. And this is where I like to use the Claude code Mac app as a CTO to help me prompt and evaluate the output of what I'm getting inside of Conductor. As an example, I'm actually working on my own kind of personal operating system to replace Obsidian and be my hub that I can just keep iterating on. And actually a lot of dive club workflows will be done inside of this tool and you can see, you know, working title, written os. I hate naming things. And I have this development plan, I have a Claude integration which apparently is called Molting now, as well as a Claude MD of just the top level context of the project. And I had a lot of back and forth with Claude to help it understand what I was trying to accomplish. Like if I open up this original message, it's talking about my goals and I want to understand feasibility and basically I want to build my perfect productivity software that is designed specifically for my workflows and use cases. And then I just went for it. I mean, look at the amount of back and forth that I had one evening with Claude just having IT ask me questions, ask me questions, ask me questions and then I would give answers and it would refine and then I would tell it to commit certain things to memory. And I'm just building up this understanding so that Claude can effectively function as my CTO and help me create some of these initial project docs. The most important one is this development plan here. And I specifically asked Claude to break it up into phases and to think strategically about which work can happen in parallel so that I can use separate conductor work trees as well as separate conductor agents within an individual PR as effectively as possible. So you can see like this is phase one, the core data layer. And what I'm doing is I'm creating a new chat for each one of these phases and then I actually have Claude write the prompts for Conductor for me. So if I scroll all the way up here, these are separate Conductor work tree chats and then it's simultaneously writing the prompt for each one of them. I literally don't even read these, I kid you not, I just grab them and paste it into Conductor because I've already done all of the work upfront in the planning phase. What I then do is tell Conductor that it has to report back to the cto and I take that report, I paste it back into Claude and I ask it to evaluate the output, make sure everything looks good, and then it will create the prompt for the next step. Now this is obviously a pretty heavy duty example because I'm custom creating a product for myself from scratch, but the same concept applies even when I'm working with inflight. For instance, like if I'm going to tackle a larger feature that I know is going to touch some backend stuff and be a little bit more involved, like I'm not just working on a P3 bug kind of thing, I'll often give Claude Mac app the context up front, have it help me write my prompts, and then I play that back and forth game where I have this CT to evaluate the output on top of using Conductors built in code review agent as well. And it's just a way for me as a designer who, yeah, I do consider myself more of a builder, but I am not a senior engineer kind of person. And this way I'm kind of double and triple checking my work with AI. Now I can't emphasize enough that this is my mental model and the way that I'm personally practicing as a designer. And everybody's going to be a little bit different based off of where you're at in your career, the type of company that you work at, especially at the rate things are changing with AI. But hopefully this adds a little bit of clarity and helps you think about which tools to reach for at which parts of your process. And I'm still learning as I go. I can't emphasize that enough, so I'm sure there's going to be a part two of this episode as well. Before I let you go, I want to take just one minute to run you through my favorite products because I'm constantly asked what's in my stack. Framer is how I build websites. Genway is how I do research. Granola is how I take notes during crit Jitter is how I animate my designs. Lovable is how I build my ideas in code. Mobin is how I find design inspiration. Paper is how I design like a creative. And Raycast is my shortcut every step of the way. Now, I've hand selected these companies so that I can do these episodes full time. So by far the number one way to support the show is to check them out. You can find the full list at Dive Club Partners.