Why You Should Never Code Without a Plan (cm-planning)

Hướng dẫn chi tiết về Why You Should Never Code Without a Plan (cm-planning) trong Vibe Coding dành cho None.

Why You Should Never Code Without a Plan (cm-planning)

In the era of “Vibe Coding,” where AI agents like Claude, Gemini, and GPT-4o can generate hundreds of lines of code from a single sentence, the traditional discipline of software planning is often the first casualty. We’ve all been there: you have a “vibe” for a feature, you prompt the AI, it gives you a brilliant snippet, you paste it in, it breaks something else, and suddenly you are three hours deep into a “refactoring spiral” where the AI is hallucinating fixes for bugs it created five prompts ago.

This is the Vibe Coding Trap. When you skip the planning phase, you aren’t just saving time; you are outsourcing your architectural integrity to a probabilistic engine that doesn’t actually know your codebase exists until you show it—and even then, it’s prone to “context drift.”

The cm-planning skill is designed to solve exactly this. It is the mandatory epistemic gate between a vague idea and a dangerous implementation. In this article, we will explore why planning is the secret weapon of the advanced Vibe Coder and how the cm-planning methodology transforms chaotic AI interactions into surgical engineering strikes.

The Problem: The Cost of Architectural Drift

When we code manually, our brain acts as a natural bottleneck. We think about the database schema while we write the API route; we consider the edge cases of the UI while we manage the state. We plan because we have to—our cognitive load demands it.

With AI, that bottleneck disappears. You can generate a full-stack feature in seconds. However, AI agents lack long-term intentionality. An AI agent lives in the “now” of the current prompt. If you ask it to “Add a checkout button,” it will do exactly that, perhaps ignoring the fact that your existing cart logic is handled by a legacy Redux store it hasn’t seen yet.

Without a plan, you encounter three primary failure modes:

  1. Context Rot: As the session grows longer, the AI loses the “why” behind your architecture. It starts suggesting “just-in-case” code that conflicts with your project’s core patterns.
  2. The Infinite Loop of Corrections: You spend more tokens fixing the AI’s “fix” than you would have spent writing the feature from scratch.
  3. Technical Debt at Scale: AI is excellent at “making it work,” but it is often terrible at “making it maintainable.” Without a plan to enforce standards, your codebase becomes a patchwork of inconsistent patterns.

Core Concepts: The cm-planning Framework

The cm-planning skill isn’t just a “to-do list.” It is a multi-phase cognitive process that aligns the human’s intent with the AI’s generative power. It follows a Research -> Strategy -> Execution lifecycle.

1. The Discovery & Research Phase

Before a single line of code is proposed, the agent must perform an empirical audit of the environment. In cm-planning, this means using tools like grep_search and glob to map out existing dependencies.

  • The Goal: Identify “gravity wells” in the code—places where your new feature will interact with existing logic.
  • The Action: If you’re adding an authentication feature, the agent must first find where the user session is currently stored, which middleware is active, and how the environment variables are managed.

2. The Architectural Blueprint

Once the terrain is mapped, we move to Strategy. This is where we define the “Contract of Intent.” We don’t just say what we are building; we define the boundaries.

  • State Management: Where will the data live?
  • Side Effects: What happens to the database or external APIs?
  • Aesthetics: If it’s a UI feature, what are the constraints of the design system?

3. Task Decomposition (Atomic Steps)

The final part of the plan is the breakdown. A common mistake in Vibe Coding is asking the AI to “Build the whole feature.” This almost always leads to a 2,000-token response that is 80% correct and 20% destructive.

cm-planning enforces atomicity. Each task in the plan must be independent and verifiable. If Task A fails, it shouldn’t leave the system in a state that prevents Task B from being diagnosed.

Practical Example: Implementing a Multi-Step Workflow

Let’s look at a real-world scenario. Imagine you are building a “Project Onboarding” flow for a SaaS app. It requires a multi-step form, a database update, and a Slack notification.

The “No Plan” Approach (Vibe Coding Chaos)

User: “Hey, build a multi-step onboarding form that saves to the DB and alerts Slack.” AI: Generates a massive React component, a new Express route, and a Slack utility in one go. The Result: The form doesn’t match your CSS modules. The DB update uses an old version of Prisma. The Slack alert fails because the webhook URL is missing from .env, but the AI didn’t check. You spend the next hour “vibe-fixing” the imports.

The “cm-planning” Approach (The Advanced Way)

When you invoke cm-planning, the process looks like this:

Step 1: Research The agent searches for prisma.schema to understand the Project model. It searches for components/ui to see which form primitives are available. It checks utils/notifications.ts to see if a Slack helper already exists.

Step 2: The Plan (PLAN.md) The agent generates a structured plan that looks like this:

# Implementation Plan: Project Onboarding Workflow

## Context & Constraints
- Use existing `Button` and `Input` components from `/src/components/ui`.
- Database: Add `onboarding_status` field to `Project` model.
- Notifications: Reuse `SlackClient` in `/src/lib/slack.ts`.

## Phase 1: Infrastructure
- [ ] Update Prisma schema and run `npx prisma generate`.
- [ ] Add `SLACK_WEBHOOK_URL` to `.env.example`.

## Phase 2: Backend Logic
- [ ] Create `POST /api/projects/onboarding` with Zod validation.
- [ ] Implement Slack notification trigger on successful save.

## Phase 3: Frontend Implementation
- [ ] Scaffold `OnboardingWizard` using a state machine (Step 1 -> Step 2 -> Step 3).
- [ ] Connect form to the new API route.

## Phase 4: Verification
- [ ] Unit test: Ensure invalid form data returns 400.
- [ ] Integration test: Mock Slack API and verify notification is sent.

Step 3: Sequential Execution Now, the agent executes only Phase 1. You validate it. Then Phase 2. You validate it. Because the plan defined the “SlackClient” usage in advance, the AI doesn’t hallucinate a new library. It stays within the lanes.

Why Planning Solves “Vibe” Fatigue

Vibe Coding is exhilarating for the first 15 minutes and exhausting for the next 4 hours. The exhaustion comes from Decision Fatigue. Every time the AI asks “Should I use X or Y?”, you have to process the state of the whole project in your head to give an answer.

cm-planning front-loads those decisions. By spending 5 minutes defining the architecture at the start, you eliminate 50 “micro-decisions” during the coding phase. This allows you to stay in the “flow state”—the true promise of Vibe Coding—without hitting the wall of technical debt.

Best Practices for Advanced Planners

To truly master cm-planning, you should adopt these professional standards:

1. The “Research First” Rule

Never allow an agent to write a plan until it has read at least three relevant files. If the agent proposes a plan instantly, it is relying on its training data, not your project. Force it to “look before it leaps” by asking it to summarize the existing architecture first.

2. Epistemic Humility in Task Size

If a task in your plan feels “big” (e.g., “Implement the frontend”), break it down. An ideal task is something that can be completed in under 50 lines of code. This makes the Validate step of the Plan-Act-Validate cycle much more reliable.

3. Verification as a First-Class Citizen

A plan without a verification strategy is just a wish. Every task should have an accompanying thought: “How will I prove this works?” Whether it’s running a specific test script, checking a database entry, or a visual audit, the plan must define the success criteria.

4. Use ADRs (Architecture Decision Records)

For complex changes, use the plan to document why a certain path was chosen. “We are using a client-side state machine for the onboarding flow because we need to persist partial progress in LocalStorage.” This context helps the AI agent maintain consistency if the session is interrupted and restarted.

Conclusion: The Power of the Pause

In the fast-paced world of AI-assisted development, “pausing” feels counter-intuitive. We want the code now. But as any senior engineer will tell you, the most expensive code is the code you have to delete.

cm-planning isn’t a hurdle; it’s a superpower. It allows you to leverage the speed of AI while maintaining the rigor of a lead architect. It ensures that your “vibe” is backed by a blueprint, and your intuition is validated by research.

Next time you’re tempted to just “wing it” with a complex prompt, stop. Run a planning cycle. Map the terrain. Define the steps. You’ll find that the “slow” way of planning is actually the fastest way to production-ready, professional-grade software.

Stop vibe-coding into a corner. Start planning your way to mastery.