← All Essential Documents
Document Blueprint
🛣️ User Flow / Flowchart
A planning diagram showing the path a user takes through an app or website.
Why it matters in Vibe Coding
Defining the exact screens a user sees prevents the AI from skipping crucial intermediate steps (like a loading state, an error toast, or a success modal). User flows force you to think through every interaction before generating UI components.
AI Generation Prompt
Paste this prompt into Claude, ChatGPT, or Gemini to instantly generate a professional draft of this document.
Outline a step-by-step User Flow for a user trying to [goal]. Start from the moment they land on the page until they complete the action. Include all intermediate states (loading, empty states, error states) and email confirmations if applicable.