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

草图上下文 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文件。