Design Mode
Add to Chrome

Keyboard 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.

In-page shortcuts

These fire on the page itself while the side panel is open: Alt+I toggles Inspect, Alt+C drops a comment pin, Alt+R starts a region comment (drag a rectangle), Alt+P pauses/resumes all motion on the page, Alt+S screenshots the selected element, and Alt+X copies the exported CSS to your clipboard.

Tabs & selection

Alt+1 / Alt+2 / Alt+3 jump to the Layers / Design / Changes tab. Escape deselects back to hover mode. Delete removes the selected element.

Undo & redo

Cmd/Ctrl + Z undoes the last style, text, or DOM change. Cmd/Ctrl + Shift + Z redoes it. Every change in the Changes tab is reversible individually too.

Opening the side panel

Alt+D is a separate, browser-level shortcut — it opens the panel on both Chrome and Firefox (the side panel on Chrome, the sidebar on Firefox), it's not handled by the page, and it's the only one of the 14 you can rebind. Change it at chrome://extensions/shortcuts on Chrome, or about:addons › Manage Extension Shortcuts on Firefox. None of the 13 in-page shortcuts above can be remapped from Settings — that list is read-only.

Related docs

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.

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.

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.