Cursor Released a Front End Guide (It needs to use v0 instead)

Hello. The cursor web development workflow. Let's talk about it. If you've watched this channel for a little bit, then you've known I've spoken about how Figma needs to have a better bridge into cursor. And with the latest updates, both on the cursor side and the Figma side, we're getting just that. Also, there's this and this. These are new. This is Val. Hello. Val is the co-pilot for VI, the community that I run. and it's gonna be awesome. It's a co-pilot. So, we just announced that today. Let's get into it. They are doing a great job. They being cursor in releasing guides. So, we're going to talk about the web development guide, what it means for you, how you can gain the most amount of value out of it. Because in the AI SDLC, AI software development life cycle, UIUX is a big missing link. We don't want everyone's apps to look the same. We want to have flavor. We want to have taste. And if you want to see the AISDLC, we also launched that today. That is a chain of prompts part of the Vibe with AI public repo and it's getting built out now. But yeah, this is what I'm going to be referencing throughout the video is the software development life cycle. So inside here you have the different prompts for each step. Going to be beefing this up because there are more steps to that, right? If you're doing everything, we're gonna be talking about UIUX in here, but there's a lot of steps, right? You have technical architecture, system design, UXUI. I always say UIUX. It's a lot easier to say, but we're going to be focused on this one. If you wanted to focus on other areas, I have a whole talk in the community and I have a bunch of free stuff on the YouTube channel that covers the PRD stuff. But for UIUX and the flow within cursor, they outline a process with a mermaid diagram. And so they say, look, web development often involves fast iterations, tight feedback loops between cursor and external tools like Figma or the browser. They've found that having clear tasks, scoping, reusable components, and design systems help things stay fast and consistent. Totally agree. I worked on a client project which is also going to be part of the repo selection. I don't know if I put it in here yet, but let me find it because it's exactly that. has design guidelines within it. So, if I go into this photography portfolio and I jump into cursor rules, I thought I had it in here. Basically, you can make rules around the different patterns that you want used. So, it's we want neo brutalist or we want skumorphic or all these terms. You need to know them. Just basic terms around what designs look like. The way to do that is you can just find a screenshot of what you like and ask an AI, yo, what is this design style? So they say project design, code, test, feedback, verify. Very watered down version. I think that they make documents and guides for the mass audience. They don't the person that wrote this probably hasn't done every step. Like I've been a project manager, a product manager, a program manager, a UX designer, a UI designer, a product Yeah. I've done all the things and then software development as well. So there's a lot of steps but in this case they say start with chat I agree you can do it in line whatever then connect your project management tools. So I use the GitHub MCP and I use it all across the board both for design and then these videos because I have the pipeline on a repo and I can actually just type in and say hey here's the ideas let's ID8 but they say cool connect that due to the current state of MCP the setup can require multiple temps. Yeah, I have a weird allergen to MCPs. They tend to not work, but when you get them working, they're great. Sequential thinking, GitHub, and that's pretty much it that I use until now because there's a design one. So, yeah, you can do this, but that's not the point for Figma designs. Now, this assumes you already have designs, but we want to speed that up, right? We want to actually speed up the design process. So, enter Figma. Now, that is not it. Let's go to our website. I was building out some ideas, some sketches for the user profile for our VI 2. This is the community platform. It's like the hive mind of developers. That's what someone said today in in the Discord. But yeah, it said powerhouse. Whatever. This is a place where people can see what skills developers have or members have. What are their skill issues? I didn't finish the design, but I start with a really basic sketch. So you can start in Excaliraw, you can start in Fig Jam, whatever you want to do. And what I recommend when you're doing designs is you do JB jobs to be done. And then you just type out like needs to show skills. Needs to show skill issues. And then you say, oh, needs to crud skills, needs to crud skill issues. Right? And so you start writing out these jobs to be done. And then you go, you grab the pen tool and start to draw stuff about what should be on the page. Then you can go and either draw the cards yourself. But what you can do now, this is like the old way of doing it. Take this and do all that. But now you can just go and actually prompt in here. And I'm curious because this is my first go at this. A lot of people say just jump to V 0. I disagree. I found that I can with actually working in Figma get way better stuff and it's just obvious. But with this first draft, this new AI feature called first draft down here somewhere in here. Where is it? First draft recents. What you can do is you can just prompt and I gave it a basic prompt. It looks like this. A dark profile page. Let's change the background of this. Cool. So this is the prompt that I gave it. I need a dark mode profile page that lets developers list their skills, example, typescript, javascript, progress. Profile page has a header that is customizable with upload, profile picture with their name, then four cards, one for skills, one for skill issues, one for discord stats with the recent messages stream, one for GitHub with their recently started repos. So I just gave that to this and then boom, wham, it gave me this. Pretty cool. Close. Now I'm going to keep iterating on this in here until I got to where I want. But what's beautiful about it is it does it all in the nice containers and that's great. So I want to see can I make a change. So let's see if we can make a change to this. Now it opens this up and I can see the different types but I actually want to prompt it. I'm going to say I want to have a navbar at the actually I kind of like that nav bar there. What would I want to change about this? I don't like the way that these messages are listed out and I don't like the GitHub activity. So, I'm going to just change that real quick. Update the skills and skill issues to be badges. So, the actual skills that are listed and the skill issues that are listed need to be badges or tags that represent the skills. And then for the second change, we need to update the Discord messages to just be its own section with its own header title. put that within a card. And then to the right of that card, we want the GitHub activity. So skills, skill issues, Discord, and GitHub activity should all be in their own separate cards. Use Shad CN style. Cool. So, let's see what it does. Because this versus just making the code, I know it's going to sound crazy, but I think this is actually the way to go. We'll see because you have infinite customizability and ultimately I think that Oh, done. Really? Wow. Look at that. Huh? How about it? Did literally nothing. Huh? Oh, man. Idea is that you could at least get a little bit fur. A little bit further. And then if you go back into here, you would then connect frame link. So frame link is an MCP. You grab an API key and then you call it and you can then implement the design. So implement your first design. After configuring your ID with MCP, you'll be able to make requests to the frame link Figma MCP server. Copy a link to a Figma frame or a group. MCP server compresses the data received from the Figma API by almost 90%. Even still, complex designs can overwhelm AI agents. You can try to get your editor to complete a whole design, but for consistent results, work one section at a time. To do that, right click on the frame or the group, copy paste as selection. Okay. And then paste in the design. Got it. Very cool. It's so funny because I just did that and it it flopped. Like I want something that actually does the design for me. So, I'm pretty upset about that. What can we do? What can we do to fix this? I guess it's use v0ero. Let's take that same prompt. Let's see. Let's just give it a go. I know they updated since I've last used it. Let's sign in. I'm not editing that, by the way. When's the last time I made something? No dates on it. Sick. It was a while ago. Let's do this. I want to do a large model. No, I don't. I want to do the medium. Sure. See this? Let's see what it's got. Who's better? Is it Figma or is it Vzero? Because I'm here for the best results. I'm not here to sign you up to Figma. So on the right we have Figma. On the left we have V 0. Oh man, I hope it's V 0. It should be a production in steps. And then the whole cursor guide around design is just moot. Here I am trying to follow it, trying to be a good guy. Okay, what do we have here? See, that's actually Oh, man. That's better. That's better. Just kidding. Just go use V0ero. Wow, that is so much better. Good lord, that is Yeah. Okay. So, I guess let's go back to the cursor guide and let's just say that they should edit that because you wouldn't have to use MCPS. You could just grab the snippet. Oh my gosh. Yeah. Simple but powerful in the right hands. Goodbye frame link and hello vzero. Keep your SC your code. Okay. And then they say if you have a design system, this is what I was speaking about before. Here's a UI components MDC to enforce reuse of components. Yes, that should be obvious. As it grows, add new rules accordingly. Give it access to your browser. This one again is very finicky. Out of all the MCPS, browser tools are the most finicky. We're working on making this easier to integrate natively into cursor. Love that. That would be fantastic. We've already seen that in Klein. But the takeaways are to have tight feedback loops. Use Figma linear and browser. Okay. So I'm going to say no Figma. Just write the jobs to be done. Find examples. Upload screenshots and use Vzero if you're in that stack. I'm going to have to build something that can translate V0 to Tanstack, but that's fine. And then if you're not getting good outputs, try adjusting the instructions. Use rules prompts and give access to more context with MCP servers. No thank you. Extend the models context by including runtime info like console logs. Not everything needs to be automated. Okay. Be surgical with command K. So I guess this video is more so don't use MCPS, just use V0 for that because I think this looks good. And that was a one shot. Yeah. Very cool. I'm happy with this. If you guys enjoy this video, you learned at least one thing, make sure you like it. You can also subscribe and I upload on this channel three times a week. I have a daily channel where I do more in-depth stuff. And then we're launching all of the VI stuff coming this month, which I'm excited about. And price is going to double, FYI. If you want your company to pay for it, we can do that, too. We have business expense support, meaning a couple people wanted to join. We realized there's stuff we needed to add. But let me show you some of the stuff that we're doing. Just so you know. Just so you know. Getting upgrades. It's not to be I'm not a course pro. A lot of people are saying that it's helpful. This is the vision. Originally it was course bro to be honest. But then it is turning into now which is a builder network. Yes, it has content. It also has agents for learning. It also has dev tools. So we're building specific dev tools and open sourcing some of them, close sourcing some of them just to us and then agents for distribution are coming later. So if you have an idea and you want to get it out, I'm building myself a bunch of SAS tools and agents that help me with this. You also get repo access with push. So if you want to contribute to anything, if you wanted to break out into a pod with the developers in the group, then you can do. And then in the future marketplace, I'm starting to work with brands understanding how to get discounts for the members such that their membership was covered by the discounts they're getting for SAS that they would already be using. And why does it matter? I'm all about the community. This is personally part of a multiple stool business strategy that I'm implementing. So I build SAS, but then I also want a media company. So that's part of this thing right here, VI. There's a community aspect to it. and yeah, sift through the noise. We have a bunch of automations in there. What else? Yeah, I'm excited about the site that we're building. So, shout out to Michael who is the first contributor on that. And then if this goes really well, then we might end up productizing this and then we'll figure out the incentive structure there. VI does not own the IP of these different repos. It's a per deal basis. And then, yeah, we're upgrading our Discord. We've got a co-pilot that's coming along. That's what that Val thing is. It has summarization, all that jazz. Onboarding, it's using the Google stack, which is cool. Has VMs on there. And then, yeah, the repo access stuff I said about before. This was actually just for members because the price is increasing. Rewards. Okay, cool. Plug. I'll see you in the next one. [Music]