In the last video we talked about how to get started. So my advice was to build a bunch of prototypes, play around in uh, vibe coding tools like Lovable or V Zero in our case, build some prototypes, get a feel for the problems that you're going to encounter as you build this product. Get a feel for how you want it to work, the user experience, the backend, the tables that you're going to need the data. All of this you're going to learn from prototyping. It's a very valuable experience.

All of this you're going to learn from prototyping. It's a very valuable experience. Eventually you're going to pick the prototype that feels the best and you're going to say, okay, let's start building on top of this. And that's when things get tricky. With Vibe coding, it is very easy to start new projects from scratch. You can start new projects from scratch all day long. LMS are pretty good at creating a

You can start new projects from scratch all day long. LMS are pretty good at creating a file and writing some code. Now the trickier part is when you start editing a current code base, how do you take something that already exists and change it and add files to it and add feature to it and add functionality to it without completely destroying it? Your code base is a Jingga tower and if you pull out the wrong block

Your code base is a Jingga tower and if you pull out the wrong block as a professional engineer, you know that it's all going to fall apart. How do you get the bot to understand that? And this is what I mean when I say that your job shifts from writing code. When you're vibe coding to being a context manager, you are managing the context of the engineer that you are giving this job to.

you are managing the context of the engineer that you are giving this job to. So your job is now a manager and your LLM is the engineer and you have to say what context, what code, what functionality, what explanation do I need to give this engineer and not overwhelm them to get the job done? So I'm gonna give you my tips for doing that. Let's dive in. Alright, so tip one is very simple and that is get out of the Vibe coding apps.

Alright, so tip one is very simple and that is get out of the Vibe coding apps. These platforms are going to get better and better and better over time. I cannot guarantee this will be my advice forever, but for today, my advice is to get your code base sync to GitHub and pull it into something like Cursor or Windsurf or use something like Codex, which I have up here as well. I've been really enjoying Codex lately. CLO code is extremely popular.

I've been really enjoying Codex lately. CLO code is extremely popular. So if you prefer a CLI tool, that's fine. The core thing is that as a Vibe coder, you need the code locally on your computer and you need to be able to run that through applications that are local so that you can use a more powerful tool set. If you are a non-engineer in any way, you have no technical experience, you have no technical ability,

you have no technical experience, you have no technical ability, this is all going to be very new. That's not necessarily who this course is for. I'm going to assume you have some level of technical ability here. Uh, if you have none, maybe staying in something like Lovable is good for you. These platforms have sort of rails on them. They're the the bumpers for bowling to make sure

These platforms have sort of rails on them. They're the the bumpers for bowling to make sure that you're gonna at least hit some pins as you roll it down the aisle. Now the problem is, is that what I found with those tools is that I inevitably hit that wall and cannot get over it. As the code base grows, as it gets too big, you go from maybe 80% of your prompts work and actually do what you want them to do to down to 50%, to 30% to 10% to none.

and actually do what you want them to do to down to 50%, to 30% to 10% to none. Eventually I hit a point where nothing that I would prompt would ever work. It was just the context was too big, it didn't know how to manage it and I really felt like this vibe coding thing does not work. Um, so I hit that wall absolutely. I personally hit it with my own projects and felt these platforms are amazing

I personally hit it with my own projects and felt these platforms are amazing and they're just not ready. They're not going to get me what I want. Now, when I downloaded my code and put it into Cursor, my world changed because suddenly the bumpers were off. I was allowed to have much more freedom over how I manage the context, the kinds of tasks that I wanted to do and sort of steer it into what I wanted to do

how I manage the context, the kinds of tasks that I wanted to do and sort of steer it into what I wanted to do and away from what I don't want it to do. You need to, if you're going to build a real product, get comfortable with one of these tools. I'm going to assume you're all comfortable. So I'm not going to explain how to use cursor too much. At a basic level, it is just a VS code fork. So if you're familiar at all with VS code, you should feel right at home.

So if you're familiar at all with VS code, you should feel right at home. Um, as you can see, like I said, I do uh, tend to use Codex a little bit. We will dive into Codex a little bit later in this course. I just wanted to show that I have been playing around with it. Cloud code is also extremely popular. They're kind of going back and forth and the people on Twitter like one, one day

They're kind of going back and forth and the people on Twitter like one, one day and one the next doesn't matter. Don't get too distracted with tools. Find the tool that is most comfortable to you. It needs to be an IDE. It needs to be local or at least a CLI tool. Alright, so that's tip one. Let's move on. Before we dive into tip two, let's look at what we're going to try to accomplish.

Before we dive into tip two, let's look at what we're going to try to accomplish. So in wonder, this is my real application by the way, this is my real local host for this application. Everything about my code base assumes that I have one art board selected. So as you can see, if I select an art board here, the sidebar comes up, I'm, it's going to read the HTML for that sidebar, it's going to pass that to the LLM. When I make a request, it's going

that sidebar, it's going to pass that to the LLM. When I make a request, it's going to show me the images for that sidebar. It's going to show me the code for that sidebar. Nothing in my current code can account for multiple art boards. So you just can't do that. Currently if I hold down shift, uh, as you might imagine in other design applications to select another art board, let's say I wanna move both of them together.

to select another art board, let's say I wanna move both of them together. This doesn't work because I haven't programmed it to work. And this is a deep problem because all of my code expects me to have one single art board selected. It's going to be pretty tricky to make it so that I can select multiple because you're going to have to make some decisions along the way.

because you're going to have to make some decisions along the way. Like well what happens when I select two art boards? Can I send a prompt to two art boards at the same time or am I just trying to move stuff around like how is it going to work? What is going to fail about that code? So that is the problem that we're going to address because I think it's the perfect kind of, you're going to hit a wall when you're vibe coating problem if

because I think it's the perfect kind of, you're going to hit a wall when you're vibe coating problem if you don't know what you're doing. So that's the problem we're going to address. If we jump over to cursor, uh, let's make the the bad mistake first. Let's get it out of the way so that we can see what not to do and then we'll kind of dive into how to handle this problem. So the first thing that I'm going to do is just,

into how to handle this problem. So the first thing that I'm going to do is just, I'm gonna make a huge mistake. I've already got a conversation going here. I was doing other stuff before, but I'm going to switch context and say, okay, make it so that I can select multiple art boards at once with the shift key. Currently you can only

with the shift key. Currently you can only select one. Alright, so I've made a couple of mistakes here that we'll talk about in a second, but for now just know that I have a current conversation going, I was doing something else before and now I'm going to write my prompt. This is what a lot of people do when they first get started.

and now I'm going to write my prompt. This is what a lot of people do when they first get started. They're just gonna write a simple prompt on top of the stuff that they were doing and they're gonna hit the button. And so I know from experience, I have worked with this code base a lot, this is not going to work. This is absolutely going to crash and burn. And so we're going to see how this plays out and then how to get over it because I think this is the core vibe coating experience that you're gonna type something in,

and then how to get over it because I think this is the core vibe coating experience that you're gonna type something in, you're going to hope that it works and then what you're going to get out is a total mess. It's not going to work. Uh, so let's go ahead and skip ahead. We'll pull the Turkey out of the oven and see what happens because I guarantee you it's not gonna be what I want. Alright, so cursor is done and it says that it should work. Now this is again, this is the uh,

Alright, so cursor is done and it says that it should work. Now this is again, this is the uh, the standard vibe Goating experience is that the bot is going to tell you this totally works. Now I promise I tested everything, I did all my checklist things, it's going to work. And then you're going to jump to the code and you're going to see well okay, for starters I can select multiple ports. Now that is a partial win. Um, can I move them?

for starters I can select multiple ports. Now that is a partial win. Um, can I move them? No, I definitely can't move them. What happens when I select multiple, I shouldn't be able to do this. Uh, what is going to happen? I bet this is probably not going to work. What's going to happen when I say make it dark mode? Is it going to update both of them? Now see this is a confusing user experience.

Is it going to update both of them? Now see this is a confusing user experience. It's only going to update one of them even though I have multiple selected. So this is obviously not what I want. It's pretty good. It's, it's impressive that I can select multiple and delete. So we're partially there and so I can continue leaning into this but there were some mistakes made from the very beginning that we should fix.

but there were some mistakes made from the very beginning that we should fix. So tip number two is right away I made the mistake of building on a previous conversation. This is not what you wanna do. You always wanna start a new conversation. This should be a clean context. What that means is that it's taking all of the junk that is filling up all of those tokens that is filling up the LLMs current context.

that is filling up all of those tokens that is filling up the LLMs current context. It uh, remembers the previous messages in the conversation and it's thinking about those even in light of the new conversation. You are passing those in and it is trying to do its auto complete magic on that context. And so the problem is is I had the wrong file selected. So I had direct select editor this completely different

And so the problem is is I had the wrong file selected. So I had direct select editor this completely different feature that I did not want to work on and I had a bunch of past context in here where I was working on another problem that already is going to get me off to a bad start. It is already going to lead the bot down a different direction and when I ask it something, it's going to say, oh, it realized in this case it did pretty good job.

and when I ask it something, it's going to say, oh, it realized in this case it did pretty good job. It realized that we were in the wrong place. And so because they didn't give it any other context, it had to just run off in my code base and try to find stuff and true through context the whole time. This is just not how you wanna start. This is not how you wanna build, even if you have some minor successes here, it's just off to a bad start.

even if you have some minor successes here, it's just off to a bad start. So what you wanna do, my second tip is to start a new chat. Chats are fresh slates. They don't remember other chats. This is not like chat GPT at least for now where it remembers past conversations. Each chat is brand new. It's a brand new engineer that's never talked to you before. They don't know anything about your code base and you start from square one.

They don't know anything about your code base and you start from square one. That can be frustrating as a vibe coder if you're not familiar with this stuff, but it's actually pretty good because it allows you that fresh clean slate each time and you're not trying to manage some sort of uh, things that it doesn't understand or that has carried from past conversations. So this is a good thing I promise.

or that has carried from past conversations. So this is a good thing I promise. So what we wanna do is start a new chat each time. Alright, that's tip two. Alright, so tip number three is to at mention the relevant files for the task that you wanna do. This saves context. Remember the goal and rule. We don't wanna overwhelm the context, we don't want the bot to just search through our entire code base constantly

We don't wanna overwhelm the context, we don't want the bot to just search through our entire code base constantly and wonder where to start and then make bad assumptions for the file that it's supposed to start on. We want to pass in the right amount of context and this is going to mean understanding at least at a very high level your code base. You have to understand what the files do

level your code base. You have to understand what the files do where functionality is at least roughly adjacent to in any given file. And so that's going to violate many people's concept of vibe coding because the true pure vibe coding might be that you never look at the code, you never understand it, you don't know what it does. I just don't recommend building like that. You need to understand what the files do,

I just don't recommend building like that. You need to understand what the files do, where the functionality lies at a high level, whether you can read code or you can't read code, you can understand and you can use the LLM to help you understand what these files do. So I happen to know for this sort of task that my canvas file, which is super or simple canvas with super base. So super base is my backend simple canvas is

file, which is super or simple canvas with super base. So super base is my backend simple canvas is my main component here. This is a very big file and this is where the the sort of canvas panning that sort of stuff is done. I also happen to know that the art board manager is a file that I've created as well. So I have two files here that I know are at least roughly adjacent.

So I have two files here that I know are at least roughly adjacent. This is where this logic currently lives and I wanna pass that to the bot before I write my prompt, uh, so that it knows where to look. This is extremely important in any task that you do. So this is step one. Any task is to gather the context and so that's what I want you to do.

Any task is to gather the context and so that's what I want you to do. I want you to figure out where this logic lives and sometimes maybe you'll do a new chat just to find out where the context lives. You can ask, you can use ask mode to ask where the context lives for this functionality. Maybe you say how does this work? How does the selection logic work in my current application? And then it will go ahead and it will tell you

How does the selection logic work in my current application? And then it will go ahead and it will tell you and then it will help you understand where to look. And so that's what I want you to do. I want you to understand what the files do, where the logic for the thing that you want to change is, and then to pass that in with an ad mention. Pretty simple tip number four is the same as tip number three, but on an even deeper level, if you happen to know the specific part of the code

as tip number three, but on an even deeper level, if you happen to know the specific part of the code that you are trying to manipulate, and I know this is a lot for five coders, but if you do happen to know and I think hopefully you should, um, you can paste that in. So I have here copied this and I have pasted it in and you can see it doesn't paste it in line. It actually in cursor creates this nice little tag here and it's saying Hey look at this part of the code.

It actually in cursor creates this nice little tag here and it's saying Hey look at this part of the code. This is one of many parts that I should probably be handling it but it's a good start. You don't have to go too crazy and too deep here. Uh, just if you happen to know the part of the code that should be paid attention to so that the LLM doesn't ignore it and it doesn't have to burn a lot of context to find it, go ahead and paste that in as well.

and it doesn't have to burn a lot of context to find it, go ahead and paste that in as well. You can add, mention not just files in here but functions as well or just copy and paste it in. As you can see here, I have some different functionality for how the sidebar uh, operates on mobile versus desktop. So I want it to be aware of that. And so I wanted to know where that code is. So I'm going to go ahead and paste that context in here as well.

So I'm going to go ahead and paste that context in here as well. So for tip number five, we're actually going to start writing a prompt That's pretty exciting. So we've got some of our context in here ready to go. We've got the things that we wanted to know. I'm going to paste in the prompt that I wrote. And tip number five is to basically start with a very brief explanation of how your code already works.

with a very brief explanation of how your code already works. Remember, this is the thing that people forget. Every new chat is a fresh engineer. As I said before, this is someone that you just hired. It's a temp that just came in. They don't know anything about your application, they don't know anything about your code base. It's going to look at thousands and thousands and thousands of lines of code

It's going to look at thousands and thousands and thousands of lines of code and then try to determine what the heck all this stuff does with no prior context. So it's worse than an engineer that you would pull into your company 'cause they've already gone through the interview process, they've looked at your website, they know what your product does, this engineer knows nothing. All it knows is the code that it sees.

what your product does, this engineer knows nothing. All it knows is the code that it sees. And so I'm going to have some very basic explanation for what winder is and what this code that I'm trying to do does. And so as you can see here, I said Winder is an AI design app. The canvas has multiple artboards, which I've said are iframes. Currently you can only select a single art board at a time

which I've said are iframes. Currently you can only select a single art board at a time when you select an art board that shows simple tool panel, there's a typo and chat sidebar. So these are things that I could add mention in here, simple tool panel, we'll delete that and add chat sidebar. Alright, so now I'm really filling up the context here. This is, this is why this is tricky because these are some big files in here

This is, this is why this is tricky because these are some big files in here and we don't know if this is going to work, but I'm trying to give it the best shot. And so as you can see, I didn't write paragraphs and paragraphs and paragraphs. I don't wanna give it too much, but I do want it to understand that when a design app, it has a canvas, the canvas or art board iframes and that currently you cannot select multiple

it has a canvas, the canvas or art board iframes and that currently you cannot select multiple things and all. Also by the way, this is how it works when you select one art board, it is very important as my engineer goes and writes the code to change what I want to change, that it understands the basic functionality. So start with a basic explanation of what your app is and how it works.

So start with a basic explanation of what your app is and how it works. If it's necessary for a tough change like this, it won't always be necessary. You don't have to do this every single time, but trust me, if you're building a complex new feature or something that's going to be a little bit tricky that you know isn't going to work in a single shot, explain how it works currently. Tip number six is to try

explain how it works currently. Tip number six is to try to keep the LLM focused on the job that you're giving it. As you can see here, I've done this in a very simple way. I've just told it keep it simple. Don't add any other functionality other than what I've said here. So based on the last tip, uh, we went forward and I said what I wanted to do here, I want you to make it so that you can select multiple

and I said what I wanted to do here, I want you to make it so that you can select multiple art boards with the shift key. When multiple art boards are selected, you should not see chat sidebar or a simple tool panel. Both of those assume that one single art board is selected and all my functionality depends on that. I just want you to be able to move around art boards and select them. So I'm just going to hide that ui.

around art boards and select them. So I'm just going to hide that ui. I've very explicitly told it that and and then once it does that, it's going to start crawling through my code base. I know this, I've seen it before and then it's going to make assumptions about other things that I want to change, which is kind of good sometimes like that's a very hit and miss thing that it can do with. Sometimes it finds stuff that I forget.

that's a very hit and miss thing that it can do with. Sometimes it finds stuff that I forget. But I find for the most part, especially when I'm dealing with something tricky, I wanna keep it focused. I wanna make sure that it's not actually doing a whole bunch of tasks that I didn't ask it to. So I will very explicitly tell it, keep it simple. Don't add any other functionality other than what I've said here. All I wanna do is make it so

than what I've said here. All I wanna do is make it so that you can select multiple art boards with the shift key. My next tip is to build iteratively and to prompt iteratively because of that. What I mean by this is exactly what we talked about when building a brand new application that if you do the thing that you read online and you make a giant PRD and you send it to the bot, that is going to work.

and you make a giant PRD and you send it to the bot, that is going to work. Sometimes, I'm not saying don't try it. If that works for you on your current code base, if it's organized enough, if it's small enough that that's working, by all means try it and do it and get as far as you can with that. Eventually when you hit a wall and that's not going to work. What you need to do is instead of giving up and saying vibe coding doesn't work when you have a lot

What you need to do is instead of giving up and saying vibe coding doesn't work when you have a lot of features and a lot of code, that's what everybody says. As soon as you get a lot of code, it's stops working. And that is because of this, because of the inability to break down prompts into smaller subset of prompts. And so what I'm doing here is I'm asking it to just do the shift to select feature. I know that I want the art boards to move together, that's

to just do the shift to select feature. I know that I want the art boards to move together, that's what I'm trying to get at, but I know that's where it's going to fall apart. So I'm actually going to separate that out into a follow up task. First task, can I get it to select multiple art boards and hide the UI that I wanted to hide? And then from there we are going to iterate and build on top of that instead of trying to get it

And then from there we are going to iterate and build on top of that instead of trying to get it to do everything in one go. I promise, promise, promise. This is one of the key things that you will learn in this course is to break down your prompts. The smaller the better, the more focused, the better and build on top of it and go piece by piece. Don't get impatient. I think that

and build on top of it and go piece by piece. Don't get impatient. I think that that is the key thing about vibe coding is that people get impatient and they assume that because AI is writing the code, that they can just have it do everything at once and it's just not good enough yet we might get there to where you can build most features in a single shot. I don't find with my code base that we're there yet. So I highly recommend that you build iteratively.

I don't find with my code base that we're there yet. So I highly recommend that you build iteratively. My final tip for this video builds on the last tip. So we said to build iteratively, one way that I find success in doing that is to actually build out the front end first and separately before the back end. So I will actually tell the LLM something like let's do this on front end only. Sometimes I'll say using local storage,

let's do this on front end only. Sometimes I'll say using local storage, I just want to mock it up before we add backend functionality. Now that doesn't apply to the feature that we're building now. Right now we're building a front end only feature, so it doesn't necessarily apply, but I just wanted to call this out because I do it on most things that involve a backend.

but I just wanted to call this out because I do it on most things that involve a backend. Again, it's about breaking down your prompts, breaking down the functionality at work, I work with different front end and backend engineers. You can tie those into different chats. View each chat as an engineer and you might work with them separately. And once we have a front end mocked up, then it'll be easier for the LLM to understand the backend changes that we need

And once we have a front end mocked up, then it'll be easier for the LLM to understand the backend changes that we need to do in order to make the front end work. You don't always need to do this, but again, on a complicated feature where you're trying to break it down and build iteratively, try starting with just the front end. Or if you prefer to start with the backend, maybe you wanna start there. A lot of people like to start with the data

with the backend, maybe you wanna start there. A lot of people like to start with the data and then build the front end on top of it. I like to prototype and I might change my mind the more that I play with the feature and the more I get into the design and the interactions that will actually change the data landscape for me. So that's why I like to start with front end. And so I'll start with front end.

So that's why I like to start with front end. And so I'll start with front end. I'll tell it just to mock it up and I'll get it to where I like how it works and then I will add the back end on top of that. Alright, so that's my best advice for getting started with prompting and cursor. You need to make sure that you're managing your context. You need to make sure that you're breaking your features down.

You need to make sure that you're breaking your features down. You need to make sure that you are keeping the bot focused, that you are telling it to not go crazy and spiral out of control. You need to make sure that you are thinking about the front end and the backend and how to break down that feature. These are the things that are gonna help you get over that wall so that you won't be one of the people that say,

These are the things that are gonna help you get over that wall so that you won't be one of the people that say, turns out vibe coding doesn't work. Turns out when you have a code base with existing features, you can't actually vibe code because it doesn't work. And so we are breaking some of the vibe coding rules here. We are making sure that we understand our code to some degree, we are passing in the right context. If that is not by coding, then that's fine, it doesn't matter.

If that is not by coding, then that's fine, it doesn't matter. All I'm saying here is that you should be able to use AI to build out a lot of stuff and this is how you do it. This is what works for me. Now notice we didn't actually build the feature, we didn't successfully get to where we wanted to go. That's because in the next video I'm going to combine all this stuff and instead of going tip by tip, we're going

to combine all this stuff and instead of going tip by tip, we're going to use the method that I use to build most of the features inside of Winder. This is the actual step-by-step process that I use. We'll go through it, start to finish and we will get this to work and it's gonna be cool. All right, we'll see you there.