Sketch Context MCP

基本能力

产品定位

Sketch Context MCP 是一个用于将 Sketch 设计与 IDE 集成的工具，旨在实现设计到代码的自动化工作流。

核心功能

1. Sketch 文件解析：支持本地和云端 Sketch 文件的解析。
2. 组件/符号提取：能够提取设计文件中的组件和符号信息。
3. 资产管理：自动下载和管理设计中的资产。
4. 选择链接支持：通过 Sketch Selection Helper 插件支持选择链接。
5. 实时更新：通过 SSE 实现实时更新。
6. 文档结构解析：提取文档结构和组件信息。
7. 节点访问：支持通过 ID 访问特定节点。
8. 组件列表：列出 Sketch 文件中的所有组件。

适用场景

1. 设计到代码转换：将 Sketch 设计自动转换为代码。
2. 组件引用：在 IDE 中引用特定设计组件。
3. 实时协作：通过实时更新实现设计与开发的协作。

工具列表

1. MCP Server：Node.js 服务器，实现 MCP 协议，提供 Sketch 文件数据。
2. Sketch Selection Helper Plugin：Sketch 插件，帮助复制选择 ID 以供 MCP 服务器使用。

常见问题解答

1. 连接错误：确保服务器运行且端口可访问。
2. 认证失败：验证 Sketch API 密钥是否正确。
3. 文件解析问题：确保 Sketch 文件有效且未损坏。

使用教程

使用依赖

• Node.js (v14 或更高版本)
• 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

调试方式

# 启用详细日志
DEBUG=sketch-mcp:* npx sketch-context-mcp

许可证

该项目遵循 MIT 开源许可条款。