§ output

Understand your blueprint

A VisualPRD blueprint is a layered technical architecture. Here's what each layer means and how to use it.

Flows

A flow is a complete user journey — the path a user takes to accomplish one goal. Every feature you selected in the interview maps to one or more flows.

Example flow: Authentication

Sign up page → email verification → onboarding form → dashboard. Each step is a page; each transition has a defined trigger and outcome.

→ TipThink of flows as swimlanes. They're independent but can reference each other — for example, "Checkout flow" depends on "Auth flow" being complete first.

Pages

Each page in a flow maps to a screen your users will see. Pages include their route, the data they display, the actions a user can take, and which functions they call.

What a page spec includes

Route path · Component name · Data requirements (what to fetch) · User actions (buttons, forms) · Navigation outcomes (where each action leads) · Design notes from your screenshots (if you uploaded mockups).

Functions

Functions are the heavy-business-logic operations your app needs — not UI glue. Things like "charge a card", "send a notification", "calculate a score."

What a function spec includes

Name · Inputs and outputs · Which page triggers it · Side effects (database writes, external API calls) · Error cases.

§ NoteFunctions are intentionally backend-agnostic. The spec describes what the function does in plain English. Your AI coding tool fills in the implementation using whichever backend you chose.

Build instructions

Build instructions are the layer Claude Code and Cursor actually read. Each flow exports a build.md file telling an AI coding agent exactly what to build, in what order, with what constraints.

What build instructions include

Step-by-step build order · Which files to create · Data model definitions · API contract · Test criteria · Cost and infrastructure notes.