Generate The PERFECT App UI Every Time with this 2-Step Cursor Guide

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.