How To Make Cursor AI Overpowered β
Let's learn how to use Cursor AIπ
2025-11-01
Transcript β
[00:00] Cursor AI just released a new update where it makes it so you genuinely don't need to know how to code anymore. In this video, I'm going to prove it to you by copying this exact landing page by Stripe. All these sections, all these parts, everything. And to put simply, I'm not going to write a single line of code. I'm going to prompt everything. This should prove to you that we're in a new age and this is just ridiculous. Welcome back, y'all. In today's video, I'm going to show you how to leverage Cursor's ability of agents with another ability that makes it absolutely ridiculous when it comes to front-end development. First off, let's just
[00:30] create a new project. Open project. Simply name this folder. How is this possible? First things first, let's create just our text stack. I'm going to use a React app. I'm simply going to put in create a React app. This is the canvas we're going to paint on and show you this crazy use case I just found. What's even crazier is this use case literally wasn't possible like a couple weeks ago. First off, that simple prompt is going to build out my entire infrastructure for my app. It's amazing how far we've come, y'all. This is going as far as installing all the relevant dependencies as well, but this isn't the magic yet. This is just insane. First,
[01:01] I'm going to simply just say run app so we can see this in a browser. Gives me the relevant link here. And this is what it started with. Now, let's get crazy. Create a new chat. And this is our current app. But let me show you this new feature. First off, for this to work functionally the best, come over here to a pass command. Notice how it says run everything. Make sure this is selected. Hit continue. This is so that essentially you don't have to write anything. No code, nothing. Hit a new chat. Enable browser. Once browser is enabled here, watch this prompt. I'm simply going to say our current website is the link that we just saw there. I
[01:31] want this site to look exactly like this page. Provide the website link. This was the relevant website. Download all the dependencies needed to do so for the icons. Can leverage free icons from Font Awesome. You're asking yourself, Corbin, how the heck did you know this? Ask a Chad DBT chat. But essentially, this is a free library that uses the icons we can use throughout our front end. What is an icon? An example of an icon is this little check mark here. Leveraging something like Font Awesome allows us to get access to all these free icons. Point being though, when doing this kind of workflow you about to see, include this line. Also, include other dependencies that might be relevant to
[02:01] you, such as Stripe integration. For now, though, watch the magic. Enter. Actually, there is one last thing I forgot to add. This prompt is fundamentally very important. Don't stop coding until our app looks exactly like and then gave the link again. Enter. First thing it's going to do is it's going to open up an incognito browser so I can actually visually see both of these pages. Next, it's going to actually create a to-do list to follow for the exact steps. Therefore, allows me while this is going to simply click this and be like, "Where you at, agent? You're still not done? Let me get some
[02:32] coffee real quick." If it doesn't open up the link, simply say, "Open up both links for vision context. Enter." And it'll put it in the queue. If during the development process, you want to make sure that it reads that before doing anything else. Simply hit submit now. And look at that. It's currently opening up the site. It'll open up right here. And it'll functionally be able to take screenshots and make our changes here. And just watch the magic. It went ahead and went to Stripe's specific page. Took a screenshot there so it understands context. This is crazy, y'all. Gone are the days we have to screenshot very specific components. Drag it back and
[03:02] forth. No, no, no. It's just going. I'm going to let this agent work here. When I go eat some food, and when I come back, I guarantee you it'll all be done. So note that we literally have an autonomous AI developer that may take 10 to 15 minutes to code out the executed task. But what's crazy now is it'll actually code it out. Now I want youall to notice this. I've done no input so far. Whoa. And it's not done yet. It's going between Stripe's page and my page. Copying, pasting, screenshot, mimicking. All done. I'm not touching anything, y'all. Make sure to leave a like. It's
[03:33] completely free. And it's not done here yet, y'all. At the end of this workflow, we'll compare side by side and see what the differences even are and why those differences even occurred. So now it's double-ecking it's worked. It navigated back to the stripe.com pricing page and then it'll navigate back to our page and make the sudden changes. Once it's done, we'll get a confirmation here. This is no joke, y'all. For one, that only took up 37% context. One thing you need to know about this whole workflow is you can go down really, really deep rabbit holes and it will just summarize that context and let you keep proctoring.
[04:05] Let's see these side by side. So, here we go, y'all. This is Stripe's official website, and this is the app we created in under five minutes using this new cursor AI feature. Scrolling down here, we have the first section, features available out of the box. One thing I want you to notate is notice it quite literally got the exact text. Insane. Now, yes, some of y'all might be like, Corbin, this doesn't look good. Just reproctor the agent and tell it specifically to fix this to make it look like this. Scrolling down. Solid. First step done. Scroll down here. it was able to get all the relevant different UI
[04:35] cards and keep scrolling down and we were able to get a similar footer to the stripe here. Now, yes, this isn't carbon copy exactly, but as you could probably tell, if I spent the next hour just going back and forth using this method, I'd probably get the exact same page. And I did all that without writing a single line of code. So, if you want to learn more methods like this, make sure to subscribe here. Make sure to leave a like. It's completely free. I do a ton of stuff on this channel in this new age of coding where we're not teaching it like it was in 2017 where you're watching a video, the instructor is
[05:06] boring, the instructor basically is writing out a bunch of code that we don't even need to do anymore. This is this is the new era of coding. So, make sure to check out here. Also, I provide a bunch of free source code and this is the last thing you should check out from this video. If you're a builder like me, check out the community down below. It's completely free to join. Think of this like a Reddit form that allows us to give questions, errors you run into. We help each other out. Everything you'd possibly ever love about AI in this new [music] age. Check it out in the description. And some of y'all might be like, Corbin, where's that free code you were talking about? That source code. Well, I be dropping different stuff on
[05:37] my ex. So, check out my ex. Okay. We just dropped a new thing for Claude skill. If you don't know what that is, check out my channel here. I give you everything. And I was able to create a free to download skill that you can utilize right away in your Claude. And there we go. As you already know with these style videos, I'll see you in the [music] next. Did Cursor AI with this new feature basically kill all front-end jobs? And front-end jobs are just cooked in the job market. Better.