\[！注意\] 此存储库已于2026年2月5日存档。请参阅MCP官方草图 https://www.sketch.com/docs/mcp-server/
注： 该项目目前处于开发/测试阶段，并不完全稳定。
草图上下文MCP
一种模型上下文协议（MCP）服务器，用于将草图设计与Cursor、Cline或Windsurf等IDE集成。
概述
该工具允许Cursor IDE访问和解释Sketch设计文件，从而实现AI驱动的设计到编码的工作流程。其工作原理如下：
- 提供解析Sketch文件（.scretch）的服务器
- 实现Cursor或其他IDE用于上下文的MCP协议
- 允许您从草图文件中引用特定的组件和图层
- 为Sketch提供与Cursor通信的UI界面
- 实现Sketch和Cursor之间的实时双向通信
组件
该项目由两个主要部分组成：
- MCP服务器：一个实现模型上下文协议的Node.js服务器，为Cursor IDE提供Sketch文件数据
- 草图插件：一个带有UI界面的Sketch插件，通过WebSockets与MCP服务器通信
可用的MCP工具
服务器为Cursor提供以下工具：
get_file：检索草图文件或其中特定节点的内容list_components：列出草图文件中的所有组件/符号get_selection：获取当前选定元素的信息create_rectangle：创建具有指定尺寸和属性的新矩形create_text：创建具有自定义内容和样式的新文本元素
这些工具使Cursor能够：
- 访问和检查草图设计文件
- 查询特定组件和层
- 通过自然语言命令创建和修改设计元素
- 与Sketch保持实时同步
支持的功能
- 本地和云草图文件解析
- 组件/符号提取
- 资产管理和自动下载
- 通过Sketch插件支持选择链接
- 通过WebSockets和SSE进行实时更新
- 用于将草图连接到光标的交互式UI
- 解析本地和Sketch Cloud托管的文件
- 提取文档结构和组件信息
- 按ID访问特定节点
- 列出Sketch文件中的所有组件
- 通过Cursor命令创建矩形、文本和其他元素
UI和体验原则
查看 无障碍、快速、愉悦的用户界面原则 在将更改发送到插件或MCP UI之前。该指南列举了交互模式、可访问性、性能和视觉设计的必须/应该/从不规则，以保持用户体验的包容性和弹性。
入门指南
先决条件
- Node.js（v14或更高版本）
- 草图（v70或更高版本）
- 游标IDE、VS代码或类似代码
- 草图帐户（本地）或使用API访问权限（草图云文件）
安装
# Install globally
npm install -g sketch-context-mcp
# Run with a local Sketch file
sketch-context-mcp --local-file=/path/to/your/file.sketch
# Run with Sketch Cloud access
sketch-context-mcp --sketch-api-key=或者直接使用npx运行：
npx sketch-context-mcp --local-file=/path/to/your/file.sketch安装Sketch插件
- 从下载插件的最新版本 发布页面
- 双击
.sketchplugin将其安装在Sketch中的文件 - 该插件将在Sketch中的插件>草图上下文MCP下提供
与Cursor集成
要将其与Cursor一起使用，请执行以下操作：
- 使用Sketch文件启动MCP服务器：
sketch-context-mcp --local-file=/path/to/your/file.sketch- 在Sketch中，打开插件：
- 转到插件>草图上下文MCP>打开MCP接口 - 输入服务器端口（默认值：3333） - 点击“连接”
- 在Cursor中，连接到MCP服务器：
- 前往“设置”>“功能”>“上下文” - 使用以下URL添加新的MCP服务器： http://localhost:3333/sse - 点击“连接”
- 在光标编辑器中，您现在可以：
- 按ID参考组件：“显示ID为12345的组件” - 列出所有组件：“列出设计中的所有组件” - 获取特定元素的详细信息：“描述标题中的按钮” - 创建新元素：“创建一个宽度为200、高度为100的矩形”
获取草图API密钥
Sketch API密钥是访问Sketch Cloud-hosted文件所需的OAuth访问令牌。按照以下步骤获取和使用令牌：
步骤1：使用Sketch Cloud进行身份验证
使用您的Sketch Cloud凭据（电子邮件和密码）通过向身份验证端点发出POST请求来生成访问令牌：
curl -X "POST" "https://auth.sketch.cloud/oauth/token" \
-H 'Content-Type: application/json' \
-d '{
"email": "YOUR_EMAIL",
"password": "YOUR_PASSWORD",
"grant_type": "password"
}'替换 YOUR_EMAIL 和 YOUR_PASSWORD 使用您的Sketch Cloud帐户凭据。
第二步：访问令牌
回复将包括 access_token.此令牌用作访问Sketch Cloud-hosted文件的API密钥。
步骤3：使用令牌
为了安全起见，建议将令牌作为环境变量传递：
export SKETCH_API_KEY=或者将其作为命令行参数包含：
sketch-context-mcp --sketch-api-key=步骤4：刷新令牌
如果您的令牌过期，请使用 refresh_token 在初始响应中提供以获得新的访问令牌。
安全最佳实践
为了确保您的API密钥是安全的，请遵循以下指南：
- 不要硬编码钥匙：切勿将API密钥硬编码到应用程序或源代码中。相反，使用环境变量或秘密管理工具。
- 使用.env文件进行本地开发：将API密钥存储在
.env文件并使用类似库加载dotenv:
SKETCH_API_KEY=确保 .env 文件已添加到 .gitignore 以避免意外暴露。
- 定期旋转令牌：如果您的令牌被泄露或泄露，请立即撤销并生成新的令牌。
- 监督和审计：使用工具扫描存储库中暴露的凭据（例如GitHub的秘密扫描功能）。
- 使用短期代币：如果可能的话，使用短期令牌并根据需要刷新它们，以尽量减少泄漏令牌的影响。
它在草图环境中的工作原理MCP
访问Sketch Cloud-hosted文件需要Sketch API密钥。服务器使用此密钥对Sketch Cloud的请求进行身份验证，并检索必要的设计数据。密钥通过以下方式安全传递 Authorization 在发出API请求时使用头。
配置
服务器可以使用任一环境变量进行配置（通过 .env 文件）或命令行参数。命令行参数优先于环境变量。
环境变量
SKETCH_API_KEY：草图API访问令牌（草图云文件需要）PORT：运行服务器的端口（默认值：3333）LOCAL_SKETCH_PATH：本地草图文件的路径（替代--local file参数）DEBUG_LEVEL：设置日志详细程度（默认值：“info”）
命令行参数
--version：显示版本号--sketch-api-key：您的Sketch API访问令牌--port：运行服务器的端口--stdio：在命令模式下运行服务器，而不是默认的HTTP/SSE--help：显示帮助菜单
使用Sketch插件
连接选项卡
“连接”选项卡允许您连接到草图上下文MCP服务器：
- 输入端口号（默认为3333）
- 点击“连接”建立WebSocket连接
- 连接后，您将看到一条带有频道ID的确认消息
- 按照说明将Cursor连接到服务器
选择选项卡
“选择”选项卡显示有关草图文档中选定图层的信息：
- 在草图文档中选择一个或多个图层
- 所选图层将显示在列表中
- 单击“复制选择ID”将层ID复制到剪贴板
- 在游标中使用这些ID来引用特定图层
关于标签
“关于”选项卡提供有关插件及其使用方法的信息。
与光标一起使用
一旦Sketch和Cursor都连接到MCP服务器：
- 在草图中选择图元
- 使用Sketch Context MCP插件复制他们的ID
- 在Cursor中，通过ID引用这些元素
Cursor中的示例命令：
- “显示ID为12345的层的详细信息”
- “创建一个宽度为300、高度为200的蓝色矩形”
- “添加一个包含“Hello World”内容的文本层”
故障排除
常见问题
- 连接错误：确保您的服务器正在运行并且端口可访问
- 身份验证失败：验证您的Sketch API键是否正确
- 文件解析问题：确保您的草图文件有效且未损坏
- WebSocket连接失败：确保端口未被防火墙阻止
日志
要启用详细日志记录，请设置DEBUG环境变量：
DEBUG=sketch-mcp:* npx sketch-context-mcp贡献
欢迎投稿！请随时提交拉取请求。
许可证
此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。