Skip to content
Design Mode
Add to Chrome

Design Mode is also available for Firefox and Safari.

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 for handing changes to your AI coding agent. These are browser previews, not source edits or published changes. Try the guided demo on a supported page.

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
    Chip showing whether the MCP server is offline, running, or has an agent attached. Click it to open the dedicated MCP page.
  • 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 Chrome launch surface. MCP configuration lives on its own page, opened from the MCP chip.

Action toolbar

  • Parent / Child
    Walk selection up and down the DOM tree.
  • Duplicate / Delete
    DOM mutations recorded as undoable changes. Deleting a multi-selection records and restores every layer in structural order.
  • Comment
    Drop a numbered sticky-pin on the selected element.
  • Freeze animations
    Pause CSS and Web Animations API animations and playing videos; suppress transitions. Custom JavaScript animation loops may continue.
  • Screenshot
    Capture the visible tab to clipboard, download, or both.
  • Presets
    Save supported style properties as presets and reapply them. Presets do not capture every editor action or page state.
  • 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

The accessible 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

Controls grouped by editing task — sliders, colour pickers, segmented buttons — not a textarea of CSS. Motion leads with trigger-first interaction cards (Hover / Press / Focus / Appear / Loop / Scroll). Inspect authored hover, focus, and active states; force-preview them, or overlay computed flex/grid tracks. Any field bound to a design-system token shows a ◆ badge for swapping or editing it when the token can be detected. Width and height show authored CSS separately from the computed measurement. Rich text preserves attributed spans, icons and media while exposing safe link destinations.

  • Position
  • Layout
  • Typography
  • Fill
  • Stroke
  • Effects
  • Motion
  • Layout Guides

Changes

Every style, text, DOM, and comment edit collected in reverse-chronological order. Keep element groups or add detected component/source headings, filter by kind, search by value, and review or revert recorded edits. See the Changes guide for storage, JSON export and sharing scope.

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

Bottom — ship your edits

Two primary hand-off buttons — one to the clipboard, one to a connected AI coding agent. JSON export and MCP reads are also sharing paths. Review the privacy and sharing boundaries before sending.

Copy as Prompt

Copies your recorded changes as a Markdown prompt. In the next-release source this can include all saved routes on the current site, even collapsed groups. Review it before pasting; no MCP setup is required. See the illustrative prompt and review checklist.

Send to Agent

Marks recorded changes as ready over MCP. A connected agent retrieves the live changes and hand-off marker through the MCP tools. Without an attached agent, Design Mode opens setup guidance instead of claiming the hand-off succeeded. Local mode can continue into explicit feedback rounds with immutable snapshots and a Stop action in the next-release implementation. Follow the MCP setup guide; the agent still needs authorised repository access and its changes need review.