How to Build ACTUALLY Beautiful Apps in 3 Prompts Using Cursor 2.0

If you're struggling to get great design out of AI coding tools or you're just getting the same old purple gradients, then this is the video for you. I'm

going to teach you exactly how to get incredible designed UIs and show you the exact threeprong process that I use to extract the design style from any design

system available and turn that into a usable framework and guide that AI coding tool can use to follow that style exactly. By the end of this video,

exactly. By the end of this video, you'll be able to create apps with incredible looking design, no matter what you're building. If you don't know me, my name is Chris, and for the last 15 years, I've been designing apps and

advising startups on product and design.

With that said, let's get into the three prompts and find your perfect design style for your app. Build great product.

Build great.

[Music] So, let me walk you through how to create a actual incredibly welldesigned design system for your app that you're building with AI coding tools. And the

first thing that we're going to do here is we're going to go to Dribble, which if you don't know, Dribble is basically a website that has a ton of visual inspiration that you can search and look at. And it kind of tends to skew towards

at. And it kind of tends to skew towards apps and uh user interfaces and websites and that sort of thing. But what we're not going to what we're not going to do here is we're not going to just search for something that we like the look of

that we think looks nice. We're actually

going to search for a design system. And

if you don't know what a design system is, a design system is a set of components. A component would be like a

components. A component would be like a button like a form um a card um for example like this is a card here and it has these hover elements on these um and

this image on the left with a button on it and an arrow right. All of these are user interface components that make up a design system that you would have in your app. And the reason we want to

your app. And the reason we want to create a design system, uh the reason we want to use a design system for inspiration is because a design system gives your AI coding tool and it gives our app like all of the possible

components that we could ever possibly want to build in our app. Um bordering

on like some more complex stuff, but it's going to give us a great foundation to start from. So the first thing I'm going to do here is I'm going to search for design system. You can search for like design system in a specific color.

If you want to do it in a specific color or you're unsure and you'll get all of these different design systems laid out here. Now, I wouldn't go for something

here. Now, I wouldn't go for something that looks like more like a poster like this cuz this is going to like skew the AI's interpretation of what this design look looks like. What you want to go for

is a screenshot of a design system that is pretty flat like this that includes a bunch of UI components. But I wouldn't actually go for this one because this all the elements in this are a little

bit too small. What we want to do is we want to find something where it's really really clear all of the individual components and we can extract the style from it very easily. So something like this works really really well. Maybe

maybe not this because it's got the purple dashed borders around these which kind of the AI is going to pick up that it's going to add these purple dashed borders into our style guide and we actually don't want that. We're kind of

ignoring that element here. We probably

want something more like this, which just has all of the UI components or like a a a few UI components laid out in

a style. It's super super clear. There's

a style. It's super super clear. There's

nothing else on here apart from the UI components, the colors, the typography, and the kind of way that it's designed.

So, what we're going to do is we're going to start from this screenshot of a design system that is clear and visible and doesn't have anything else on the image. That's your starting point. From

image. That's your starting point. From

here, what we're going to do, we're going to jump into cursor for this. And

I you can use cursor for this and then go back to lovable or bolt. And I would recommend using cursor because what we're going to do here is we're going to go through these three steps, these

three prompts. The first prompt is

three prompts. The first prompt is basically going to be outlining a design, a highlevel description of what this design is. So, let's copy this to

our clipboard and let's open cursor. And

what we're going to do here is we're going to open a project. So, I'm going to open a new project. Just create a new project. Let's just go to the folder

project. Let's just go to the folder here with with this project. I've already created a folder for it. If you haven't, just create a new folder in Cursor. If you

don't have Cursor, just go over to cursor.com and download Cursor and open it. And you'll just need to open a open

it. And you'll just need to open a open a project, open a folder. A project is basically a folder with all of your files in, all of your code files in. And

what we're going to use this to do is actually to create a style guide, a design system um for our application, and we can take that file, we can take that style guide and actually put it

into our codebase in lovable or bolt or whatever tool we're using. Or you can just continue building in cursor if you want to. Um, you can kind of use it

want to. Um, you can kind of use it anywhere you want. And how we're going to start doing this is we're going to jump over to agents view here at the top. And this is going to give us an

top. And this is going to give us an interface which is more focused on this kind of just chat style interface. And

we're going to be using a few different AI models here as well. So we're going to be using GBT5 for analyzing design style and writing out these design uh

system descriptions. GBT5 tends to be

system descriptions. GBT5 tends to be better at visual and user interface um uh elements. Um, and anthropic like

uh elements. Um, and anthropic like Claude 4.5, those those models tend to be better at writing code. Um, cursor

2.0 also has the their new composer one model which is super fast, but I I wouldn't want to use this for this.

Cursor uh cursor's composer model is more for like quick fixes, bug fixes, any any small tasks that are relatively easy that you want to just get done very quickly from a code point of view. What

we're going to do here though is not necessarily uh code to start off with.

Although we are going to write this in a specific file format that makes it easy for our AI to read the style. So what

we're going to do is we're just going to paste this um screenshot in here. So now

what we're going to do in cursor is we're going to add this prompt in here.

And this says deeply analyze the design of the attached screenshot to create a design.json file. If you don't know what

design.json file. If you don't know what JSON is, it's essentially just a data um file format. So it's a type of code that

file format. So it's a type of code that basically will allow us to store different types of data and that makes it really really easy for AI to read because it can understand the data

format and structure of that. It's very

kind of structured data basically. Um

and it will give the AI like a really clear idea of the different kind of categories of design and the different definitions for each of the elements within each of the components and the design style that we're working with as well. So, we're going to use JSON for

well. So, we're going to use JSON for this to kind of give the AI a little bit of an easier time creating our designs.

Um, we're then going to say deeply uh so um in this project that describes the style and design of every component needed in a design system at a high

level like a creative director. So, the

we're kind of creating this design.json

file and we're doing it at a high level.

We don't want to specify all of the exact little details um of the design at the moment because what I've found from like just adding a screenshot and creating all of the details just from

that screenshot is that the AI will tend to generalize and it will fill in the gaps where it doesn't have information and it will kind of just default to like its basic styling if it doesn't really know what the screenshot is. So I want

to just give it create like a vague like well not vague I want to create like a detailed overall description of the design style from this from this design system screenshot that we've given it

here. Capture highle guidelines for

here. Capture highle guidelines for structure spacing fonts colors design style and design principles. So I can use this file as the design guidelines for my app. The goal with this file is

to instruct AI to be able to replicate this look easily in a project. So, we

want this to be written in a way that's going to be easy for AI to understand.

And we also want to capture all of these elements of the design system. So,

spacing, fonts, colors, design style, and principles. Basically, an overall

and principles. Basically, an overall guideline of what we're going to do here. We've set it to GBT5. So, let's

here. We've set it to GBT5. So, let's

send this off here. And this is basically going to create a little to-do list for us to analyze the screenshot first and then identify what the design

style and patterns are and then create that design.json JSON file in our

that design.json JSON file in our project here. So let's come back once

project here. So let's come back once that's written the file to our project and see what it's done. So we can now see that cursor has created our design.json file in our project. Um it's

design.json file in our project. Um it's

analyzed this screenshot. It went

through all of these to-dos here basically. And if I go to this

basically. And if I go to this design.json file. So let's just jump

design.json file. So let's just jump over to the editor view and open this design.json file here. We can see that

design.json file here. We can see that we've basically got and this is why I mean like JSON is like a structured data format basically um we've got all of these kind of all of this information

about the style. So brand we've got essence tone of voice keywords optimistic clear helpful it's extracted that from like the the image of like the design system that we gave it which is

pretty good. uh style. So design

pretty good. uh style. So design

language soft round white surfaces floating on a citrus canvas with subtle shadows and clean typography. Vivid

purple is the primary accent. Lime green

is used for positive actions and highlights. We've got some principles

highlights. We've got some principles here. So softness over sharpness,

here. So softness over sharpness, generous um border radius and pill shapes, airy spacing, hierarchy, low contrast, human first visuals, clarity and restraint, which I think is a pretty

good summary of the screenshot that we put in. And it's also outlined some

put in. And it's also outlined some styles here, some rough styles that it can use. So we've got border radius,

can use. So we've got border radius, break points, um grids, some colors here, some neutral colors. Um it's not given us too much, so it's kept it at a

pretty high level. And then typography with some different font options that we've got here as well. And um yeah, overall it's given us a ton of stuff

here to use as the foundation for building our app just from that screenshot. So, let's jump back over to

screenshot. So, let's jump back over to the agents view here. I'm going to click keep all in cursor, which basically is going to save this file that it's created to our project. Here you can see it was all in green before. That means

that it was new code, new text that it had written. So, we decided to keep

had written. So, we decided to keep that. So, we're going to keep that. And

that. So, we're going to keep that. And

then we're going to do a follow-up prompt here. And for that, I'm going to

prompt here. And for that, I'm going to do a new agent. So generally it's really good in cursor or whatever tool you're using when you do a new task when you build a new feature when you when you want to get the AI to do something that

that is maybe slightly different to the task you got it to do before create a new agent create a new chat clear your chat context is really really good practice. So let's click new agent here

practice. So let's click new agent here and for this I'm going to change it to set 4.5 and we're going to put in this next prompt here as well. Quick break in the episode to talk about my community

for people building apps with AI. It's

called the AI app builders academy.

Inside you'll learn how to plan, build, launch, and grow a profitable app with AI in just 21 days. And you'll also get access to more advanced courses like how to build with claude code, how to build

mobile apps, how to build AI agents, and more with new lessons being released every single week. On top of that, you'll also get over $3 million worth of AI deals so that you can start building at zero cost and also access to our

weekly Q&A sessions where you can get unstuck on your app building journey.

And if you sign up to our VIP annual plan, which is offered at a 60% discount, you'll also get access to monthly group coaching and workshops, as well as our community demo day where you

can pitch your app idea to me and other VIP founders to get business and strategic advice on your app. This

community is full of people building real applications with AI and getting real paying customers. And this is the lowest price that it's ever going to be because we increase the price for every 50 members that join the community. And

so if you want to lock in your price and start building your app business today, then just head over to school.com/iapps

to find out more. I'll see you there.

So what we're going to say is we're going to say let's create a simple screen that contains every UI component that would exist in a design system on a mock dashboard following the design

style outlined in JSON in design.json

and you can add these files into your chatting cursor. All you do is click is

chatting cursor. All you do is click is press at and then you select the file you want to add. So we would add like design.json there. I'm going to remove

design.json there. I'm going to remove that because it's already in the chat.

build this as a Vite app using React and you can change that to whatever sort of app that you want to build as a desktop app as whatever kind of app I would just suggest like for the style guide we're

just setting up as like a basic React or V kind of web app basically. So build

this as a V app using React and translate all styling into Tailwind version 3 and we want to use this because this is the primary kind of um foundation of most apps built using AI

coding tools. If you build using lovable

coding tools. If you build using lovable or bolt, it's it's going to build it with Nex.js, Vite, React, and Tailwind as kind of the foundation like technology underneath it. So, we're

basically creating our design system in a really familiar foundation that AI coding tools will know exactly how to use. And then I've said just run this

use. And then I've said just run this locally, which means just run the project locally on a local development server so that we can see what it looks like and if we're happy with it. And so,

we've selected 4.5 here as well. or

Sonet 4.5 is the model because Sonet 4.5 is generally better for coding tasks like this. You can use GBT5 for coding

like this. You can use GBT5 for coding tasks, but I would say it's better at visual stuff and it doesn't do the more um structural or like complex tasks as

well. And Sonic 4.5 is just a generally

well. And Sonic 4.5 is just a generally a kind of all round um general purpose coding model that you can use for any coding to any coding task if you're not

sure. So, let's send this off to cursor

sure. So, let's send this off to cursor in a new chat. And you'll be able to see here on the left, we've got a new in progress um agent, a new in progress chat that's kind of loading here. And

this is thinking, it's kind of loading.

It's going through um it's creating a comprehensive VI plus React plus Tailwind 3 app that showcases all the UI components from the design system. Let

me break this down into steps. And it's

going to do all these to-dos to kind of build our app for us. You could also create this just as a simple HTML page if you're building a website with all of the components on and that would actually be more straightforward for the

coding agent to do here as well. As you

build in cursor, you're going to get these requests come up that cursor is asking us to look at and do. I'm just

going to click run on all of these. This

is basically going to go through and set up a vite um React app. It's got a permissions error here, but it will be able to go through and do it. Um, so

it's setting up the project structure manually and creating all of this code along with all these design components in our project based on the design.json

file that we already created here. And

this has created a folder called design system showcase. It doesn't matter too

system showcase. It doesn't matter too much about this because what we're going to use this for is we're just using this to create a detailed um kind of design system that we can go and use in any

other tool we want or that we can use in the foundation of our application even if we continue working in this project.

So you can actually do this step and just use this as the first prompt to kind of start creating your app in cursor. If you want to create if you

cursor. If you want to create if you want to create your app or your first page of your app using design.json JSON

as a reference. That's a really good way of doing it. If you're building something else, you can take the file that we're going to create in the third prompt over to any tool to use to give it direction for your design system. So,

let's wait for cursor to come back here and build this app and we can see what all of our kind of mock components look like on a dashboard. So, this is now saying that this is successfully running. So, our app is running locally.

running. So, our app is running locally.

It's built our app for us, what's included. It's done this project setup

included. It's done this project setup which is a familiar kind of like uh AI friendly web app setup using VI react and Tailwind. It's added all of these

and Tailwind. It's added all of these core UI elements here. So we've got avatar buttons, icon button, cards, progress bar, calendars, profile

summary typography scale color palette examples, all of that sort of stuff. And it all follows design.json.

stuff. And it all follows design.json.

And basically this says this app is now running at localhost. If you don't know what localhost is, this is a URL.

Basically, we're running our app on a local development server on our machine.

And that is how developers work to basically build apps and check how they work or they actually deploy them to the web or deploy them to whatever kind of like deployment environment they're working with. And it's created all of

working with. And it's created all of these files here that we can see for us.

And what we're going to do here basically is we're going to use the browser inside of cursor to check this.

So, we don't even have to leave cursor to go to this website address. We can

copy and paste this localhost 5173 address and put it into our browser and get it that way. But if you're in cursor, all we have to do is just click this web kind of like globe icon in the

chat down here which says connect to browser and then you just click browser tab. And that opens a browser tab on the

tab. And that opens a browser tab on the right along with all of the files that it has just created. And what we're going to do now we're in this browser view. I'm just going to shrink these

view. I'm just going to shrink these chats down a little bit so that we can see this better. Is we're going to copy this and then paste that into the browser in cursor. And what you can see

here is all of our design components listed out on a screen here with all of our headings, our um styling, our components. Some of these have a little

components. Some of these have a little bit there's tiny issues with some of these like that's little slightly too far on the right on that toggle, but it's working nicely. Um, this is all

just front end. You've got these buttons with hover states and we've got all of the kind of styling that we need. These

different types of buttons here, primary, secondary, tertiary. We've got

all of these kind of cards with the icons added in the avatar setup, avatar stacks, um, progress indicators and these kind of pills and then buttons,

the primary, secondary, success and ghost buttons, icon buttons, a calendar view here. So this is this is the

view here. So this is this is the majority of the components that we'll need in our app in our design in the design system for our app. And this

basically gives us a great foundation.

You can already see like um compared to the screenshot. If I go back to the

the screenshot. If I go back to the screenshot here, this is really really similar to this screenshot that we've added in to kind of like follow this style. It's pretty much barring like

style. It's pretty much barring like some specific fonts, it's like almost identical. And that is really the power

identical. And that is really the power of like doing it this way, extracting all of the information into a design.json file and doing that at a

design.json file and doing that at a high level. And what we're going to do

high level. And what we're going to do now as the third prompt is we're basically going to create our full comprehensive design system uh document

that any AI tool will be able to follow.

So let's uh let's just um move this. We

can keep this up here for now. I'm just

going to expand this view a little bit.

Let's click new agent here. And what

we're going to do is we're going to go back to GBT5. So we want to use GBT5 for this. Um actually first let's go back to

this. Um actually first let's go back to this chat. And then just make sure if

this chat. And then just make sure if you want to keep everything here, you just click keep all. So we're going to click keep all on these changes. And uh

we did that on the previous one. So

let's just check our files are all there. So we've got design.json and

there. So we've got design.json and

we've got all of our app files here as well. um for our design system. Let's

well. um for our design system. Let's

just reload um this local host so we make sure we've got it on the right. And

then what we're going to do is we're going to create a new agent here. And

we're going to do this third prompt. So

this third prompt is basically to create a comprehensive design system um in a JSON file that any AI coding tool can read based off of this design that we've created on the right. And if you do want

to make any tweaks to to the design components on the right, what you can do here is you can actually create a new agent and do all of these little design tweaks before you do this third prompt just to make sure you've got everything

right. And this is going to and that's

right. And this is going to and that's going to basically ma make sure that all your components kind of like working and set up exactly as you want before you create the full like comprehensive style

guide. So this prompt says in this

guide. So this prompt says in this project create a folder named design and create a design system.json file. in

this folder that outlines the exact styling for all components and styles in this app along with the highlevel design guidelines. The goal with the file is to

guidelines. The goal with the file is to create a comprehensive guide for AI to follow when building new features in this app. And let's change this to GBT 5

this app. And let's change this to GBT 5 uh because GBT 5 is generally better at writing uh code for UI um and information about UI and extracting UI

styles and all of that sort of stuff.

And let's send that off to be done. And

that is going to create that design system.json. JSON file in our project

system.json. JSON file in our project and we can either use that design system.json file to reference in cursor

system.json file to reference in cursor as we're building our app and kind of keep this page this design system page separate from our app so we've always got it there as a reference within our

app project or we can copy all of the information on the design system.json

file and give that to lovable or bolt in order to design our app in a specific style. So, we can either copy and paste

style. So, we can either copy and paste it into Bolt or Lovable, or you can copy and paste it into the knowledge section in Bolt or Lovable so that it always follows that style guide when it's

building stuff. You might, if you've

building stuff. You might, if you've already built something in Lovable or Bolt, you've already built an app and you want to translate the style into something new, you might want to use a prompt that's like, "Refactor the entire

UI of my app. Do not change anything functional, but follow these exact design guidelines." and then paste in

design guidelines." and then paste in your full design system.json file into lovable or bolt. That is a way that you could do it. Or you could add it if you're building something from scratch,

you can always add it in. You could add it in your first prompt if you just want to start from design. Although that

might be a lot of text and could confuse the AI when it's building the first version of your app. Or you could add it into the knowledge in the settings in lovable or bolt. if you want any new

feature that you're building to follow a specific set of rules or if you're just doing work on the UI and you only want to focus on those changes. So let's wait for GBT5 to be done here and then come

back and have a look at our design system.json file. So GBT5 has now

system.json file. So GBT5 has now finished writing our design system.json

file. Let's have a look at what this file uh actually includes and you'll be able to see how much detail it includes here. This is um we go back to this this

here. This is um we go back to this this view. It's 646 lines of uh text, which

view. It's 646 lines of uh text, which is basically every single thing in our design system for all of our components that we need for our app. It's got all

of the brand information, the meta information. A lot of this is the same

information. A lot of this is the same as what we had in our design.json file,

but this is just more specific detail based on the actual components that it's built here. Um and this is actually a

built here. Um and this is actually a really nice view. um looking at it here to see like all of these laid out next to each other. Um and it's given it every single every single definition for

all of the components that we've got in our kind of design style system like our design system guide um page that we've built here. Every single style um all of

built here. Every single style um all of the variables this is all written in this is all in Tailwind as well or specific to Tailwind. So it will work

with any of these kind of app building tools that use Tailwind kind of as their base kind of style system in their app or if you're building any app that uses Tailwind as styling which is a very high chance that you're going to be doing

that because that is seems to be just the um styling kind of framework that all apps are using nowadays. Um we've

got a bunch down here on guidelines as well which is super useful. So you've

got structure, spacing, fonts, colors, style accessibility motion interaction, data visualization, content, all dos and don'ts. And why

this is a really good place to work from is because now you have all of these rules set up. You can also change this file as you build if you want to do slight tweaks to it as well. We've got

our foundation. Now, we can do tweaks as we go, especially if you're working in something like Cursor where you can see all of these files separately and just go in and make tweaks. And if I do want to build any feature um in my app, I can

just go to create a new agent here in cursor and I can just do at and reference my design system.json in any changes that I'm making um to my app.

And even like if I want to make specific changes in the browser um I can al using the browser and selecting a specific element I can even use the select element view in cursor to actually just

select. So we would b basically like go

select. So we would b basically like go down to this toggle here and say like okay this button um actually on the right hand side it doesn't have enough spacing can you update that and can you

update design system.json as well to reflect those changes and that will keep our design system and style guide up to date with everything that we build. So

you can see how by following this simple threeprong framework for taking a screenshot, extracting the design style from that screenshot and creating a guide for the UI to follow when building

your app, then building your app using Tailwind and translating all of the all of that design guidance into Tailwind and React styling and then actually

creating a design system framework kind of off the back of that app that you've built and adding that to a folder in your project so that you can reference that design system at any time can

actually give you much better results when you're building your app using AI coding tools. And this is so much better

coding tools. And this is so much better than just dropping in a screenshot and asking it to copy it. You're actually

getting a complete set of components all with defined styles all listed out in a comprehensive guide that your AI coding tool can follow step by step. And if you

are building an app with AI or you want to get started and try it out, then I've got a community helping people do just that over at school.com/iapps.

You'll learn how to build your app from scratch in 21 days and also a ton of other things like building mobile apps, building AI agents, and more. So head

over there to check that out. If you

enjoyed the video, don't forget to like and subscribe. It means a lot to the

and subscribe. It means a lot to the channel. Thank you for watching and I'll

channel. Thank you for watching and I'll see you next time.

Great product.