Design Mode
Add to Chrome

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, property name, or value. Filter by kind (style / text / DOM / comment). Group by selector to see every change to a single element.

Resolve, reopen, edit, delete

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

Export & import

Export the change set as JSON (machine-readable) or Markdown (selector → property → value, perfect for Linear / Jira / GitHub). Import JSON to restore a session on another machine.

Related docs

MCP setup

Design Mode talks to AI coding agents over Model Context Protocol. You pick one of three connection modes (Cloud, Local, Self-hosted), paste the snippet, and restart your agent. Full snippets and the live mode comparison live on the /mcp page; this page links into it.

Install Design Mode

Design Mode is a free Chrome extension. Install once, pin the side panel, open any page and start designing. No account, no setup wizard.

Troubleshooting

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