PromptUX designUpdated January 3, 2026

User Flow Mapping

Create detailed user flow diagrams with decision points, interactions, and edge cases.

Prompt

Create a comprehensive user flow for [task/feature]. Include:

1. Flow Overview
   - Primary user goal
   - Entry points
   - Success criteria
   - Key personas

2. Step-by-Step Flow
   - Each step in the user journey
   - User actions at each step
   - System responses
   - Decision points and branches
   - Error states and recovery paths

3. Interaction Details
   - UI elements involved
   - Required inputs
   - Validation points
   - Feedback mechanisms

4. Edge Cases
   - Alternative paths
   - Error scenarios
   - Empty states
   - Offline/error handling

5. Visual Flow Diagram
   - Flowchart notation
   - Decision diamonds
   - Process rectangles
   - Start/end points

Format as a detailed user flow document with visual representation.

How to use

1Replace [page/screen name] with your specific screen (e.g., "User Dashboard", "Checkout Process", "Onboarding Flow")
2Add context about the feature: Before the prompt, describe the user goal and key interactions. Example: "This is a checkout flow. Users need to: add items, enter shipping info, select payment, confirm order."
3If you have reference flows: Upload screenshots of similar user flows or competitor flows. Say "Create a flow similar to Stripe's checkout but for our product"
4Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude
5Review the generated wireframe: The AI will create a detailed layout structure with annotations
6Ask for variations: Request "mobile layout version" or "alternative layout for smaller screens"
7Export or refine: Use the wireframe as a blueprint for Figma designs or ask for more detailed specifications

Pro Tips

• Include examples of layouts you like: "Make the wireframe similar to Linear's dashboard layout - clean sidebar navigation"
• Specify platform: Mention "mobile-first layout" or "desktop dashboard layout" for better results
• Request visual diagrams: Ask "Create a flowchart diagram of the user flow" for presentation purposes
• Ask for responsive breakpoints: "Show how this adapts for mobile, tablet, and desktop"
• Use wireframes as input for other prompts: The layout can be converted to code or Figma designs

Related Prompts

Visual design

UI Layout & Composition Explorer

Three layout concepts (hierarchy-first, density, progressive disclosure), a recommended direction, grid spec, visual hierarchy ranking, and edge cases before detailed design.

visual-designlayoutcomposition

UX design