Prompt Playbook: Vibe Coding PART 4

Last time we set up our environment and created our technical plan. Now comes the really fun part – watching your app come to life through the power of conversation!

I can’t emphasise enough that you need to just try this.

Even if you’ve never coded a line in your life … this is doable.

And it’s legitimately magical to watch.

Let's get started

Before we dive in, a quick acknowledgment: every project is unique. The specific steps you'll take will depend on your project, your preferences, and even the idiosyncrasies of your AI assistant on a given day! So consider what follows as a flexible framework rather than a rigid formula. The beauty of vibe coding is its adaptability to your particular needs and style.

For this reason this particular Part will be fairly fast and loose - it’s a set of guidelines rather than a specific step by step.

The Art of Conversational Development

Vibe coding is fundamentally a conversation, not a coding session. This shift in approach is what makes it accessible to non-programmers and faster for experienced developers.

Rather than focusing on how to implement features, think about what you want to achieve. Instead of getting lost in technical details ("I need to create an event listener on the form element that prevents default submission..."), just describe your goal in plain everyday language: "When someone fills out the form and clicks 'Add Task', I want to save their task and show it in the list."

This is a phenomenal shift in how we build.

The beauty of this approach is that you can express yourself naturally, building your application through a series of conversational requests:

• "Can we make the task items look nicer? Maybe add some spacing and a border."

• "I'd like to show the date when each task was created."

• "Let's make completed tasks show with a strikethrough and faded colour."

Each request builds upon the previous one, creating a natural development flow.

The closest we had to this before was hiring engineers and developers and giving them instructions.

But unlike developers Cursor won’t get mad if you change a button’s design 7 times. It’s infinitely patient, works 24/7 and gives you results in seconds.

Effective Conversation Patterns

Certain conversation patterns tend to be particularly effective when vibe coding. These may come second nature to you but if not here are some useful phrases to test out:

• The "How Would We" Pattern: Invites the AI to explain an approach before implementing it "How would we implement a feature that lets users categorise their tasks?". You are working alongside Cursor so can get thoughts before any actions are performed.

• The "I Notice" Pattern: Focuses on observed behaviour and desired changes "I notice the tasks disappear when I refresh the page. How can we make them persist?"

• The "Can You Show Me" Pattern: Useful when you want to learn as you build "Can you show me how to add a search feature to filter tasks by keyword?" This puts Cursor into a tutoring mode where it won’t focus as much on implementing your requests as it will showing you how to achieve something.

• The "Let's Try" Pattern: Signals experimentation and encourages creative solutions "Let's try using a different colour scheme for the app." If you want Cursor to let its hair down a little go ahead and tell it to! It won’t know otherwise - like any other AI tool!

These conversational tactics help you guide the development process naturally, without needing to understand all the technical details yourself. Just imagine you are sitting with your technical co-founder and working through the build together. If you don’t know what’s happening: ASK.

Handling Errors and the Whack-a-Mole Challenge

It’ll all go swimmingly initially.

Until it doesn’t.

Suddenly what you are building won’t “work”.

A bug will occur. Some weird behaviour. Or maybe your app stops even loading.

Every development process encounters errors and obstacles. It’s often the majority of the work honestly…

In vibe coding, troubleshooting becomes more conversational and often more intuitive than traditional debugging.

The most basic is “um…it’s not working”.

But we can do better than that.

When you run into specific errors

1. Copy and share the error message - "I'm getting this error when I try to run the app: [paste error message]. What's causing this and how can we fix it?". This is good practice when talking to an IT helpdesk anyway - show them what you are seeing. We do this with Cursor so it can know what the problem is and how to fix it.

2. Describe unexpected behaviour - "When I click the delete button, it's removing the wrong task from the list. Any idea why that might be happening?" This helps when there’s no specific error message. You have to describe what’s wrong. Again, the more detail the better!

3. Ask for alternatives - "This approach seems to be causing issues. Is there a simpler way we could implement this feature?" If you keep hitting similar issues then we can always ask for different ways to approach the problem.

The Whack-a-Mole Problem

One particularly common experience in Cursor (annoyingly!) is what I call the "whack-a-mole" problem – fix one bug, and another pops up. Sometimes the new bug is actually an old one that you thought was already fixed!

It’s…infuriating to say the least.

We can’t just yell “Oi, we fixed that one already” unfortunately.

If you find yourself in a fix-break-fix loop, try this approach

"We seem to be in a cycle where fixing one issue causes another. Can you help me understand the underlying problem that might be causing these related bugs, and suggest a more comprehensive solution?"

Often, the AI will identify a fundamental issue in the approach or architecture that's causing these ripple effects. By addressing the root cause rather than individual symptoms, you can break out of these frustrating loops.

Now, this is where knowing code is very very helpful because you’ll be more able to dig yourself out. You’ll see what silly mistake Cursor is making and understand what needs to be done. Without this knowledge we can absolutely find a way out but we rely more on Cursor - tricky because it’s Cursor and the AI model making the mistakes in the first place!

Quick Fire Tips for Smooth Vibe Coding

Let’s fire off some more tips in no particular order. Sorry for the disarray - that’s vibes for you!

Managing Conversations

• Start fresh for major features - The AI's context window can get cluttered after a long conversation. For major new features, consider starting a fresh chat.

• Document key decisions - Ask the AI to add comments explaining important decisions: "Can you add comments to explain how the task sorting logic works?"

• Capture valuable explanations - Take screenshots or notes when the AI provides especially useful explanations or approaches. Chats can get long and this can get lost.

Improving Your Workflow

• Set expectations for each session - "In today's session, I want to focus on implementing the calendar view for tasks with due dates." This is as much for you as Cursor!

• Learn as you build - "I don't understand how this local storage part works. Can you explain it to me simply?" Remember that Cursor is a super powerful tutor as well as builder. This will help you use Cursor better later too as you’ll understand more of what’s happening.

• Be patient - Remember that vibe coding is as much about the journey as the destination. You're developing a new relationship with technology, one where you express your vision in human terms rather than code syntax. You’ll run into whack a mole bug loops often. And the more you do the better you’ll be able to deal with the situation - there is still a learning process.

What's Next?

In our final part of this Playbook, we'll explore how to take your vibe-coded creation to the next level. We'll cover deployment, scaling considerations, and transforming your personal project into something you can share with the world or even monetise.

Keep Prompting,

Kyle