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

草图上下文 MCP

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

概述

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

1. 提供解析 Sketch 文件（.sketch）的服务器
2. 实现 Cursor 或其他 IDE 用于上下文的 MCP 协议
3. 允许您从 Sketch 文件中引用特定组件和图层

成分

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

1. MCP 服务器：一个实现模型上下文协议的 Node.js 服务器，用于向 Cursor IDE 提供 Sketch 文件数据
2. Sketch 选择助手插件：一个 Sketch 插件，可帮助您复制选择 ID 以与 MCP 服务器一起使用

支持的功能

• 本地和云端 Sketch 文件解析
• 元件/符号提取
• 资产管理和自动下载
• 通过 Sketch Selection Helper 插件支持选择链接
• 通过 SSE 实时更新
• 解析本地和 Sketch 云托管文件
• 提取文档结构和组件信息
• 通过ID访问特定节点
• 列出 Sketch 文件中的所有组件

入门

先决条件

• Node.js（v14 或更高版本）
• 具有 API 访问权限的 Sketch 帐户（仅适用于 Sketch Cloud 文件）

安装

或者直接用npx运行：

与 Cursor 集成

要将其与 Cursor 一起使用：

1. 使用您的 Sketch 文件启动 MCP 服务器：
   sketch-context-mcp --local-file=/path/to/your/file.sketch
2. 在 Cursor 中，连接到 MCP 服务器：
   • 前往“设置”>“功能”>“上下文”
   • 输入网址： http://localhost:3333
   • 点击“连接”
3. 在光标编辑器中，您现在可以：
   • 通过 ID 引用组件：“显示 ID 为 12345 的组件”
   • 列出所有组件：“列出设计中的所有组件”
   • 获取特定元素的详细信息：“描述标题中的按钮”

使用 Sketch 文件

由于 Sketch 没有像 Figma 那样的内置“复制链接到选择”功能，因此您可以：

1. 使用list_components工具查看所有可用组件
2. 通过 ID 引用特定组件
3. 使用 Sketch 插件 API 导出选择 ID（请参阅下面的 Sketch 插件部分）

配置

可以使用环境变量（通过.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 ：显示帮助菜单

连接到光标

启动服务器

您应该看到类似以下内容的输出：

将 Cursor 连接到 MCP 服务器

1. 打开游标 IDE
2. 前往“设置”(⚙️)
3. 导航至“功能”选项卡
4. 找到“上下文”部分
5. 输入您的 MCP 服务器的 URL： http://localhost:3333
6. 点击“连接”

连接服务器后，您应该会在 Cursor 的设置中看到一个绿色的状态指示器。

与游标一起使用

一旦 MCP 服务器连接成功，您就可以开始使用 Cursor 了：

1. 确保您在代理模式下使用 Cursor
2. 在 Cursor 编辑器中放置一个 Sketch 文件的链接
3. 要求 Cursor 分析或处理设计

例如，您可以说：“分析这个 Sketch 设计并创建一个与布局相匹配的 React 组件”

使用选择链接

要引用 Sketch 文件中的特定元素：

1. 安装 Sketch Selection Helper 插件（见下文）
2. 在 Sketch 中选择元素
3. 从插件菜单运行插件（或使用键盘快捷键）
4. ID 将被复制到您的剪贴板
5. 与 Cursor 讨论特定元素时使用这些 ID

安装 Sketch 选择助手插件

该插件可帮助您获取 Sketch 中选定元素的 ID，以便与 MCP 服务器一起使用。

自动安装

运行安装脚本：

手动安装

1. 将sketch-selection-helper.sketchplugin文件夹复制到您的 Sketch 插件目录：
   ~/Library/Application Support/com.bohemiancoding.sketch3/Plugins/
2. 如果 Sketch 已运行，请重新启动它

使用插件

1. 打开 Sketch 文档
2. 选择一个或多个图层
3. 转到插件 > Sketch 选择助手 > 复制选择 ID
4. ID 将被复制到您的剪贴板
5. 使用这些 ID 与 MCP 服务器来引用特定元素

例如，复制 ID 后，您可能会询问 Cursor：“从 Sketch 设计中分析 ID 为 12345 的按钮”

使用组件

要在 Sketch 文件中引用特定组件：

1. 打开 Sketch 文件
2. 选择要引用的组件
3. 复制其 ID 或创建指向它的链接
4. 与 Cursor 对话时使用此 ID/链接

资产管理

在以下情况下会自动处理资产：

• 使用图像访问组件
• 使用符号
• 处理导出的资产

服务器将自动：

• 下载所需资产
• 管理资产版本
• 处理组件中的资产引用

故障排除

常见问题

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

日志

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

贡献

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

执照

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