In-app UI Preview
On this page
In-app UI Preview
A live, interactive render of any page in your spec — a design checkpoint, not production code. · Recommended
VibeMap renders a working preview of each page directly in the browser, inside a Sandpack sandbox. Use it to sanity-check the shape of a page — right sections, right order, sensible empty states — before your coding agent implements it for real. Skip it if you're happy reading the spec, but it's the fastest way to walk a teammate through a screen.
Opening a preview
- Open the Pages tab and select the Preview view.
- Pick a page from the explorer on the left.
- The Sandpack panel renders it live, with mock data so the page isn't empty.
The first render for a page takes a few seconds; reopening is near-instant. The preview shows the section layout from your spec, interactive states (hover, loading, empty, validation) where the spec calls for them, and adapts to a mobile / desktop breakpoint as the panel resizes.
Why this isn't your production code
It's tempting to copy code out of the sandbox. Don't — for three reasons:
- It doesn't match your stack. The preview uses a fixed component set inside Sandpack; your real project uses its own patterns, tokens, and conventions.
- It doesn't know your data layer. The mock data is invented — production hits your real APIs and schema.
- The MCP handoff is strictly better. Your IDE agent reads the page spec directly, makes decisions for your codebase, and submits work for review. That loop improves with use; pasted preview code doesn't.
For the production-code path → Handoff to your AI agent.
⚡ Power-user hints
- Regenerate after editing the spec. An open preview won't pick up section or metadata changes — reopen the page to refresh.
- Judge structure, not pixels. The preview's job is layout and flow; your agent handles real styling from the Branding tokens in your own codebase.
- Use it as an approval gate. Walking the sandbox is faster than reading a section list aloud in review.
↔ The traditional way
A designer normally builds clickable Figma prototypes to validate layout before dev starts — a separate tool, a separate artefact, and one more thing to keep in sync with the spec. Here the preview is generated from the spec, so what you approve is exactly what your coding agent receives.
What's next
- See the whole project as one map → Graph view
- Design the data behind these pages → Generating the schema