How to Vibe Code?

TL;DR

“Vibe coding” is rapidly becoming the new standard for software development, with dev productivity jumping 10x in recent months.

Key Stats:

• 1 in 4 experienced founders say 95%+ of their code is AI-generated

• Tools like Cursor and Windsurf are everywhere in startup accelerators

The Workflow:

1. Planning First – Spend extensive time creating detailed project plans, architecture docs, and step-by-step instructions for AI

2. Modular Implementation – Build section by section, not all at once

3. Test-Driven – Write integration tests first to guide AI and catch mistakes

4. Version Control Everything – Commit constantly to enable quick rollbacks when AI goes off-track

Top Tools:

• Cursor – Fast, great for frontend

• Windsurf – Slower but thoughtful, can run alongside Cursor

• Claude Code – Best for experienced developers

• Replit/Lovable – Beginner-friendly with visual interfaces

Vibe Coding Is Taking Off Fast

It’s looking less like a trend and more like the new normal. If you’re not on board, you risk getting left behind.

Adoption

• Explosive growth: Dev speed jumped from 10× six months ago to 100× just last month.

• Recent wave: By summer 2024, tools like Cursor were everywhere in YC batches, fueling a rapid shift.

AI-Generated Code

• 1 in 4 founders: Say 95%+ of their code is AI-written.

• Not newbies: These are experienced builders who could code it all themselves—but now let AI handle most of it.

What Is Vibe Coding?

Vibe coding focuses on coding through prompts, not direct code.

Key aspects:

• Tools: Windsurf, Cursor, Claude Code, Replit, Lovable, ChatGPT, Gemini.

• Language as Code: Developers write prompts and detailed instructions.

• Planning: Start with a written plan (scope, architecture, features).

• Modular Build: Implement step by step, not all at once.

• Version Control: Commit often with Git to avoid AI mistakes.

• Testing: Use integration tests to guide AI and catch regressions.

• Bug Handling: Easier to regenerate code than debug manually.

• Security/Refactor: Use rules, keep files small, refactor often.

• Engineer’s Role: More product-focused, judge quality, think systems.

• Learning Tool: LLMs can explain code and speed up learning.

The Vibe Coding Workflow and Development Process

1. Planning and Preparation (Spending “Unreasonable Amount of Time”)

Before writing any code, spend significant time planning and setting boundaries for the AI:

• Select Tools: Pick an AI coding assistant. Tools like Windsurf and Cursor (often forks of VS Code) can be loaded simultaneously on the same project, allowing developers to generate slightly different iterations of code and pick the one they prefer.

• Define Scope and Architecture: The first step is not to dive in and write code. Instead, work with a pure LLM (separate from the coding tool initially) to set project boundaries and structure.

• Create a Comprehensive Plan (PRD): Work with the LLM to write a detailed, comprehensive plan and put it in a markdown file inside the project folder. This plan should define features, potential edge cases, and architecture.

• Trim Scope: Go through the draft plan, deleting unwanted features, marking certain features as explicitly “won’t do” (too complicated), and keeping a section for ideas for later (out of scope for now).

• Write Detailed Instructions/Rules: Write a step-by-step to-do list (to-do.md) from the comprehensive plan for the AI coding agent.

• Documentation Access: Download relevant API docs into a local folder so the LLM can reference them, instructing it to “go and read the docs” before coding.

• Version Control: Install and use Git religiously. The AI can help initialize the Git repository (e.g., git init) and set up secure code storage on platforms like GitHub.

2. Implementation and Iteration

The implementation phase is iterative and modular, focusing on small, manageable chunks:

• Section-by-Section Implementation: Do not try to “oneshot the whole thing”. Work with the LLM to implement the plan section by section. Explicitly tell the LLM which section to implement next.

• Provide Detailed Context: Because you are “programming with language,” you must provide the necessary context and information in a very detailed way to get good results.

• Use Multiple Tools: Load tools like Cursor and Windsurf on the same project simultaneously. Give the same context to both, and they will both give you slightly different iterations of the code, allowing you to pick the one you like better.

3. Verification, Testing, and Version Control

After implementing a feature, thorough testing and saving are essential to maintain code stability:

• Start with Tests (Guard Rails): Begin by handcrafting test cases yourself, without LLMs. These tests act as strong guard rails that the AI must follow when generating code.

• High-Level Integration Tests: Keep tests super high level (integration tests) to simulate a user clicking through the site. These are crucial because LLMs have a bad habit of making unnecessary changes to unrelated logic. This helps catch issues early.

• Commit Religiously: Use Git religiously and make sure you are starting with a clean Git slate before starting a new feature. Once your tests pass and you see those green flags, commit immediately.

• Revert Capability: Committing frequently ensures you can revert to a known working version if the AI “goes off on a vision quest” or if things go wrong on the next step.

4. Handling Bugs and Code Quality

The approach to debugging leverages the low cost of code regeneration:

• Simple Bug Fixes: For minor issues, copy-pasting the error message (from server logs or browser console) into the LLM is often enough for the AI to fix the problem..

• Complex Bugs (The Reroll Strategy): If the LLM falls into a rabbit hole, keeps regenerating code, or produces “funky” code. The preferred strategy is to ignore the bug and tell it to try again from scratch.

• Avoid Accumulating Crust: Don’t keep prompting the AI to fix a bug on top of bad code—it creates “layers and layers of bad code.” For complex bugs, reset all changes and feed the LLM specific instructions on a clean codebase.

• Rollback: If the code becomes unfixable, use the Git history to roll back to a previous stable commit and start the implementation attempt over.

• Refactor Frequently: Once the code works and tests pass, refactor often. Ask the LLM to spot repetitive code, and keep files small and modular.

• Complex Features: For tricky features, build a small reference implementation in a clean project first. Then point the LLM at it and have it reimplement the feature inside your larger codebase.

Which coding language is recommended?

• JavaScript – most popular language worldwide

• Python – the go-to for AI development

• Suggested stack – Python backend, HTML + JavaScript frontend

Primary AI Coding Agents

• Cursor

  • Faster than Windsurf.

  • Good for front-end and light full-stack tasks.

  • Can run alongside Windsurf on the same project.

  • Needs detailed instructions (“cursor rules”).

• Windsurf

  • Slower, “thinks longer” than Cursor.

  • Can run alongside Cursor.

  • Devs often wait while it processes tasks.

  • Needs detailed instructions (“windsurf rules”).

• Claude Code

  • Best for devs with prior coding experience.

  • Claude Sonet 3.7 excels at implementing code changes.

  • Also used for DevOps (DNS setup, Heroku hosting).

General Purpose LLMs & UI Tools

• Replit

  • For beginners, no coding experience needed.

  • Easy visual interface.

  • Great for testing new UIs in code.

• Lovable

  • Also beginner-friendly with visual interface.

  • Good for UI generation.

  • Weaker on backend logic modifications.

• Pure LLMs (Claude, ChatGPT, Gemini)

  • Used first for scope and architecture planning.

  • Can solve issues when coding tools get stuck.

  • Gemini: best for indexing codebases and plans.

  • Claude Sonet 3.7: best for implementing code.

  • ChatGPT: helpful for non-coding (e.g., favicon images).

• GPT-4.1

  • Less effective.

  • Asks too many questions, often mis-implements.

Sources: