Skip to main content

Sketch the layout. The agent builds it.

Sketch mode isn't just red ink for bug reports. Here it's a construction tool: draw three rectangles where a new stat-card row should live, label it, send it — and the agent builds the row for real, in the dashboard's own card style, positioned where you drew it.

Silent by design — 0:39. Every beat is legible with the sound off.

What happens

Construct (0:05). Sketch mode opens on the live dashboard. Three rectangles in a row, drawn over the invoices area — the shape of a new stat-card row.

Annotate (0:16). A text label: "3 stat cards here." The sketch now carries both the layout and the intent.

Send (0:22). sketch.save() pushes the drawing over the real proxy channel. The agent reads it back: "a row of three stat cards under the metrics. Building it now."

Build (0:27). Three new cards land in the page — Refunds, Chargebacks, Net revenue — real DOM, real house style (var(--panel), the dashboard's own card markup), inserted exactly where the rectangles were drawn.

How it's made

Recorded by the scripted demo engine against the real stack — real mouse input on the actual sketch canvas (including the text tool's type-and-blur commit), real PROXY TOAST agent replies. make demo NAME=sketch-build re-records it.