Transcription
Yo, cursor, build me a sick app. It's got to make at least a million dollars. Make no mistakes or you'll be fired.
If that's the way that you're coding with AI, I got to tell you, there is a better way. But you also don't need to spend hours pouring over every single line of code or creating a complex plan with 10 requirements documents in an AI scrum master. After trying lots of different approaches, I found a way that's simple, is quick, and writes high-quality code. And today I'll share that workflow with you step by step and then I'll show it to you in action.
But before we get further into the video, I want to ask you for your support. I just built a product called Vibe Scan and we're launching on Product Hunt this Saturday, August 9th. If you like the product on our launch day, you can upvote it or leave a comment and I'll show you a demo of it later in this video.
Anyway, let's get into the workflow. You might have heard of context engineering and spec-driven development, and that is at the heart of what I'm doing here, but I have a very simple approach to it all. There's no additional software to install or any special steps other than setting up what I like to call command prompts, which are really just prompts that you're going to use over and over that you save into a file. And then you can tag those prompts to create a feature, to create a project, and to review code. And that's it. It's just those three prompts and this is what they look like. They're pretty straightforward. Again, stuff that I would just copy-paste across multiple chats.
So to start a new project, I will create the product brief that's going to give me just enough context so that when I want to build a new feature, I can tag it and cursor is going to understand what the heck I'm working on in the first place. Then I embed the technical guidance into the cursor rules file. The cursor rules file is a set of instructions that cursor follows in every single chat that you have with it. So I like to put the technologies that I'm using in here because it's going to make sure that everything that we build is built consistently. So for example, I give it a list of technologies that I have in here. I tell it what command to use to install new packages. I tell it to use a functional programming style. Different projects are going to have different cursor rules, but I like to use this as a way to keep cursor in line from a technical perspective. And then the last thing I like to do for starting a new project is to use a starter kit like create-next-app or create-vololo-app. That's just going to give you a lot of stuff out of the box that just works. You don't want to spend hours troubleshooting Tailwind version 4 and getting Shad CN set up. Skip all of that. Just run `npx create-vololo-app .` and you'll have a full-stack project configured and you'll be ready to start building features. It's totally free and open-source, link in the description, and you can use any other kind of starter kit, but I advise that you start with something because again, it'll just result in a much more consistent project.
Okay, so you got the project set up, but now you need to actually build the different features and iterate on the product. This is where the workflow really kicks into gear and these are the steps that I take. First, I plan a feature using this "plan feature" command. We'll get it more into the details of that in a moment. The result of this step is going to be a document that looks something like this. It's going to detail all of the technical steps that are necessary to implement the feature that you described. Cursor agents are going to look through your code and find all of the relevant files and figure out what needs to be done and write it into that plan file. Afterwards, you're going to actually review the plan and make sure that everything is aligned. And it's super important to spend a lot of time on this. In fact, I would say that half of my time developing is spent during this plan review phase and then iterating on the plan because I'll find things that need to be aligned and I'll ask Cursor to fix it. Finally, you're going to end up with a plan that you're happy with and then you move on to the implementation phase. And you can just tag the plan and ask Cursor to implement the whole thing. Or if it's a more complicated feature, you could have separate phases. We'll talk about that in a moment as well. Either way, Cursor is going to build out your entire feature and you're going to have a bunch of different files created.
The next thing you want to do is have an automated code review. So, we have this other command, "code review," and that's essentially going to look for a bunch of common issues that AI likes to create, and we're going to review the code and then create a review document that allows you to see at a high level what was done, what's missing, are there any bugs. This code review is going to look something like this. And the cursor agent will have gone through all of the different files that were modified, checked it against your original plan, and then outlined any specific issues or things that may be missing. This gives you an opportunity to fix problems before you start testing and reviewing the code yourself. And it also gives you a good road map of how the feature was implemented so that you can look at the specific files yourself. Based on the review, I will usually have the agent that created the review fix some of the issues that it identified. Finally, when the changes are made and the review looks clear, I like to do a manual test and just open the app, go through all of the steps for the new feature that I built, and make sure that everything is working properly. Often times there will be bugs and errors that come up in the console log or on your server, and I'll just paste those back into cursor and have it fix them. Eventually, the feature works kind of how I expect. And at that point, I do like to review the code. I use the review document as a road map. And then I also use the cursor navigation to go across the different files and just make sure there's nothing crazy going on. This is also a good point at which you can scan your code for any security, performance, or code quality issues. And that's exactly why I built Vibe Scan because it gives me that extra layer of security and peace of mind knowing that my code is good to go.
Okay, now we're going to jump into the code and things are about to get a little bit more technical. And if you're feeling lost and you want to learn how to use all of these AI coding tools step by step, make sure to check out my new course on Skill Leap AI. It's AI Coding for Entrepreneurs. In that course, we walk through every step of coding with AI, starting with ChatGPT, building a landing page with Lovable, and building a full prototype using Cursor. It's a super useful resource, and there's a 7-day free trial. So, if you're interested, check the link in the description.
All right, let's get coding. I'm going to be building the same app that I built in the Cursor video, which is a Dungeon Master assistant for Dungeons and Dragons. And we'll start off with a simple character generator. So, the first thing I'm going to do, I have this empty project. I'm going to run `npx create-vololo-app .` That's going to initialize the project in this folder and have all of the technologies preconfigured so I get authentication and a database out of the box. In addition, there's already a cursor rules file that comes with it. So, we already have that covered.
Okay, looks like it's set up my app. I can start it up. And now, if I go over here, we have the app up and running. I can just use any email to sign in.
Okay, so we have the app started. The next thing we need to do to get the whole project kind of initialized is create that product brief. That way I can include it when necessary to let Cursor know what we're working on and what's the bigger picture context. So I'm going to go back here to my project. I'm actually going to go open up the `docs` folder and we'll create another one here called `commands`. I'm going to copy-paste these commands that I have and these are just again, simple prompts that are just written directly into a file that I can just quickly use in the chat here. So in the chat over here, I'll just say `create brief` and then I'll provide my product description. We are building an application to help Dungeon Masters plan their D&D campaigns and it's going to be called Dragon Roll. It will include a variety of different tools such as a random map generator, NPC generator, loot generator, and so on. We will use AI and allow the Dungeon Master to input certain prompts or use the tools directly.
All right, I've submitted the prompt and we should have the product brief ready in a moment. Okay, here we go. Here's the project overview. We got a primary audience, primary some benefits, and we got this high-level overview which includes the information that we already have in our cursor rules. This is a good amount of context. We don't want to have hundreds or thousands of lines of details. We just want to get the point across.
Okay, now that the product brief is ready, I'm just going to keep that. We'll open up a new chat and I'm going to start working on the first feature. I'm going to tag `plan feature`. And this is what that prompt looks like. And then here I'll describe our first feature. We want to add a new page that is going to be our NPC generator. To implement this, we are going to use the OpenAI API to generate the description of the NPC as well as a name. And we'll also generate an image for the NPC using the OpenAI GPT image one model.
Okay, let's start out with that. As you see, Cursor is going to look through all of the files that we already have to get an idea for how things fit together and what files it needs to change to actually make this feature a reality.
Okay, so it's put together the plan. And as you look at this, you'll notice a few things. It doesn't include any sort of business-focused or product manager-type of stuff. It really just focuses on the technical things that need to be done to implement the feature. I find that this helps the AI focus and really be in that sort of engineering coding mindset and not get carried away building a bunch of stuff because it seems like it would be a nice feature to add. The other thing you'll notice is that we don't have code in this plan. I like to leave the code writing to the AI that actually implements the plan rather than trying to embed it into the plan because again, I just find that it distracts the AI and also makes it more difficult for me to read through and understand exactly what we're planning. Reading through the plan, we got a new page that looks good. We're going to hook it up through these other files. We have a new endpoint and on the back end, we have a file that is going to do the generation. We'll have a tool which is our OpenAI wrapper and we have a new database schema. This all makes a lot of sense to me. I see one issue here which is that it wants to use DALL-E 3 because it doesn't know about the GPT image one model. So I'm going to go ahead and update that right here.
Okay, overall this looks pretty good to me. I'm going to open a new chat and I'll just say `please implement plan one`. And given the way that the feature was written, that's really all we need to say. Now, if it was a bigger feature, we might want to break it up into phases. And the way that I like to organize that is to have Cursor implement a data layer change. In other words, any sort of changes related to the database. And then I like to run back-end development and front-end development in parallel. This allows you to use multiple agents at the same time. And then afterwards, you can review the code for those phases separately and have one more integration phase that brings it all together. And by the way, you'll notice that Cursor now has this task list that they manage on their own. And this is going to drive the AI through implementing all of the aspects correctly. You don't need to create a whole separate task list outside of Cursor.
Okay, looks like Cursor has completed all nine of those tasks. And now we have a couple of final steps to set up the OpenAI API key and then run this command to update our database. So let me go ahead and do that.
Okay, the database changes got applied and we have the OpenAI key set. The app is still running. So I'm just going to refresh. And now we got an NPC generator. Take a look at that. And I mean, it looks pretty nice.
Now before I try this out, let me go ahead and have the AI do an automated code review to make sure that everything was implemented as expected. So, I'm going to actually start a new chat because if you ask the AI that implemented the feature to review it, it's more likely than not going to say that everything was done according to plan because it just did all that work. So, if you open a new chat and ask that to do a review, it's more likely to be unbiased. So, here I'll just tag `code review` and then I'll tag `plan one`. And that's it. I don't even need to write anything else. It's going to understand the context that I want to code review on that plan.
Okay, the plan has been created. Let's take a look. So, looks like most things are implemented properly, but it did find some issues. Okay, "Image generation model discrepancy: Plan specified researching GPT image one, but implementation uses DALL-E 3." So, although it assesses that this is not a problem, I'm really glad that it caught it because obviously we want to use the actual latest model. And then we got a couple of additional minor issues. So since we have the context of all the files already in this chat, I'm just going to say `please implement fixes for all of the issues that were found`. The most important one is the use of the new GPT image 1 model, which is a new model by OpenAI and the one that we actually want to use.
All right, I'll submit that. Taking this approach with the review allows me to find those issues before I inadvertently run into them or find them on my own during a code review.
Okay, great. Cursor has made changes and updated its own review. Now, when we take a look at the OpenAI integration, okay, looks like it's using the right model, but we have this error. I'm going to go ahead and click "fix in chat" and then ask it, `please make sure that we are properly integrating with the image API per the new model requirements`.
Okay, looks like Cursor fixed that problem. But I think these fields aren't supposed to be passed in. So I just went and I pasted in the instructions from OpenAI. And Cursor can follow links to documentation. So it can be a great way to fix problems like this.
Okay, here we go. Let's give this another try. I'm going to go back to the app. And now we're back at this screen. So let's give it a try. "Elf Wizard with a large shield for some reason."
Okay, we ran into an internal server error and now I can go back here and see what's going on. I'm going to go ahead and copy all of this and I'll just start a new chat, paste it in, and I'll say `getting an error when trying to run the logic for` and then I'll tag the plan to give it some additional context. One of the things I like about my workflow is that it slots in really well into the way you would typically work with Cursor. When you got some errors, when you've changed some files manually, it doesn't rely on you following a very prescribed and structured approach. You can kind of wing it. So when you run into a situation like this, it's really easy to just iterate on the feature and build outside of the original plan. And you don't have to worry about trying to keep your spec perfectly in line with the code itself because that is a very difficult problem to solve.
Let's give it another try. Generate NPC. Okay, here we go. Take a look at that. Got a really nice image. Got a great description. This is working like I wanted. And if I want to iterate on this, like if I want to rearrange this page or make sure we're saving this into a database, I can just plan a new feature or just iterate in a one-off chat with Cursor to make some small adjustments.
So now is a good time to just go through the files and review the code. And what I'll often do is every time I build a feature, I commit it to GitHub so I can see all of the changes here. And this can be a great way for me to review it. So here I can see the NPC file got created. Here are some changes to the sidebar. This is sort of the difference between my last commit and what's in the code right now.
Now before I call it done, I'm going to go ahead and run a scan across all of the code using my product Vibe Scan. So we'll sign in and I'm going to create a new project. I'm going to select the repository, "Drag and Roll 4," and we'll run a scan. This is going to go through all of the files in my code, looking for security issues, for code quality, performance issues, and if I configure my launch checklist, it's going to also look for certain things like a terms of service, privacy, and a bunch of other things I would want to be in place before launching this into production.
Okay, so the scan has finished and it looks like it found a number of different things. Some of these are going to be false positives, but it's still better to know than to not know. And I'm going to take a look at this one. Looks like we have some default Postgress URL listed here. And what I'm going to do is actually use the new autofix feature. And this is going to actually spin up an instance of Clawed Code behind the scenes and create a pull request to fix this issue.
All right. And look at that. Now we have a fix. So I can actually go over here and you can look at these three issues that it fixed in the code. And here is all the code changes. So if this seems like something that would help you, make sure to check out vibescan.io. And we're launching on Product Hunt this Saturday, August 9th. And I would love to get your support.
So that really covers it. It's a pretty straightforward workflow, but it works really well and gives you the flexibility to modify things quickly or to add a new feature. I found this to be the sweet spot between just winging it in the chat or doing way too much planning. Give it a try and let me know what you think. As always, thanks for watching and I'll see you in the next one. Take care.