Vibe Coding

Vibe Coding vs Spec-Driven Development

An honest, head-to-head comparison of vibe coding and SDD across every dimension that matters — speed, quality, documentation, team scalability, and total time — with a worked example building the same feature both ways.

Not a Competition — A Decision Framework

The goal of this lesson is not to declare vibe coding or SDD the winner. Both are legitimate approaches with real strengths. The goal is to give you the judgment to choose the right approach for each situation — and to understand why the "obvious" choice (vibe coding for speed) is often wrong.

Head-to-Head Comparison

DimensionVibe CodingSpec-Driven Development
Time to first outputMinutes30-60 minutes (spec writing)
First-output qualityVariable (50-70% usable)Consistent (80-95% usable)
Iteration rounds needed10-20+1-3
Total time to productionOften longerOften shorter
Code qualityUnpredictableConsistent with spec constraints
DocumentationNoneComplete (specs, requirements, design docs)
Test coverageNoneHigh (requirements map directly to test cases)
Team scalabilityPoor (knowledge in one person's head)Excellent (specs are shared source of truth)
Onboarding new developers"Just look at the code""Read the specs"
Technical debtAccumulates invisiblyManaged through validation gates
Fun factorHigh (feels like magic)Moderate (feels like engineering)

The Same Feature Built Both Ways

Let's build one feature — "Add search to a blog with category and tag filters" — using both approaches.

Vibe Coding Approach

Prompt: "Add search to the blog. Users should be able to search by title and filter by category and tag."

What comes out: The AI generates something that mostly works. Search might not handle edge cases (empty results, special characters, very long queries). Filters might not combine correctly. No loading states. No URL parameter synchronization. No debounce on the search input. No accessibility attributes. No empty state UI.

Iterations required:

  1. "Also handle empty results"
  2. "Add a debounce so it doesn't fire on every keystroke"
  3. "Sync the search with URL parameters"
  4. "Make category and tag filters work together (AND, not OR)"
  5. "Add a loading skeleton while results load"
  6. "Fix the layout on mobile"
  7. "The empty state text doesn't appear when all items are filtered out"
  8. "Add a clear-all-filters button"

That's eight iterations before you have something production-quality — and these are only the issues you noticed. There are likely edge cases you didn't test.

Total time: 60-90 minutes of iteration after the initial generation.

Spec-Driven Approach

Step 1 — Write the spec package (15 minutes):

User story: "As a reader, I want to search blog posts by keyword and filter by category and tag so that I can find relevant content quickly."

Acceptance criteria (Given/When/Then covering): empty results state, URL parameter sync, combined filter behavior, debounce timing, loading state, clear filters, mobile layout, empty-filter state.

Technical constraints: React Query for data, follow existing FilterBar component pattern, shadcn/ui Combobox for tag select.

Step 2 — Submit to AI tool (first generation):

The AI generates search with ALL specified behaviors on the first pass — because the spec covered them.

Step 3 — Review:

One adjustment: the timestamp format doesn't match the rest of the site. One prompt to fix it.

Total time: 15 minutes spec + 20 minutes generation and review = 35 minutes.

The Result

The vibe-coded search took 60-90 minutes and has unknown edge case coverage.

The spec-driven search took 35 minutes and has documented edge case coverage.

The spec approach was faster AND produced better output.

The Paradox of Speed

Vibe coding feels faster because you start producing output immediately. The cursor appears in a text field and something is running in 60 seconds. There is no "thinking time" — no spec writing, no acceptance criteria, no edge case enumeration.

But the total time to production-quality output is often longer because:

  1. You discover missing requirements through bugs rather than through upfront thinking
  2. Each iteration adds time that accumulates invisibly
  3. You often don't know when you've hit all the edge cases (because you didn't enumerate them)
  4. Late-discovered requirements sometimes require substantial rewrites of earlier work

The spec invests time upfront to save time downstream. It is the classic engineering principle: the most expensive time to fix a bug is in production.

When to Deliberately Choose Vibe Coding Over SDD

This is not a rhetorical list — there are genuine situations where vibe coding is the right choice:

  • Throwaway prototypes (validate an idea, then rebuild properly)
  • Creative exploration (trying visual approaches, layout experiments)
  • Personal tools with one user (yourself)
  • Learning a new technology (speed of feedback matters more than code quality)
  • Time-boxed experiments ("spend 30 minutes seeing if this is feasible")
  • Non-production demos (investor presentations, concept videos, hackathon entries)

When to Choose SDD Over Vibe Coding

  • Any feature that will be used in production by real users
  • Features involving security, payments, or sensitive data
  • Team projects where multiple people work on the same code
  • Complex business logic that must be precisely correct
  • Projects maintained over months or years
  • Anything with compliance or audit requirements

Key Takeaways

  • The head-to-head comparison shows SDD consistently outperforms vibe coding across documentation, test coverage, team scalability, and — counterintuitively — total time to production quality
  • The paradox: vibe coding feels faster but is often slower total due to iteration time
  • The spec package format (Lesson 3.5) is the bridge — 15 minutes of writing for a dramatic quality improvement
  • Both approaches have legitimate use cases; the skill is matching the right approach to the situation
  • "Throwaway prototype" and "grows into production system" are the most dangerous combination

Example

markdown
# Same Feature: Two Approaches

FEATURE: Blog search with category + tag filters

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
VIBE CODING
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Prompt: "Add search to the blog with
         category and tag filters"

Iteration 1: missing empty state
Iteration 2: no debounce on input
Iteration 3: URL params not synced
Iteration 4: filters not combining right
Iteration 5: no loading skeleton
Iteration 6: mobile layout broken
Iteration 7: clear filters button missing
Iteration 8: empty-filter state bug

Total: 60-90 min, unknown edge cases

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SPEC-DRIVEN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Write spec (15 min):
  - User story
  - 8 Given/When/Then criteria
  - Technical constraints

Generate (first pass handles all criteria)
Review + 1 minor fix

Total: 35 min, documented edge cases
Try it yourself — MARKDOWN