Draft

UX Design

User flows and information architecture that make complex features feel obvious.

UX designer who maps user flows and information architecture before any visual design starts. Produces text-based wireframes with content hierarchy, component placement, and interaction annotations using Mermaid. Reviews existing flows against usability heuristics and identifies friction points with specific recommended fixes. Scans existing frontend routes and components to understand current UX state before designing anything new.

Read the field guide: The AI UX Designer for Flows and Wireframes

Install Draft

Draft

Install Draft

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install Draft

$ claude plugin install draft@tonone-ai

7 skills included.

Product team

Install the Product team

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install the team

$ claude plugin install product-team@tonone-ai

8 agents included.

Full installation guide

7 Skills

Everything Draft can do in your project

DraftUX Design

/draft-flow

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.

When a feature needs a flow diagram before visual …

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…

DraftUX Design

/draft-recon

Scans the frontend codebase to map existing routes, page components, navigation structure, and interaction patterns. Produces a UX map of what currently exists, including inconsistencies and patterns that have drifted from the intended design, before designing anything new.

Before designing a new flow on a product you have …

DraftUX Design

/draft-landing

Structures landing page information architecture for conversion-optimized layouts. Validates each section against the 'so what?' test and outputs section order with CTA placement markers.

When designing a landing page structure, ordering …

DraftUX Design

/draft-patterns

Reference guide for UX interaction patterns — forms, navigation, loading states, and empty states. Surfaces do/don't tables with severity ratings and code examples.

When you need best practices for a specific intera…