How I Vibe Code

Roger Stringer Roger Stringer
May 19, 2025
7 min read
How I Vibe Code: A Very Quick Guide To Success

What is Vibe Coding?

Vibe coding is a fast growing trend where developers use AI tools to generate functional code by simply describing what they need in plain language. Instead of manually writing every line, they rely on AI to translate natural language into executable code.

The term Vibe coding originates from a post on X by Andrej Karpathy, an influential AI expert known for his work at Tesla and OpenAI, where he explains the concept as:

You just vibe with the AI. Prompt, get code, run it, see what breaks, try again, edit a bit, paste it in, iterate. You don’t need a spec. The spec is in your head. You just build.

This approach has gained so much traction because vibe coding offers some real advantages – especially for solo developers and fast-moving teams when the right ai tool is used.

The main benefits of vibe coding include:

  1. Speed – Vibe coding automates repetitive tasks like setting up files, writing boilerplate, and handling basic data logic.
  2. Creativity – With routine coding out of the way, you can focus on design, user experience, and solving real problems.
  3. Accessible for beginners – No need to learn syntax first — just describe what you want, and the AI builds it.
  4. Easy to iterate – Quickly test changes by tweaking your prompts instead of rewriting code manually.
  5. Fast prototyping – Great for turning ideas into working demos without getting stuck in the technical details.

This all sounds great, so what's the problem?

To be clear, vibe coding is great, but it's not entirely as straight forward as some think. People tend to think they can just open up an IDE such as cursor or windsurf and ask it to build something but that's not how to achieve success with it.

The biggest problem is relying on the IDE to do all the work while not giving it clear instructions.

Instead, the process I find works best is if I look at the IDE as my junior developer and use the following steps to build out projects, not unlike planning out a project for a team to work on, but in this case, the team is myself and my IDE.

Note

Before doing anything, create an empty folder for your project, this is where we'll keep our files as we build them.

Step 1: The Design Doc

Before doing anything else, we need a design / architecture doc, this will help tell the IDE what we are building, this is the same as if you were planning a software project with a team.

For the first step, I don't even open my IDE, I go straight to chatGPT (using gpt-4o or gpt-4.1) or Claude and use the following prompt:

I am building a [describe your product, the more detail the better]. 

Use Astro for frontend, Supabase for DB and auth. 

Give me the full architecture:
- File + folder structure
- What each part does
- Where state lives, how services connect

Format this entire document in markdown

After the AI has generated the necessary info, I save the response as designdoc.md and throw it in an empty folder where I want my project to live.

Note

In this example, I'm using Astro and Supabase, but you can swap these for the stacks of your choice, such as Next.js, Remix, Vue, Drizzle, Directus, Pocketbase, etc, I am by no means telling you that you have to use this stack, it's just the stack I currently like.

Step 2: The Tasks

Next, we need our tasks, just like if I were planning this project out with a team to work on, I need to break the project down into smaller tasks.

With that in mind, in the same window, I type:

Using that architecture, write a granular step-by-step plan to build the MVP.

Each task should:
- Be incredibly small and easily testable
- Have a clear start and end
- Focus on one concern to a time

I'll be passing this off to an engineering LLM that will be told to complete one task at a time, allowing me to test in between.

I then save that response as tasks.md, and throw it in the same folder I used in step 1.

Step 3: The Actual Work Begins

Now that we've got our design doc and our tasks, then the work can begin. Now I finally open Cursor or Windsurf in that same folder and use this prompt:

You are an engineer building this codebase. You have been given designdoc.md and tasks.md.
- Read both carefully. There should be no ambiguity about what we are building.
- Follow tasks.md and complete on tasks at a time.
- After each step, stop. I'll test it. If it works, commit to GitHub and move on to the next.

I also include these instructions as well - this is a critical step!:

### CODING PROTOCOL ###
Coding instructions

- Write the absolute minimum code required
- No sweeping changes
- No unrelated edits: focus on just the task you are on
- Make code precise, modular, testable
- Do not break existing functionality
- If I need to take any action (for example: Supabase, Stripe, AWS config, vercel config), tell me as clearly as possible what I need to do.

Final thoughts

That's it, these 3 simple steps are what I use to vibe code and in my humble opinion, this system fixes the biggest problem with vibe coding:

  1. You are not dumping everything into the IDE and praying.
  2. You are giving it a roadmap to follow.
  3. You are keeping it on rails.
  4. You are still in control.

This workflow lets you ship clean, testable AI-assisted code - without the spiral.

Do you like my content?

Sponsor Me On Github