# Ux Flow Designer

> Design and document app user flows, screens, and use cases using Mermaid diagrams and HTML wireframes. Use when creating user flow diagrams (flowcharts, state diagrams, sequence diagrams), screen wireframes (HTML), use case documentation, screen maps, or when the user mentions 'flows', 'wireframes', 'user journey', 'screen map', 'navigation flow', 'use cases', 'app flow', 'screen layout', 'flujos…

- **Type:** Skill
- **Install:** `agentstack add skill-thomaspraun-ux-flow-designer-ux-flow-designer`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ThomasPraun](https://agentstack.voostack.com/s/thomaspraun)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ThomasPraun](https://github.com/ThomasPraun)
- **Source:** https://github.com/ThomasPraun/ux-flow-designer

## Install

```sh
agentstack add skill-thomaspraun-ux-flow-designer-ux-flow-designer
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# UX Flow Designer

Bridge between Product (PRD/features) and Visual Design.
Generate user flow documentation, Mermaid diagrams, and HTML wireframes.

## Role and Context

- **Input**: PRD (`docs/product/prd.md`) or user-provided feature descriptions
- **Output**: Diagrams + wireframes in `docs/ux-flows/`
- **Downstream**: Outputs feed into `ui-ux-pro-max` for visual design
- **Standalone**: Usable independently or as saas-pipeline Phase 4 step 1

## Prerequisites

On every invocation, verify:

```
CHECK ~/.claude/skills/ui-ux-pro-max/ exists
  IF missing → READ references/install-commands.md, offer install

CHECK docs/product/prd.md exists
  IF missing → CHECK ~/.claude/skills/product-manager-toolkit/
    IF missing → READ references/install-commands.md, offer install
    OR accept direct user input as feature descriptions

IF user mentions "figma" or "export to figma" →
  INFORM user of all requirements (see "Figma Export" section below)
  WAIT for user confirmation before reading references/figma-integration.md or checking MCPs
```

## Workflow

Designing app flows involves these steps. ALL four phases are mandatory and must be executed in order.

1. Extract use cases (from PRD or user input)
2. Generate Mermaid flow diagrams (screen map + per use case)
3. **Generate HTML wireframes as a clickable prototype (with inter-screen navigation) and offer browser preview** — NEVER skip this phase
4. Consolidate into master handoff document

---

### Phase 1 — Use Case Extraction

Read `docs/product/prd.md` if it exists. If no PRD, ask user for feature list or use case descriptions.

For each use case, document:

| Field | Description |
|-------|-------------|
| ID | `UC-001`, `UC-002`, etc. |
| Name | Short descriptive name |
| Actors | Who participates (User, System, Admin, etc.) |
| Preconditions | What must be true before the flow starts |
| Main Flow | Numbered step-by-step sequence |
| Alternative Flows | Branches, error paths, edge cases |
| Postconditions | What is true after the flow completes |

Save to `docs/ux-flows/use-cases.md`.

Present the use case list to user for approval before proceeding. Do not advance to Phase 2 without explicit confirmation.

---

### Phase 2 — Mermaid Diagrams

Read `references/mermaid-patterns.md` for syntax patterns and best practices.

**Step 1: Master Screen Map**

Generate `docs/ux-flows/diagrams/screen-map.md` — a flowchart showing ALL screens and general navigation paths of the entire app.

**Step 2: Per Use Case Diagrams**

For each approved use case, generate 3 diagrams:

1. **Flowchart** (`graph TD`) — screen-to-screen navigation with decision nodes
2. **State diagram** (`stateDiagram-v2`) — app states (loading, error, success, idle, etc.)
3. **Sequence diagram** (`sequenceDiagram`) — frontend-backend interaction with HTTP methods

Save to `docs/ux-flows/diagrams/{use-case-id}/`:
- `flow.md` — flowchart
- `states.md` — state diagram
- `sequence.md` — sequence diagram

**Constraints:**
- Max 15-20 nodes per diagram
- Split into sub-flows if more complex (link with `click` or reference)
- Use `classDef` for consistent styling across diagrams

Generate index at `docs/ux-flows/diagrams/INDEX.md` listing all diagrams with links.

---

### Phase 3 — HTML Wireframes (Clickable Prototype)

> **MANDATORY**: This phase MUST NOT be skipped, summarized, or deferred. Every invocation of this skill that reaches Phase 2 MUST continue to Phase 3. Do not ask the user whether to proceed — just do it.

**Step 1: Generate HTML files**

For each unique screen identified in the flowcharts, generate an HTML file using `assets/wireframe-template.html` as the base template.

Requirements:
- Self-contained: inline CSS only, no external dependencies
- Mobile-first: 375px viewport width
- Wireframe aesthetic: grays (`#f5f5f5` bg), dashed borders (`#ccc`), placeholder text (`#666`)
- Use template CSS classes: `.wf-header`, `.wf-input`, `.wf-button`, `.wf-card`, `.wf-nav`, `.wf-list-item`, `.wf-tab-bar`, `.wf-icon-placeholder`, `.wf-link`, `.wf-back`
- Include screen name and related use case in footer metadata

**Step 2: Add inter-screen navigation**

Every wireframe must link to other screens using ``. This creates a clickable prototype navigable in any browser — no JavaScript needed.

Navigation rules:
- **Buttons** that logically navigate: wrap in `Label`
- **Tab bar**: each tab is an `` pointing to its screen. Tab bar must be consistent across all screens that share it.
- **Back buttons**: `← Back` in the `.wf-nav` bar
- **Tappable list items**: wrap in `...`
- **Tappable cards**: wrap in `...`
- **No dead ends**: every screen must have at least one outgoing link (back button, tab bar, or action button)
- **No JavaScript**: pure HTML `` navigation only — no onclick, no form submissions, no JS

**Step 3: Save and generate index**

Save all wireframes to `docs/ux-flows/wireframes/`.

Generate inventory at `docs/ux-flows/wireframes/INDEX.md`:

| Column | Description |
|--------|-------------|
| Screen name | Human-readable name |
| File link | Relative link to .html file |
| Related use cases | UC-IDs |
| Key elements | Main components on the screen |
| Outgoing links | List of screens this screen links to |

**Step 4: Offer browser preview**

After generating all wireframes, propose opening the main entry screen in the browser:
- If Chrome DevTools MCP is available: use `navigate_page` to open the file
- Fallback: use `open docs/ux-flows/wireframes/{entry-screen}.html` via Bash

Do not wait for the user to ask — proactively offer the preview.

---

### Phase 4 — Consolidation and Handoff

Generate master document `docs/ux-flows/UX-FLOWS.md`:

```markdown
# UX Flows — [App Name]

## Master Screen Map
Link to screen-map.md

## Screen Inventory
| Screen | Purpose | Wireframe | Use Cases |
|--------|---------|-----------|-----------|
| ...    | ...     | link      | UC-001    |

## Use Case Diagrams
### UC-001: [Name]
- Flow: link
- States: link
- Sequence: link

## Clickable Prototype Links
| From Screen | Element | To Screen |
|-------------|---------|-----------|
| login.html  | [Login] button | home.html |
| ...         | ...     | ...       |

## Navigation Patterns
Summary of recurring navigation patterns (tab bar, back navigation,
modal flows, drawer menus, etc.)

## Open Questions
Design decisions and open questions for ui-ux-pro-max phase.
```

After completing the handoff document, inform the user:
- The wireframes can be exported to Figma using the official **Code to Canvas** integration
- Only requires Figma desktop app with Dev Mode MCP Server enabled (2-step setup)
- If interested, the user can request "export to figma" and the setup steps will be presented

---

## Output Structure

```
docs/ux-flows/
├── UX-FLOWS.md                          # Master handoff document
├── use-cases.md                         # All use cases
├── diagrams/
│   ├── INDEX.md                         # Diagram index
│   ├── screen-map.md                    # Master app navigation
│   ├── uc-001-{name}/
│   │   ├── flow.md                      # Flowchart
│   │   ├── states.md                    # State diagram
│   │   └── sequence.md                  # Sequence diagram
│   └── ...
└── wireframes/
    ├── INDEX.md                         # Screen inventory
    ├── home.html
    ├── login.html
    └── ...
```

## Figma Export (Optional)

This skill can export wireframes to Figma. Do not check for Figma MCP automatically.

**When to mention**: At the end of Phase 4 (handoff), inform the user that Figma export is available as an optional next step.

**When the user requests Figma export**, follow this protocol:
1. **First**: Inform the requirements before attempting anything:
   - Figma desktop app with **Dev Mode MCP Server** enabled (Preferences → Enable "Dev Mode MCP Server")
   - MCP added to Claude Code: `claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse`
   - Chrome DevTools MCP (already used for wireframe preview)
   - See full details in `references/figma-integration.md`
2. **Then**: Ask user to confirm they have or want to set up these prerequisites
3. **Only then**: Read `references/figma-integration.md` and follow the export workflow

Never silently attempt Figma operations. Always present the requirements first.

## Source & license

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

- **Author:** [ThomasPraun](https://github.com/ThomasPraun)
- **Source:** [ThomasPraun/ux-flow-designer](https://github.com/ThomasPraun/ux-flow-designer)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-thomaspraun-ux-flow-designer-ux-flow-designer
- Seller: https://agentstack.voostack.com/s/thomaspraun
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.