Design Mode
Add to Chrome

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.

1. Install from the Chrome Web Store

Open the Design Mode listing on the Chrome Web Store and click Add to Chrome. Edge, Brave, Arc, and other Chromium-based browsers can install the same listing.

2. Pin the extension

Click the puzzle-piece icon in the browser toolbar and pin Design Mode so the side panel is one click away.

3. Open any page and click the icon

Navigate to any URL — your dev server, a staging deploy, a production site — and click the Design Mode toolbar icon. The side panel opens with the design surface.

4. (Optional) Set up MCP for AI agents

If you want to ship edits to Claude Code, Cursor, Claude Desktop, Windsurf, or Cline, follow the MCP setup guide. The default Cloud mode requires no local install.

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.

Keyboard shortcuts

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

Troubleshooting

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