The Four Ps of Vibe Coding

Want a bit of the vibe action but unsure where to start? Here are the four Ps that underpin my approach to coding with AI. And have kept me (largely) sane.

Not a bad representation by ChatGPT. Not sure about the black flag, however.

“But it’s not coding.”

“It’ll only take you so far before it all falls apart.”

“It’s ok for little hobby projects, but anything at scale? Forget it.”

Look, I’m not here to disagree with any of the criticisms of what is now popularly referred to as ‘vibe coding’: using AI to write the code (so you don’t have to). Coined by Andrej Karpathy, the approach to vibe coding is one of play, experimentation, and going with the flow. Or at least that’s what they tell you. The truth is, you need to be organised, methodical, and pig-headed to get it right. If you’re keen to experiment, but are put off by the nay-sayers, here’s a good place to start.

I’ve been asked many times to create explainer videos on how to vibe code, but to be honest I’m not sure how they’d turn out: you’d likely see me tearing my hair out, taking deep breaths, and generally counting to ten to avoid chucking the laptop out the window. The thing is, using AI in this way can be a deeply frustrating experience, and you must be prepared for everything to go wrong many times over before it goes right. Most people who try this give up after a few attempts (and then write about how bad this approach to coding is). But trust me: if you get it right, it’s deeply rewarding to create your own websites, apps and games and say “I did that” (or rather, “we did that”).

Below are four foundational principles that will stop you from giving up before things get good. They’ve come from masses of trial and error. And, luckily enough, they all start with the letter P.

Note: I’m not going to show you lots of technical details here. e.g. what platforms to use, how to set up dependencies etc. To keep it short, I use VS Code to store my code, and have Node.js and npm installed on my laptop. That’s about all you need to know from a tech pov.

1. Planning

The first P borrows from the seven Ps of the military: proper planning and preparation prevents piss poor performance. I cannot stress to you enough how important it is to have a plan before you start. You don’t have to have mapped out the entire structure (as AI can do that for you), but anything more than a single webpage (with CSS, body, and javascript) will require you to decide in advance how the structure will look. There will be additions (AI seldom gets it right from the start), but if you do map out the stages and the directory (folder) structure from the off, you’ll find the whole experience a lot more enjoyable.

Let’s say you want to create a photography website with reusable components (like buttons, a menu bar, and hero image on each page). You will use a coding language called next.js, which is a fantastic way to build websites and games. In fact, I no longer use anything else. My son enjoys vibe coding games with Python, but he can only play them offline as it’s challenging to host Python online (not impossible, just challenging).

You want to begin by explaining the end goal for your project, the basic technical details you want it to stick to, and then ask it to output the stages of the project build. CODE NOTHING YET. Use a prompt like this to start, changing the project goal to suit:

We will work together to code a component-based website for my photography hobby. We will be using next.js 15+, the app directory, src, and Typescript. We will used Styled Components, not Tailwind. Please output the steps we need to go through in order to build the site. DO NOT code anything at this stage: just give me the stages we need to go through.

The tech bits you can copy verbatim: that just tells AI the type of next.js project we want it to set up. For anyone who knows about this stuff, I have found Styled Components more stable than Tailwind when coding—and for the uninformed, they both offer uniformity of styling across your website, but the former seems to work better with component-based sites. It’ll default to Tailwind unless you tell it not to—and when it does I generally find things going wrong from the start (it may just be me).

It will then give you the step-by-step. The next prompt is critical, and will help you massively with keeping things in order. You want AI to give you the directory structure it will work towards.

Now, give me the full directory structure for the project.

It will output a tree structure showing directories and files. You’ll find yourself referring back to this through the project, so you may want to paste it somewhere for ease of reference. I use Notion. As you progress in the project you may need to show the directory structure back to AI - as it can forget.

On the subject of forgetting, there’s one hugely important consideration when coding longer, multi-step projects. You need the largest context window (memory) you can get hold of, and and AI that doesn’t lock up (often without warning) when you reach the end of the context window. This is why the majority of my websites, games etc. are coded using Google Gemini Pro 2.5 in AI Studio. As well as its 1M token context window (around 750,000 words), it’s never locked up on me. The more recent ChatGPT o3 models are also worth looking at, and Claude 3.7 is an excellent coder. However, unless you’re paying $200 a month for unlimited ChatGPT, or $100 for the maximum use of Claude, you’ll come up against usage limits. This is particularly the case with coding, which will eat up your usage limits faster. When you go through a big debugging session you can easily eat up 100,000 tokens. So unless you have major concerns about Google (or are rich), use AI Studio. It’s also free. Just make sure you have the 2.5 Pro model selected.

2. Project Management

Once you have your plan, there are several things to consider once you get into the coding proper. The first is that you are the project manager: AI won’t remember everything it’s done, so you have to. Even large context windows are no guarantee that it won’t forget and mess up a lot of the time. This is why going logically, at least at first, will save you a lot of pain later.

You’ll start by asking for the vanilla next.js build. This is super useful, as you get a pre-made structure it’s easy to add to:

We will now begin coding the project. Start by giving me the command prompt to add to Terminal to initiate the next.js project. The project will be called my-cool-photosite. I will be inside the parent directory for the project when I execute this command prompt. 

This will give you the code to setup the vanilla build inside whatever the parent directory is for all your coding projects (mine is called coding-projects). Once the next.js project is set up, make sure you are in the project directory in VS Code (you’ll know because the Terminal window will say my-cool-photosite % or whatever your project is called). Now, you ask it to generate the entire project directory: all the sub directories and empty files.

Now, give me the Terminal command to set up the entire project structure. Ensure you include all sub directories inside the src folder and empty files. Follow the directory structure above. Do not comment inside the command: only give me the commands to set up the directories and empty files.

This will give you a prompt which you can add to Terminal. Terminal will automatically create all the folders and files you need. There will likely be some it’s forgotten, but you can add them in later. Asking it not to comment inside the command is important: AI Studio in particular is obsessed with explaining every little thing it does: and Terminal does not like non-command prompt text.

Ok, the next prompt makes explicit the behaviour you wish the AI to have through the build. I often add this to the system prompt as well, so that it carries this through the project. It’s very important the AI knows this is the approach you wish to take. Otherwise it will get into bad habits fast:

Now, we will start to code. There are certain rules you must follow: 1. Treat me as someone with no prior knowledge. Always go step by step, slowly. 2. Output one logical group of code files at a time, then pause to allow me to add the code to the project. Only continue once they have been added and debugged if need be. 3. Always output complete code  unless I tell you otherwise. Never output snippets as these will confuse me. 4. At all times, ensure you explain the steps you are going through: I am keen to learn about coding, and you can support me in that learning. Begin by outputting the first sequence of code. 

You want to ensure AI ONLY codes the minimum number of files before pausing to allow you to add the code to the project, and potentially debug. If you don’t do that, it is likely to give you a thousand pieces of code, and after you input the first and realise it’s made mistakes, it’ll have to go back to square one. Which is a waste of tokens.

The last thing to consider from a PM pov is what to do when you come up against usage limits: some platforms like Claude will literally stop working once you reach a certain limit. If you’ve Claude Pro you can commit the whole project to Github then link the Github repo to Claude (either in the chat or through a project). It’s super useful, but will use up a lot of Claude’s token count even before you start. With AI Studio you don’t have the Github feature (yet): however, you can get around it by asking Terminal to output a single .txt file with all the project code inside. You can then add this txt file into a fresh chat to bring it up to speed.

The easiest way to do this is to pop the below command prompt into Terminal in VS Code. This will generate a txt file called project.txt in your root directory. It will only add the components for the website, not all the other build files (like package-lock.json, which is massive). I’ve found what it generates to be enough to introduce into the new chat to give it the context it needs. You can then add this project.txt file to your new chat window.

find ./app -type f \( \
    -iname "*.js" -o -iname "*.jsx" \
    -o -iname "*.ts" -o -iname "*.tsx" \
    -o -iname "*.json" -o -iname "*.css" \
    -o -iname "*.html" \
\) ! -iname "package-lock.json" -exec cat {} + > project.txt

OK, that’s enough of the boring-but-important setup. You want to get coding. And from this point, in many ways you’re on your own. However, there are two last Ps that are most important of all. And trust me: the tougher a challenge you set AI, the more of these two you’ll need. I’ll lump them together as they go hand in hand.

3. & 4. Patience and Persistence

Your patience will be tested. You will get things working, then add another component, and the whole thing will fall apart and you’ll have no idea why (the biggest criticism that coders level at vibe coding, and for good reason cos they’re right). That will happen: you have my word. You’re always on the lookout for the dreaded colour red in VSCode. A red file is a bad file: you want your files to be black, green, or brown. NEVER red. Let me show you what I mean:

Green and black are best, brown is ok, red is BAD

When you get the red file name, you also get the corresponding squiggly line under where the errors are. Hover over one and it will tell you the problem:

Copy that error and paste it into AI. And let it debug. This can take FOREVER, and AI will constantly apologise and often continue to get things wrong. This is when P number 4 is paramount: you have to be super persistent. If you enable Copilot inside VS Code (you can do that by toggling on the little Copilot icon bottom right of VS Code) you can actually see whether CoPilot can fix the error inside the file. This can work with some minor errors. However, more often than not it’s because of a problem in another code file, so it won’t be able to help and can actually make matters worse. Try Fix using Copilot first, and see whether that sorts it. You want those red squiggly lines to vanish. That is your only goal. So stick at it!

You will spend a lot of your vibe coding time doing this. A lot of time saying things like “Please ensure you go slowly, step by step, and ALWAYS give me the full code, never a snippet”, and “Nope, still not working: this error code….” But eventually, if you keep at it, it will all fall into place and actually WORK. Keep testing in the development environment: type npm run dev into Terminal then open the localhost:3000 url it gives you. This will show you a local version of what you’re building. If it doesn’t work, paste the error that shows in Terminal into AI and let it debug.

Once it’s all where you want it, you’ll need to push to Github using a sequence of commands, and then deploy using Vercel (my choice of website deployer) so you can share your creation with the world. I won’t go into this in any depth here: just input this prompt into AI and it will take you step by step:

Now, I want to commit this project to Github and then deploy to Vercel. Assuming I have no prior knowledge and have never committed a project to Github before, take me step by step through the commands I need to add to Terminal to commit my project to Github, and what I need to set up in Github so that this works. Then, explain how I can deploy this project via Vercel. Write it out like an instruction manual for an absolute beginner. 

This is how I learnt everything about vibe coding: I asked AI to talk me through like I’m an idiot. And you’ll do the same!

That’s it: my four Ps. I hope they save your sanity. Let me know in comments how you get on.

p.s. if you want to see how the above opening sequence looks in AI Studio, here’s an example.