Vollständiges Transkript anzeigen (2.308 Wörter)
Hey guys, so a quick little trick, a quick little design trick that I want to show you today. You can use this with the Cursor Agent or with the Claude Code or CodeX extension. But basically, what this is is that you can find any website like, let's say, framer.com, like, let's say, like this nice little intro section and you can basically copy it, right? It won't be 100%, but it will be probably that like at 80 or 90%. Or you can find something like Fireflies.ai, some some section like this. And as you can see, my localhost, basically gets the same exact design. And I do this inside of Cursor because in Cursor you can open up multiple tabs and I think that's really amazing. But anyways, this is a quick little setup, takes you just a couple of minutes to set this up and then to to kind of like understand the flow. And sometimes some sections in some websites are a little bit more complicated, so you have to like start as as small as possible. But in my opinion, this is like the future of design with AI. So guys, without further ado, let's go ahead and get started. And by the way, everyone, if you guys are interested in these types of workflows, um we have a Discord community. It's called the Creator Network. We get together every single weekday to talk about different tools, topics, workflows. So if you guys are interested in joining that conversation, link is down below. So anyways, obviously in this tutorial I'm using Cursor and you want to go ahead and download Cursor. And once you do that, you want to, you know, open up an existing project or create a new project. And if you don't if you want to create a new project in this case, click on open project and then you just want to click on new folder, name that folder whatever you want and click on create. And then once you open that up you're going to get something that looks like this. It might look a little bit different, so you can like adjust these different toggles up here. Now you can use this agent on the left side, it might be on the right side for you, it always like it depends on everyone, but um you can use this this Cursor AI agent, it's great, right? And um it's native to Cursor, but you can also try it out or try it out with the different extension. So I have for example Claude Code or I have CodeX and you can, you know, click on install over here. I already have it installed. But once you have that installed, you you can just click on the three dots up here and Claude Code, you can open it up in the terminal, or you can open CodeX in the sidebar like like so. And then CodeX is now here. Or again, you can switch to Claude Code, which is like in the same sidebar, and basically they're going to be in this like drop-down panel over here where you can, you know, choose between the two of them. So today I'm just going to close this, and I'm just going to use the Cursor agent. And before I start prompting anything, I just want to set up the the the different things that I need. Now, the first thing that you want to do is go to magicpath.ai and you can use a, you know, a free account for this. You don't really need a paid one, and you want to click on create a new design. Now, once you opened up a clean file, you're going to want to copy this link that I'll have down in the description below. This is basically to install like the MagicPath plugin inside of Cursor. And then once you have that link copied, all you want to do is you want to make sure that you click on the Cursor settings, and then go to Plugins, and then what you want to do is you want to paste that link over here, and you're going to see MagicPath. So you're going to give this a click, you're going to say add to Cursor, and here it's going to say add to project or add to self. Let's just put add to self because then you could you can run this with all projects. And then what we can do here is we can hit this control this command or just click on this, so we have a new browser, and we can search for MagicPath, right? And as you can see, we have our new file that we created, inside of Cursor. And we can just ask Cursor like, hey, what project do we have open inside of MagicPath? And then once you ask it to do something, it's going to ask you to authenticate yourself so that it's properly connected. So you want to do that. And then the next thing that you can do here is install this Chrome extension. It's called Web Capture HTML to React with MagicPath, and once you install it, you're going to see it, it's going to look like this. And then once you have that installed, you can go to any website, really, and you can open it up, select an element. Let's say that we want to select this whole hero section. We copy that, and then we can go back into MagicPath and then just click on paste. And then we have our Fireflies AI hero section captured over here. And now, something super important to notice is that this will work for all websites. This works for most websites and it's going to get you, you know, 80 or 90% there. So for example, you have beautiful websites like stripe.com, which have like these beautiful, I guess 3JS, uh types of animations in their hero section. These are obviously a little bit more complex to build, but you can, for example, you know, copy the buttons or copy the text or copy this section up here or this this little ticker at the bottom. And what's cool here is that you can select anything. Let's say that we want to make the button radius a little bit like sharper in the edges or in the borders, so we can select this button and we can, you know, make the border radius a little bit like so, like four. Select this one as well, and do the same thing. Maybe we want to change the font over here, you know, you can add a custom font if you wanted to, or you can just choose some other type of Google font. So I for example, can do this. We can click on done. And then what we can do, since we have this component selected inside of MagicPath, I can go to my prompt, and I can say, let's run the selected component in the localhost. All right, and now once we have that ready, we have our own localhost link, which I can just copy this path, and then go ahead over here, and we want to we want to open up a new browser tab, and then just paste in this link, and this is what we get. So exactly what we we what we had inside of MagicPath, now in our localhost. And now what's also really great here is that let's say you you want to open this in Figma and kind of adjust different things manually. Well, you can do is you can select this component, you can click on this little Figma icon up here, and that's going to basically prepare a Figma copy that you just have to wait like, you know, a couple of seconds. All right, boom, now it's done, 80 Figma layers. So we can just paste this in Figma with, you know, command V. And I'm back in Figma and I can just paste this in here, Command V. And you once you paste it in, you're going to get something like this. And obviously, you know, it's not perfect, you're going to start missing some images, but that's totally fine. You can just go to the original website and copy the image and paste it in here. And also, you know, with the logo, it's like an SVG, you just have to kind of, you know, re-render it somehow. But you know, you can go in here, you can change a few things, you can select this button, you can, you know, edit the drop shadows, um you know, edit the colors of this. But again, at the same time, why go back into Figma if you can also just do that here? You can select this component, and you can click on this little tool over here, Visual edits. And then, you know, select this button, change the color, change the the appearance, and so on and so forth. And I also honestly think this performs best when you're like building something, and you want to steal like some type of component from some some particular website. So for example, I really like this expert section in the Framer website, where you can hover over these different images and then a second image comes and then this little like button pops up over here. And you can like view this expert and, you know, see their page. So again, it just go through that same process. Chrome extension select element. You can select just this one element or like this, um this whole element over here. In this case, I'm just going to select this element. Copy command uh component and then go back over here, you can paste this in here and going back to our local host link. Let's say that we want to add it at the end of our page, so we can go back here, select this and say, hey, add the selected component at the bottom of our current local host page. And then we can go to the bottom of that page, and as you can see, we have our new component straight from Framer inside of our Cursor, or or our local host built by Cursor. And last but not least guys, I'm just going to open up a new browser tab and I'm going to search for Mobbin MCP. And we're going to open up this link over here. I made a great video about it, you can check my channel. I'll I'll link it down below, and I basically like use this with Cloud Code and I built a bunch of examples, but basically what you can do is you can get this, you can scroll down over here, go to Cursor, and then you just have to follow this process. So let's just copy this over here and then let's go to the settings Tools and MCPs, so let's just do that really quick, Tools and MCPs, I already have it installed, but what you want to do guys is just click on new MCP server, and then just remove this and then paste that in here and then click on save, and you'll have it um automatically like added over here. Or you just have to kind of like, you know, authenticate yourself. You do need a paid Mobbin plan in order to use this. But again, like I can select this, I can say, view and analyze this component in MagicPath. And then using Mobbin MCP, search for three other similar examples. And then what's cool about Cursor is that, you know, not only does it give you the results, but it like shows you the visuals of that of these results. So as you can see, it actually searched for like 12 different screens. So I can just like go through these screens like this instead of having to open link per link. This one from Savvy looks nice as well. And then it gives me these three final ones as like the, you know, ultimatum. This one saying from Contra is like the closest match, so we could just click on this, and we can see that we get this. I don't really like this one, so I, that's a good thing about the preview inside of Cursor, that I can just say like I saw the Suno one, can you send me the link for that? And then it says here is the Suno Mobbin screen link, so let's just click this, and then exactly, this is what I want. Now, I can go back and theoretically tell Cursor like, hey, let's build that underneath um the other component that I have in MagicPath. Or to be a little bit more specific, we can just take a screenshot of this. And I'm just going to drag and drop that screenshot in here. I can say please build this attached image from the Suno Mobbin inspo underneath the Experts Showcase Grid component in MagicPath. And then eventually, you know, we can add it to that local host page, um, obviously it's not using the same exact images from the Suno component that that Mobbin gave us, but it has the exact same structure in terms of layout, you know, this circle image and then like the three text underneath. But yeah guys, that's pretty much it from my side today. Hope you guys enjoyed today's video. If you have any comments or questions, please let me know down below. And like always, thank you all so much for watching. It means a lot, and hope to see you next time. Goodbye.
Video
