Vibe Coding Practical Guide: AI Development Full Workflow (Part 1)

You might have been in this situation: you open AI excitedly, eager to build your own project, but end up sitting there, clueless about the first step. Your mind is full of ideas, yet you don't know where to start. So you might just say, "Help me build a certain system," throw everything to AI, and then watch helplessly as it writes more and more chaotically, making you increasingly unsure.

This article is Part 1 of the "Vibe Coding" series, focusing on the workflow of AI development from project initiation to before writing code. The entire series covers: project initiation, task breakdown, technology selection, and project architecture. This part focuses on the early preparation phase — how to lay the groundwork and establish rules before writing code.

Four Key Steps Before AI Writes Business Logic

Before letting AI handle business functions, there are four crucial steps: project initiation and feature list, technology stack selection, project architecture setup, and writing an Agent Constitution. Only after completing these four steps can you say the groundwork and rules are properly established.

Step 1: Project Initiation and Feature List

This is the starting point of the entire process, and it's also the step many people are tempted to skip. Project initiation means figuring out what the project is supposed to do. The feature list involves breaking that down into clear, individual features.

Key reminder: if you skimp on this step, rework is likely later. Because if you don't know what you need, AI will be guessing when building the project. When developing with AI, the only thing that changes is the role in development. Previously, you had to clarify business requirements with programmers. Now, AI is your programmer, so you must clarify requirements with AI clearly. Whether dealing with a professional programmer or AI, ambiguous requirements are always dangerous.

Step 2: Technology Stack Selection

Once you've decided what the project will do, you need to decide what technologies to use. You need to determine the front-end tech stack, component library, back-end language, and framework.

The key here isn't to pick the most advanced or powerful technologies, but the ones that best suit your project and that AI is most familiar with. If you choose wrong, problems often surface halfway through, and starting over is very time-consuming.

Once the technology stack is decided, don't waver. If the front-end switches from React to Vue overnight, or the back-end from Python to Go, each waver means rebuilding the previous groundwork.

Step 3: Project Architecture Setup

After deciding on the technology stack, set up the project architecture. Whether front-end or back-end, before writing business logic, first set up a solid and stable project architecture. It's like building a skyscraper — you don't start by decorating a room; you first set up the foundation, framework, and load-bearing walls.

This step isn't about having AI write all features like login, orders, and payments right away. Instead, first set up a minimal, runnable framework and establish general rules:

• Back-end: Ensure the project can start, configurations can be read, interfaces return consistently, error handling is uniform, and set up logging, database connections, and permission entry points.
• Front-end: Decide how to structure directories, standardize components, unify request handling, and manage state.

In short, for both front-end and back-end, first establish a set of rules that every feature will follow.

Step 4: Writing an Agent Constitution

Once the groundwork is laid, establish an "Agent Constitution" for the project — a set of rules for AI to follow when working on the project, rules that must be adhered to for any feature.

How it works: Most AI programming tools have a mechanism where if you place the rule file in a specified location, the tool automatically reads it into AI's context every time it starts a task. Before you ask AI to do anything, it "recites" these rules from start to finish. So it actually influences every decision AI makes.

Where to place it: Different tools require different locations and filenames. The most reliable way is to ask your AI tool directly:

Please create an Agent Constitution file in the location
that this tool automatically reads.

Don't confuse it with the project architecture design document. The architecture document describes how the project's code is organized. The Agent Constitution defines the behavioral rules AI must follow, such as:

• Must follow the architecture design document
• If changing the underlying layer, framework, or adding new dependencies, explain the reason first
• Use the framework's built-in capabilities instead of writing from scratch whenever possible
• Self-inspect after completing each phase

How to write it: Don't create from scratch. Use a general template, but don't just copy it directly. Give the template to AI and say:

Please create a project-specific Agent Constitution based
on the actual situation of the current project and this
general template.

The key is "based on your project's actual situation" — your project initiation, feature list, and technology stack aren't in the general template. AI needs to adapt these general rules to your project's specific language, framework, and business for the Constitution to be truly effective.

After customization, glance through it. If there's anything you don't understand, ask AI to explain each rule in plain language.

Part 1 Summary

The four steps in Part 1 are:

1. Project Initiation and Feature List: Clarify what to build and break it into individual features
2. Technology Stack Selection: Choose what's best for your project and what AI is familiar with, then stick with it
3. Project Architecture Setup: For both front-end and back-end, first set up a runnable framework and establish uniform rules
4. Write an Agent Constitution: Document the rules AI must follow for all features, ensuring AI reviews them before each task

After these four steps, the groundwork and rules are in place. Remember: once the groundwork is laid, try not to redo it later. Once the groundwork and rules are set, the next step is to have AI start writing code — how to break each major phase into detailed sub-phases and guide AI step by step will be covered in Part 2.

常见问题

What's the difference between an Agent Constitution and a project architecture document?

The architecture document describes what your project looks like — directory structure, component organization, data flow, and technical decisions. The Agent Constitution describes how AI should behave when working on the project — rules like "explain before changing dependencies" or "use framework built-ins instead of writing from scratch." Think of the architecture as the blueprint of the building, and the Constitution as the safety and quality rules all construction workers must follow. Both are needed; they serve different purposes.

Can I skip the preparation steps and just start prompting AI to build features?

You can, and many beginners do. But the cost shows up later: AI writes inconsistent code, makes conflicting technology choices, produces spaghetti architecture, and you spend more time fixing than building. The four preparation steps take 1-2 hours upfront but save days of rework. It's the difference between building a house with blueprints and permits versus just stacking bricks and hoping it stands. For any project you intend to maintain beyond a weekend prototype, the preparation is worth it.

Which AI tool is best for Vibe Coding — Codex, Claude Code, or Cursor?

All three work well for this workflow. Codex has the most mature Agent Constitution support (AGENTS.md auto-loading) and strong project scaffolding. Claude Code excels at the architecture setup phase — its agent loop naturally handles multi-file project initialization. Cursor is great for the iterative refinement steps where you're tweaking UI and behavior. Many experienced Vibe Coders use a combination: Claude Code for architecture and initial setup, Codex for feature development, Cursor for polishing. But any single one of these tools can handle the full workflow described in this article.