The Progression Map

The whole VibeMap journey on one page — what to do, in what order, what's required, what plan it needs, and how to know when you're ready to build. · Recommended

This is the reference map, not the starting point: keep it open in a second tab and come back to it whenever you're unsure what to do next. If you're brand new, read What is VibeMap? first, or the end-to-end walkthrough for the same journey told as one continuous story.

VibeMap turns a product idea into a build-ready specification and then hands it to an AI coding agent. The work happens in four phases, and the app's sidebar and Overview strip follow the same order. Every step below links to its full guide.

💡 Tip: You never have to do every step. The required spine (features → user stories → acceptance criteria → pages → schema) is what makes a project buildable. Everything else sharpens the result or suits a particular workflow.

The four phases at a glance

RESEARCH ──▶ PLAN ──────────────▶ PREPARE ──────▶ DEVELOP
validate    author the spec       make it         hand off / build
the idea    (the required spine)  build-ready

Every step, ranked

Badges: Required (a project isn't buildable without it) · Recommended (most projects want it) · Optional (specific workflows or extra polish). The Plan column is the lowest plan that can run the step — "Any" includes Free.

⚠️ What a build-ready spec costs. The Required badges describe the spec, not your plan — and three required steps are gated. Personas, features, user stories and acceptance criteria run on Free, so a free project can reach a solid PRD you can copy or download as Markdown. But pages and the database schema need Starter, and Prepare for Dev needs Pro (as do sprint planning, the conversational agent, the business case and the App Builder). In short: a spec your agent can build from starts at Starter; the full readiness check and blueprint start at Pro. Full matrix → Account & billing.

💡 MCP is not a paid add-on. Connecting your IDE agent works on every plan, including Free — see Two ways to generate. What's gated is the capability, not the connection: authoring pages or a schema through your agent needs the same Starter plan the in-app Generate button does.

⚠️ Watch out: Pages come before schema on purpose — your page layouts give the schema generator richer context. And it's a loop, not a line: acceptance criteria derive from features and can later be cross-checked against your pages.

Two journey modes: idea-first and code-first

The order above is the idea-first journey, and it's what the rest of this guide assumes. Projects created with Start from existing code get a code-first journey instead: the same pages and the same URLs, but regrouped so the codebase leads and the spec is framed as reverse-engineered from it.

Nothing is taken away in code-first mode — the steps under Also available work exactly as documented, and the routes are identical either way. So wherever this guide says "open the Pages page", a code-first project has that same page under Extract Specs. See Codebase sync & Code Map for the code-first entry point.

Two ways to travel: guided vs. self-driven

Every project has a Guide me / I'll drive toggle in the agent panel (on by default). It changes how much the agent volunteers — not what you're allowed to do.

Full detail: Guided mode. You can switch at any time; turning it off leaves the classic, do-it-yourself experience untouched.

⚡ Power user: Prefer to drive? Flip to I'll drive, use the conversational agent for targeted edits, and the section-page Generate buttons for bulk work. The guided layer never blocks anything — it only offers.

Two ways to generate each step: VibeMap or your own agent

Separately from how you're guided, each Plan step can be produced by two engines: Generate with VibeMap (hosted models, metered against your token budget) or Author with your own agent (your connected IDE agent writes it via MCP, on your own tokens — VibeMap only stores it, so it's free of your budget). The required spine ends up identical either way, so everything downstream works the same. Full detail: Two ways to generate.

Is my project done and ready to build?

Run this check before you hand off. VibeMap computes most of it for you on the Prepare for Dev page.

• Features exist and cover your core capabilities.
• Every feature has user stories (no "features without stories" gaps).
• Every story has acceptance criteria (no "stories without criteria" gaps).
• Pages cover every user flow, and no page is orphaned from a story.
• Schema has a table for every entity your features and pages imply.
• Prepare for Dev shows its green "your spec is signed off" banner — the run finished, coverage is clear, and every flagged item is resolved.

When those hold, your spec is build-ready: hand it to your IDE agent, export it to Jira, or build it in-app.

💡 Tip: The agent's Check my coverage chip (in the agent panel, any time) runs this gap report on demand — see Guided mode.

↔ The traditional way

Traditionally this journey is a relay of documents and specialists: a PM writes a PRD, a designer maps screens, an architect draws an ERD, a lead breaks work into tickets, and each handoff loses context. VibeMap keeps every artifact in one connected model, so a change to a feature is visible to its stories, pages, schema, and tickets at once — and the "done" check is computed, not argued.

What's next

• New here? Start with What is VibeMap?
• Want it as one continuous story instead of a map? Read the end-to-end walkthrough.
• Ready to spec? Jump to Features — the top of the required spine.
• Want the app to lead? Read Guided mode.