YouTube Deep Summary

Are you struggling to turn beautiful website designs into actual working code with cursor? You're not alone. In my previous video about building beautiful websites with cursor, you guys absolutely loved it and it got an amazing response. Here's the thing though. In that video, I actually showed you how you can get a beautiful UI, but I didn't show you how you could properly implement it. You can't just go ahead and tell cursor this is the design file or use this reference, ask it to clone it, and then expect it to work. it'll actually start to build stuff on its own which usually ends up as hallucination or AI slop that no one really likes. So in today's video I'm going to tell you three ways you can actually build the beautiful UI that you created. Whether you're coming from my previous video or you're completely new here by the end of this you'll know exactly how to get cursor to build the websites you actually want. So in the previous video I actually shared a prompt that allowed you to convert any design image you gave to an AI model like claude or chatgpt into JSON format. Then using that JSON format you could accurately create a design template and reuse it anywhere. Well, I've also improved that prompt a little bit and made some changes so that the JSON output is even better. You'll find this updated prompt in the description as well. But to start building projects you can actually scale, you need this first method. So let's go ahead and get started. This is actually a pretty powerful prompt template that we've developed. Instead of cursor guessing what you want, this injects the full functionality and structure of your front-end app right into the AI's context from the start. There are specific prompt fields to fill out. First, the required pages that need to be made, then user roles and permissions for authentication. If you want authentication in your app, which is actually very important for real projects, then you absolutely need to include this. Shared components are also mentioned like navigation bar, header and breadcrumbs. Then we have modals and pop-ups which if you list them at the beginning really helps because the AI will develop the front-end app accordingly and everything gets integrated properly. There are also technical requirements you can include which make it way easier to connect the app to a back end later on and you can specify whichever framework you want to use for your app. The best part is you don't even have to fill this out yourself if you don't want to. For example, you can see that I gave the prompt to Claude and it just went ahead and filled everything out for me. And the reason I gave this prompt to Claude is what I want to demo. So, I wanted to make a weather app with the style and design of the cursor landing page. You can see it has this gradient infused layout where the same gradient is used throughout all the components. What I did was take around six or seven screenshots, put them into Claude, and gave it the prompt that produces the JSON output you saw earlier. Claude then generated the JSON for creating a web app with the cursor UI design profile. Since I wanted to build the full front end of the weather app, I told it I'd be using Nex.js with Tailwind. So, I specified the framework. I also asked it to fill out the front-end template we looked at earlier, and it did exactly that. It created the required pages, the user roles and permissions, the modles and pop-ups, and it even added technical requirements. Because we gave the full prompt to Claude, it could pre-plan all the components that need to be made. That means cursor or any AI agent you're using doesn't have to guess or figure out what components to create and you don't have to face the frustration and you can always go back and edit things later. Nothing here is set in stone. All right, let me show you the first method in action. You can see that I'm in cursor right now and this is the design.json file that I have open here. This is the JSON file we got from Claude. After that, I asked cursor to install a nextjs app. I gave it the full prompt that claude filled out using the template. I told cursor build the front-end app in this nextjs app and for the design strictly follow the design.json that I provided. It went ahead and started creating the app. Now, it did take some time and there were some version conflicts that cursor couldn't handle. So, I brought in clawed code to help fix those. And this is the website it generated. You can see that it accurately follows the gradient design we saw on the cursor landing page. In the prompt, I specifically asked it to focus on how the gradients were created, which is why it looks exactly like this. If you look at the cards below, you'll notice they also mirror how the cards were styled on the cursor landing page. The rest of that page was mostly clean and dark, so there wasn't much else to pick up from the JSON. But as you can see, it nailed the gradient design perfectly. Now, I want to be transparent here. This design wasn't perfect on the first try. Cursor made some mistakes that I had to correct, but it provided an excellent foundation to work from. Later on, I'll also show how you can accurately do that as well. 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, the second method is perfect for when you want to copy the structure of an existing site and then apply your own design on top of it. This is incredibly useful because instead of building everything from scratch, you can leverage proven layouts and just make them your own. For that, you can use this amazing tool called Browser MCP. It's completely free and I'll link it in the description so you can grab it right after this video. Browser MCP has two parts you need to set up, but don't worry, it's straightforward. First, install the browser extension from the Chrome Web Store. This extension is what allows the tool to actually interact with web pages. Then, for any page you want to clone, you just connect browser MCP to that specific tab like this. Second, you need to set up the MCP server inside cursor itself. Go to their documentation and in the install section, find the setup for your IDE and paste the config into your MCP.json JSON file. Pretty straightforward and their documentation walks you through everything. Once that's done, I recommend using the prompt you see here and filling it with the link of the website that you want to clone. Now, I choose the monkey type website as an example, but honestly, its structure is pretty simple. So, there wasn't much to copy. But even with this basic site, it still did a solid job, which shows you how powerful this method really is. Here's why it works so well. This MCP actually spins up a real browser and navigates like a real person would. It's not just scraping HTML. It's actually experiencing the site. You can see it has a browser screenshot tool that takes screenshots, helping it understand not just the code, but the actual visual structure and layout perfectly. In the prompt, I tell it to explore the website thoroughly and break down the architecture, navigation patterns, and styling approaches. If you want to use your own design with the JSON method from earlier, just remove that part from the prompt and it'll focus purely on structure. After it gathers all the data from its exploration, I asked it to build the clone in next.js. And here's the result. It created this fully functional site. I can type in it. It catches errors properly. Different modes and pages work seamlessly because it actually navigated and understood how the original site functions, not just how it looks. Now, this method gives you the perfect foundation and structure. But what about when you need to apply your own custom design on top or make precise tweaks to specific elements? That's where method 3 comes in and it's a game changer. So, the third method focuses on something that's absolutely crucial, making precise UI tweaks without breaking everything else. What I'm going to show you is how to get this interactive bar that lets you select individual or even multiple elements and send them back to Cursor with exact details about their location and what those elements are. This eliminates the guesswork and ensures Cursor knows precisely what to edit without messing up the rest of your site. And trust me, this precision is everything when you're working on real projects where one wrong change can break your entire layout. The setup is actually really simple, but the results are powerful. Just go into cursor, open the extensions tab and search for stage wise, install it, then open your command pallet with command plus shift + p, type stage wise, and it'll bring up all the related commands you need. Here's something important to keep in mind. You have to set up stage wise in each project individually. It actually modifies your code and sets everything up automatically for that specific project. Just select the appropriate option and it will enter a prompt into your cursor agent telling it to initialize the stage wise bar in your project. I've already done that setup here and as you can see it ran the full prompt and set everything up perfectly. Now I have this powerful tool where I can select each element individually and send it back to cursor with exactly how I want it edited. No more vague instructions that could be misinterpreted. For example, look at this restart button right now. It's just plain text and only becomes a button when I hover over it. That's a small UI tweak, but this is exactly where stage wise becomes super handy. If I just went back and told cursor to update the restart button, there's a chance it might fix it correctly, but there's also a chance it might break or alter something else entirely, which I obviously don't want. Instead, I can be surgical about it. I open the prompt box, select the exact element I want to change and write precisely what I want, like adding a proper hover animation and making it consistent with the rest of the UI. When I send that prompt and go back to cursor, you'll see something amazing. It includes all the accurate data, the element's exact location in the code, what I want changed, and other useful context information. I send the prompt, and as you can see, the button has been updated perfectly. It now matches the rest of the UI with this yellowish theme. And when I hover over it, there's a subtle animation. And this is exactly what I wanted. This level of precision is what separates amateur projects from professional ones. And Stage Wise makes it accessible to everyone. That brings us to the end of this video. If you missed my previous video on three ways you can build a beautiful website using cursor, the one I've been referencing throughout, definitely check that out as well to get the full picture. If you found these methods helpful and want to support the channel, you can use the super thanks button below. It really helps us keep making tutorials like this. Thanks for watching and I'll see you in the next