Making websites and apps look good is really hard. The hardest part, coming up with cool ideas. Sure, you can copy designs from other websites, but guess what? Someone else had to think of those designs first. You can find lots of design ideas online. You can even grab ready-made designs and put them right in your app. But what if you want to make something that's totally yours? Well, if you ask AI to design something new, it will make something really boring, something nobody likes, and something you definitely don't want to use. But here's where it gets crazy. What if you had the ability to generate multiple designs iteratively until you got one that you actually loved? This is where this simple cursor two-part method comes in. Let me give you a little bit of background before we dive in. So Jason Zho over on X released something called Superdesign Dev. But there was a problem with this that led me toward my two-step method. It's basically a cursor extension that lets you create iterative UI designs over and over again. And it's really cool. I installed it myself. Super easy to set up and honestly it works great. But here's the problem. It runs on API based usage. Right now it's using Anthropic's clawed API in the background and that gets expensive really fast. So using this iterative design agent becomes costly. And I thought, wait, why can't I just use my existing $20 cursor subscription to get the same results? Then I saw another video where he used Claude code to build an iterative design workflow. But again, same issue. either you need to subscribe to Claude Code for another $20 or use the API, which adds up. So, here's what I did instead. I used Cursor's built-in rule system to build this iterative UI workflow. Now, if you don't know what these rules are, they're really easy to create. They basically affect how the cursor agent behaves. It's really easy to create them. You just go into the settings and click on a button to initialize them, then select the mode. All the rule files I'm about to show you today are going to be set to manual and you have to call them in the agent yourself. Now I can generate as many UI variations as I want directly in cursor without paying for extra API usage. I pick the one I like and continue designing from there and it's honestly really simple to do. If you're using cloud code instead of cursor, this still works. In a previous video, I showed how to make custom commands using the arguments tag. You plug in a prompt, pass in a variable, and it runs exactly what you told it to. Cursor rules work the same way. So essentially, cursor rules can replicate this entire flow. The only area where claude code has an advantage right now is spinning up multiple agents at once. Great for managing complex context. But until cursor adds that feature, we can get pretty far just using rule files. You can generate endless UI variations, test them out, and pick the best one to continue with. Okay, so before we get into the actual two-step method for generating these iterative designs using cursor, let me quickly explain how it works at a basic level. In a previous video, I talked about how you can generate a design.json file from any image and then use that to create consistent beautiful designs. So, let me walk you through that. In this example, I started with a simple landing page UI image. I wanted to build designs that followed its color scheme and design language. So I created a custom command in claude and the same one in cursor. You can see it right here. Both commands basically do the same thing. They generate multiple designs based on a design.json that gets created using the extract designd command. It starts with that extract designd. You give it an image inside cursor and it uses a rule file to extract the design details. Once that's done, it saves the design.json in the designs folder. Then I used both Claude and cursor to generate UI designs from that file. You can see the two folders side by side. One from cursor, one from Claude. Let me show you what I mean. I asked cursor to generate a to-do list tracker using the multiple UI rule file. And since it already had the design.json reference, it used that to create these designs. You can tell they all follow the same color palette and design language from the original image. But each one is slightly different in layout or element styling. I did the exact same thing in Claude code. This time I asked it to create a calculator app using the same multiple UI rule. Claude was also able to generate different design variations that stayed consistent with the design language. Now the key difference Claude spins up multiple agents at once so it can generate designs much faster if you can afford the API cost or an extra $20. Cursor goes one by one but in both cases the output was surprisingly good and very consistent. Now let's move on to the first step of the two-step method. Step one is all about creating targeted design variations from your existing designs. What I mean is you can generate designs tailored for different use cases using custom rule files. And for that you can create generation rules for those different use cases. For example, right now I have this food ordering app and the design is responsive. So if I convert it, you'll see it has a proper mobile app UI. But what if I want to generate more designs based on different personas? Well, what I can do is reference the original index file and then apply the persona rule. This generates multiple variations of the same design, each tailored to a different persona. Let me show you exactly what that looks like once it finishes generating. Based on the personas, it generated a chef hub for chefs, a campus eats style UI for students, and a really corporatel looking website for executives. But this is just one example. I also made other targeted generators like one for device type and one for geoloccation. This means I can experiment with different kinds of UIs. For instance, I made one specifically for mobile and while it might not look drastically different, the icons are noticeably enlarged. Then there's one for desktop and it even came up with this version for TV which it named food hub for TV. And the geoloccation-based one, it generated versions for specific regions. It changed the languages, tweaked the colors, and even adjusted the layout orientation. The point is you can now create infinite targeted variations using these rule files. And the best part is you control exactly how they work and they're not even hard to make. You can just ask Claude to generate them for you. There's one specific command I'll show you at the end. It helps create really solid rule files, especially for complex workflows. You'll find these targeted rule file in the description below as well, so you can study them too. But aside from that, it's super easy to get started. Oh, and if you're enjoying the content we're making, I'd really appreciate it if you hit that subscribe button. We're also testing out channel memberships. Launched the first tier as a test and 79 people have joined so far. The support's been incredible. So, we're thinking about launching additional tiers. Right now, members get priority replies to your comments. Perfect. If you need feedback or have questions. Now, let's move on to the second part of the two-step method. Step two is about rapid iteration on existing designs. So if you already have a design you like but want to explore different variations quickly or if you want to start fresh with a simple design and iterate from there then we can use this infinite design generator. Now if you're thinking why not just use this instead of making targeted rule files. Well the targeted rule files can include examples, specific constraints and detailed instructions that help create much more precise variations. It's way more powerful than just adding a simple prompt. But this is specifically powerful when you have honed in on one design and then you just want random variations in its design or style. Let me show you how this works. Here I told it to create a basic notetaking app design in HTML and it created this really basic design. Now I want more variations based on this. So I reference the original index.html file and apply the infinite design rule file. Here's what happens. It creates a variations folder, generates three different design types, and copies the original design as source.html for reference. And check out what it generated. A dark themed version, this rainbow style website. I don't love the colors, but the layout is solid. And this clean, minimalistic design. The cool part is you can keep iterating endlessly. Here's how the workflow works. When you first run the rule, it creates the folder structure. If you want to iterate on a specific design later, it takes whichever file you reference, sets it as the new source, and generates three more variations in the same folder. Let me show you a live example. I like the structure and animations of this rainbow design, but I hate the colors and styling, so I can iterate on just that specific design. Now, before generating new variations, I always start a fresh chat so it doesn't carry over previous context. This helps it follow the rule file instructions precisely and generate truly fresh variations. So, I'll reference design 2.html with the infinite design rule and ask for color and style variations. Once it's done, you can see the results. Same layout and animations, but completely different colors and styles. This one's modern. This has an ocean theme. And this one's eco themed. It kept what worked and changed what I wanted. Oh, and you could use clawed 3.5 sonnet for speed, but the thinking models give you more precise control since they can better understand and execute complex rule instructions. And that's the complete two-step method. Targeted variations with custom rule files, then rapid iteration for endless design possibilities, all using your existing cursor subscription. No extra API costs. I've put all the rule files in the description below so you can start experimenting right away. Give it a try and let me know what designs you create with this method. Oh, and I mentioned that I tell you how to create these rules easily with Claude. So, what you need to do is describe your workflow in plain English step by step, then tell it to write the rule file and do English programming. This has generated really amazing rule files for me with extensive workflows, and the AI agents have no problems following them because the rules are so clear and to the point. That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.