VibeMap Logo

End-to-end walkthrough: blank project → shipping code

On this page

End-to-end walkthrough: blank project → shipping code

The whole VibeMap journey strung together in the order you'll actually do it, with "you should now see X" checkpoints. · Recommended

This is the single best page to read once if you're new to VibeMap. It links every other section of the guide in sequence. If you're already past the spec and just want the agent handoff, skip to §4 Hand off.

The full flow at a glance

  1. Create a project and write a clear prompt.
  2. Generate the spec — personas, features, user stories, acceptance criteria, pages, schema.
  3. Prepare for Development — derive the build-ready blueprint (interactions, state machines, permissions, data contracts) plus your Foundation stack.
  4. Plan sprints — group your ACs into a dependency-respecting build order.
  5. Connect your IDE agent via MCP, then point it at the project.
  6. Watch and review — cards move across the Track board in real time; you approve, and the next AC unlocks.

The web app does steps 1–5 and gives you the observation surface for 6. The actual code-writing happens in your IDE, by your coding agent of choice, against your real repository — or in-app via the App Builder.

1. Create a project and generate the spec

Work top-to-bottom through the project tabs. Each has its own guide:

Checkpoint: you have features grouped by persona, each with user stories, each with acceptance criteria, plus pages and a schema.

2. Prepare for Development

Open the Prepare page and click Prepare for Development (Pro+). It runs a spec-coverage pre-step, then four parallel pipelines, and auto-derives your Foundation stack. Resolve any flagged items and clear coverage gaps. Full guide → 10.1 Prepare for Development.

Checkpoint: the Prepare page shows its green "Your spec is signed off" banner with a Go to Develop button. Scroll down to sanity-check the Blueprint Preview Map.

3. Plan sprints

Open the Development page → Plan tab → Plan Sprints (Pro+). VibeMap sorts your ACs by dependency and groups them into themed sprints. Full guide → 10.2 Sprint planning.

Checkpoint: a sprint Gantt appears with titles like "Auth & Sign-up" and "Billing & Subscriptions", and the Plan tab's status dot turns green.

4. Hand off

This is where VibeMap finishes its job and your coding agent takes over.

Provision an API key

Your agent authenticates against the MCP server with a personal access token. The Hand off tab checks whether you have one and links to Account → Developer → Generate New Key. Name it after the agent or machine that'll use it, and copy it immediately — it's shown once.

Connect your IDE agent

The Hand off tab gives you the MCP config for your project. Paste it into your IDE's MCP config, substitute your API key, and restart. Full step-by-step for each IDE → 11.2 Connect your IDE.

Checkpoint: Claude Code shows the hammer icon; Cursor/Windsurf show vibemap connected. Ask "List my VibeMap projects" and it returns them.

Point your agent at the project

Give your agent a single instruction along the lines of:

Use the VibeMap MCP server. Get the next ready acceptance criterion from project <project-id>, claim it, implement it in this repo, then submit it for review with a git SHA and a short description. Then loop.

The agent will get the next ready AC, claim it so nobody else takes it, read its spec context, write the code, and submit for review.

5. Watch and review

Stay on the Track tab. Cards move Ready → In Progress → In Review → Passed in real time, with a live Activity feed below. When an AC lands in In Review, you (or your CI) approve it — agents can't approve their own work. Each approval unblocks the next AC. Full guide → 11.3 Watching progress.

Checkpoint: within a minute of pointing the agent at the project, a card moves into "In Progress" with your agent's name beside it.

↔ The traditional way

Traditionally this is weeks of work by several people: a PM writes a PRD, an architect designs the data model and permissions, a lead breaks it into tickets and sequences them, and only then does a developer start. VibeMap compresses the whole chain — spec, blueprint, sprint plan, and a live handoff to your own coding agent — into an afternoon, and keeps every artefact in sync as things change.

What's next