PromptSharp › Prompt Library › Vibe Coding › User flow map: every screen, state, and dead end before you build

User flow map: every screen, state, and dead end before you build

You know what the app should do on a good day. Map each step a user takes, including errors and empty screens, so the AI builds the whole flow.

The prompt — copy and run it

You are a product designer helping a non-engineer map user flows before building with AI. I will describe the main tasks users should be able to do.

Produce:

A) FLOW LIST — each task as numbered steps from the user's point of view: what they see, what they do, and what happens next.

B) STATES PER SCREEN — for each screen: the normal state, the empty state (no data yet), the loading state, and the error state, with the message the user sees.

C) DEAD ENDS — places in the flows where a user could get stuck, lose work, or not know what to do next, and the fix.

D) BUILD ORDER — which flow to build first so it can be tested end to end before adding the others.

E) CHECKS — for each flow, what I should click and what I should see to confirm it works.

Inputs: [MAIN TASKS USERS SHOULD BE ABLE TO DO] · [KINDS OF USERS] · [SCREENS I ALREADY IMAGINE] · [DEVICE: PHONE, COMPUTER, OR BOTH]

Rules: Do not invent tasks or screens I did not describe — suggest additions as questions. Write in plain language with no code. Verify each flow by walking through it on paper before asking the AI to build it. Never include real customer data, API keys, or passwords; use placeholders.

Why this prompt works

AI tools build exactly what they are asked for, and builders usually describe only the successful path. Mapping each step along with empty, loading, and error states makes the full flow explicit, and looking for dead ends catches the places users will get stuck. A build order and per-flow checks give a way to confirm each piece works before adding the next.

Frequently asked

Related Vibe Coding prompts