---
title: "01 — What Is Vibe Coding — The Director, Not the Typist"
uid: what-is-vibe-coding
tags: ["llm", "tools", "vibe-coding", "roadmap:vibe-coding", "ai", "fundamentals"]
excerpt: "Vibe coding isn't the absence of programming — it's a different job in it: you stop typing syntax and start directing intent, describing what the app should do in natural language."
date: 2026-08-13T03:27:26+0000
source: https://www.aveshina.my.id/en/blog/what-is-vibe-coding
---

"Just let the AI write it all and hope" was how I dismissed vibe coding, and the dismissal hid the actual shift. The idea that the rest hangs off: **vibe coding is not the absence of programming. It's a different job in programming. You stop typing syntax and start directing intent — describing what the application should do in natural language, and letting an LLM produce the code [1].** The skill that matters shifts from "do I remember this API" to "can I describe what I want well enough to be understood."

The framing that finally landed: AI is more like a junior developer sitting next to me than like a compiler. A compiler takes exact syntax and deterministically produces bytes. A junior takes a vague request, fills in gaps from their training, produces something close, and quietly gets things wrong in places I didn't specify. Vibe coding is the workflow built around that second reality — give context, review what comes back, correct, and steer [1][2].

```figure
<svg viewBox="0 0 740 280" xmlns="http://www.w3.org/2000/svg" class="my-6 w-full max-w-2xl" role="img" aria-label="Two workflows compared. Left, traditional: a developer types exact syntax into an editor; the compiler deterministically produces a working app. Right, vibe coding: the same developer speaks a natural-language prompt to an AI agent; the agent produces candidate code; the developer reviews and steers; the loop repeats until correct.">
  <defs>
    <marker id="vbarrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
      <path d="M0,0 L10,5 L0,10 z" fill="#64748b"/>
    </marker>
  </defs>
  <g font-family="ui-sans-serif, system-ui, sans-serif" text-rendering="geometricPrecision">

    <text x="185" y="24" font-size="12" font-weight="700" fill="#7f1d1d" text-anchor="middle">Traditional — you type</text>
    <text x="555" y="24" font-size="12" font-weight="700" fill="#1e1b4b" text-anchor="middle">Vibe coding — you direct</text>

    <rect x="40" y="44" width="120" height="44" rx="8" fill="#fee2e2" stroke="#dc2626" stroke-width="1.5"/>
    <text x="100" y="64" font-size="11" font-weight="700" fill="#7f1d1d" text-anchor="middle">you</text>
    <text x="100" y="78" font-size="9.5" fill="#7f1d1d" text-anchor="middle">exact syntax</text>

    <rect x="210" y="44" width="140" height="44" rx="8" fill="#fef9c3" stroke="#ca8a04" stroke-width="1.5"/>
    <text x="280" y="64" font-size="11" font-weight="700" fill="#422006" text-anchor="middle">compiler</text>
    <text x="280" y="78" font-size="9.5" fill="#422006" text-anchor="middle">deterministic</text>

    <path d="M160,66 L208,66" fill="none" stroke="#64748b" stroke-width="1.5" marker-end="url(#vbarrow)"/>
    <path d="M280,88 L280,120" fill="none" stroke="#64748b" stroke-width="1.5" marker-end="url(#vbarrow)"/>

    <rect x="190" y="124" width="180" height="40" rx="8" fill="#dcfce7" stroke="#16a34a" stroke-width="1.5"/>
    <text x="280" y="148" font-size="11" font-weight="700" fill="#052e16" text-anchor="middle">working app</text>

    <rect x="410" y="44" width="120" height="44" rx="8" fill="#e0e7ff" stroke="#6366f1" stroke-width="1.5"/>
    <text x="470" y="64" font-size="11" font-weight="700" fill="#1e1b4b" text-anchor="middle">you</text>
    <text x="470" y="78" font-size="9.5" fill="#1e1b4b" text-anchor="middle">natural language</text>

    <rect x="580" y="44" width="140" height="44" rx="8" fill="#e0e7ff" stroke="#6366f1" stroke-width="1.5"/>
    <text x="650" y="64" font-size="11" font-weight="700" fill="#1e1b4b" text-anchor="middle">AI agent</text>
    <text x="650" y="78" font-size="9.5" fill="#1e1b4b" text-anchor="middle">probabilistic</text>

    <path d="M530,66 L578,66" fill="none" stroke="#64748b" stroke-width="1.5" marker-end="url(#vbarrow)"/>
    <path d="M650,88 L650,120" fill="none" stroke="#64748b" stroke-width="1.5" marker-end="url(#vbarrow)"/>

    <rect x="560" y="124" width="180" height="40" rx="8" fill="#fef9c3" stroke="#ca8a04" stroke-width="1.5"/>
    <text x="650" y="142" font-size="11" font-weight="700" fill="#422006" text-anchor="middle">candidate code</text>
    <text x="650" y="156" font-size="9.5" fill="#422006" text-anchor="middle">close, maybe wrong</text>

    <path d="M650,164 C650,196 470,196 470,224" fill="none" stroke="#64748b" stroke-width="1.5" marker-end="url(#vbarrow)"/>
    <rect x="410" y="226" width="120" height="40" rx="8" fill="#fce7f3" stroke="#db2777" stroke-width="1.5"/>
    <text x="470" y="250" font-size="11" font-weight="700" fill="#500724" text-anchor="middle">review &amp; steer</text>

    <path d="M470,226 C470,196 615,196 615,164" fill="none" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4 3" marker-end="url(#vbarrow)"/>
    <text x="555" y="212" font-size="9.5" font-style="italic" fill="#64748b" text-anchor="middle">loop until right</text>
  </g>
</svg>
```

That loop on the right — prompt, candidate, review, steer, repeat — is the entire shape of the job. The code that ships is the product of the loop, not of a single utterance.

## The mindset shift that has to happen first

The hardest part wasn't learning a tool. It was accepting that **"you don't need to review every line" is a goal, not a starting point** [1]. The roadmap says it, and it's true at the end of a project. On day one, treating AI output as trusted by default is how apps ship with silent bugs and leaked secrets. The mindset the roadmap actually points at is more honest than the slogan: AI works like a junior who needs direction, context, correction, and a vision held by someone — me [2]. I set the direction. I review the output. I keep the project on course. I still need to understand the basics of programming. What I no longer need is to memorize syntax or solve every small detail alone [2].

Two failure modes I had to stop repeating:

- **The one-shot wish.** Type one prompt, accept the result, move on. The AI filled in dozens of decisions I never stated. Half were wrong. The fix is treating the first output as a draft, not a deliverable.
- **The hands-off delusion.** "The AI built it, so it works." No — the AI produced code that looks like it works. Without review, tests, and a security pass, "looks like it works" is the production bug report waiting to happen [3].

The honest version of the mindset: I am accountable for what ships, even the lines I didn't type. That accountability is what makes the speed safe.

## Where it fits, and where it doesn't

Vibe coding is best for **fast prototyping** and for the long tail of boilerplate that makes up most of a real codebase — forms, CRUD handlers, migrations, glue code [1]. It shines when "a working thing I can click" is more valuable than "a hand-tuned implementation I can cite."

It is weaker where I need to defend correctness against an adversary (security-critical code), where the task is novel enough that the model has no strong prior (research-y internals), and anywhere the cost of a silent bug is high (payments, auth). For those I still read every line, write the test first, and treat the AI as a pair-programmer I veto, not an author I trust.

## The tools: terminal agents, AI editors, autocomplete

The roadmap groups the tooling into three shapes, and the shape matters more than the brand. A tool's shape decides what it's good at, and I pick by shape first [4][5][6][7][8].

```figure
<svg viewBox="0 0 740 260" xmlns="http://www.w3.org/2000/svg" class="my-6 w-full max-w-2xl" role="img" aria-label="Three tool shapes. Left: a terminal agent (Claude Code, Gemini CLI) running in the shell, full repo access, longest-running tasks, agentic. Middle: an AI-first editor (Cursor, Windsurf) built on VS Code with AI woven through the editor, select code and ask it to explain, fix, or rewrite. Right: inline autocomplete (GitHub Copilot) suggesting lines and functions as you type inside your existing editor.">
  <g font-family="ui-sans-serif, system-ui, sans-serif" text-rendering="geometricPrecision">

    <rect x="30" y="30" width="200" height="200" rx="10" fill="#e0e7ff" stroke="#6366f1" stroke-width="1.5"/>
    <text x="130" y="54" font-size="12" font-weight="700" fill="#1e1b4b" text-anchor="middle">Terminal agent</text>
    <text x="130" y="70" font-size="10" fill="#1e1b4b" text-anchor="middle">Claude Code · Gemini CLI</text>
    <text x="130" y="100" font-size="10" fill="#1e1b4b" text-anchor="middle">runs in your shell</text>
    <text x="130" y="118" font-size="10" fill="#1e1b4b" text-anchor="middle">sees the whole repo</text>
    <text x="130" y="136" font-size="10" fill="#1e1b4b" text-anchor="middle">long autonomous tasks</text>
    <text x="130" y="154" font-size="10" fill="#1e1b4b" text-anchor="middle">explains unfamiliar code</text>
    <text x="130" y="190" font-size="10" font-style="italic" fill="#475569" text-anchor="middle">best for: reasoning,</text>
    <text x="130" y="205" font-size="10" font-style="italic" fill="#475569" text-anchor="middle">debugging, big refactors</text>

    <rect x="270" y="30" width="200" height="200" rx="10" fill="#dcfce7" stroke="#16a34a" stroke-width="1.5"/>
    <text x="370" y="54" font-size="12" font-weight="700" fill="#052e16" text-anchor="middle">AI-first editor</text>
    <text x="370" y="70" font-size="10" fill="#052e16" text-anchor="middle">Cursor · Windsurf</text>
    <text x="370" y="100" font-size="10" fill="#052e16" text-anchor="middle">VS Code underneath</text>
    <text x="370" y="118" font-size="10" fill="#052e16" text-anchor="middle">AI woven into editing</text>
    <text x="370" y="136" font-size="10" fill="#052e16" text-anchor="middle">select code → ask</text>
    <text x="370" y="154" font-size="10" fill="#052e16" text-anchor="middle">codebase-wide context</text>
    <text x="370" y="190" font-size="10" font-style="italic" fill="#475569" text-anchor="middle">best for: navigating</text>
    <text x="370" y="205" font-size="10" font-style="italic" fill="#475569" text-anchor="middle">code you didn't write</text>

    <rect x="510" y="30" width="200" height="200" rx="10" fill="#fce7f3" stroke="#db2777" stroke-width="1.5"/>
    <text x="610" y="54" font-size="12" font-weight="700" fill="#500724" text-anchor="middle">Inline autocomplete</text>
    <text x="610" y="70" font-size="10" fill="#500724" text-anchor="middle">GitHub Copilot</text>
    <text x="610" y="100" font-size="10" fill="#500724" text-anchor="middle">lives in your editor</text>
    <text x="610" y="118" font-size="10" fill="#500724" text-anchor="middle">suggests as you type</text>
    <text x="610" y="136" font-size="10" fill="#500724" text-anchor="middle">lines &amp; whole functions</text>
    <text x="610" y="154" font-size="10" fill="#500724" text-anchor="middle">learns your style</text>
    <text x="610" y="190" font-size="10" font-style="italic" fill="#475569" text-anchor="middle">best for: staying in</text>
    <text x="610" y="205" font-size="10" font-style="italic" fill="#475569" text-anchor="middle">flow while typing</text>
  </g>
</svg>
```

- **Terminal agents — Claude Code, Gemini CLI.** These run in the shell with access to the whole repository. Claude Code is built to reason through complex problems, explain unfamiliar codebases, and walk a specific issue step by step [4]. Gemini CLI is Google's equivalent for the same terminal-native workflow [5]. The strength is agentic: give them a problem and a budget, and they'll explore, edit, run, and iterate. The cost is that I'm not editing directly — the feedback loop runs through their decisions.
- **AI-first editors — Cursor, Windsurf.** Built on VS Code, with AI woven through the editor itself. Cursor is built for navigating and editing large codebases I didn't write — select any part and ask it to explain, fix, or rewrite without reading every surrounding line [6]. Windsurf (Codeium) is the same shape, with a focus on keeping context across the whole codebase rather than just the current file [7]. The strength is that I stay in the editor; the AI is a copilot in the same surface where I type.
- **Inline autocomplete — GitHub Copilot.** A different shape: it lives inside whatever editor I already use, suggesting lines and entire functions as I type, learning from my style and comments [8]. It's a coding partner that finishes my sentences. Lowest-agency, lowest-disruption — the right pick when I want to stay in flow and just type less.

The honest rule I use: autocomplete (Copilot) when I'm typing the thing myself, an AI editor (Cursor/Windsurf) when I'm working in a codebase I need help navigating, and a terminal agent (Claude Code) when the task is "go figure out why this is broken, across many files, and fix it." Different shapes for different jobs — not one tool to rule them all.

## How I use this

The practical habit is a role check before each task. Before I start, I ask: am I the typist here or the director? If the task is "ship a clickable prototype fast," I direct — terminal agent, broad prompts, accept drafts, iterate. If the task is "fix the auth bug that's leaking tokens," I'm the typist — AI as autocomplete and explainer, but every line reviewed and the security model mine. Naming the role up front is what stops me from accidentally going hands-off on something that needed my hands.

## References

[1] roadmap.sh, "Vibe Coding — What is vibe coding?," 2026. [Online]. Available: [https://roadmap.sh/vibe-coding/what-is-vibe-coding](https://roadmap.sh/vibe-coding/what-is-vibe-coding)

[2] roadmap.sh, "The Vibe Coder Mindset," 2026. [Online]. Available: [https://roadmap.sh/vibe-coding/the-vibe-coder-mindset](https://roadmap.sh/vibe-coding/the-vibe-coder-mindset)

[3] Databricks, "Passing the Security Vibe Check: The Dangers of Vibe Coding," 2026. [Online]. Available: [https://www.databricks.com/blog/passing-security-vibe-check-dangers-vibe-coding](https://www.databricks.com/blog/passing-security-vibe-check-dangers-vibe-coding)

[4] Anthropic, "Claude Code Overview," 2026. [Online]. Available: [https://code.claude.com/docs/en/overview](https://code.claude.com/docs/en/overview)

[5] Google, "Google Gemini," 2026. [Online]. Available: [https://gemini.google.com/](https://gemini.google.com/)

[6] Cursor, "Cursor Docs," 2026. [Online]. Available: [https://cursor.com/docs](https://cursor.com/docs)

[7] Codeium, "Windsurf Docs — Getting started," 2026. [Online]. Available: [https://docs.windsurf.com/windsurf/getting-started](https://docs.windsurf.com/windsurf/getting-started)

[8] GitHub, "GitHub Copilot Docs," 2026. [Online]. Available: [https://docs.github.com/en/copilot](https://docs.github.com/en/copilot)

```quiz
Q: Vibe coding is best described as…
- a compiler that turns natural language into deterministic code
- a workflow where you direct intent and review AI-generated code, like guiding a junior developer
correct: 1
explain: AI is probabilistic and fills in gaps from training, like a fast junior. Your job shifts from typing syntax to giving context, reviewing output, and steering — not hands-off trust.

Q: "You don't need to review every line" is…
- a safe starting assumption for any new project
- a goal you earn through tests, context, and review habits — not a default
correct: 1
explain: Treating AI output as trusted by default is how silent bugs and leaked secrets ship. The slogan describes the end state of a disciplined workflow, not day one.

Q: You're debugging a failure that spans many files in a codebase you didn't write. Which tool shape fits best?
- Inline autocomplete (Copilot)
- An AI-first editor (Cursor / Windsurf)
- A terminal agent (Claude Code / Gemini CLI)
correct: 2
explain: Terminal agents run in the shell with full-repo access and are built to reason across files and explain unfamiliar code. Autocomplete is for in-flow typing; editors are for navigating/selecting — the agentic debugging task is the agent's strength.

Q: What do Cursor and Windsurf have in common?
- Both are terminal-based agents that replace your editor
- Both are VS Code-based editors with AI woven into the editing surface
correct: 1
explain: Both are AI-first editors built on VS Code, designed for selecting code and asking the AI to explain, fix, or rewrite it without leaving the editor.

Q: The defining trait of inline autocomplete tools like Copilot is…
- they take over the editor and run long autonomous tasks
- they suggest lines and whole functions as you type, learning your style, with the lowest disruption to flow
correct: 1
explain: Copilot lives inside your existing editor and completes what you're typing. It's the lowest-agency, lowest-disruption shape — for staying in flow, not for delegating whole tasks.
```
