Design Userflow

User Flow Auto-Design

Core Principles

1. Exception paths are as important as happy paths: 80% of UX problems occur on exception paths
2. Zero tolerance for dead ends: Any path that prevents users from completing a task must be eliminated
3. Batch generation, human filtering: AI generates flow proposals in bulk, humans make final selection and judgment
4. Shortest path first: Core task path step count Human AI suggests -> Human approves

Interaction Mode

AI->Human AI suggests, human approves

Input

| Input Item | Type | Required | Source | Description | |------------|------|----------|--------|-------------| | PRD | markdown | Yes | output/pm-design/design-prd/prd.md | Product requirements document | | PRD Structured Data | JSON | O | output/pm-design/design-prd/prd.json | Machine-consumable PRD version containing userflows[]/pages[], for flow design alignment | | IA Proposal | JSON | Yes | output/pm-design/design-ia/iaproposals.json | Information architecture proposal from Pipeline 9 | | User Research Data | JSON | O | output/pm-discovery/user-research-voice-analysis / output/pm-discovery/user-research-behavior-analysis | User behavior patterns, task preferences |

Execution Steps

Step 1: Task Flow Generation [Core]

Define task-level flows:

• Starting Point: User enters scenario
• Step Sequence: Core path to complete task
• System Response: System feedback at each step
• End Point: Task completion state

Step 2: User Flow Generation [Core]

Expand into complete user flows:

• Conditional Branches: if/else decision nodes
• Exception Paths: Network errors, no permissions, empty states, etc.
• Return Paths: Operations to go back to previous step
• Alternative Paths: Different ways to accomplish the same goal

Each step must be annotated with:

• User action and system feedback
• Page location (page_id)
• Data operation type (read/create/update/delete) and related entity -- This is the direct input for downstream API design, helping api-design-spec precisely map user operations to API endpoints

Step 3: Flow Quality Auto-Check [Core]

Validate generated flows for quality:

| Check Item | Description | |-----------|-------------| | Shortest path | Minimum steps for core task | | Exception coverage | Exception path coverage rate | | Return paths | Whether return operations are supported | | Decision point information | Whether information at decision points is sufficient | | Dead ends | Situations where task cannot be completed |

Step 4: Flow Optimization Suggestions [Deep]

Propose improvements based on quality check results:

• Long path marking: Paths with >5 steps flagged
• Exception handling supplementation: Suggestions for uncovered exception scenarios
• Guidance suggestions: Guidance optimization for complex nodes
• Dead end handling: Eliminate or optimize dead ends

Output Depth Grading

| Depth Level | Output Scope | Description | |----------|----------|------| | quick | Task Flow and exception paths | Core conclusions + minimum viable deliverable | | standard | Full deliverables (default) | Complete output including all Steps | | deep | Full flow + exception path full coverage + flow performance optimization + multi-role flow matrix | Full deliverables + extended analysis + deep simulation |

Output

Storage Path: output/pm-design/design-userflow/ Output File: userflow.json

{
  "user_flow": {
    "task": "Core Task Name",
    "flow_type": "task_flow | user_flow",
    "steps": [
      {
        "step": 1,
        "step_id": "UF-S001",
        "action": "User Action",
        "page_id": "page-dashboard",
        "system_response": "System Feedback",
        "expected_outcome": "Expected Result",
        "error_handling": "Exception Handling",
        "data_operations": [
          {
            "operation_type": "read | create | update | delete",
            "related_entity": "entity_id",
            "description": "Description of data operation triggered by this step"
          }
        ],
        "branch": null
      },
      {
        "step": 2,
        "step_id": "UF-S002",
        "action": "User Action",
        "page_id": "page-courses",
        "system_response": "System Feedback",
        "expected_outcome": "Expected Result",
        "error_handling": "Exception Handling",
        "branch": {
          "condition": "Condition Description",
          "if_true": {
            "step_id": "UF-S002a",
            "action": "Action when condition is met",
            "page_id": "page-target",
            "expected_outcome": "Expected result when condition is met"
          },
          "if_false": {
            "step_id": "UF-S002b",
            "action": "Action when condition is not met",
            "page_id": "page-fallback",
            "expected_outcome": "Expected result when condition is not met"
          }
        }
      }
    ],
    "quality_check": {
      "shortest_path_steps": 3,
      "exception_coverage": 0.85,
      "dead_ends": 0,
      "issues": []
    }
  }
}

Output Validation Rules: See Output Validation Rules section below

Decision Rules

| Condition | Action | |-----------|--------| | Dead end count > 0 | Must fix, provide fix suggestion for each dead end | | Core task path step count > 7 | Mark "Path too long", suggest splitting into sub-flows | | Exception path coverage = 80%)

P1 Checks (must pass for standard/deep)

• [ ] Dead end count (= 0)
• [ ] Decision point information sufficiency (All decision points have sufficient judgment information)
• [ ] Return path completeness (All branches have return to main path)
• [ ] PRD feature coverage (Key feature points 100% covered)
• [ ] All outputs have confidence scores (100%)

P2 Checks (must pass for deep only)

• [ ] Extended analysis complete (deep simulation and roadmap generated)
• [ ] Decision records complete (key decisions have rationale and alternatives)

---

Degradation Strategy

| Missing Upstream Input | Degradation Plan | Output Impact | Data Acquisition Instructions | |------------------------|-----------------|---------------|-------------------------------| | PRD document missing | User provides feature description, design flow directly | Lacks PRD structured data, flow may miss feature points | Request user to provide feature list and task descriptions, or upload prd.json file | | IA proposal missing | User provides feature description, design flow directly | Lacks IA data, flow may not match page structure | Request user to describe page structure or upload IA proposal file | | Both PRD and IA missing | User provides feature description, design flow directly | Overall confidence reduced, flow may be less complete | Request user to describe features and page structure | | All upstream files missing | Prompt user to execute prior stages first, or design flow based on user feature description | Output is only basic flow framework | Request user to describe core user tasks and features |

Output Validation Rules

| Field Path | Type | Required | Description | |------------|------|----------|-------------| | userflow | object | Yes | User flow data | | userflow.task | string | Yes | Core task name | | userflow.flowtype | string | Yes | Flow type (taskflow/userflow) | | userflow.steps | array | Yes | Flow step list, must not be empty | | userflow.steps[].step | integer | Yes | Step number | | userflow.steps[].stepid | string | Yes | Step unique identifier (aligned with prd.json.userflows.steps.stepid) | | userflow.steps[].action | string | Yes | User action | | userflow.steps[].pageid | string | Yes | Associated page ID (aligned with prd.json.pages.pageid) | | userflow.steps[].systemresponse | string | Yes | System feedback | | userflow.steps[].expectedoutcome | string | Yes | Expected result (aligned with prd.json.userflows.steps.expectedoutcome) | | userflow.steps[].errorhandling | string | No | Exception handling (aligned with prd.json.userflows.steps.errorhandling) | | userflow.qualitycheck | object | Yes | Quality check results | | userflow.qualitycheck.shortestpathsteps | integer | Yes | Shortest path step count | | userflow.qualitycheck.exceptioncoverage | number | Yes | Exception path coverage (0-1) | | userflow.qualitycheck.deadends | integer | Yes | Dead end count (must be 0) |

Upstream Change Response

Upstream Change Impact

| Upstream Change | Impact Scope | Response Strategy | |-----------------|-------------|-------------------| | PRD feature requirement addition/removal | Task flow, step sequence | Mark affected tasks and steps, suggest human confirmation on whether to regenerate flow | | PRD interaction logic change | Conditional branches, exception paths | Mark affected branches and exception paths, suggest human confirmation on whether to update flow | | IA proposal change (page addition/removal) | Page references in flow steps | Mark affected steps, suggest human confirmation on whether to adjust flow | | IA route change | Page transitions in flow | Mark affected transition paths, suggest human confirmation on whether to update | | User research data update | Flow optimization suggestions | Mark affected optimization points, suggest human confirmation on whether to adjust flow |

Downstream Notification Mechanism

| Flow Change Type | Notification Scope | Notification Method | |-----------------|-------------------|---------------------| | Task flow change | design-prototype, interaction-spec | Mark flow changes, trigger prototype and interaction spec updates | | Conditional branch change | design-prototype, interaction-spec | Mark branch changes, trigger prototype and interaction spec updates | | Exception path change | design-prototype, interaction-spec | Mark exception path changes, trigger prototype and interaction spec updates | | Dead end fix | design-prototype | Mark fix content, trigger prototype update |

Alignment with prd.json Data Contract

| This Skill's Output Field | prd.json Corresponding Field | Alignment Rule | |--------------------------|----------------------------|----------------| | userflow.task | prd.json.userflows[].name | Task name must be consistent with userflow name | | userflow.steps[].stepid | prd.json.userflows[].steps[].stepid | Step IDs must be consistent | | userflow.steps[].pageid | prd.json.pages[].pageid | pageid must exist in prd.json.pages | | userflow.steps[].expectedoutcome | prd.json.userflows[].steps[].expected_outcome | Expected result descriptions must be consistent |

Data Acquisition Instructions

This Skill requires PRD and IA proposal data. Please provide via one of the following methods:

1. Directly describe feature flows and user tasks
2. Upload PRD document / ia_proposals.json files
3. Provide data file paths

• AI is not responsible for external data collection, only for analysis

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: LuckyOneTwoThree
• Source: LuckyOneTwoThree/vibe-skill
• License: MIT
• Homepage: https://luckyonetwothree.github.io/all-skill-html/

Install and usage instructions live in the source repository linked above.