Every control, where you need it

The Design Mode side panel is split into three rows. A header row to pick what you're working on, three middle panels for the actual editing, and a bottom row that ships your edits to your AI coding agent.

Row 1

Top of the panel

Five icons set up your session and surface the overlays (Contribute, Help, Settings). Just below them, an action toolbar puts the most-used DOM and session mutations one click away.

Header icons

MCP status
Click-to-refresh chip showing whether the MCP server is offline, running, or has an agent attached.
Theme
Toggle the side panel between system / light / dark.
Contribute
Star the repo, share, sponsor — full overlay with low-friction ways to support the project.
Help
Quick links to docs, privacy, and a one-click “Copy diagnostics” for bug reports.
Settings
Theme, colour format, capture mode, inspector colours, and the MCP mode picker (Cloud / Local / Self-hosted).

Action toolbar

Parent / Child
Walk selection up and down the DOM tree.
Duplicate / Delete
DOM mutations recorded as undoable changes.
Comment
Drop a numbered sticky-pin on the selected element.
Hide all pins
Mute every comment pin overlay in one click.
Freeze animations
Pause every CSS/JS animation on the page so you can edit mid-state.
Screenshot
Capture the visible tab to clipboard, download, or both.
Presets
Save and reapply styles across all nine Design-tab sections.
Undo / Redo
Step backward and forward through every style, text, and DOM change.

Row 2

Three panels — the editing surface

Layers, Design, and Changes. Each tab is its own scrollable surface; switching keeps the selection alive. On the canvas itself, hovering measures spacing between elements and the selection gets eight drag-to-resize handles — every resize ships as a change like any other edit.

Layers

Full DOM tree of the page you're editing. Search, expand/collapse, multi-select, drag rows to rearrange the actual document, toggle visibility with an eye icon per row.

• Search by tag, class, id, or text
• Drag to reorder · drop on a row to nest
• Multi-select for batch edits
• Indentation guides + collapse

Design

Nine sections, Figma-aligned. Every input is a real control — sliders, colour pickers, segmented buttons — not a textarea of CSS.

Typography
Position
Layout
Size & spacing
Border
Appearance
Effects
Motion
Variants

Changes

Every style, text, DOM, and comment edit collected in reverse-chronological order. Group by selector, filter by kind, search by value, resolve or revert anything.

• Sticky search + filter chips header
• Numbered pin badges match the page overlay
• Resolve / Reopen / Edit / Delete per row
• Export / Import as JSON for diff handoff

Row 3

Bottom — ship your edits

Two buttons. The only two ways your changes leave the panel — one to the clipboard, one to a connected AI coding agent.

Copy as Prompt

Bundles every change into a Markdown export (selector → property → value lines) and writes it to your clipboard. Paste into whichever agent you use — works without any MCP setup.

Send to Agent

Pushes the same Markdown straight to the connected MCP agent — Claude Desktop, Cursor, Claude Code, or any MCP-aware tool. Enables once an agent is actually attached; greyed out otherwise.