STARWARCLOUD STARWAR.AI
返回市场
草图上下文MCP服务器

草图上下文MCP服务器

作者：jshmllr63 星标更新：2025-09-30
安装使用来源：spider==github.com

项目介绍

【技术文档摘要】：

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

Sketch Context MCP 概览

<a href="https://glama.ai/mcp/servers/@jshmllr/Sketch-Context-MCP"> <img width="380" height="200" src="https://gips1.baidu.com/it/u=3280263698,748799639&fm=3081&app=3081&f=PNG?w=760&h=400" /> </a>

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

概述

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

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

组件

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

  1. MCP服务器: 一个Node.js服务器，实现了Model Context Protocol，向Cursor IDE提供Sketch文件数据
  2. Sketch插件: 一个带有用户界面的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或其他类似IDE
  • 一个Sketch账户（本地）或使用API访问（Sketch云端文件）

安装

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

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

# 使用Sketch云端访问运行
sketch-context-mcp --sketch-api-key=<your-sketch-api-key>

或者直接使用npx运行：

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

安装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. 在Cursor作曲家中，您可以：

    • 通过ID引用组件：“显示ID为12345的组件”
    • 列出所有组件：“列出设计中的所有组件”
    • 获取特定元素的详细信息：“描述页眉中的按钮”
    • 创建新元素：“创建宽度为200，高度为100的矩形”

获取Sketch API密钥

Sketch API密钥是一个OAuth访问令牌，用于访问Sketch云端托管的文件。按照以下步骤获取并使用该令牌：

第一步：与Sketch云端认证

使用您的Sketch云端凭证（电子邮件和密码）生成一个访问令牌，通过向认证端点发送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云端账户凭证。

第二步：访问令牌

响应将包括一个access_token。此令牌作为您的API密钥，用于访问Sketch云端托管的文件。

第三步：使用令牌

为了安全起见，建议通过环境变量传递令牌：

export SKETCH_API_KEY=<your-access-token>

或者将其作为命令行参数包含：

sketch-context-mcp --sketch-api-key=<your-access-token>

第四步：刷新令牌

如果您的令牌过期，可以使用初始响应提供的refresh_token来获取新的访问令牌。

安全最佳实践

确保您的API密钥安全，遵循以下指南：

  • 不要硬编码密钥: 不要在应用程序或源代码中硬编码API密钥。相反，使用环境变量或秘密管理工具。

  • 使用.env文件进行本地开发: 将您的API密钥存储在.env文件中，并使用像dotenv这样的库加载它：

    SKETCH_API_KEY=<your-access-token>

    确保将.env文件添加到.gitignore中，以避免意外暴露。

  • 定期轮换令牌: 如果您的令牌泄露或被破坏，请立即撤销并生成新的令牌。

  • 监控和审计: 使用工具扫描您的存储库以查找暴露的凭据（例如GitHub的秘密扫描功能）。

  • 使用短寿命令牌: 如果可能，使用短寿命令牌并在需要时刷新它们，以最小化泄露令牌的影响。

在Sketch-Context-MCP中的工作方式

Sketch API密钥用于访问Sketch云端托管的文件。服务器使用此密钥对Sketch云端的请求进行身份验证，并检索必要的设计数据。在发出API请求时，密钥通过Authorization头安全地传递。

配置

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

环境变量

  • SKETCH_API_KEY: 您的Sketch API访问令牌（对于Sketch云端文件是必需的）
  • 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引用特定图层

关于标签

关于标签提供了有关插件及其使用方法的信息。

使用Cursor

一旦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环境变量：

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

贡献

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

许可证

本项目根据MIT许可证授权 - 查看LICENSE文件以获取详细信息。