Sketch MCP Server

English | 中文

A Sketch file processing server based on Model Context Protocol (MCP), designed for AI tools to intelligently analyze Sketch design files and generate code.

✨ Core Features

• 🎨 Sketch File Analysis: Comprehensive parsing of Sketch files, extracting nodes, styles, hierarchies, and complete information
• 🚀 Smart Token Optimization: Up to 90% token consumption reduction, significantly lowering AI call costs
• 🔍 Intelligent Query System: 16 professional tools for efficient discovery and analysis of design elements
• 🎯 Symbol Component Support: Complete Symbol Master and Instance processing capabilities
• 🖼️ Visual Rendering: Render design nodes as SVG/PNG images for AI analysis
• 📊 Detailed Statistical Analysis: Comprehensive statistics for documents and nodes
• 🔧 CLI Tool Support: Support for direct npx calls without installation

📦 Installation

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

🚀 Quick Start

Command Line Launch

# Start MCP server (stdio mode)
sketch-mcp-server

# Or use npx
npx sketch-mcp-server

AI Tool Integration

This server is designed for the following AI development environments:

• Trae AI: As an MCP server for Sketch file analysis
• Cursor: Configure as MCP tool for design-to-code workflow
• Claude Desktop: For Sketch file processing and analysis

Trae AI Configuration Example

Add MCP server configuration in Trae AI:

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

🛠️ Tool List

📁 File Loading Tools

Tool Name	Description
loadSketchByPath	Load Sketch file from file system
loadSketchByConfig	Load Sketch data from configuration object

📊 Document Structure Tools

Tool Name	Description	Optimization Features
getDocumentStructure	Get complete document hierarchy	🚀 Supports field filtering and summary mode
getPageStructure	Get single page structure	-
listPages	List all page basic information	-

🎯 Node Query Tools

Tool Name	Description	Token Optimization
getNodesSummary	Smart Node Summary	🔥 80-90% Token Reduction
listNodes	List nodes (with filtering support)	-
listNodesByPage	List nodes by page	-
findNodesByName	Search nodes by name	-

🔍 Detailed Information Tools

Tool Name	Description
getNodeInfo	Get detailed information for single node
getMultipleNodeInfo	Batch get node information (up to 100)
getNodePosition	Get node position information

🔄 Symbol Component Tools

Tool Name	Description
getSymbolMasters	Get all Symbol Masters
getSymbolInstances	Get all Symbol Instances
getSymbolMasterBySymbolID	Find Master by Symbol ID
getSymbolInstanceStyles	Get instance styles (including override styles)

🎨 Visualization Tools

Tool Name	Description
renderNodeAsBase64	Render node as image (SVG/PNG)

💡 Token Optimization Strategy

Data Volume Comparison

Tool/Mode	Token Reduction	Use Case
getNodesSummary	80-90%	Initial analysis, understanding overall structure
getDocumentStructure (summary mode)	70-85%	Quick document structure overview
getDocumentStructure (field filtering)	30-50%	Structural analysis
Full mode	0%	Detailed design requirements

Recommended Workflow

1. **🔍 Quick Analysi

... View full README on GitHub