What is VibeMap?

VibeMap is the spec layer for vibe coding — it turns a plain-language product idea into a complete, build-ready specification, then hands it to your own AI coding agent. · Recommended

This is the front door to the guide. It covers the problem VibeMap solves, what you actually get out of it, whether you're in the right place, and what you need before you start.

Already oriented? For the whole journey in one read, go to the end-to-end walkthrough. For the map you keep open in a second tab while you work, go to the Progression Map. To just get going, go to Creating your first project.

The problem

AI coding agents write code fast and forget what you meant. A prompt isn't a plan: each session re-guesses the product, so the codebase accumulates conflicting files, dead code, and half-built features nobody decided on. The known fix — write the spec first — is days of work most people skip, and a hand-written spec drifts out of date the moment anything changes.

What you get

VibeMap is the spec layer: the planning stage that sits between a product idea and an AI coding agent. Describe your product in plain language and VibeMap generates what a team would otherwise write by hand over weeks:

• Personas — the user roles you're building for.
• Features, user stories and acceptance criteria — criteria written as Given / When / Then, each tagged happy path, edge case, or failure state.
• Pages — every route, what it's for, and the data it needs.
• A database schema — tables, columns, types, and relationships.

These aren't four separate documents. Every story belongs to a feature and a persona, every criterion to a story, every page to the flows it serves — so a change in one place is traceable to everything it affects.

Then VibeMap hands the whole thing to your own AI coding agent (Cursor, Claude Code, Windsurf, VS Code Copilot) over the Model Context Protocol (MCP), so your agent builds from a structured brief — one acceptance criterion at a time, in your own repository — instead of from an evolving prompt. Prefer to stay in the browser? The App Builder can compile the spec into a running Next.js + Supabase app instead.

Are you in the right place?

Yes — if you have a product idea (or an existing codebase) and you want a plan your coding agent can build from, or you simply want a PRD, user stories and a schema without assembling them by hand.

Probably not — if what you want is a working prototype straight out of a prompt. Tools like Lovable, Bolt and Base44 do that. VibeMap sits upstream of them: it produces the specification they — or your own agent — build from, which is what keeps an app coherent past the prototype stage. Using both is common.

Who it's for

Before you start

To generate a spec you need nothing but a browser. Sign up with email, Google or GitHub — the free plan costs nothing and asks for no credit card (Creating an account). Everything you generate stays readable and portable: the PRD and Dev Spec tabs on the project Overview both have Copy and Download buttons, so you can take the whole spec away as Markdown without connecting anything.

To build from the spec you need one of these:

• Your own AI coding agent in your IDE — Cursor, Claude Code, Windsurf or VS Code Copilot — connected once over MCP. See Connect your IDE.
• A Jira instance, if your team works from a board. See Export to Jira.
• The in-app App Builder (Pro plan and above), which compiles the spec into a running Next.js + Supabase app. See App Builder.

What your plan covers. The free plan gives you one project and the top of the spec — summary, personas, features, user stories, acceptance criteria. Pages, the database schema and the conversational agent need Starter; Prepare for Dev and sprint planning need Pro. The ranked table in the Progression Map marks the plan for every step; Account & billing has the full breakdown.

💡 Want to look before you sign up? Two things are open to everyone:

• The live demo — a complete, fully generated VibeMap project you can click through end to end, no account needed.
• The free tools — five standalone generators (database schema, business case, user story, acceptance criteria, persona) that run without signing in. Handy on their own, and a fair sample of what the full pipeline produces.

The four-phase journey

The project editor — and this guide — are organised as one continuous journey. Every screen belongs to one of four phases:

1. Research — validate the idea: an AI-generated project summary, a live-web-research business case, and an optional financial analysis.
2. Plan — author the spec: personas → features → user stories → acceptance criteria → pages → schema. Pages come before schema on purpose: page layouts give the schema generator richer context.
3. Prepare — turn the spec into a build-ready blueprint and get an honest "ready to build" signal.
4. Develop — hand off to your IDE agent via MCP, export to Jira, or build in-app with the App Builder.

It's a loop, not a line. Green dots in the sidebar and the progress strip on the project Overview show which steps already have content, and the strip always points at the recommended next action.

💡 Tip: The Progression Map is the full version of this — every step ranked, what it produces, what plan it needs, and when you can safely skip it. Keep it open in a second tab while you work.

How the AI pipeline works

VibeMap uses a multi-step pipeline rather than a single prompt-and-response:

1. Project summary — the AI reads your description and produces a structured overview: goals, audience, value proposition, and scope.
2. Sequential generation — each deliverable is generated in order, with every step receiving the full context of the steps before it.
3. Multi-provider intelligence — different generation tasks are routed to the model best suited to the job (Anthropic, OpenAI, Google), combining providers for the best result.
4. Refinement — edit, regenerate, or extend any deliverable. Changes cascade context to everything downstream.

Because each step sees the full picture, the output is far more coherent than a single prompt could produce.

💡 Tip: You don't have to drive the pipeline by hand. On the Starter plan and above, the built-in conversational agent can run any generation, edit your spec by natural request, and answer questions about it — all versioned, so you can revert anything.

⚡ Power-user hints

• Skip straight to build. Have a codebase already? Choose Start from existing code when creating a project and your agent reverse-engineers it into specs via MCP — no prompt needed. See Creating your first project.
• Start from a template. For a common app shape (SaaS, marketplace, e-commerce), a prebuilt template drops a full foundation into your account in one click, so you customise instead of generating from scratch.
• Reference anything by its code. Every entity has a short code (persona PER-001, page PG-002, table/field T-001.email). The agent understands them, so you can say "combine PG-002 and PG-003" precisely.

↔ The traditional way

Without VibeMap, a team assembles this by hand: a PM drafts a PRD and user stories, a designer sketches the page inventory, an architect draws the ERD, and a lead breaks it all into tickets — days to weeks of work that drifts out of sync the moment anything changes. VibeMap generates the same artifacts in minutes, keeps them cross-referenced so a change in one propagates to the rest, and then feeds your coding agent a clean, sequenced backlog instead of a static document.

What's next

• Creating an account — sign up and reach the dashboard.
• Creating your first project — from an idea or from existing code.
• The Progression Map — every step ranked, with the plan each one needs. The page to keep open while you work.
• End-to-end walkthrough — the whole journey, blank project to shipping code, in one read.