MCP server
by mater1996
Sketch processes design files, extracts internal structure, and renders SVGs for automated design analysis and design-to
Processes Sketch design files to extract design elements, analyze structure, and convert components to SVG for automated design-to-code workflows.
Sketch is a community-built MCP server published by mater1996 that provides AI assistants with tools and capabilities via the Model Context Protocol. Sketch processes design files, extracts internal structure, and renders SVGs for automated design analysis and design-to It is categorized under ai ml, developer tools. This server exposes 17 tools that AI clients can invoke during conversations and coding sessions.
You can install Sketch in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.
MIT
Sketch is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.
Add new capabilities to Claude beyond text generation
Example
Access external data sources, execute code, interact with tools and services
Transform Claude from chatbot to action-taking agent
Provide Claude with access to relevant context and data
Example
Load project documentation, access knowledge bases, query databases
Get more accurate, context-aware responses
Automate multi-step workflows combining AI and external tools
Example
Research → Summarize → Create document → Send notification
Complete complex tasks end-to-end without manual steps
Share your MCP server with the developer community
We wired Sketch into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.
Sketch has been reliable for tool-calling workflows; the MCP profile page is a good permalink for internal docs.
According to our notes, Sketch benefits from clear Model Context Protocol framing — fewer ambiguous “AI plugin” claims.
Strong directory entry: Sketch surfaces stars and publisher context so we could sanity-check maintenance before adopting.
Useful MCP listing: Sketch is the kind of server we cite when onboarding engineers to host + tool permissions.
Strong directory entry: Sketch surfaces stars and publisher context so we could sanity-check maintenance before adopting.
Sketch is among the better-indexed MCP projects we tried; the explainx.ai summary tracks the official description.
Useful MCP listing: Sketch is the kind of server we cite when onboarding engineers to host + tool permissions.
Sketch is among the better-indexed MCP projects we tried; the explainx.ai summary tracks the official description.
Sketch reduced integration guesswork — categories and install configs on the listing matched the upstream repo.
showing 1-10 of 68
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.
npm install -g sketch-mcp-server
npx sketch-mcp-server
npm install sketch-mcp-server
# Start MCP server (stdio mode)
sketch-mcp-server
# Or use npx
npx sketch-mcp-server
This server is designed for the following AI development environments:
Add MCP server configuration in Trae AI:
{
"mcpServers": {
"sketch-mcp-server": {
"command": "npx",
"args": ["sketch-mcp-server"]
}
}
}
| Tool Name | Description |
|---|---|
loadSketchByPath | Load Sketch file from file system |
loadSketchByConfig | Load Sketch data from configuration object |
| 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 | - |
| 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 | - |
| Tool Name | Description |
|---|---|
getNodeInfo | Get detailed information for single node |
getMultipleNodeInfo | Batch get node information (up to 100) |
getNodePosition | Get node position information |
| 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) |
| Tool Name | Description |
|---|---|
renderNodeAsBase64 | Render node as image (SVG/PNG) |
| 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 |
getNodesSummary to understand overall design structuregetDocumentStructure to get hierarchical relationships// 1. Load Sketch file
{
"name": "loadSketchByPath",
"arguments": {
"path": "/path/to/design.sketch"
}
}
// 2. Get smart summary (save 80-90% tokens)
{
"name": "getNodesSummary",
"arguments": {
"groupBy": "type",
"includeStats": true,
"maxSamples": 5
}
}
// 3. Get detailed information for specific nodes
{
"name": "getMultipleNodeInfo",
"arguments": {
"nodeIds": ["button-id", "text-id"]
}
}
// 4. Render node as image
{
"name": "renderNodeAsBase64",
"arguments": {
"nodeId": "button-id",
"format": "svg"
}
}
// Use field filtering to reduce data volume
{
"name": "getDocumentStructure",
"arguments": {
"fields": ["id", "name", "type", "children"],
"maxDepth": 3,
"summaryMode": false
}
}
// Smart summary grouped by style
{
"name": "getNodesSummary",
"arguments": {
"groupBy": "style",
"includeStats": true,
"maxSamples": 3
}
}
| Use Case | Recommended Tool | Token Efficiency | Description |
|---|---|---|---|
| Understanding overall structure | getNodesSummary | ⭐⭐⭐⭐⭐ | Most efficient overview method |
| Analyzing page hierarchy | getDocumentStructure (filtered) | ⭐⭐⭐⭐ | Structured hierarchical information |
| Finding specific nodes | findNodesByName | ⭐⭐⭐ | Precise search |
| Getting detailed information | getMultipleNodeInfo | ⭐⭐ | Batch retrieval |
| Handling Symbol components | getSymbolMasters | ⭐⭐⭐ | Component-based design |
| Visual confirmation | renderNodeAsBase64 | ⭐⭐ | Intuitive effect viewing |
# Clone project
git clone https://github.com/mater1996/sketch-mcp-server.git
cd sketch-mcp-server
# Install dependencies
npm install
# Build project
npm run build
# Run tests
npm test
# Start development server
npm run start:mcp
npm run build # Build TypeScript to JavaScript
npm run test # Run test suite
npm run test:coverage # Run tests and generate coverage report
npm run start # Start HTTP server
npm run start:mcp # Start MCP stdio server
npm run release # Release new version
npm run release:dry # Simulate release process
For detailed API documentation, please refer to Tool Usage Guide.
MIT License
Contributions are welcome! Please feel free to submit a Pull Request.
If you encounter any issues or have questions, please:
Prerequisites
Time Estimate
15-60 minutes depending on server complexity
Steps
Troubleshooting
✓ Do
✗ Don't
💡 Pro Tips
Architecture
Model Context Protocol standardizes how AI hosts (Claude, Cursor) communicate with external tools and data sources through server implementations.
Protocols
Compatibility
✓ Use when
Use when you need Claude to access external data, execute actions, or integrate with tools. Best for extending AI capabilities beyond conversation.
✗ Avoid when
Avoid when native integrations exist (use official APIs directly), for real-time critical systems, or when security/compliance requires zero external dependencies.