注意： 本项目目前处于测试阶段，可能尚未完全稳定。

Sketch Context MCP

一个模型上下文协议 (MCP) 服务器，用于将 Sketch 设计与 IDE（如 Cursor、Cline 或 Windsurf）集成。

概述

此工具允许 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 选择助手插件支持选择链接
• 通过 SSE 实现实时更新
• 解析本地和 Sketch Cloud 托管的文件
• 提取文档结构和组件信息
• 通过 ID 访问特定节点
• 列出 Sketch 文件中的所有组件

快速入门

前提条件

• Node.js (v14 或更高版本)
• 具有 API 访问权限的 Sketch 帐户（仅 Sketch Cloud 文件需要）

安装

# 全局安装
npm install -g sketch-context-mcp

# 使用本地 Sketch 文件运行
sketch-context-mcp --local-file=/path/to/your/file.sketch

# 使用 Sketch Cloud 访问权限运行
sketch-context-mcp --sketch-api-key=<your-sketch-api-key>

或者直接使用 npx 运行：

npx sketch-context-mcp --local-file=/path/to/your/file.sketch

与 Cursor 集成

要将其与 Cursor 一起使用：

1. 使用您的 Sketch 文件启动 MCP 服务器：

   sketch-context-mcp --local-file=/path/to/your/file.sketch
   

2. 在 Cursor 中，连接到 MCP 服务器：

   • 转到 Settings > Features > Context
   • 输入 URL：http://localhost:3333
   • 点击 "Connect"

3. 在 Cursor 编辑器中，您现在可以：

   • 按 ID 引用组件："Show me the component with ID 12345"
   • 列出所有组件："List all components in the design"
   • 获取有关特定元素的详细信息："Describe the button in the header"

使用 Sketch 文件

由于 Sketch 没有像 Figma 那样内置的 "Copy Link to Selection" 功能，您可以：

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

启动服务器

npx sketch-context-mcp --sketch-api-key=<your-sketch-api-key>

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

Initializing Sketch MCP Server in HTTP mode on port 3333...
HTTP server listening on port 3333
SSE endpoint available at http://localhost:3333/sse
Message endpoint available at http://localhost:3333/messages

将 Cursor 连接到 MCP 服务器

1. 打开 Cursor IDE
2. 转到 Settings (⚙️)
3. 导航到 Features 选项卡
4. 找到 "Context" 部分
5. 输入您的 MCP 服务器的 URL：http://localhost:3333
6. 点击 "Connect"

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

与 Cursor 一起使用

连接 MCP 服务器后，您可以开始将其与 Cursor 一起使用：

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

例如，您可以说："Analyze this Sketch design and create a React component that matches the layout"

使用选择链接

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

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

安装 Sketch 选择助手插件

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

自动安装

运行安装脚本：

./install-plugin.sh

手动安装

1. 将 sketch-selection-helper.sketchplugin 文件夹复制到您的 Sketch 插件目录：

   ~/Library/Application Support/com.bohemiancoding.sketch3/Plugins/
   

2. 如果 Sketch 已经在运行，请重新启动它

使用插件

1. 打开一个 Sketch 文档
2. 选择一个或多个图层
3. 转到 Plugins > Sketch Selection Helper > Copy Selection IDs
4. ID 将被复制到您的剪贴板
5. 将这些 ID 与 MCP 服务器一起使用以引用特定元素

例如，复制 ID 后，您可以询问 Cursor： "Analyze the button with ID 12345 from the Sketch design"

使用组件

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

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

资产管理

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

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

服务器将自动：

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

故障排除

常见问题

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

日志

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

DEBUG=sketch-mcp:* npx sketch-context-mcp

贡献

欢迎贡献！请随时提交 Pull Request。

许可证

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