Live demo

Design Mode is a Chrome and Firefox extension for previewing visual changes on scriptable webpages. This practice canvas requires the extension; it is not an editor by itself. Start with one card: inspect it, change its padding, review Changes, then use Copy as prompt to copy the Markdown specification. An authorised developer or agent still implements the source.

First time? Pin the extension to your toolbar, then click the Design Mode icon. Chrome opens the launch surface selected in Settings; Firefox opens its sidebar. Once it's open, every shortcut is listed in Settings. Alt+D and Alt+S are browser commands you can rebind through chrome://extensions/shortcuts on Chrome or about:addons on Firefox.

These three panel modes are Chromium-only; Firefox uses its docked sidebar. Docked (the default) lives in Chrome's native side panel. Pop out (the external-link icon in the header) detaches it into a free-floating window you can move anywhere — it stays bound to the tab it came from, even while you browse other tabs.

From the floating window, the picture-in-picture icon pins the panel on top of everything — a true always-on-top window (Chrome 116+), floating above the page and every other app, so you never Cmd-` between windows while editing. While pinned, the same icon renders in the accent style: click it to drop back to the floating window, or hit the side-panel icon to dock straight home. All three states are one click apart.

Local HTML editing depends on browser permissions and the page’s resources. On Chrome, allow file URL access before trying inspect, restyle, comment and copy on a file:// page. Some page features or resources may not work from a saved file.

Chrome blocks extensions from file:// pages by default, so there's a one-time switch: enable 'Allow access to file URLs' for Design Mode in chrome://extensions. If it's off, the side panel detects it and walks you through exactly that step.

The crosshair icon at the top of the side panel toggles inspector mode. Hover any element on the page and you'll see a blue outline; click to select it and the Design tab fills with that element's properties.

Hovering shows the layer in the panel's indicator chip as 'Hovering'. Clicking flips it to 'Selected' and locks the focus on that layer.

If you turn on the browser's device toolbar with touch emulation, the page stops firing hover events — so the panel shows a short guide on switching the emulated device type off (with a Continue anyway option for tap-to-select), and clears itself the moment hover comes back.

Hold Shift (or Cmd / Ctrl) and click to select several elements at once — the indicator chip shows a count badge. Every edit in the Design tab now applies to the whole selection, so you can change padding, colour, or type on all of them in one move.

With multiple layers selected, the Position section gains Distribute buttons that space them evenly across the horizontal or vertical axis, exactly like Figma. The Layers tab also has a multi-select toggle for picking elements from the tree.

The indicator chip's Selected row also has a Select matching layers checkbox — tick it and every layer matching the same tag/class as your selection joins it, in place of the old similarity wand and threshold slider.

Inspect mode doubles as a measuring tool. Hovering an element draws dashed guide lines through its edges, spanning the page, so you can read alignment at a glance.

With one element selected, hover another and edge-to-edge distance pills appear — the gap between them plus the side offsets, exactly like VisBug or Figma's measure tool. Shift-click extra elements to see the pixel spacing between them.

The selected element also gets 8 drag handles (four corners + four edge midpoints). Drag any of them to resize live; the new width and height ship straight into the Changes tab and the CSS export, so your agent gets the exact dimensions.

Design Mode overlays two annotation tools on the live page. Comment pins (the comment icon in the action row, or Alt+C) drop a numbered marker on any element — resolve, reopen, or edit them, and they collect in the Changes tab under the Comments filter so they ship alongside your edits.

Region comment (Alt+R) works the same way but lets you drag a rectangle over an area first, for feedback that isn't tied to a single element. Both are overlay-only — they annotate without ever touching the page's own styles.

The Layers tab shows the page's DOM as a tree. Search by tag, class, id, or smart name. Drag layers to reorder them. Toggle visibility with the eye icon. Multi-select to apply edits to several layers at once.

Each row shows: indentation guide, drag handle, expand/collapse chevron, tag icon, smart name, and a hover-revealed eye toggle. Long layer names wrap instead of forcing the row to scroll sideways.

The Design tab is where you edit a selected layer's properties. It mirrors Figma's section order — Position → Layout → Appearance → Typography → Fill → Stroke → Effects → Motion → Layout guide — so the mental model carries over.

Sections only render for relevant layer kinds: Typography appears on text layers, Layout hides for media, etc. — and a section with nothing to show for the selected element (no stroke, no effects, no fill) opens collapsed, so the panel stays compact. The sub-sections below walk through each, starting with the indicator chip and the Icon / Media sections that surface above Position.

Presets now live in the Design system panel — open it from the swatch-book icon in the toolbar (it shares the panel with the page's design tokens). They cover all eight Design-tab style sections (Position / Layout / Appearance / Typography / Fill / Stroke / Effects / Motion), with one preset seeded per kind so the JSON export shows the full schema.

Save the currently-selected element's relevant CSS properties under a name + kind. Apply any saved preset back to a different element with one click. Edit a preset to rename / change properties / drop fields. Delete (with confirmation) to remove. Import / Export bring presets to a JSON file for sharing.

Every edit is tracked in the Changes tab — grouped by element with friendly group labels (preset / multi-select / visibility) when one action touched many properties at once. The 'View Original' / 'View Changes' toggle previews the page with or without your edits. Edits made at a mobile or tablet viewport carry a small breakpoint pill so you (and your agent) can tell which changes are responsive.

Per-change actions: Revert (trash icon, actually reverses the change on the page), Batch apply (zap icon, applies the change to all matching elements with a count badge ×N). Clear All wipes everything in one click.

Export / Import move the whole diff to and from a JSON file, so a session can be saved, shared, or replayed on another page. Export CSS (Alt+X) copies the generated stylesheet for the session straight to your clipboard.

Above the tabs sits the toolbar — a row of contextual buttons that act on the current selection or the whole page: Parent / Child (walk the DOM up and down), Duplicate / Remove, Comment, Pause animations, Screenshot, the Design system panel (swatch-book), and Undo / Redo. Most need a layer selected; Pause, Screenshot, Design system, and Undo / Redo are always available.

Pause animations is just one of them — it pauses supported page animations for inspection; do not assume it stops every JavaScript-driven effect. The pulsing badge below keeps animating until you hit it.

Click the gear icon in the panel header to open Settings. Pick your color format (HEX / RGB), screenshot capture mode (clipboard / download / both), and, on Chrome, the launch surface (Side panel / Floating / Pin on top). MCP connection settings live on the dedicated MCP page. The page cursor defaults to the Design Mode app icon — turn off Page cursor for a plain crosshair.

The side panel has its own theme (light / dark / system) — independent of the page you're editing. The theme switcher in the panel header cycles through the three.

System mode follows your OS dark-mode setting and updates live when it changes.

Design Mode ships with an optional MCP companion that bridges the extension to your coding agent (Claude Code, Cursor, etc.). With MCP running and an agent connected, your changes can be sent live with one click instead of being copied through the clipboard.

MCP configuration lives on its own dedicated page inside the extension — not in Settings. Click the MCP chip in the panel header (its trailing chevron opens the page) to pick a connection mode, watch status, and manage the token.

Three connection modes: Cloud (selected on a fresh install but disconnected until you create a credential), Local (a companion process started by your MCP client), and Self-hosted (relay code on infrastructure you operate).

At the bottom of the side panel, Copy as prompt builds a Markdown summary of tracked changes across the site’s recorded routes, including collapsed groups — element selectors, before/after CSS, text edits as a compact word-diff (only the changed words, not the whole paragraph), DOM operations, and any comments — and copies it to the clipboard. Edits made at a mobile or tablet viewport carry breakpoint context; ask the agent to verify the intended responsive scope rather than assuming the tag enforces a media query. Paste into your agent or chat of choice.

When source detection exposes a usable source path, the prompt can include that path and an available line number. Hints are conditional, not guaranteed source mappings; inspect them and other page-derived content before sharing.

Send to Agent is available when there are recorded changes and Preview original is off, unless a send is in progress or a Local feedback round is being implemented. Without a connection or attached agent, clicking it opens setup instructions. With a connected client, review the session and mark it ready over MCP.

Once you send, get_changes and get_session_summary expose a real handoff field, so the agent's next read knows this batch of edits is the one you just approved — an explicit 'these are ready' signal instead of the agent guessing.

The connected client still needs separate repository access, and you must ask it to implement the changes and review its source diff.

Haven't set up an agent yet? The MCP guide covers Local, Cloud and Self-hosted modes, with version-stamped instructions for Claude Code and Cursor and a warning to verify other clients separately.