Mockup import.

Mockup import brings a UI prototype built with Lovable, v0, bolt.new, or Base44 into Specgraph. Where Discovery reverse-engineers a real codebase, mockup import reverse-engineers a clickable prototype — capturing only what's on screen and how the user moves between screens.

How it works, in three steps #

1. Install the specgraph-mockup-import skill in Claude Code. The Mockup page has the install snippet for macOS, Linux, and Windows.
2. Export your prototype from Lovable / v0 / Bolt / Base44 as a zip or git repo, unzip it locally, then run the skill inside that folder. It walks the route tree, reads each page's layout + components, traces navigation between pages, and writes a mockup.md to the repo root.
3. Upload mockup.md on the Mockup page. The right-hand panel parses it live and shows the parsed preview.

The skill self-triggers from natural-language phrases too — "import this mockup into Specgraph" inside Claude Code launches it without a slash command.

What the parser captures #

UI / navigation / screens / UX only:

• Pages — name, route, one-line purpose, layout shell, named components on the page.
• Journeys — entry, the page-to-page steps, success outcome.
• Stories — short "as a … I want … so that …" statements implied by the journeys, with the pages they touch.
• Open questions — orphan pages, ambiguous flows, missing copy.

What it does NOT capture #

Mockup import is deliberately narrower than Discovery. The skill skips:

• Tech stack — Lovable / v0 / Bolt / Base44 emit code as a side effect of the tool, not as your architecture choice. You'll pick the real stack in P-05 (Architecture).
• Auth model, integrations, API endpoints, database schema — clickable prototypes don't reliably show these. A "Sign in with Google" button is decoration; a Stripe logo is decoration.
• Personas, KPIs, risks — you'll fill these in the Vision interview.

What it pre-fills downstream #

When you click Create project from mockup, four phases land flagged for review:

• P-01 Vision — problem (from Overview), primary users, value (from Outcome).
• P-02 Features — one feature per Page (FR-001 …), each tagged as discovery-sourced so the BMAD pack composer marks them as already-implemented rather than queuing them as ready-for-dev.
• P-03 Brief — overview + open questions.
• P-04 Design — screens (route + purpose + layout + components) and user journeys.

You then run the standard interview to confirm or refine each pre-filled phase before locking.

When to use Mockup import vs Intake vs Discovery #

If you're not sure: prototype → mockup import; code → Discovery; neither → Intake.