Add to ChromeDocs
How to install Design Mode, set up MCP for your AI coding agent, work with the Changes tab, and fix common issues.
Install Design Mode
Design Mode is a free browser extension for Chrome and Firefox. Install once, open the side panel (sidebar on Firefox), open any page and start designing. No account, no setup wizard.
ReadBrowser support & parity
Design Mode runs on Chromium browsers (Chrome, Edge, Brave, Arc) and on Firefox 121+. Everything core is identical across browsers; a few extras depend on APIs that only Chromium ships, so they're hidden on Firefox.
ReadKeyboard shortcuts
Design Mode has 13 shortcuts that work directly on the page while the side panel is open, plus one browser-level shortcut that opens the panel itself — 14 in total.
ReadMCP 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.
ReadThe 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.
ReadTroubleshooting
Most issues fall into a handful of patterns. Here's the short list.
Read