Sketch Context MCP

**注意：**该项目目前处于测试阶段，可能还不完全稳定。

草图上下文 MCP

用于将 Sketch 设计与 Cursor、Cline 或 Windsurf 等 IDE 集成的模型上下文协议 (MCP) 服务器。

概述

该工具允许 Cursor IDE 访问和解释 Sketch 设计文件，从而实现由 AI 驱动的“设计到代码”工作流程。其工作原理如下：

1. 提供解析 Sketch 文件（.sketch）的服务器
2. 实现 Cursor 或其他 IDE 用于上下文的 MCP 协议
3. 允许您从 Sketch 文件中引用特定组件和图层
4. 为 Sketch 提供与 Cursor 通信的 UI 界面
5. 实现 Sketch 和 Cursor 之间的实时双向通信

成分

该项目由两个主要部分组成：

1. MCP 服务器：一个实现模型上下文协议的 Node.js 服务器，用于向 Cursor IDE 提供 Sketch 文件数据
2. Sketch 插件：带有 UI 界面的 Sketch 插件，通过 WebSockets 与 MCP 服务器通信

可用的 MCP 工具

服务器向 Cursor 提供以下工具：

• get_file ：检索 Sketch 文件或其中特定节点的内容
• list_components ：列出 Sketch 文件中的所有组件/符号
• get_selection ：获取有关当前选定元素的信息
• create_rectangle ：创建具有指定尺寸和属性的新矩形
• create_text ：使用自定义内容和样式创建新的文本元素

这些工具使 Cursor 能够：

• 访问和检查 Sketch 设计文件
• 查询特定组件和层
• 通过自然语言命令创建和修改设计元素
• 与 Sketch 保持实时同步

支持的功能

• 本地和云端 Sketch 文件解析
• 元件/符号提取
• 资产管理和自动下载
• 通过 Sketch 插件支持选择链接
• 通过 WebSockets 和 SSE 进行实时更新
• 用于将 Sketch 连接到 Cursor 的交互式 UI
• 解析本地和 Sketch 云托管文件
• 提取文档结构和组件信息
• 通过ID访问特定节点
• 列出 Sketch 文件中的所有组件
• 通过 Cursor 命令创建矩形、文本和其他元素

入门

先决条件

• Node.js（v14 或更高版本）
• Sketch（v70 或更高版本）
• Cursor IDE、VS Code 或类似工具
• Sketch 帐户（本地）或使用 API 访问（Sketch Cloud 文件）

安装

或者直接用npx运行：

安装 Sketch 插件

1. 从发布页面下载插件的最新版本
2. 双击.sketchplugin文件以在 Sketch 中安装它
3. 该插件可在 Sketch 的“插件”>“Sketch Context MCP”下找到

与 Cursor 集成

要将其与 Cursor 一起使用：

1. 使用您的 Sketch 文件启动 MCP 服务器：
   sketch-context-mcp --local-file=/path/to/your/file.sketch
2. 在 Sketch 中，打开插件：
   • 转到插件 > Sketch Context MCP > 打开 MCP 接口
   • 输入服务器端口（默认值：3333）
   • 点击“连接”
3. 在 Cursor 中，连接到 MCP 服务器：
   • 前往“设置”>“功能”>“上下文”
   • 添加新的 MCP 服务器，URL 为： http://localhost:3333/sse
   • 点击“连接”
4. 在光标编辑器中，您现在可以：
   • 通过 ID 引用组件：“显示 ID 为 12345 的组件”
   • 列出所有组件：“列出设计中的所有组件”
   • 获取特定元素的详细信息：“描述标题中的按钮”
   • 创建新元素：“创建一个宽度为200、高度为100的矩形”

配置

可以使用环境变量（通过.env文件）或命令行参数来配置服务器。命令行参数的优先级高于环境变量。

环境变量

• SKETCH_API_KEY ：您的 Sketch API 访问令牌（Sketch Cloud 文件所需）
• PORT ：运行服务器的端口（默认值：3333）
• LOCAL_SKETCH_PATH ：本地 Sketch 文件的路径（--local-file 参数的替代）
• DEBUG_LEVEL ：设置日志详细程度（默认值：'info'）

命令行参数

• --version ：显示版本号
• --sketch-api-key ：您的 Sketch API 访问令牌
• --port ：运行服务器的端口
• --stdio ：以命令模式运行服务器，而不是默认的 HTTP/SSE
• --help ：显示帮助菜单

使用 Sketch 插件

连接选项卡

“连接”选项卡允许您连接到 Sketch Context MCP 服务器：

1. 输入端口号（默认为3333）
2. 点击“连接”建立WebSocket连接
3. 连接后，您将看到一条带有频道 ID 的确认消息
4. 按照说明将 Cursor 连接到服务器

选择选项卡

“选择”选项卡显示有关 Sketch 文档中选定图层的信息：

1. 在 Sketch 文档中选择一个或多个图层
2. 所选图层将显示在列表中
3. 单击“复制选择 ID”将图层 ID 复制到剪贴板
4. 在 Cursor 中使用这些 ID 来引用特定图层

关于 Tab

关于选项卡提供有关插件及其使用方法的信息。

与游标一起使用

一旦 Sketch 和 Cursor 都连接到 MCP 服务器：

1. 在 Sketch 中选择元素
2. 使用 Sketch Context MCP 插件复制它们的 ID
3. 在 Cursor 中，通过 ID 引用这些元素

Cursor 中的示例命令：

• “显示 ID 为 12345 的图层的详细信息”
• “创建一个宽度为 300、高度为 200 的蓝色矩形”
• “添加一个文本层，内容为‘Hello World’”

故障排除

常见问题

• 连接错误：确保您的服务器正在运行并且端口可访问
• 身份验证失败：验证您的 Sketch API 密钥是否正确
• 文件解析问题：确保您的 Sketch 文件有效且未损坏
• WebSocket 连接失败：确保端口未被防火墙阻止

日志

要启用详细日志记录，请设置 DEBUG 环境变量：

贡献

欢迎贡献代码！欢迎提交 Pull 请求。

执照

该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅LICENSE文件。