In our last video, we built out this new modal in winter. This is the brand central modal I'm calling it. It allows you to upload images and add your project context, which is additional contact that will be included with every prompt so that you can add your brand style guidelines or anything that you want to help the AI generate content that's relevant to you. Now, the problem is, is I don't like the way it looks. I think this is fairly ugly.

Now, the problem is, is I don't like the way it looks. I think this is fairly ugly. It looks like an AI designed it. You know, we have this button up here and then another drag area and click area, and then another button down here. And then, uh, multiple tabs. I want to combine them like, I just don't like how this looks, so we can use winder for this. That's a bit of blatant self-promotion,

how this looks, so we can use winder for this. That's a bit of blatant self-promotion, but it's my course, so that's what I'm gonna do. So basically the idea is that I built winder for this. Reason is I don't find that it's very easy to go back and forth with cursor on design stuff. You know, you're, you're working primarily in code and you're asking it to make changes and then you have to go to the browser and come back and forth, back and forth.

and then you have to go to the browser and come back and forth, back and forth. I prefer to use design tools for that. And when I started building Wonder, especially no design tool had really caught up to this sort of AI workflow. There's a lot of tools out there now. So by all means, look around, find a tool that's best for you. Figma starting to catch up.

find a tool that's best for you. Figma starting to catch up. There are a bunch of AI native design tools that are alternatives to wind that might even be better for you. Uh, look around, but I do recommend getting into something a little bit more visual. So what I'm going to do is I'm going to take a screenshot of this, we need something to start with and I'm going to paste that into wind

of this, we need something to start with and I'm going to paste that into wind and I'm going to have it rebuild it for us. And so what wind is going to do is pass that image to the AI and then make some attempt to rebuild it. It might not match it like pixel for pixel, but it's gonna give us a good enough approximation of that modal that we can then sort of start to riff on the design very quickly and very easily, all in a visual format.

to riff on the design very quickly and very easily, all in a visual format. Uh, that will be much faster than doing all of this in cursor. Alright, so that's where it got us. That looks a lot like that. Modelle good enough. Um, and so the workflow here is a lot like working with a professional designer. I'm going to go through and I'm just going to leave comments for the AI on what I want it to fix.

I'm going to go through and I'm just going to leave comments for the AI on what I want it to fix. I'm going to say remove this sidebar all together. If I could spell, I don't want it. So I'll do that. I will move this generate functionality down next to the click and drag dotted line box. It should be a box alongside it that perfectly matches

It should be a box alongside it that perfectly matches its styling using gray instead of gold. We will add that comment. Gonna get rid of this, remove this button. We'll start there. All right, so we're gonna submit those comments and see how it does. All right, so that's looking better already. It's a little bit cleaner. We started here, went to here.

All right, so that's looking better already. It's a little bit cleaner. We started here, went to here. Now let's copy it again and continue just iterating again, it's really fast when you can just focus on the visuals. And so I need to add in that project context. Add a big text field at the top for additional project context that will be included with every prompt.

context that will be included with every prompt. Let's see how that looks. Okay, I think that that's looking pretty good. It looks still a little bit rough around the edges. It's a, it's a lot of, it's pretty boxy. Um, but I think, um, let's see, what if we just said keep the colors and overall styling, but refine the design a little bit? Make the images three across instead of two

but refine the design a little bit? Make the images three across instead of two across, and smooth everything out to look more professional. Really vague instructions. Uh, we'll see how the LLM does with it, but sometimes you just want it to look a little bit better. And I've worked really hard to get wonder to just be good at design out of the box. And so hopefully it'll be pretty good.

to just be good at design out of the box. And so hopefully it'll be pretty good. It didn't stick to my colors, but, um, let's see. Let's see what that looks like. All right, I think that's overall looking pretty good. Yeah, we'll go with that. I think that's, that's looking a lot better than where we started. I could spend an infinite amount of time on this, but for the, uh, purposes of this video, that's basically

I could spend an infinite amount of time on this, but for the, uh, purposes of this video, that's basically how I design, uh, for AI is that what I do is I take my design from cursor, I paste it into winter, and then I just go back and forth with it a lot. Um, I could have used custom instructions here so it would've stuck to my brand colors a little bit better. Um, there's a lot of stuff that I could do to improve this process, but

Um, there's a lot of stuff that I could do to improve this process, but for now I think that that's pretty good. So what I'm going to do is then take a screenshot of that and then we're gonna go over to Cursor and then we'll see if we can get Cursor to make this design. Alright, so we're back in Cursor. I'm gonna paste in that screenshot that I took of what I built in winter so that cursor can look at it and try to match it.

what I built in winter so that cursor can look at it and try to match it. And then I wrote this prompt here that basically says, Hey, look at this screenshot and try to match it as closely as you can. So that's basically my vibe. Designing flow is I get Cursor to make something as just a starting point. It's gonna be ugly, but it's gonna have the functionality that I need.

It's gonna be ugly, but it's gonna have the functionality that I need. And then I take that into a design tool like Winder. I tweak it, I get it to look like what I want, and then I bring that back into cursor. So this, there's this sort of round trip, um, that is not unlike how a product team works. Often at work when I'm working with a product team, the engineer will make something, the designer will refine it.

the engineer will make something, the designer will refine it. Those, there's that natural back and forth. So, uh, this is a pretty typical process. Only it's with AI instead of a bunch of humans. So we're gonna hit the button and see how it goes. Alright, so we did a one shot of that inside of Cursor using the auto mode. Let's see how it turned out. Let's go over to Winder. We will open up brand central

Let's see how it turned out. Let's go over to Winder. We will open up brand central refresh here just to be sure. And so this is what it's looking like. It's, it's a lot better than where, where it started. If we look here to see where it started, it was a little busier. It had the sidebar with two tabs. Now we've combined that, um, we've put the image generation and the image upload right next to each other.

Now we've combined that, um, we've put the image generation and the image upload right next to each other. We have the project context at the top. We have the images down here. They're a little bit smaller. So overall, I'm liking this a lot. I would continue to tweak this. Um, there's some spacing in here. There's some padding in here I don't like. Uh, there's, I think this is overall still a little bit confusing.

Uh, there's, I think this is overall still a little bit confusing. I need to refine the copy a lot. But I'm at a point where I generally like the layout. I like the colors and stuff. So I would work with Cursor from here on out just to do some refinements. I was able to get that grand picture of things in my design tool and able to just sort

of things in my design tool and able to just sort of rethink the experience a lot in a way that was much more visual and much more free. So that's what I recommend. Use the design tool if you're at all familiar with them. If not, just lean into some AI tools that are a little bit more visual and then bring that design back into Cursor. Cursor does a pretty good job at sort of trying

and then bring that design back into Cursor. Cursor does a pretty good job at sort of trying to create a reasonable facsimile of the thing that you've created in another tool. Now that's what I do. If I am taking an additional or an existing design and then I'm refining it or I'm changing it, what happens if I don't have any design? How do I start from scratch and get something that looks pretty decent

How do I start from scratch and get something that looks pretty decent and not super AI generated? Everything that comes out of AI tends to look like Shazi in. It looks very plain and generic. How do I get past that? Let's look at how I do it. My best tip for starting a new application or a new design from scratch is to start with a brand style guide. And you find that AI is pretty

with a brand style guide. And you find that AI is pretty good at coming up with these things. I recommend that you start with Claude. Claude is much better at these than chat GBT in my own experience. GBT five is a step forward, but I just find that Claude has a better aesthetic sense. I'm going to use Wonder because that's the app that I built and I find that it does pretty good job.

I'm going to use Wonder because that's the app that I built and I find that it does pretty good job. Um, so I'm going to create a simple and attractive brand style guide. I told it my app name. Um, I told it that I wanted some sample UI components. I I gave it my fonts. And so that's all. It's a very simple prompt. And then it's going to come in here and it's going to generate what looks like the kind

And then it's going to come in here and it's going to generate what looks like the kind of style guide that you were used if you were working with a designer. You know, they come up with a basic color palette, typography for headings and body text, UI components. This is looking really attractive. I think that this looks great. And so what I can do then is feed this to Cursor. And so I can go in here and export the code directly.

what I can do then is feed this to Cursor. And so I can go in here and export the code directly. Or even in here, I have a generate theme button that's going to generate a JSO blob that you can use. And just copy this as a prompt, take it over into Cursor, and then everything that you build in that project will follow your brand style guide and it's going to look a lot better. So that's my trick. If you're going to start a project from scratch,

So that's my trick. If you're going to start a project from scratch, always create a brand style guide first, and then everything you do from then on out and it's going to follow it and it's gonna look a lot better. All right, see you in the next one.