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 whole journey end to end in one read — every other section of the guide, linked in the order you'll actually do it. If you're brand new, What is VibeMap? is the front door and points you back here. If you're already past the spec and just want the agent handoff, skip to §4 Hand off.

The full flow at a glance

Each step below is a section of this page, in order.

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

The web app does steps 1–4 and gives you the observation surface for 5. 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 sidebar. Each section 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 for Dev 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 → Prepare for Dev.

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 Sprint Planning page — it sits under Prepare in the project sidebar — and click Plan Sprints (Pro+). VibeMap sorts your ACs by dependency and groups them into themed sprints. Full guide → Sprint planning.

Checkpoint: a sprint Gantt appears with titles like "Auth & Sign-up" and "Billing & Subscriptions", with a live passed/total count above it.

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 ⓘ Handoff Instructions panel on the Development board checks whether you have one and links to Account → Developer → Generate 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 same panel 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 → 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 Development board. Cards move Ready → In Progress → In Review → Done 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 → 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.

⚡ Power-user hints

  • Steps 1–2 can run on your agent instead of ours. The same MCP connection that builds the spec can author it — personas, features, stories, criteria and pages — on your own model subscription. See Two ways to generate.
  • The connection is account-wide, not per project. One vm_ key covers every project you own; Use in IDE in the project sidebar has that project's id ready to copy, plus paste-ready prompts.
  • Already have a codebase? Skip the blank prompt and start at Codebase sync & code map — your agent maps the repo first, and the spec is generated from what the code really does.

↔ 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