/draft-flow

DraftUX Design

Maps a user flow as a Mermaid diagram: the sequence of screens and decision points a user moves through to accomplish a specific goal, with error states, branch conditions, and explicit entry and exit points. Grounded in the job the user is trying to accomplish rather than the features being built.

Install

This skill

Install Draft Flow

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install this skill

$ claude plugin install draft-flow@tonone-ai

The agent

Install Draft

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install Draft

$ claude plugin install draft@tonone-ai

See all Draft skills

Want all 31 agents across both teams?

Full installation guide

Invoke this skill

Command|$ /draft-flow

When to use

When a feature needs a flow diagram before visual design or engineering starts. When a complex feature has unclear UX and the team needs to agree on the flow before building it. When documenting existing product flows for onboarding, a design review, or to inform a redesign.

Deep dive

AI User Flow Design (Mermaid Diagrams)

Most user flows are sketched ad hoc and forgotten. /draft-flow produces Mermaid flow diagrams with screens, decisions, error states, and explicit entry/exit points.

Read the article

More from Draft

All Draft skills

DraftUX Design

/draft-ia

Designs information architecture: navigation structure, content hierarchy, sitemap, and taxonomy for a product or feature set. Maps where every page and section lives and how users navigate between them. Produces a Mermaid sitemap and written rationale for every structural decision.

When redesigning navigation and need a structural …

DraftUX Design

/draft-wireframe

Produces screen-level wireframes: text-based layouts and Mermaid diagrams showing content hierarchy, component placement, primary and secondary actions, and interaction annotations. Specifies structure and behavior without visual design, so engineering can estimate and Form can design with a shared structural reference.

When a feature needs a lo-fi layout specification …

DraftUX Design

/draft-review

Evaluates an existing flow or UI against established usability heuristics: Nielsen's ten heuristics, Fitts's law for touch targets, cognitive load principles. Identifies specific friction points with supporting rationale, rates their severity, and recommends concrete, implementable fixes. Not aesthetic opinion, structured usability analysis.

When users are dropping off at a specific point in…

Ready to use Draft Flow?

Get Started Back to Marketplace