Structuring Your Project Folders for Vibe Coding
Hướng dẫn chi tiết về Structuring Your Project Folders for Vibe Coding trong Vibe Coding dành cho None.
Structuring Your Project Folders for Vibe Coding
In the era of “Vibe Coding”—where high-level intent, natural language prompts, and autonomous AI agents drive the development process—the most significant bottleneck isn’t the AI’s intelligence. It’s the environment.
We’ve all been there: You have a clear vision for a feature. You describe it to your AI assistant. The AI starts coding with confidence, but five minutes later, your CSS is overwritten, your API routes are tangled, and the agent is stuck in a “hallucination loop,” trying to fix a bug it created because it couldn’t find your global configuration file.
This isn’t a failure of the “vibe.” It’s a failure of the context. In Vibe Coding, your folder structure is no longer just for you; it is the High-Resolution Map for your AI agents. If the map is blurry, the agent gets lost. This article will show you exactly how to structure your workspace to maximize AI performance, eliminate “context rot,” and turn your folders into a deterministic engine for rapid development.
Core Concepts: Designing for Agentic Vision
To understand why folder structure matters in Vibe Coding, we have to look at how an AI agent “sees” your project. When you issue a command like “Refactor the auth flow,” the agent performs a recursive search. It looks for keywords, reads package.json, and tries to build a mental model of your architecture.
If your project is a flat list of 50 files in a single directory, the agent’s “attention” is scattered. It has to ingest too much noise to find the signal.
1. The Principle of Contextual Anchoring
In a Vibe-Ready project, we use specific files as “anchors.” These are files that never move and contain the ground truth of the project. When an agent starts a task, its first job is to “sync” with these anchors.
- The Identity Anchor: Who is this project? (
.project-identity.json) - The Rule Anchor: How do we code here? (
GEMINI.mdorRULES.md) - The State Anchor: What are we currently doing? (
CONTINUITY.md)
2. Eliminating “Context Rot”
Context rot occurs when an AI agent reads outdated documentation or unrelated files, leading it to make assumptions that are no longer true. We solve this by strictly separating intent (what we want) from implementation (the code). By isolating your specifications and implementation plans into a dedicated docs/ or brain/ folder, you provide the agent with a “Working Memory” that is distinct from the “Execution Layer.”
The Gold Standard: A Vibe-Ready Folder Structure
Let’s look at a structural blueprint optimized for tools like Gemini CLI, Claude Code, and autonomous agents. This structure is designed to be scannable—meaning an agent can understand the entire project’s purpose within its first two tool calls.
/my-vibe-project/
├── .gemini/ # Agent-specific configurations
│ └── prompt-cache/ # Pre-built context blocks
├── docs/ # The "Brain" of the project
│ ├── ARCHITECTURE.md # The high-level blueprint
│ ├── PLAN/ # Active implementation plans
│ │ └── current-task.md
│ ├── SKILLS/ # Domain-specific "How-to" guides
│ └── CONTINUITY.md # The "Session Memory" file
├── src/ # The "Execution Layer" (Source Code)
│ ├── components/ # Atomic UI units
│ ├── layouts/ # Structural wrappers
│ ├── lib/ # Pure logic and utilities
│ └── pages/ # Routing and entry points
├── scripts/ # Automation and validation tools
├── .project-identity.json # Machine-readable project metadata
├── GEMINI.md # The "Mandates" for the AI agent
└── tsconfig.json # Type-safety ground truth
The “Brain” Directory (docs/)
This is the most critical part of Vibe Coding. You should never let an agent start coding until it has checked the “Brain.”
ARCHITECTURE.md: This isn’t for humans. It’s for the AI. It should list the tech stack, the data flow, and the “No-Go” zones (e.g., “Do not use Tailwind, use Vanilla CSS”).CONTINUITY.md: This file tracks what was done in the last session. AI agents are often stateless between restarts. This file allows the “vibe” to continue seamlessly by recording the last known state, current obstacles, and next steps.
Practical Example: From Chaos to Vibe-Ready
Imagine you are building a SaaS dashboard using Astro. You start with a messy folder where everything is in src/pages. The agent keeps getting confused between the “Admin Dashboard” and the “User Profile” because they share similar variable names.
Step 1: Initialize the Project Identity
Create a .project-identity.json file. This tells the agent exactly what it’s working on.
{
"name": "VibeFlow Dashboard",
"version": "1.0.0",
"archetype": "astro-framework",
"primary_language": "typescript",
"styling": "vanilla-css-modules",
"deployment": "cloudflare-pages"
}
Step 2: Establish the Mandates (GEMINI.md)
This file is the “System Prompt” for your project. Whenever the agent is initialized, it must read this file. It sets the tone and the engineering standards.
# Project Mandates
1. **Context Efficiency:** Always use `grep_search` before reading entire files.
2. **Security:** Never log API keys. Protect `.env` at all costs.
3. **Architecture:** We use a "Logic-in-Lib" pattern. Keep components purely presentational.
4. **Validation:** Every feature must include a Playwright test in `/tests`.
Step 3: The “Phased” Task Pattern
Instead of asking the agent to “Build the dashboard,” create a task file in docs/plan/01-dashboard-ui.md.
The Job To Be Done (JTBD):
- The agent reads the plan.
- The agent updates the plan with its proposed implementation steps.
- You (the human) approve the “vibe.”
- The agent executes.
By keeping the plan in a file rather than just in the chat history, you prevent the agent from “forgetting” the original requirements as the conversation gets longer.
Best Practices & Tips for High-Speed Vibe Coding
1. The “Scripts” Power-Up
Don’t make the AI agent guess how to test or lint your code. Keep a scripts/ folder with clear, descriptive filenames like validate-i18n.js or check-build-health.sh. In your prompts, tell the agent: “If you modify a translation file, run node scripts/validate-i18n.js immediately.” This creates a Self-Correcting Loop.
2. Use .geminiignore or .gitignore Strategically
AI agents often waste time and tokens indexing node_modules, dist, or large .log files. Ensure your ignore files are aggressive. If a folder doesn’t contain code or documentation the agent needs to “know,” hide it. This keeps the agent’s “mental bandwidth” focused on the task at hand.
3. The “Legacy” Folder Trap
If you are refactoring an old project, don’t mix old and new code. Create a /legacy folder. Tell the agent: “Read from /legacy for context, but only write to /src.” This prevents the agent from accidentally adopting outdated patterns or using deprecated libraries found in the old files.
4. Atomic Documentation
Break your documentation down. Instead of one massive README.md, use a directory-based approach. If you have a complex API, put an API.md inside the src/lib/api/ folder. Most modern agents will see that file when they list the directory and automatically ingest its “local rules.”
Conclusion: The Architecture of Intent
Structuring your folders for Vibe Coding isn’t about being “neat”—it’s about being legible to intelligence.
When you provide a clear, deterministic structure, you shift the AI’s role from “Guess-Worker” to “Precision Engineer.” You allow the “vibe”—your creative intent—to flow through the structure without being snagged on the friction of a messy workspace.
Your Action Plan:
- Move your “Session Memory” into a
CONTINUITY.mdfile today. - Create a
GEMINI.mdorRULES.mdto define your non-negotiable standards. - Treat every new feature as a “Plan” file in a
docs/folder.
By investing 15 minutes into this structure, you save hours of debugging hallucinations. Stop fighting your folders and start coding at the speed of thought. The vibe is ready—make sure your project is too.