Skip to content
Design Mode
Add to Chrome

Design Mode is also available for Firefox and Safari.

The Changes tab

The Changes tab is where every edit you make in the side panel lands. It's the foundation of the handoff — to a teammate, to a tracker, to an AI agent.

What lands in the Changes tab

Style changes (typography, colour, spacing, layout, motion, effects), text changes, DOM mutations (duplicate, delete, reorder, restructure), and comment pins. Each row records the selector, property, old value, and new value.

Search, filter, group

Sticky header with search and filter chips at the top. Search by selector, component/source hint, property name, or value. Filter by kind (style / text / DOM / comment). Keep the default element groups or add detected React/Vue component and source headings; selectors and per-element actions remain available, and missing metadata stays explicitly unattributed.

Resolve, reopen, edit, delete

Each row has per-item actions. Resolved items collapse but remain in history.

Export & import

Export downloads the recorded changes as JSON. Import accepts JSON and replaces the current changes, so export a backup first. For a readable Markdown hand-off to a teammate, issue or agent, use Copy as Prompt; Markdown is not an import format.

Related docs

MCP setup

Start with the copyable setup prompt at https://designmode.app/mcp, or configure your client below. Examples were checked against first-party documentation on 29 September 2026. MCP support, policy and reload behaviour vary by client version.

Troubleshooting

Most issues fall into a handful of patterns. Here's the short list.

Try the editing workflow

Inspect the demo, make a harmless change and copy the specification.

Understand the agent hand-off

Choose Copy as Prompt or a Cloud, Local or Self-hosted MCP connection.