The Future of UI/UX Design is Agent Collaboration

That's right. Multi- aent swarms co-designing. I mean, all this crazy right? Um [laughter] the the the UIUX industry is really [music] expanded. It is changing massively. And in this video, I'm going to show you what I think um modern UIUX workflows are going to look like. And um yeah, it's pretty crazy. So, you know, this is paper here. And I've covered it last week, and paper's really popular right now. And it's just one design tool right now of several that can handle multiple agents designing things simultaneously for you. So I want to show you a workflow that I think we're going to see that's going to become maybe the de facto. It's going to be very prominent at least and it really helps speed up the process. So let's say for instance you're starting off on a project and you're not really sure where to take the layout. You don't have any idea in terms of color scheme but you're not even sure about what like the function of the layout should be. So, let's say you have an idea for an app. You go ahead, you hit up Claude Code and you say, "Hey, spin up four different agents that are going to design here in paper using the paper MCP server," which I already did a video about how to connect that. Check out the description and ask it. Be specific like I want this agent to, you know, create a prototype that does X, Y, and Z. and then maybe this agent will do this and you can use it for prototyping and then take it from there steps further. So they're actually, you know, they are uniquely different in and of themselves based on, you know, the prompt that we gave it for each of the four agents. Now, let's say, for instance, you like this one. And now you might want to come up with a color scheme. Well, you could do it manually here in paper yourself just exactly as I'm doing here, but who has time for that, right? So instead, what you can do, there's two different approaches. I'm going to show you one approach and then the other approach, which is even crazier. So you can actually select the frame that you like, the layout that you like from the prototype, and then tell it to spin up four more agents and to have each one of them implement their own take of the color schemes. Now, here I was a little bit too general because what they ended up doing is producing four of the same types of color schemes, meaning all it did was just kind of replace the colors. You could get more specific and ask it to do a complimentary uh style of of a color scheme for agent one or maybe um a monochromatic approach or a triadic approach or an anal analogous approach. These are all different, you know, color scheme ideas. So let's say for instance you like this one and now it's time to take this design that only lived in paper um and make it a reality in the browser. So the next step is to say okay take this layout um extract all the color tokens put them in variables and make it HTML CSS and ensure the thing is responsive and then after a little bit sure enough here it is it's pretty much a perfect representation of what lived inside paper and now we have this color scheme. So here is color scheme tip number two. This is so super cool. What you can do is ask the agent or ask Claude to generate 50 different color schemes and using, you know, the CSS color variables and the tokens and the theming it set up. Then go ahead and ask it to allow you to hit a space bar to rotate between the 50 different color schemes it came up with. And this is what it actually did. So not notice right here it says indigo dusk. I told it to create a unique theme name for each one. Let's hit the space bar. Ah, here's warm terracotta. Here's ocean blue, forest green. You get the idea. Now, a lot of them are similar and it's just changing the colors, but you'll see here in a bit there are actually some dark themes that it worked in. Ah, here's one. This looks solid to me. Now, of I didn't ask it to do analogous or, you know, complimentary or triadic color schemes. You could easily do that and get ones that have even more variation than this. And this is like a really great way to, you know, in the early stages of the design process, figure out what type of color scheme I want. And it just spins the stuff up within minutes, which is absolutely insane. So, those were all 50 of the color schemes. And there were a few that I thought, hey, this is really cool and it will spark ideas. And then from there, you say, okay, we like this color scheme. Maybe you'll make some adjustments on your own. And then all of a sudden, you have a a color scheme and then eventually a design system that is fully integrated into your layout. And then you create like an agent skill perhaps that's specifically dedicated to making sure that any future UI that it creates as a part of your app adheres to that style guide. So this is what I think the future is and it's what I'm personally going to start be utilizing for my own projects and also for how I teach. We are now agent co-designers. We are now collaborating with AI agents and it speeds up your work so much faster. So if you're interested in this sort of thing even more so I am covering videos practically every day of the week. Make sure to subscribe, check out designcourse.com. I'll be covering this stuff very much so in a very elaborate manner and I will see you all very soon.