Get the FREE Ultimate OpenClaw Setup Guide →

sketch

sketch-mcp-server

Installation
Run this command in your terminal to add the MCP server to Claude Code.
Run in terminal:
Command
claude mcp add --transport stdio mater1996-sketch-mcp-server npx sketch-mcp-server

How to use

Sketch MCP Server is designed to analyze Sketch design files and provide intelligent tooling for AI-assisted workflows. It offers a suite of tools to load Sketch files, extract and summarize document structures, inspect node details, render visual representations, and work with Symbol Masters/Instances. The server is optimized for token efficiency, with smart summaries and field-filtered document structures that reduce the amount of data exchanged with AI models. You can use it directly via npx for zero-install usage or install it locally/global to integrate into your tooling. Typical workflows involve loading a Sketch file, generating a compact summary of nodes, retrieving detailed information for specific elements, and rendering nodes as images for validation or visualization in AI pipelines.

How to install

Prerequisites:

  • Node.js v16 or later
  • npm or yarn

Global installation (recommended for quick access):

npm install -g sketch-mcp-server

Using npx (no installation required):

npx sketch-mcp-server

Local project installation (for integration within a project):

npm install sketch-mcp-server

Verification: after installation, start the server to ensure it responds to MCP tool calls and that the built-in CLI is accessible via your preferred invocation (for example, via npx or npm scripts).

Additional notes

Tips and considerations:

  • The server exposes a comprehensive set of MCP tools, including loadSketchByPath, getNodesSummary, getDocumentStructure, getNodeInfo, renderNodeAsBase64, and more. Use getNodesSummary for fast, token-efficient overviews, and switch to getDocumentStructure with field filtering for detailed hierarchical analysis.
  • For Trae AI and Cursor integrations, configure the MCP server in your tool with command: npx, args: ["sketch-mcp-server"] (as shown in the README example).
  • Token optimization varies by tool: summary endpoints offer the largest reductions, while full-detail endpoints return more data. Plan your workflow to perform quick summaries first, then fetch detailed information as needed.
  • Environment variables are optional for basic operation but can be used to customize behavior (e.g., logging level, storage paths, or API keys if extending with external services). If you add env vars, include them in your mcp_config under an env section if your host supports it.
  • When running in stdio mode, you typically use the MCP server via the command demonstrated in the README (npx sketch-mcp-server), which enables streaming I/O for the protocol.

Related MCP Servers

Sponsor this space

Reach thousands of developers