The 2 Biggest Ways my UI/UX Workflow has Changed

I'm going to show you two different ways that my UI/UX workflow has been drastically altered with AI. So, this here is Landscape, which is the AI-infused SaaS that I'm building. It's a serious project, but it's also a part of a follow-along course, and you can take that now through early access. And the first thing that I changed, you know, I deviated from my typical UI/UX process that I've had since the '90s, literally, is instead of starting off in something like Figma where I, you know, get everything perfectly designed, I decided to start it in Claude code and allow Claude code to vibe design the basic app. And I did that because I wanted to know and see what is possible with the app because we're using a lot of AI tech. So, now I'm at the point in the project where I really want to refine the UI and use my actual UI/UX design skills. And if you look here, this is a library asset drawer, all right? It has all like 500-plus AI-generated images of the plants and vegetation for this landscaping app. And the way the AI designed it, I just don't like it at all. I want like a floating modal panel that is resizable and you can dock it or whatever and maximize it. And I was initially just going to hop into Figma and just design it from scratch. That's the old way of doing things. So, I decided, "You know what? Let's use the Figma MCP approach in order to generate four different ideas. And those ideas would be framed in the context of floating modals and also just restructuring the existing content that is already there. And after a few minutes, this is what it actually came up with. So, as you can see, here's the first one. This is the floating modal, right? And it's actually not bad. I mean, in terms of UI/UX design aesthetics, it's it's not horrible. I think it's a little bit pill heavy having two rows of different pills. Let's check out the next one. All right, so this time, you can see there's a sidebar with built with pills up here for the different filtering options. I think this is a better, you know, iteration. Now, let's check out the third one. All right, still a little pill, you know, like I a lot of rows and and it's a little bit heavy in that regard. And then here's the last one. This is the fourth one. I like this one the most. And so, you might be wondering, "Okay, well, is that it, you know?" No, I None of these results are perfect out of the box. This is where having the UI/UX skills come come in really handy. So, what I did is I took this and I came down here and I replicated it right here, put it on its own little background. I also pasted in the context of the other UI that's already exists in the project. And then, just, you know, this is kind of like my baseline. And then, what you're seeing here is a time-lapse video. This is a part of the course I where I went through and customized all the colors, made adjustments physically where it makes sense. And ultimately, this is what it came up with. So, as you can see, I integrated the colors just a little bit better between these two. This is like more seamless, kind of fits with the existing aesthetic a lot more. And then, I took the selection. You right-click. You copy link to selection. And then you paste that in to Claude code or whatever AI agent you're using. And you're And you basically say, "Go ahead and take this design that I I, you know, I I completed and iterated over the one you created and integrate all the colors, all the structural changes." And this is what it came up with. This is the actual live version in the browser. So, if I click on library right here, there it is. Now, what's super cool, it expands exactly as I want it to. I can move it around. I We have the filters option here, which you could collapse. You can fill All the filtering options work here. I We can do searches like I Let's see, gravel. Yep, there we go. And then additionally, I didn't even I design this one specifically. I had it create the secondary page where you're able to hone in and get very specific information I about, you know, whatever it is that you've selected. And then I went in afterwards and made some fine adjustments and directed it through text about how to structure this layout here specifically. So, in the past, this this would be something that it would take a long time I to to come up with four different variations. Perhaps you're you're working with a client or you're working with a boss or whatever in your employee as a designer. And it would take a long time to come up with those four variations. Literally, a few minutes, I was able to narrow in, go in, make some real quick custom adjustments, and there we go. It's integrated, fully working in code. I didn't have to touch a piece of code. So, you know what? This is massively beneficial. This is such a huge upgrade. It's almost like I am working with a junior developer or designer, rather. Um junior UI/UX designer. Spits out all this stuff. I come in and then I do all the refinement work because I have a better eye than the AI currently, at least. And it just It's just a so much better, faster, more efficient workflow. So, if you're a UI/UX designer and you're saying, "Oh, I hate AI. AI slop." You're living in the old times. I am telling you. This is the future. And I'm super excited that now I have this new workflow where I don't have to do everything by scratch. Now, there is one caveat. And that is like landing pages, marketing pages, things that really need to be unique. And that is also something I'll be doing and covering in this course as well. Creating a really nice landing page that sells and converts well, that looks great and is unique and interesting. I think that's going to be still the area where UI/UX designers will be doing the most creative work. But for this type of work, where we already have established patterns for control panels and, you know, this type of UI, it makes way more sense to use multiple agents to come up with different ideas. You choose and pick which ideas that you want to mix together, refine the colors, ask it to integrate it, and there we go. We're ready to rock. So, I just wanted to share that with you. This is a new workflow I'm super excited about because finally I have an actual real use case I can share with you all. There are some videos where I show how to set up this process already. I'll link here in the description. And yeah, if you want to follow along with this project, it is super cool. Um We're we're learning how to build this AI SaaS I landscaping. We got video integrated into it. I mean, it is just nuts how good modern agentic coding is now. And yeah, I will see you all very soon. Goodbye.