Skip to main content
D

/draft-recon

DraftUX Design

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.

Install

This skill

Install Draft Recon

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install this skill

$ claude plugin install draft-recon@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-recon

When to use

Before designing a new flow on a product you have not worked with recently. When taking over UX responsibilities and need to understand the current state before proposing changes. Before a redesign project when you need an accurate baseline of what you are working with.

Deep dive

AI UI UX Reconnaissance

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.

Read the article

More from Draft

All Draft skills
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 …

Ready to use Draft Recon?

Get StartedBack to Marketplace