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 Chrome extension. Install once, pin the side panel, open any page and start designing. No account, no setup wizard.
ReadKeyboard shortcuts
Most of Design Mode is built around keyboard-driven iteration. These are the shortcuts worth knowing.
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