Sketch-Context-MCP
34
Sketch Context MCP is a server for integrating Sketch designs with IDEs using the Model Context Protocol. It allows for AI-powered design-to-code workflows, enabling users to parse, query, and modify design elements in real-time. Key features include real-time synchronization, component extraction, and a UI interface plugin for Sketch.
Sketch Context MCP
A Model Context Protocol (MCP) server designed for integrating Sketch designs with IDEs like Cursor, Cline, or Windsurf.
Overview
- Allows Cursor IDE to interpret Sketch design files for AI-powered design-to-code workflows.
- Provides a server to parse Sketch files, implementing the MCP protocol.
- Enables referencing of components and layers from Sketch files.
- Real-time communication between Sketch and Cursor via a UI interface.
Components
- MCP Server: A Node.js server implementing MCP for Sketch file data access.
- Sketch Plugin: UI interface plugin for Sketch interacts with MCP server.
Available MCP Tools
- Retrieve Sketch file contents.
- List components/symbols in a file.
- Get selection info.
- Create rectangles and text elements.
Supported Features
- Parses local and cloud Sketch files.
- Extracts components/symbols.
- Real-time updates with WebSockets and SSE.
- Provides an interactive UI to connect Sketch with Cursor.
Getting Started
Prerequisites
- Node.js, Sketch, Cursor IDE or similar
Installation
- Install globally using npm or run directly with npx.
- For cloud access, API key required.
Using with Cursor
- Connect MCP server with Sketch file.
- Reference Sketch components by IDs in Cursor.