Keyboard shortcuts

Most of Design Mode is built around keyboard-driven iteration. These are the shortcuts worth knowing.

Selection & navigation

Click any element to select. ↑ / ↓ walks the DOM tree (parent / child). ← / → walks siblings. Escape clears the selection.

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.

Screenshot

Cmd/Ctrl + Shift + S captures the visible tab to clipboard (or downloads, depending on the capture mode in Settings).

Send to agent

Cmd/Ctrl + Enter from the panel sends the current change set to your connected AI agent over MCP. Only fires if an agent is attached.

Related docs

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.

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.