Design Mode

Verified Integration

Author: @typing•Category: ServerApplication

GitHub Repository

JSON-RPC 2.0

Protocol Standard

Sub-second

Execution Latency

Active

Operational Status

Client Configuration

— Connect Design Mode to Claude Desktop or Cursor in seconds

{
  "mcpServers": {
    "design-mode": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-design-mode"
      ],
      "env": {}
    }
  }
}

Paste into ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows).

Architecture & Capabilities

System Overview

Point at UI elements, annotate desired changes in natural language, and let Claude automatically apply those modifications directly to the source code.

Indexed Date

7/22/2026

License

Open Source

Protocol Layer

stdio / SSE RPC

Frequently Asked Questions

Architecture and operational details for Design Mode

When you annotate a UI element, Design Mode automatically captures rich context like CSS selectors, computed styles, screenshots, and source file paths. This detailed information is shared with Claude, enabling it to understand your requests precisely and make accurate, framework-aware edits to your code.

Related MCP Servers

Browse all servers →

@configuring

0xArchive

Provides comprehensive historical and real-time crypto market data, including orderbooks, trades, candles, and more, from Hyperliquid, HIP-3, and Lighter.xyz.

MCP Server5 FAQs

Learn more

@spawning

0xGasless

Facilitates gasless blockchain transactions and interactions directly from Claude AI conversations.

MCP Server4 FAQs

Learn more

@spawning

0xGasless

Bridges Claude AI with blockchain networks, enabling gasless transactions, swaps, and transfers directly from natural language conversations.

MCP Server5 FAQs

Learn more