Prompt Playbook: Vibe Coding PART 3

This is the boring but important setup required to start vibe coding.

It’s also (annoyingly!) some of the more “technical” stuff.

We just need to break on through to the other side. And thankfully once you’ve done it with your first project next time is much simpler.

Let's get started

Choosing Your Vibe Coding Tool

While there are many tools that can support vibe coding, they broadly fall into three categories:

1. AI Assistants: ChatGPT, Claude, Gemini, etc. You describe what you want, and they generate code for you to copy/paste.

2. AI-Enhanced Code Editors: Cursor, Windsurf, Replit, etc. These integrate AI directly into your development environment.

3. No-Code AI Tools: Bolt, Lovable, etc. These aim to generate entire applications from descriptions, with minimal technical involvement.

I've written an entire Playbook comparing these different tools, but for this series, I'll focus primarily on Cursor. It's what I personally use every day, and I've found it to be the most powerful option for serious vibe coding.

Helpfully it’s also what most tutorials and guides use so it’s a good choice for future learning once you’ve finished with this Playbook.

Cursor stands out for several reasons

• It's built specifically for coding with AI (not just bolted on as an afterthought)

• It offers powerful code generation, editing, and debugging capabilities

• It allows for natural conversation with your code

• It supports a wide range of programming languages and frameworks…like, all of them?

Setting Up Cursor for Vibe Coding

Getting started with Cursor is straightforward

1. Download and install Cursor from Cursor.com

2. Set up an account (free tier is available, though Pro offers better features)

Once installed, you'll notice Cursor looks like a regular code editor, but with some key differences:

• A chat interface in the bottom panel (open with Cmd+L or Ctrl+L)

• AI actions integrated throughout the interface

• Special commands for AI operations (Cmd+K or Ctrl+K)

The basic workflow in Cursor follows these steps

1. Create a new project or open an existing one

2. Use the chat panel to talk with the AI about what you want to build

3. Work with the AI collaboratively as it generates code

Setting Ground Rules for Your AI Pair Programmer

Before we start planning our project, let's establish some ground rules for how the AI should work with you. In Cursor, this is done through a feature called "Rules."

Think of rules as instructions that guide how the AI behaves throughout your project. By setting these up first, you'll have a much more consistent and helpful experience.

Here's how to set up rules in Cursor

1. Open the command palette (Cmd+Shift+P or Ctrl+Shift+P)

2. Type "New Cursor Rule" and select it

3. Name your rule (e.g., "Vibe Coding Rules")

4. Paste in the rules below

Here's a comprehensive set of guidelines specifically designed for successful vibe coding

# Vibe Coding Collaboration Guidelines

## General Approach
- Follow the user's requirements carefully and to the letter
- First think step-by-step - describe your plan for what to build in pseudocode, written out in detail
- Confirm understanding before writing code
- Break down complex tasks into smaller, manageable steps instead of trying to generate everything at once
- When unsure about requirements, ask clarifying questions
- Present multiple options when there are different valid approaches

## Code Quality
- Write correct, best practice, DRY (Don't Repeat Yourself), bug-free, fully functional code
- Focus on readable, clean code over being performant
- Write well-documented code with appropriate comments
- Use descriptive variable and function names
- Include error handling for robust operation
- Fully implement all requested functionality
- Leave NO TODOs, placeholders, or missing pieces
- Ensure code is complete and verify it is thoroughly finalized
- Include all required imports and ensure proper naming of key components

## Communication Style
- Be concise and minimize unnecessary prose
- Describe what you're doing and why at each step
- When suggesting changes, explain the rationale
- If you notice potential issues, flag them proactively
- If you don't know the answer, say so instead of guessing
- If you think there might not be a correct answer, say so

## Learning Support
- Explain key concepts when introducing new techniques
- Include brief comments explaining non-obvious code
- When using libraries/frameworks, explain their purpose
- Suggest resources for further learning on relevant topics

These rules strike a balance between guiding the AI to produce high-quality code and ensuring it communicates effectively with you throughout the process, regardless of your experience level.

Importantly it will also help you learn - the rules in the last paragraph see to this.

You can also use other sets of rules - there are whole libraries of them like this: Cursor.Directory 

Mapping Your Build

Now that you have your tool set up and your rules in place, it's time to transform your project idea into a concrete plan.

This means determining what technologies to use, how to structure your project, and what the steps to building it are.

Technically we can just give our idea to Cursor and let it have at it! There’s even a YOLO mode that gives it extra powers to build.

But this requires more confidence. First let’s build with Cursor and later we can test out the wilder modes.

Specifically we don’t want Cursor to try to “one-shot” our tool. That means doing it all in one go. It can work with very simple programmes but for anything beyond the base level it works better to carve up the build and deal with it piece by piece.

Here's a prompt to help you get a solid technical plan from Cursor

I want to build [YOUR PROJECT DESCRIPTION].

Based on this idea, please help me create a technical plan. I'm looking for:

1. The simplest, most appropriate tech stack for this project
   - Recommend 2-3 options with pros/cons
   - Default to web technologies that are beginner-friendly
   - Suggest the easiest deployment path

2. A project structure outline
   - Key files and components needed
   - How data will flow through the application
   - Any APIs or external services required

3. A step-by-step building plan
   - Break this down into small, achievable milestones
   - Start with core functionality, then add features
   - Identify potential challenges and solutions

Please think through this carefully before responding, and help me understand the reasoning behind your recommendations.

As always with AI the more details about your project and end goals you give it the better. Don’t be afraid to absolutely info-dump Cursor!

This prompt will guide your AI assistant to help you transform your idea into a concrete technical plan. You'll get recommendations on programming languages, frameworks, file structures, and development steps.

And importantly it’ll explain why it is making recommendations.

The key here is working with AI in a collaborative, iterative way—don't just accept the first suggestion. Ask questions, explore alternatives, and make sure you understand the recommendations before proceeding.

If it’s the first time you’ve ever coded anything then you’ll probably go along with its suggestions. And that’s totally fine - it knows a lot! But as you gain confidence you’ll start to be able to push back and work more as a co-builder.

Do You Need to Learn to Code?

This is perhaps the most common question I get about vibe coding, and my answer might surprise you.

No, you don't need to be a programmer to start vibe coding—but you'll naturally become one through the process.

Traditional coding education often follows this path

1. Learn programming concepts

2. Study a language's syntax

3. Practice with exercises

4. Eventually build something useful

With vibe coding, this process is inverted

1. Start building something useful

2. Learn concepts as needed

3. Absorb syntax through exposure

4. Gradually understand programming principles

It's like learning a language through immersion rather than textbooks. You might not understand everything initially, but you'll pick up patterns and principles as you go.

Personally this has how I’ve always learned languages - when I wanted to learn Spanish I went and lived in Guatemala for 6 months. Mandarin? 3 years in Beijing.

Immersion and just “using” the skill works really well. However we need to be very careful to not pick up bad habits along the way.

In the case of coding I’d recommend also learning some basics so that you understand what Cursor is doing and telling you.

I would recommend learning some basic Python specifically.

Every coder will tell you something different here but Python is a solid place to start. It’s also the de facto language used in AI circles which is handy if you ever move in that direction.

Here’s a good Youtube to get started

If prefer books then this one is great: Python Crash Course.

What you learn about Python can be adapted to other languages like JavaScript. Sure the syntax and particulars change but the basic idea behind most programming languages is the same.

Here’s the kicker though - I don’t recommend you pause building until you’ve learned Python!

Start building, hit problems and work out how to get through them.

Exactly the same method I preach for starting a business interestingly!

How to Learn While Vibe Coding

I’ve built some of this into the rules above but you can always ask Cursor for more assistance. Literally think of it as a tutor sitting with you - what a resource!

Here are some strategies to maximise learning while vibe coding

1. Ask the AI to Explain: When Cursor generates code, ask it to walk through what it's doing and why. For example: "Can you explain how this function works?"

2. Use Tutorial Mode: Explicitly tell Cursor you're learning: "I'm new to web development. Can you explain this code as if you're teaching me?"

3. Take an Inquisitive Approach: Instead of asking for specific implementations, ask about options: "What are different ways I could implement this feature? What are the trade-offs?"

These are all general best practices when using AI so, as someone who has been using my Playbooks, this will all come naturally to you!

What's Next?

OK we’re set up!

In Part 4, we'll dive into the actual process of building your project through vibe coding. We'll explore effective prompting strategies, develop a structured approach to working with AI, and walk through handling errors and iterations.

We'll also look at how to use conversation tools like directly chatting (verbally!) with Cursor to make the development process feel more natural and collaborative.

Keep Prompting,

Kyle