What does /draft-wireframe do?

It produces text and Mermaid wireframes with content hierarchy, components, actions, and interaction annotations.

How do I install /draft-wireframe?

Install Tonone for Claude Code via tonone.ai/get-started.

AI Text and Mermaid Wireframes

Wireframes that live in Figma stay in Figma. Engineering does not open the file, the design changes do not version-control with the code, and the wireframe goes stale the day after it ships. Text-based wireframes that live in markdown solve all three: they live in the repo, they version-control naturally, and engineering reads them alongside the code.

The /draft-wireframe skill produces text-based wireframes and Mermaid layout diagrams. Content hierarchy, component placement, primary and secondary actions, interaction annotations. Specifies structure and behavior without visual design, so engineering can estimate and Form can layer visual design on top.

What the wireframe includes

Per screen: heading, content hierarchy with levels, primary and secondary actions, interaction notes (where the user goes on each action). Component placement labeled. State variants noted (loading, empty, error).

Tonone's /draft-wireframe skill produces text and Mermaid wireframes that version-control with the codebase.

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-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 …

FormVisual Design

/form-component

Produces a component design spec: visual design for all states (default, hover, focus, active, disabled, loading, error, and domain-specific states), interaction behavior and animation, prop definitions with types, accessibility requirements including ARIA attributes, and usage guidelines. Ready for Prism to implement.

When adding a new component to a design system and…

Install

/draft-wireframe ships with the Draft agent in Tonone for Claude Code.

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install Draft

$ claude plugin install draft@tonone-ai

Frequently asked questions

What does /draft-wireframe do?: It produces text and Mermaid wireframes with content hierarchy, components, actions, and interaction annotations.
How do I install /draft-wireframe?: Install Tonone for Claude Code via tonone.ai/get-started.