Design engineeringSkill

Canvas

A skill that brings scenarios, annotations, a zoomable screen board, and developer inspection into one review experience.

Canvas workflow illustrated with the portfolio design language

A prototype is easy to share and hard to review. A link does not tell someone which clicks matter, which rules are hidden, or how to reach a particular state. A linear walkthrough only explains one path. I built Canvas to make the cases, the board, and the developer view part of the prototype itself.

Scenarios put a reviewer into a useful case with one click. Modes describe states such as role, permission, or locale, with an explicit way in and out. Numbered pins explain rules beside the UI. Deep links open the same case for the next reviewer. The board uses static snapshots instead of running every screen at once, and Inspect turns an element into a build prompt.

Review this very website

Switch real portfolio scenarios, open a board of captured pages, or inspect actual elements and copy a build prompt.

The website is the prototype.

Explore the flow, select a frame, and inspect the handoff.

Open Canvas

Real pages, real elements. Opens the portfolio with the review tools enabled.

One place to review the whole experience.

Canvas brings together the earlier walkthrough, Prototype Canvas, and Inspect tools. The runtime is copied into prototypes and checked against a hash manifest. The public demonstration here uses this portfolio, not an internal product. Pinned notes and viewer comments remain directions for the original tool.