MCP/Sketch MCP Server
Sketch MCP Server logo

Sketch MCP Server

Processes Sketch design files to extract design elements, analyze structure, and convert components to SVG for automated design-to-code workflows.

design•Design-to-Code & Vector Graphics
Website
License:MIT
COMMUNITY
BySketch Community@Sketch Community

About this Server

Processes Sketch design files by extracting internal layer structure, analyzing design elements, and rendering visual components as SVG vector images for automated design-to-code workflows and AI-powered design inspection. It enables LLMs to inspect symbol masters and instances, resolve component style overrides, calculate exact bounding boxes, and extract vector assets without launching the Sketch desktop app.

Real-time Interaction

Direct low-latency RPC protocol communication with structured JSON schemas.

Scoped Sandboxing

Restricted capability bounds to prevent accidental modifications or leakage.

Security & Best Practices

Read-Only Design Parsing: The Sketch MCP server operates strictly in read-only mode, parsing .sketch zip containers without altering source assets.
Local Asset Inspection: File parsing and SVG rasterization run locally in Node.js without uploading proprietary designs to external servers.
Safe Vector Rendering: Generated SVG strings are sanitized to eliminate embedded scripts or arbitrary XML external entity vulnerabilities.
Controlled File Loading: Design file ingestion is constrained to verified local paths within the designated developer workspace.

When to Use (and When Not To)

Best For
  • •Frontend developers translating Sketch mockups and component libraries into React, Vue, or Tailwind code
  • •Teams extracting design tokens, typography scales, and color variables from .sketch files
  • •Automated design system auditing, icon extraction, and visual SVG asset generation
  • •AI-driven design review and component hierarchy analysis without needing a macOS Sketch license
Not For / Limitations
  • •Figma cloud files or Figma REST API inspection (use Framelink Figma MCP instead)
  • •Interactive 3D model generation or Python bpy scripting (use Blender MCP instead)
  • •Editing or resaving modified .sketch files back to disk (the server provides read-only extraction)

Install & Setup

terminal command
$claude mcp add sketch-mcp-server -- npx sketch-mcp-server

Exposed Tools & Endpoints

17 tools

Functions your AI agent can invoke via this Model Context Protocol server

getNodePosition

Get the bounding box and position coordinates of a node by its ID.

getNodeInfo

Get detailed styling and property information about a specific node by its ID.

findNodesByName

Find and query nodes matching a name pattern across pages.

listPages

List all pages and top-level artboards in the Sketch document.

listNodes

List document nodes with optional layer type and name filtering.

listNodesByPage

List nodes and child elements contained within a specific page.

loadSketchByPath

Load and parse a local .sketch design file from an absolute file path.

loadSketchByConfig

Load and parse a Sketch configuration object directly into memory.

getMultipleNodeInfo

Get detailed property information for multiple nodes by their IDs in a single batched call.

getPageStructure

Get complete hierarchical tree structure of a page with all nested node information.

getDocumentStructure

Get complete document structure with all pages, artboards, and layer hierarchies.

getSymbolMasters

Get all reusable Symbol Masters defined across the Sketch document.

getSymbolInstances

Get all Symbol Instances and component usages in the Sketch document.

getSymbolMasterBySymbolID

Retrieve a specific Symbol Master definition using its unique Symbol ID.

getSymbolInstanceStyles

Extract styles from a Symbol Instance including overrides applied over the Symbol Master.

getNodesSummary

Get an aggregated summary of nodes with statistics and grouping to optimize token usage.

renderNodeAsBase64

Render a node or component as a Base64 encoded SVG vector image for visual layout inspection.