# UX Flow Designer

> This skill designs end-to-end user flows that map the steps a user takes to complete a task. Use when asked to create a user flow diagram, map a journey from entry to completion, or document the navigation structure of a feature. Also consider when a product spec describes functionality without specifying the user's path through it. Suggest when wireframes are being created without an agreed-upon user flow.

- Skill: `mittuled/ux-flow-designer` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add mittuled/ux-flow-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mittuled/ux-flow-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: mittuled (https://skillmd.com/u/mittuled)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mittuled/ux-flow-designer

---


# ux-flow-designer

## Agent: UX/UI Designer

L2 UX/UI designer (Nx) responsible for user flow design, wireframing, prototyping, and component mapping.

Department ethos: [ideal-design.md](../../../../departments/design/ideal-design.md)

## Skill Description

Designs end-to-end user flows that map every step, decision point, and system response a user encounters while completing a task within the product.

## When to Use

- When a new feature or product area needs a user flow before wireframing begins.
- When a product spec defines functionality but does not specify the user's navigation path through it.
- When an existing flow needs to be documented, evaluated, or redesigned based on usability data.
- When multiple teams (design, engineering, product) need a shared reference for how a user moves through a feature.

## Workflow

1. **Identify the user goal**: Define the task the user is trying to accomplish, the entry points (how they arrive), and the success condition (what "done" looks like). Deliverable: user goal statement with entry/exit criteria.
2. **Map the primary flow**: Chart the step-by-step path from entry to task completion. Include screens, user actions, and system responses at each step. Keep the primary flow linear and minimal. Deliverable: primary flow diagram.
3. **Add secondary and error paths**: Branch from the primary flow to cover alternative paths (different user choices, permissions, account states) and error paths (validation failures, connectivity issues, permission denials). Deliverable: complete flow diagram with all paths.
4. **Annotate system behavior**: Document what the system does at each step -- data fetching, state persistence, notification triggers, analytics events. These annotations bridge design and engineering. Deliverable: annotated flow with system behavior notes.
5. **Validate with stakeholders**: Review the flow with product (for requirement coverage), engineering (for technical feasibility), and research (for user mental model alignment). Deliverable: validated flow with stakeholder sign-off.

## Anti-Patterns

- **Designing screens before flows**: Jumping to wireframes or visual design without agreeing on the user's path through the experience. *Why*: screens designed without flow context frequently miss steps, create dead ends, or fail to handle branching -- all of which are expensive to fix after visual design is complete.
- **Abstracting away complexity**: Collapsing multi-step sequences into single nodes (e.g., "user authenticates") that hide interaction decisions. *Why*: compressed nodes defer design decisions to engineering, who will implement them without user-centered rationale.
- **Ignoring entry context**: Designing the flow assuming a single entry point when users may arrive from notifications, deep links, search results, or cross-sell surfaces. *Why*: each entry point may require different context setting, and ignoring this produces disorienting experiences.

## Output

**On success**: Produces a complete user flow diagram with primary path, secondary paths, error paths, and system behavior annotations. Includes entry/exit criteria and stakeholder sign-off. Delivered as a Figma page or FigJam board linked to the project file.

**On failure**: Report which flow paths could not be mapped (undefined business rules, unresolved product decisions, missing technical constraints), what partial flow was created, and the open questions blocking completion.

## Related Skills

- [`flow-designer`](../flow-designer/SKILL.md) -- End-to-end user flows provide the structure; interaction flows add step-level detail.
- [`wireframe-builder`](../wireframe-builder/SKILL.md) -- User flows are a prerequisite for informed wireframing.
- [`spec-translator-design`](../../../design/head-of-design/spec-translator-design/SKILL.md) -- Translated design briefs define the feature scope that user flows operationalize.