Introduction: Embrace the Vibe Code

This is a modular blueprint, not a rigid set of instructions. At each critical step, you will be presented with options. Your goal is to choose the technology that best fits your project's needs and use the provided prompt templates to guide your LLM assistant. This iterative approach—building and testing one complete feature at a time—is the core of the "vibe coding" philosophy.

Phase 1: Environment & Tooling Setup

This phase prepares your local development environment. It's all about getting the foundational tools and CLIs configured before writing a single line of application code.

1.1. Prerequisites & Project Initialization

• Ensure **Docker Desktop** is installed and running.
• Ensure your chosen **LLM Command-Line Tool** (e.g., Claude Code, `aide`) is installed.
• Open your terminal and initialize your project:

mkdir [YOUR_PROJECT_NAME]
cd [YOUR_PROJECT_NAME]
# Run your LLM's initialization command if required

1.2. CLI Configuration (Your Choice)

Automate your workflow by integrating your LLM with essential command-line interfaces.

"Set up the [DATABASE_NAME] CLI and spawn a local instance using Docker. Generate and display all necessary local connection credentials (host, port, user, password, database name)."

1.3. Managed Component Provider (MCP) Setup

MCPs act as powerful extensions, allowing your LLM to interact with external services directly. Configure the ones you need for your chosen stack.

"Add an MCP for [DEPLOYMENT_PLATFORM] to handle deployments. Let's name it '[PLATFORM_NAME]-mcp'. If it requires an API key or certificate, prompt me for it."

"Add an MCP for [TESTING_FRAMEWORK] to automate browser testing. Let's name it '[FRAMEWORK_NAME]-mcp'."

Phase 2: Foundational Application Shell

This phase focuses on building the absolute minimum viable application – a "hello world" setup with a basic frontend and backend, orchestrated with Docker.

2.1. Basic Frontend

We'll start with a stack-agnostic static frontend served by Nginx within a Docker container.

• Prompt the LLM:

  "Create a `frontend` directory. Inside, generate:
  1. `index.html`: A basic HTML5 boilerplate with a title and a `
  ` tag.
  2. `style.css`: An empty CSS file.
  3. `script.js`: An empty JavaScript file.
  Also, create a `Dockerfile` in the `frontend` directory that uses a lightweight `nginx` image to serve these static files."

  Copy Code

2.2. Basic Backend (Your Choice)

Next, set up a simple backend, containerized with Docker.

• Prompt the LLM (Example for FastAPI):

  "Create a `backend` directory. Inside, generate the necessary files for a minimal [BACKEND_FRAMEWORK] application. It should have one root endpoint `/` that returns a simple JSON health check response like `{'status': 'ok'}`. Also, create the necessary dependency file (e.g., `requirements.txt`, `package.json`) and a `Dockerfile` to containerize the application."

  Copy Code

2.3. Orchestration with Docker Compose

Finally, use Docker Compose to define and run all your services together.

• Prompt the LLM:

  "In the root directory, create a `docker-compose.yml` file. Define services for the `frontend`, `backend`, and the database based on my earlier choice. Configure it so the `frontend` is on port `8080` and the `backend` is on port `8000`."

  Copy Code

Phase 3: Feature Development (Backend First)

This is where the core logic is built. We'll add a new feature, always starting with the backend API.

3.1. Define Backend Goal & Provide Context

Clearly state what the backend should do and provide all necessary information (API docs, keys).

• Prompt the LLM:

  "We will now build a new feature: [DESCRIBE_YOUR_FEATURE]. Create a new backend endpoint at `/[endpoint-name]` that accepts a [HTTP_METHOD] request. It will need to [DESCRIBE_THE_LOGIC]. I am providing the necessary context: [PASTE_API_DOCS_OR_KEYS_HERE]."

  Copy Code

3.2. Implement & Test Backend Endpoint

Instruct the LLM to write the code and then provide a way to test it in isolation.

• Prompt the LLM:

  "Now, modify the main backend application file (e.g., `main.py` for FastAPI, `server.js` for Express) to implement the `/[endpoint-name]` endpoint. After implementation, provide me with a `curl` command to test the new endpoint locally."

  Copy Code

Phase 4: Frontend Integration

With a working backend, it's time to connect the user interface to make the feature interactive.

4.1. Update UI & Add Frontend Logic

• Prompt the LLM:

  "Modify `frontend/index.html` to add the necessary form inputs, buttons, and display areas for the new feature. Then, update `frontend/script.js` to add an event listener. When triggered, it should use the `fetch` API to call our new backend endpoint at `http://localhost:8000/[endpoint-name]` and display the results on the page."

  Copy Code

Phase 5: Test & Version Control

Before deploying, ensure the new feature works end-to-end and save your progress to Git.

5.1. End-to-End Test

• Prompt the LLM:

  "Using the `[YOUR_TESTING_FRAMEWORK]-mcp`, write a test script. It should launch a browser, navigate to the app, interact with the new feature's UI elements, and verify that the expected result appears on the page."

  Copy Code

5.2. Commit to Git & Push to GitHub

• Prompt the LLM:

  "Add all the project files to git and create a commit with the message: `feat: add [feature_name] functionality`. Then, push the changes to the `main` branch of my GitHub repository."

  Copy Code

Phase 6: Deploy

Your feature is complete, tested, and version-controlled. Now, push it to your live environment.

• Prompt the LLM:

  "Create or update the deployment configuration file (e.g., `deploy.yml`, `Dockerfile`, etc.) for [YOUR_DEPLOYMENT_PLATFORM]. Then, use the `[PLATFORM_NAME]-mcp` to deploy the latest version of the application from the GitHub repository. Provide me with the live URL and instructions to monitor the deployment."

  Copy Code