Getting Started with the Vibecoding Workflow - Vibecoding Playbook
hub

Vibecoding Playbook

DOCUMENTATION V2.1

arrow_backBack to Vibecoding Playbook
24/12/2025

Getting Started with the Vibecoding Workflow

A beginner’s guide to building with AI, step by step

So, you’re ready to build something with AI but want to avoid the chaos of random prompting. You're in the right place. The Vibecoding Workflow isn't a magic button; it's a structured map, a repeatable process designed to turn your ideas into a real, functional product with clarity and control.

Think of it as a detailed architectural blueprint for a digital construction project. Whether you're an actual architect with zero coding experience or a seasoned developer looking for a more disciplined way to orchestrate AI, this manual is for you. We will walk through every step, explain every rule, and give you the exact prompts and settings you need to get started.

Let’s build something together.

The Workflow Map: A Step-by-Step Journey

This workflow is a loop, but we'll walk through it linearly first. Each step has a specific purpose, a dedicated tool, and a set of "invariants":

  • Rules
  • Ground rules
  • Guidelines
  • Principles
  • Foundations
  • Constants
  • Fixed rules
  • Non‑negotiables
  • Core conditions
  • Baseline requirements
  • Guardrails
  • Safety rails
  • Anchor points
  • Unbreakable rules
  • Golden rules
  • (yeah, you name it)

that keep the project on track.

Step 01 - Brainstorming & Debate: Unleashing Creative Chaos

  • Purpose: To generate a wide, unfiltered cloud of raw ideas. This is the only phase where creative chaos is encouraged. You're exploring the entire problem space without worrying about feasibility or structure.

  • System Instructions: Your mindset here is pure exploration. Do not self-censor. Treat the AI as a creative partner that never gets tired. The goal is quantity over quality.

  • Settings & Tool:

    • Tool: Gemini Flash
    • Mode: Use "Flash" mode for rapid, low-cost responses.
    • Rule: The output from this step is exploratory only. It is not a specification.

  • Example Prompt:

    I'm building a personal portfolio website. Give me 20 wild and creative ideas for sections or features it could include. Don't worry about practicality. Think about interactivity, unique navigation, and personal storytelling.

  • Common Pitfalls:

    • Getting bogged down: Trying to perfect ideas at this stage. Don't. Just collect them.
    • Taking the output as final: Gemini might suggest something impossible or nonsensical. That's okay. Its job is to spark ideas, not to provide a finished plan.

  • What Success Looks Like: A long, messy list of 10-20+ potential ideas. You should have more concepts than you need, a healthy mix of practical and ambitious. You are done when you can pick 2-3 strong core ideas to move forward with.

Step 02 - Translation to LLM: Forging Clarity from Chaos

  • Purpose: To take the best raw ideas from the brainstorm and translate them into clear, structured, and unambiguous instructions that a machine can understand. This is the most critical step for ensuring quality downstream.

  • System Instructions: Your role here is the clarifier. You must resolve all ambiguity. Think like a project manager writing a detailed brief. If a human could misinterpret your instruction, an AI definitely will.

  • Settings & Tool:

    • Tool: Microsoft Copilot (or ChatGPT-4 for detailed prose)
    • Input: Your 2-3 selected ideas from Step 01.
    • Output: User stories, technical requirements, a potential file list, and acceptance criteria.
    • Rule: Uphold the Clarification Invariant. Do not pass fuzzy intent to the next step.

  • Example Prompt:

    Translate the following idea into a structured feature specification for a web development AI.

Idea: "An interactive timeline of my career."

Generate the following:
1.  A user story (As a recruiter, I want to...).
2.  Technical requirements (e.g., must be a horizontal-scrolling React component, each event is a clickable card, data should come from a JSON file).
3.  A list of files to be created (e.g., `Timeline.tsx`, `Timeline.css`, `timelineData.json`).
4.  Acceptance criteria (e.g., the component must be responsive, clicking a card opens a modal with more details).

  • Common Pitfalls:

    • Passing on vague terms: Phrases like "make it look nice" or "add user login" are useless. Specify what "nice" means (e.g., "use a minimalist design with a dark theme") and the type of login (e.g., "OAuth with Google").
    • Assuming the AI knows the context: You must provide all necessary context explicitly.

  • What Success Looks Like: A document so clear that a junior developer could read it and know exactly what to build. There should be no room for interpretation.

Step 03 - Feature Roadmap: Drafting the Official Blueprint

  • Purpose: To expand the structured prompts from the previous step into foundational project documents. This creates the "seed" of your repository - the first tangible artifacts that define the project's scope.

  • System Instructions: The outputs here are still considered drafts, but they are the first official documents. You're creating the initial project brief and construction schedule.

  • Settings & Tool:

    • Tool: ChatGPT
    • Input: The structured prompts from Copilot.
    • Output: Three core Markdown files: README.md, feature.md, and roadmap.md.
    • Rule: Treat outputs as a solid starting point, but expect to edit them.

  • Example Prompt:

    Using the attached feature specifications, generate the following three Markdown files for a new project repository:
1.  A `README.md` with a project title, a one-paragraph summary, and a list of the key features.
2.  A `feature.md` that contains the detailed specifications for each feature.
3.  A `roadmap.md` that breaks down the project into three high-level milestones (e.g., Milestone 1: Setup & Homepage, Milestone 2: Interactive Timeline, etc.).

  • Common Pitfalls:

    • Accepting the output without review: ChatGPT might over-specify or miss nuance. Review and edit the files to ensure they match your vision.

  • What Success Looks Like: A folder containing your three initial Markdown files. Your repository now has a documented purpose and a plan.

Step 03.5 - Repo Dump (The Context Reset): Creating the Master Blueprint

  • Purpose: To flatten the entire project repository - all relevant files - into a single Markdown document. This snapshot becomes the single source of truth for the AI, eliminating context drift and ensuring it sees the latest state of the project.

  • System Instructions: This is a technical step that must be performed without fail before any planning or debugging. It is the cornerstone of the workflow's reliability.

  • Settings & Tool:

    • Tool: RepoLiner (a simple script) or Repomix (for advanced features).
    • Whitelist: A list of file extensions to include (e.g., .md, .tsx, .ts, .css, .json).
    • Exclude: A list of folders and files to ignore (e.g., .git, node_modules, dist, secrets).
    • Rule: Uphold the Repo Dump Invariant. Never start a planning session without a fresh dump.

  • Example Action:

    REM If using a command-line tool like Repoliner
call "C:\Project\RepoLiner\launch.bat" "C:\Project\vibecoding-playbook"

  • Common Pitfalls:

    • Forgetting to update the dump: Using a stale dump is like giving a contractor an old version of the blueprints. It will cause errors.
    • Including junk files: Polluting your dump with irrelevant files from node_modules or build artifacts wastes tokens and confuses the AI.

  • What Success Looks Like: A single, large Markdown file (repo_dump.md) that contains the full contents of every important file in your project, clearly delineated.

Step 04 - Task Generation: The Deterministic Plan

  • Purpose: To convert the high-level roadmap from the repo dump into a list of explicit, atomic, and reproducible engineering tasks. This is where strategy becomes an actionable checklist.

  • System Instructions: Your mindset must be rigid and logical. Creativity is forbidden here. The goal is a reproducible plan, not an inspired one.

  • Settings & Tool:

    • Tool: Google AI Studio
    • Input: The full content of repo_dump.md.
    • Parameter: top-p=0. This is non-negotiable. It forces the model to be deterministic.
    • Rule: Uphold the Determinism Invariant. The same input must always produce the same task list.

  • Example Prompt:

    You are a senior project manager. Based on the provided repository dump, and specifically the `roadmap.md` and `feature.md` files, generate a detailed list of atomic tasks required to complete Milestone 1. For each task, provide a task ID, a clear title, a step-by-step description, and a list of files that will be modified. The output must be in JSON format.

  • Common Pitfalls:

    • Using creative settings: A non-zero top-p or temperature will introduce randomness, making your process unreliable.
    • Generating vague tasks: A task like "Build timeline" is useless. A good task is "Create the Timeline.tsx component file and add placeholder boilerplate."

  • What Success Looks Like: A structured list of tasks (e.g., in JSON or a Markdown table) that are small, clear, and can be executed independently.

Step 05 - Agent Execution: The Construction Crew

  • Purpose: To carry out the tasks generated in the previous step, writing code and modifying files. This is the "hands" phase of the workflow.

  • System Instructions: The execution agents must only follow the tasks as written. They do not invent new requirements or deviate from the plan.

  • Settings & Tool:

    • Tool: Antigravity (or another execution agent, or manual execution by you).
    • Input: The task list from AI Studio.
    • Output: Modified code, new files, and detailed logs of all actions taken.
    • Rule: Uphold the Isolation Invariant. The execution system is separate from the planning system.

  • Common Pitfalls:

    • Letting the agent "think": If an execution agent starts making strategic decisions, you've lost control. Its job is to do, not to decide.
    • Not capturing logs: Without a clear log of what the agent did, debugging becomes nearly impossible.

  • What Success Looks Like: Your codebase has changed according to the task list. New files exist, old files are modified, and you have a terminal log detailing every command that was run.

Step 06 & 06.5 - Debugging & Refresh: Inspection and Correction

  • Purpose: To identify errors, validate fixes, and update the master blueprint with the corrected state of the repository.

  • System Instructions: Approach this with the mindset of a detective. You are working with evidence (logs and code), not speculation.

  • Settings & Tool:

    • Tool: Google Search AI Mode for diagnosis, RepoLiner for refreshing.
    • Input: The latest repo dump plus the raw error logs from the terminal.
    • Rule: After any fix is applied, you must create a new repo dump before proceeding. This is the Token Stability Invariant in action - clearing old context before adding new.

  • Example Prompt (for Search AI):

    Here is a dump of my current repository and the error message I received when running `npm run build`. Analyze the code and the error to identify the root cause and suggest a specific code change to fix it.

[Paste repo_dump.md contents here]

[Paste terminal error log here]

  • Common Pitfalls:

    • Guessing the fix: Don't just ask the AI "how to fix my code." Give it all the evidence.
    • Forgetting to re-dump: If you fix a bug and then continue planning with the old, buggy repo dump, you'll go in circles.

  • What Success Looks Like: The bug is fixed, your application builds successfully, and you have a new, clean repo_dump.md reflecting the corrected state.

Step 07 - Solution Feedback Loop: Learning from the Process

  • Purpose: To feed verified solutions and successful patterns back into the workflow, making the entire system smarter and more efficient over time.

  • System Instructions: Only proven, tested fixes and successful patterns are fed back. You are refining your templates and prompts for the next cycle.

  • Settings & Tool:

    • Tool: AI Studio and ChatGPT
    • Input: A summary of the verified fix and the updated repo dump.

  • What Success Looks Like: You've updated your prompt templates or system instructions for Step 02 or Step 04 to prevent the same class of error from happening again.

The Power of the Loop: How to Evolve Your Project

The workflow isn't a straight line; it's a circle. Once your first version is built, you can re-enter the loop at any time to add features or make changes.

Example: Adding a "Dark Mode" Feature

  1. Re-enter at Step 01: You open Gemini Flash. Prompt: "Brainstorm 10 creative ways to implement a dark mode toggle on a website."
  2. Move to Step 02: You pick an idea (e.g., a simple toggle in the header). Prompt for Copilot: "Translate 'add a dark mode toggle' into a feature spec. It should use CSS variables for colors and save the user's preference in localStorage."
  3. Continue the Cycle: That spec flows into an updated roadmap.md, which is captured in a new repo dump. AI Studio then generates tasks like "1. Add color variables to index.css. 2. Create useTheme.ts hook. 3. Add toggle button to Header.tsx." The agents execute, you debug, and the loop completes.

By repeating this cycle, you can layer complexity onto your project in a controlled, manageable way.

The Golden Rules: Your System Invariants Explained

These five rules are the foundation of the workflow. They are what separate this process from chaotic prompt-and-pray.

  • The Repo Dump Invariant (The Master Blueprint): Always work from the latest snapshot of your project. An architect would never let a contractor work from an outdated blueprint; neither should you.
  • The Token Stability Invariant (The Clean Worksite): Before ingesting a new repo dump, clear the AI's previous memory (the chat history). This prevents it from getting confused by old context, just like you'd clear debris from a construction site before starting a new phase.
  • The Clarification Invariant (The Precise Measurement): Ambiguity is your enemy. You wouldn't accept a blueprint that says a wall should be "pretty long." Every instruction passed to the planning AI must be specific and measurable.
  • The Determinism Invariant (Following the Plan): The task generation phase must be logical and reproducible. You don't want your construction crew improvising the building's support columns. Creativity happens during brainstorming, not during assembly.
  • The Isolation Invariant (Division of Labor): The AI that plans the work (AI Studio) should not be the same AI that does the work (Antigravity). This creates a clear separation of concerns and accountability, just as the architect who designs the building isn't the one laying the bricks.

Know Your Tools: A Field Guide to Your AI Team

Think of these tools as a team of specialists. Knowing their strengths and weaknesses is key to orchestrating them effectively.

  • Gemini Flash: The hyper-creative intern. Fast and cheap, perfect for generating a storm of ideas. Don't trust it with details.
  • Microsoft Copilot: The logical pragmatist. Excellent at turning fuzzy concepts into structured specs. Needs clear input to shine.
  • ChatGPT: The master documentarian. Superb at drafting well-written roadmaps and READMEs. Can sometimes be too verbose.
  • Google AI Studio: The strict project manager. Uncreative but utterly reliable for deterministic planning when configured correctly.
  • RepoLiner / Repomix: The diligent archivists. Their sole job is to create a perfect, faithful record of the project state.
  • Antigravity: The powerful but silent workforce. It gets the job done efficiently but needs explicit instructions and monitoring.
  • Google Search AI Mode: The sharp-eyed inspector. The best tool for diagnosing problems when given the right evidence (logs and a repo dump).

Your First Build: Beginner Tips & Advanced Notes

Quick Wins for Your First Time

  • Start Small: Pick just one simple feature for your first loop (e.g., building a static homepage).
  • Follow the Steps Religiously: Don't skip a step, even if it feels redundant. The discipline is the magic.
  • Use Repo Dumps as Checkpoints: Your repo dump is your save point. If things go wrong, you can always go back to the last good dump and restart the planning phase.
  • Iterate Often: Don't try to build the whole application in one loop. Build a small piece, complete the cycle, then start another.

Notes for Advanced Users

  • Customize Your RepoLiner: Script more advanced logic for your repo dumps, like automatically removing comments or test files to save tokens.
  • Use Different Models for Different Tasks: You might find that one model is better at scaffolding React components while another excels at writing Python scripts. Swap models within the workflow as needed.
  • Automate the Loop: For true power users, script the connections between the steps. For example, have a script that automatically runs RepoLiner and then calls the AI Studio API with the output to generate the next task list.

Closing Thoughts: This Site is the Proof

The Vibecoding Workflow isn’t just a diagram on a page - it’s a living method you can follow, and this very website stands as a testament to its effectiveness. It began as three simple Markdown files and grew, cycle by cycle, into this interactive Hub.

The process demands discipline, but it rewards you with clarity and control. Now, it’s your turn. Start with a brainstorm, create your first blueprint, and let the loop guide you. See what you can build.

Previous ArticleMapping the Vibecoding Playbook: A Deep Dive into the Workflow Map, Invariants, Tools, and Real-World PracticeNext ArticleIteration Over Perfection: How I Shape AI Into My Voice

Built 99.99% with LLMs. My part? Vibe check.

© 2025 DAVIDTIBERIAS. All rights reserved.