Improving AI App Interfaces with Agent-Driven Design Systems

And if you're wondering, like, how did I get this theme, and how does it like not look so vibe coded? One of the, like, projects that I would recommend is called Lexington Themes. So, Lexington Themes is like my all-time favorite, and you can take one of these themes and apply it to your repo. Um, and so the way that I would do this is I would take a theme that you like, and just go ahead and purchase it, or you can purchase the bundle. I think the bundle's 100 bucks. You get all of the themes. The themes, these, these are like insanely well-designed themes. You get one of these themes, you're like, you're cooking. It looks like a design- you hired a designer to make your themes because it is true. I mean, it's designed by a designer. And so if you take a look, like we'll look at one of these live themes right now. I'm giving you so much alpha right now. You- this is a theme, this is like- look at this theme. This is fire. This is something you can take right out the gate and then apply to your repo. So what you can do is then send an agent like Argon and say, "Can you make a design.md file?" Because I want to be able to transfer this theme into my other apps. So it can look through all of the code that is used, that's like a lot of really amazing design code. And so not only is this theme work well for desktop, it also works- works well for mobile. So you can see, like, when it- when you're in mobile view, you have this different type of thing. And all of that stuff is already coded in, because they're masters at CSS and design. I mean, this is really extremely high-quality stuff. And no other person online is going to tell you about them. Other than people who care a lot about design, right? But uh this is where the actual alpha is. So if you take something like this, and then apply it to your existing, you know, AI starter coded app, you're going to up your level of design so much higher, where it's just going to feel like, like, dude, where did this come from? You know, all these little details for like, how, how the things look and stuff are just going to, you know, the buttons, you just have more cohesive design throughout the system. Uh and it works so clean with, you know, Tailwind, shadcn, and all this cool stuff. I want good designers to get supported, so please- so please definitely go support them. Woah, dude, look it. Our app is already done. Gemini finished our- this is our app right now. This looks so ugly. Oh my god, this is so bad. Yeah, I know for the design. I know, I know. This is why I'm trying to get it more simple. So it's going to now build the minimalist pill using Argon 4 medium. So, Argon is now taking over the job here, and it's going to hopefully deslop us. Make sure to deslop. Yeah make sure to deslop especially around the design as it should feel minimalist and clean and follow design principles. Some of the design principles I'm thinking is like, with Whisperflow in that screenshot. It just shows you what's going on there. And then, in our case, you know, a lot of stuff is really driven by the backend. And the animation is just to show that there's text and stuff being coming in, and the user can understood that they're being- understood by the text being shown of what's being spoken in real time. Um and some ways we can kind of make that scroll and look- have it look super clean. And what I want you to do is also have some design exercises where you go through because I want it to almost feel like it's a Mac OS native app. And the way that that is done is that, you know, you can pretend like you're talking to Jony Ive and having a conversation with Steve Jobs. One of my favorite principles from Dieter Rams is this ability to just kind of use color in an extremely minimal way. If you do use a color at all, uh it's really to draw attention to that specific action that you want the user to take. Uh and everything should kind of blend away. And one of the other things that he does really well is about hierarchy for text and design and everything. So, a lot of times, um when there's too much on the screen, it gets too paralyzing for a user, and so we really just want to show one intent for what we're doing. I just kicked off the Dieter Rams uh single-line scrolling HUD. Perfect. So, stripping all color, including the red error tinting from the HUD so the entire palette is pure black (#000000), recessed charcoal (color:white: 0.22) on the left, muted white (0.62 opacity) on earlier words, and pure white (#FFFFFF) reserved for the active waveform, the newest spoken words, and the single high-contrast- confirm circle. Oh nice. Also be sure that we're following some of the rules. Uh we have another lot of new rules from Paul Hudson, uh that have the updated Swift UI, Swift design and there's Swift Pro skills too. So we want to make sure that we're not reinventing stuff, and it should follow some type of design system too, because we don't want to manually go through all these different files updating colors and specs in different places. It should all kind of be in one central place.