Wiremaps

Try it

Press W and click the canvas. A starter map lands where you clicked: a Home card with a green header, a blue hero, a gray footer — the color grammar sections tend to follow. The card is selected and ready to grow:

• Tab adds a child page below, already editing its title — type the name, press Enter.
• Enter adds a sibling after the selected card (⇧Enter before). On a free root, Enter adds another free card beside it instead.
• Inside a section label, Enter commits and opens the next section's label — name sections as fast as you can type them.
• Double-click a card to rename it; double-click a section to rename the section.

The tree keeps itself tidy the whole time: children hang in a row below their parent, connected by trunk lines with rounded corners, siblings ordered left to right.

Wiremap mode

Click anything in a map — or the map's row in the Layers panel, where it wears its own tree mark and never unfolds like an ordinary box — and the editor enters wiremap mode:

• The left panel shows the map's own hierarchy instead of layers: cards indented by their place in the tree (not their DOM nesting), each with a card mark, each unfolding into its section rows — and a section's mark is its color, so the panel reads like the map does. Hover a row and the canvas answers; select on canvas and the row lights up. Double-click any row to rename in place; a hovered card row offers a quiet + for a child, and Add card sits at the panel's foot.
• The right panel replaces the mockup inspector with the map's own: select the map for its name, counts, Add card, and Tidy; a card for its title, its section list, and add-child/sibling; a section for its label, the ten color tints inline, and the whole Wireframes gallery right there in the rail.

You leave the mode the way you'd expect: click any non-map content, press the panel's ✕, or press Escape twice — the first drops the selection, the second closes the mode. Deleting cards, growing the tree, and dragging all work identically in and out of the mode; the mode only changes what the panels say.

Selecting and moving

The first click inside a map selects the card — cards are the unit of a wiremap. Click again to go deeper (the title, a section). The map itself is selected by clicking the empty margin around the cards, or via its Layers row (which also opens wiremap mode). Dragging across the margin rubber-bands the cards — sweep a band and every card it touches joins the selection; the map stands still. To move the whole map, select it first (one click on the margin), then drag. Nothing inside a map grows resize handles or spacing chrome — the map's layout is the map's job.

Drag a free root and it simply moves, live — snapping against the other cards, the container hugging along behind it; if the root has a tree below, the whole tree rides with it. Nothing else ever shifts.

Drag a tree card and a translucent ghost follows your pointer while the tree stands still. The card you're over highlights; a caret shows the sibling slot you'd land in. Drop on a card to nest below it, drop beside a card to become its sibling — the subtree rides along, and everything glides to its new arrangement. Drop it clear of every card and it detaches: the card re-roots as a free card right where you dropped it. A drop that would fold the tree into itself (a card onto its own descendant) shows the ghost refused and does nothing. Escape cancels any drag free of charge.

Drag a section to reorder it inside its card, or drop it on another card to move it there — both cards resize and the tree reflows, one undo step.

Sections and colors

A selected card grows an add ring of three accent + coins: left edge adds a sibling before, right edge a sibling after, below adds a child. A free root shows only the child coin — a root has no siblings to slot between; grow beside it with Enter or the menu's Add card beside instead. The ring is pure growth — right-click the card for everything else (add child/sibling/section, rename, delete, delete with cards below — and Convert to HTML, which releases the box from the map right where it stands: same content, full resize and style editing back, one undo to rejoin). Every add drops you into naming; ⌘Z right there undoes the add itself (once you've typed, ⌘Z undoes your typing first, as in any text field). A selected section shows a color chip at its edge — click it for the ten palette tints — and turns every boundary of its card into a breathing insert slot: hover between two sections (or above the first, or below the last) and the rows ease apart while an accent + coin arrives in the opened room; click and the new section lands exactly where the gap was, already in label editing. It's the same sentence the reorder drag speaks — an opening gap means "a section lands here."

Sections default to the palette blue; pick any background and the label ink re-solves itself for contrast (green sections get green-family text, dark fills get light text). In wiremap mode the right panel carries the same ten tints inline on the section's Color row.

Form factors

Every wiremap is bound to a device class — desktop, tablet, or mobile — shown as a glyph beside the map's name in the panel head and its Layers row. Cards build at the class's width (280 / 220 / 160), so a mobile map looks mobile.

Convert with one click: select the map and switch the Form factor row in the right panel. The whole map converts in place — same tree, same sections, colors, and notes — card widths rewrite and every applied wireframe style redraws as its device variant, one undo step. Wireframe styles are responsive, not squished: on mobile, lanes stack (features, pricing, testimonials pile into columns), split heroes pile with media on top, the nav collapses to a burger, grids re-lane (gallery and products go two across, footer folds to 2×2), and tables drop a column instead of losing their rows. The gallery previews follow suit — dressing a section of a mobile map shows every tile as its mobile variant, so what you see is exactly what apply inserts. The usual flow: copy a desktop map, paste it, convert the copy — the paste is a live map (tree and form factor travel on the clipboard), so the mobile variant is two clicks from the desktop original. Agents see and set the form factor too, and derive mockups at the right class — see the MCP guide.

Drag a section and it lifts in hand — a faithful copy under a soft shadow — while the other rows part to open the landing gap; drop and it settles where the gap was, Escape floats everything home. Notes ride cards and sections as free-text annotations (content ideas, comments): edit them in the right panel, in the pop-out editor, or right-click a card or section and pick Add note for a comment-style popover at the cursor. Notes never paint on the canvas — they're for you and your agent (set_notes / get_node_info on the MCP side).

The Wireframes gallery

Select a section and the Wireframes gallery fills the right panel below its label and color: thirty-plus low-fi layout styles — heroes, feature rows, pricing columns, galleries, forms, footers — each tile a live miniature of exactly what it inserts. The gallery lives where the section lives; there's no separate panel to summon.

• Search by name or tag; the tag chips (Nav, Hero, Content, Media, Commerce, Social, Form, Data, Footer) narrow the grid; sort by Catalog order, Name, or Recent.
• Click a style to dress the section: real schematic boxes land inside it, drawn in inks matched to the section's color. The applied style reads pressed; click it again — or the None tile — to strip back to a plain labeled bar. Swapping styles replaces the schematic cleanly (your undo has the old one).
• Or drag a tile onto any section of any card — not just the selected one.
• Arrow keys walk the grid from the search field; Enter applies; Escape clears the search.
• Pop the gallery out: the pop-out button at the right of the sort row opens the same gallery as a centered overlay — three tiles across, the canvas dimmed and blurred behind it — for comparing styles side by side. A live context pane on the right shows the whole card the section belongs to, the dressed section ringed, so every apply lands in the company of its neighbors while the real card sits behind the blur. The pane is an editor, not a picture: click any section in the preview to dress that one instead, and the strip under the preview carries the section's label, its ten color tints, and its note — a whole card gets finished without leaving the overlay. Search, filters, and your place in the grid carry over both ways. Click a style to apply it and stay to keep exploring; Escape, the backdrop, or the button return the gallery to the rail.

The inserted wireframe is ordinary boxes — recolor a bar, delete a dot, add your own. Re-applying a style after a recolor re-inks it to match.

Deleting

Delete removes the selected card and promotes its children to the grandparent — the gentle default; the tree closes the gap (a deleted root's children become free roots). ⌘Delete removes the card and everything below it. Either way one undo restores cards, structure, and positions together.

Interactions over maps

The interaction tool works on maps the way it works everywhere: hover lights up cards and sections alike, and an arrow drawn from a "CTA" section to the Pricing card documents the flow right where it happens. Between cards, arrows route through the gutters and land flush on the edge they enter — never across a standing card. The tree's own trunk lines are structure, not annotation — they stay put when you hide the interaction layer, survive presenting, and appear in screenshots.

When the flow itself is the point — hand-placed screens, decision diamonds that branch, return paths — use the map as a wireflow: keep every card a free root and let the arrows carry the structure.

Interaction reference

For agents

Everything above is scriptable. One MCP call builds a whole map — pages, sections, colors, nesting, form factor; one read returns the tree as an outline plus every card with its measured position. Because cards and sections are real boxes, the ordinary tools do the rest: rename with set_text_content, recolor with update_styles, wire with add_connectors. See the MCP guide.