Sketch MCP Server

The Sketch MCP server is the official Model Context Protocol integration built into the Sketch Mac app. It exposes a local HTTP MCP endpoint (default http://localhost:31126/mcp) that AI clients can call to introspect and manipulate the frontmost Sketch document. The server ships inside Sketch itself, with a companion stdio proxy bundle (sketch-hq/sketch-mcp-bundle) on GitHub that lets clients which only support stdio (such as Claude Desktop) connect to the local HTTPS server.

Functionally, the server exposes two primary tools: get_selection_as_image, which captures the current selection as an image so the model can analyze designs visually, and run_code, which executes arbitrary SketchAPI JavaScript inside the running document. Because run_code has access to the SketchAPI, AI agents can read and mutate layers, symbols, libraries, text content, colors, and exportable assets, enabling workflows like swapping theme symbols, replacing placeholder copy with real data, generating palettes, organizing layers, and generating code from screens.

The server runs entirely on localhost with no authentication and no remote access. It is off by default and must be started manually from the Sketch Command Bar or Settings. It is Mac-only, requires Sketch 2025.2.4 or later, and only works with the direct download version of Sketch (not the Mac App Store build).

Tools

Prerequisites

• Sketch 2025.2.4 or later, installed via direct download from sketch.com (the Mac App Store version is not supported)
• macOS with Local Network access granted to Sketch
• An MCP-capable client (Claude Code, Claude Desktop, Cursor, VS Code, Codex, Antigravity)

Start the server in Sketch

• Open the Command Bar in Sketch (⌘K), type "MCP" and choose Start MCP Server, or
• Enable it from Settings > General > MCP Server

Grant Local Network permission when prompted. The server listens at http://localhost:31126/mcp by default. The port can be changed in Sketch settings if it conflicts (allowed range 1024 to 49151).

Claude Desktop

Install via Customize > Connectors > Browse connectors, search for "Sketch", and click Install. This uses the sketch-mcp-bundle stdio proxy under the hood.

Claude Code

claude mcp add --transport http sketch http://localhost:31126/mcp
claude mcp get sketch

Cursor

Edit mcp.json under Cursor > Settings > Tools & MCP:

{
  "mcpServers": {
    "sketch": {
      "url": "http://localhost:31126/mcp",
      "type": "http"
    }
  }
}

VS Code

Open the Command Palette (⌘⇧P), run MCP: Add Server, choose HTTP, paste http://localhost:31126/mcp, and name it sketch. Then open Copilot chat in Agent mode (⌘⇧I).

Codex

Add to ~/.codex/config.toml:

[mcp_servers.sketch]
url = "http://localhost:31126/mcp"

Build the bundle from source (optional)

git clone https://github.com/sketch-hq/sketch-mcp-bundle
cd sketch-mcp-bundle
npm ci
npm run start    # requires Sketch running with MCP enabled
npm run pack     # produces a .mcpb archive for distribution

• Compare a coded component against its Sketch source by selecting the component and asking the agent to flag visual or structural inconsistencies.
• Swap light and dark theme symbols across an entire document in one pass by scripting against the SketchAPI through run_code.
• Replace lorem ipsum text and placeholder avatars in mockups with realistic data pulled from a JSON file or API.
• Generate a color palette from a reference image and convert the colors into Sketch color variables.
• Generate front-end code (HTML/CSS, React, SwiftUI) directly from a selected screen or symbol by combining get_selection_as_image with the agent's code generation.

• "Capture my current selection and tell me which spacing values are inconsistent with our 4px grid."
• "Rename every layer in the selected artboard using the pattern section/component/state."
• "Replace all placeholder user names and avatars in this artboard with the contents of users.json."
• "Generate a Tailwind React component that matches the screen I have selected in Sketch."
• "Swap every symbol on this page from the Light library to the matching symbol in the Dark library."

• Officially built and maintained by Sketch, shipped inside the Sketch Mac app.
• Runs entirely on localhost with no authentication or cloud round trip, so designs never leave the machine.
• run_code exposes the full SketchAPI, so agents can perform arbitrary scripted edits, not just read data.
• Works with the major MCP clients: Claude Code, Claude Desktop, Cursor, VS Code, Codex, Antigravity.

• Mac-only and requires Sketch 2025.2.4 or later from the direct download (not the Mac App Store build).
• Only two tools are exposed (get_selection_as_image and run_code); richer document interaction depends on the agent writing correct SketchAPI code.
• Server is off by default and must be started manually in Sketch for each session.

• Figma Dev Mode MCP Server for equivalent design to code workflows in Figma.
• jshmllr/sketch-context-mcp, an earlier community Sketch MCP that parses .sketch files directly (archived in favor of the official server).
• mater1996/sketch-mcp-server, a third-party Sketch file parsing MCP focused on code generation.