Sketch

You are equipped with a Sketch MCP Server that analyzes Sketch design files, extracts structure and styles, and provides a set of specialized tools to query, inspect, and render design elements. This server enables efficient AI-assisted design-to-code workflows by reducing token usage and offering rich, structured information about Sketch documents.

How to use

To use the Sketch MCP Server, you run the server locally and connect your MCP client to it. Start the server in stdio mode for direct in-process communication, or run it through an MCP runner that launches the server as a separate process. Once connected, your client can load a Sketch file and start asking for document structure, node details, symbol information, and rendered previews.

How to install

Prerequisites: you need Node.js (version 16.0.0 or newer) and a package manager (npm or yarn). Make sure Node is available on your system before proceeding.

# Global installation (recommended)
npm install -g sketch-mcp-server

# Using npx (no installation required)
npx sketch-mcp-server

# Local project installation
npm install sketch-mcp-server

Configuration and usage notes

You can run the server via npx to obtain a ready-to-use MCP endpoint for tooling like Trae AI or similar MCP clients. The recommended runtime configuration for an MCP client is to launch the server with npx and connect to the stdio server from your client environment.

{
  "mcpServers": {
    "sketch-mcp-server": {
      "command": "npx",
      "args": ["sketch-mcp-server"]
    }
  }
}

Connecting from an MCP client

Your MCP client should be configured to connect to the Sketch MCP Server using the stdio channel. The example above shows how to invoke the server via npx. After the client connects, you can load Sketch files and start issuing tool calls such as getting document structure, listing nodes, and rendering nodes.

Examples: common workflows

1. Load a Sketch file from disk using the provided file loading tool, then request a smart summary of the document structure to minimize token usage.

2. Retrieve detailed information for specific nodes you are interested in, using the node info tools, and render key components to SVG or PNG for visual verification.

Available tools

loadSketchByPath

Load a Sketch file from the file system for processing by the MCP server.

loadSketchByConfig

Load Sketch data from a configuration object for subsequent analysis.

getDocumentStructure

Retrieve the complete document hierarchy with options for field filtering and summary mode to minimize data volume.

getPageStructure

Get the structure of a single page within the Sketch document.

listPages

List all pages with basic information to understand document scope.

getNodesSummary

Produce a smart node summary that significantly reduces token usage while revealing key design elements.

listNodes

List nodes with optional filtering to focus on areas of interest.

listNodesByPage

List nodes filtered by a specific page to narrow down the scope.

findNodesByName

Search for nodes by name to quickly locate elements.

getNodeInfo

Get detailed information for a single node, including properties and relationships.

getMultipleNodeInfo

Batch retrieve information for multiple nodes (up to 100) to speed up analysis.

getNodePosition

Obtain position information for a node within the canvas or page.

getSymbolMasters

Fetch all Symbol Masters used in the document.

getSymbolInstances

Fetch all Symbol Instances contained in the document.

getSymbolMasterBySymbolID

Find a Symbol Master by its Symbol ID.

getSymbolInstanceStyles

Retrieve instance styles, including any overrides applied to symbol instances.

renderNodeAsBase64

Render a design node as an image (SVG or PNG) encoded in Base64 for quick visualization.