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

0:00If 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 [music] 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, 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

0:33the 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. 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

1:11apps 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 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

1:41it 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 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

2:11for 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 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

2:44bit 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

3:18a 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 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

3:51go through these three steps, these 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 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

4:33a 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 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

5:03top. 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 better at visual and user interface um 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

5:38wouldn'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

6:07we'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 JSON is, it's essentially just a data um 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

6:43within each of the components and the design style that we're working with as 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

7:08file 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

7:39design style from this from this design system screenshot that we've given it 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

8:00going 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 guideline of what we're going to do 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 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

8:34see that cursor has created our 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 design.json file. So let's just jump over to the editor view and open this 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

9:13pretty 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 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 styles here, some rough styles that it can use. So we've got border radius, break points, um grids, some colors here, some neutral colors. Um it's not

9:52given 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 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

10:25that. 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 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 and for this I'm going to change it to set 4.5 and we're going to put in this

10:54next 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

11:24weekly 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

11:57so 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 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

12:30that 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 or bolt, it's it's going to build it

13:02with 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 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 tasks, but I would say it's better at

13:37visual stuff and it doesn't do the more um structural or like complex tasks as 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 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

14:03this 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

14:34going 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 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

15:08system 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 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

15:38it 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. It's built our app for us, what's 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 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

16:14stuff. 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

16:40these 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 right along with all of the files that

17:09it has just created. And what we're going to do now we're in this browser 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 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

17:42just 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 majority of the components that we'll need in our app in our design in the design system for our app. And this

18:20basically gives us a great foundation. You can already see like um compared to 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 some specific fonts, it's like almost 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 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

18:55that 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 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

19:28there. 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 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

20:01here 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 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 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

20:33create a comprehensive guide for AI to follow when building new features in 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 and we can either use that design 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

21:09app 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 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 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

21:45functional, but follow these exact 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

22:16specific 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 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 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

22:53of the brand information, the meta 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 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 the variables this is all written in

23:30this 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

24:08this 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

24:37changes 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 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

25:10you 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

25:48than 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

26:08that 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 [music] means a lot to the channel. Thank you for watching and

26:24I'll see you next time. Great product. [music]