Page Map

Sketch every page and the jumps between them before you start building.

Before writing the first line of code, draw every page and the transitions between them on a single diagram. Page count is scope; jump relationships are complexity.

What you'll run into:

• Halfway through, you discover a page has no entry point, or you can get in but not out
• The same content has three entry points, and they each show something different
• You let the AI build pages one at a time, then find they don't connect

Building one page at a time, each one reasonable in isolation, yet the whole thing falls apart when stitched together — this is the most common structural problem in vibecoding. The AI only ever sees the current page; the jump relationships live only in your head. Unless you draw them out, they don't exist.

How to draw it

Work through four steps, one thing at a time:

Keep the two line styles apart — mixed together, you can't tell which jumps are structural and which are procedural, and you'll miss some when you revise. Site maps have been a planning artifact since the design stage of web projects, exactly for working out the structure before building. site-map The form doesn't matter — a mind map, indented text, or a Mermaid snippet the AI generates are all fine. What counts is that the diagram turns jump relationships into something visible and editable.

Four checks once it's drawn

• Every page needs at least one entry point. A page with no entry doesn't exist, unless it's only reached through a shared link.
• Every page needs a way out. A page you can enter but not leave is fatal on mobile — the user can only quit the app. The share page is the classic dead end: it has an incoming line and no outgoing one, so after reading it the user exits the whole app.
• Count the depth. Beyond three levels, go back and see if you can pull things up (see Wide and Shallow).
• Check how many entries the same content has. Multiple entries aren't the problem; each showing different things is.

A note for the AI

Put the map into context so the AI knows where each page sits in the overall picture when it builds it.

PROMPT · page map

This is the product's page map. Every future page you build must follow it:

Hierarchy (solid lines):
- Project list
  - Project detail
    - Revision history
    - Generate statement
  - New project

Flow jumps (dashed lines):
- New project  after completion -> Project detail
- Generate statement  after completion -> Project detail
- Any page  when not logged in -> Login page

Constraints:
- Do not add pages outside this map. If you really need a new page,
  first tell me which layer it belongs to and where its entry comes
  from; wait for my confirmation.
- Every page must have a path back to the level above.
- When building a page, implement its entry and exit together; don't
  leave dead ends.

Now start building: [page name]

That last constraint saves a lot of rework. The AI defaults to building only the page you named; the entry point and return path are often empty, and you only notice when you click in.

This is why the map exists: it turns the jump relationships in your head into something external. You can review it with other people, paste it into the AI's context, count the depth, and hunt for dead ends. The map isn't the finish line, though — before you build the first page, draw the information structure diagram as well, so "pages connect" has a basis beyond the boxes.