MarkLion Cloud MCP 配置教程

说明：本教程以演示环境私有云地址 https://clouddemo.marklion.cn/ 为例进行说明，实际使用时请将文中出现的该地址替换为你自己的私有云部署地址。

前置要求：私有云部署包版本必须更新至 v7.2.9000 及以上，否则 MCP 功能不可用。

本教程将指导你完成 MarkLion Cloud 的 MCP（Model Context Protocol）服务配置，包括在 Web 端创建 Bearer Token、配置 MCP 客户端，以及使用可用的 MCP 工具获取设计稿数据。

目录

1. 什么是 MarkLion Cloud MCP    

2. 在 Web 端创建 Bearer Token    

3. 配置 MCP 客户端    

4. 可用工具列表    

5. 使用示例    

6. 常见问题    

什么是 MarkLion Cloud MCP

MarkLion Cloud MCP 是一个基于 Model Context Protocol（MCP）的服务，允许 AI 助手（如 Claude Code、Cursor 等）直接读取你在 MarkLion Cloud 上托管的 Adobe XD、Sketch、Figma 设计稿数据，并将其转换为前端代码。

核心功能

• 1. 浏览 MarkLion Cloud 文件夹结构，查看画板列表

• 2. 获取设计稿的完整节点树（JSON 格式），包含布局、样式、文本等所有信息

• 3. 下载设计稿中的切图资源（PNG、WebP、SVG、PDF 等格式）

• 4. 批量下载指定文件夹下的网盘文件到本地

• 5. 支持公开分享链接和需要分享码的私密文件夹

工作原理：AI 助手通过 MCP 协议连接 MarkLion Cloud 服务端，使用 Bearer Token 进行身份认证，然后调用各种工具获取设计稿数据并生成代码。

关于还原度：get_design_json 工具只负责提供设计稿的结构化数据（JSON），最终的代码生成和设计还原由你接入的大模型完成，实际还原度取决于所使用模型的能力。

在 Web 端创建 Bearer Token

使用 MarkLion Cloud MCP 服务前，你需要先在 Web 端创建一个 Bearer Token 用于身份认证。

2.1 进入 MCP 配置页面

1. 1. 登录 MarkLion Cloud Web 端（https://clouddemo.marklion.cn 或你的私有云地址）

2. 2. 点击右上角的用户头像或"更多选项"按钮（三个点图标）

3. 3. 在弹出的下拉菜单中选择 "MCP 配置" 选项

图 2-1：点击右上角菜单中的「MCP 配置」选项

2.2 查看 Token 列表

进入 MCP 配置页面后，你将看到已有的 Token 列表。页面顶部显示 Token 的创建限制（最多 10 个），以及"全部"和"已过期"两个筛选标签。

           图 2-2：MCP 配置页面 — Token 列表

Token 列表中每行包含以下信息：

2.3 创建新 Token

1. 1. 点击页面右上角的 "创建 Token" 按钮（带加号图标）

2. 2. 在弹出的对话框中，输入 Token 的名称（例如 claude-code），方便日后识别用途

3. 3. 点击 "确认" 按钮完成创建

           图 2-3：在创建 Token 对话框中输入名称并确认

2.4 复制并保存 Token

重要警告：Bearer Token 仅在创建成功时可见！关闭弹窗后，你将无法再次查看完整的 Token 值。请务必立即复制并妥善保存。

创建成功后，系统会弹出提示窗口，显示：

• 完整的 Token 值（以 ml- 开头的字符串）

• 可直接复制使用的 MCP 客户端 JSON 配置

• 安全提示和使用说明

           图 2-4：Token 创建成功 — 请立即复制 Token 值和配置信息

数量限制：每个账户最多可创建 10 个 Bearer Token。如果已达到上限，需要先删除不再使用的 Token 才能创建新的。

配置 MCP 客户端

获取到 Token 后，需要将其配置到你的 MCP 客户端中。以下是不同工具的配置方式。

3.1 Claude Code 配置

编辑 Claude Code 的 MCP 配置文件。配置文件位置：

• 项目级：项目目录下的 .claude/settings.json 或 .mcp.json

• 全局级：用户目录下的 ~/.claude/settings.json

将以下配置添加到 mcpServers 节点中：

{
  "mcpServers": {
    "marklion-cloud": {
      "type": "streamable-http",
      "url": "https://clouddemo.marklion.cn/mcp",
      "headers": {
        "Authorization": "Bearer ml-你的token值"
      }
    }
  }
}

3.2 Cursor 配置

在 Cursor 中，打开 Settings → MCP，添加新的 MCP Server，填入与上述相同的配置信息。

3.3 配置字段说明

配置完成后：重启 MCP 客户端或重新加载配置，即可开始使用 MarkLion Cloud 提供的 MCP 工具。

可用工具列表

MarkLion Cloud MCP 服务提供以下三个工具：

工具调用流程

有两种方式可以使用：

方式一：直接粘贴 URL（推荐）

1. 在 Web 端打开目标画板或文件夹，从浏览器地址栏复制 URL

2. 将 URL 直接提供给 AI 助手，get_design_json 和 list_folder_children 都支持传入 URL 进行访问

3. 如需切图资源，使用 get_artboard_resources 获取下载链接

提示：这是最简单的方式，无需手动查找 key，直接从浏览器复制粘贴即可。

方式二：逐级浏览

1. 使用 list_folder_children 传入文件夹 URL，浏览子文件夹和画板列表

2. 从返回结果中找到目标画板的 key

3. 使用 get_design_json 传入 key，获取画板的完整设计数据

4. 如需切图资源，使用 get_artboard_resources 获取下载链接

使用示例

配置完成后，你可以在 AI 助手中使用以下提示词获取设计稿并生成代码。

5.1 浏览文件夹

Prompt

/* 提示词：浏览 MarkLion Cloud 文件夹 */

列出这个文件夹中的所有内容：
https://clouddemo.marklion.cn/viewer/819/

5.2 获取设计稿并生成前端代码

Prompt

/* 提示词：从设计稿生成前端代码 */

从 MCP MarkLion Cloud 将以下链接的设计稿生成为 HTML/CSS 前端界面：
https://clouddemo.marklion.cn/viewer/819/2A2CE54F-AC53-429D-B306-EBADD0E40291/

要求：
1. 必须实际下载切图资源文件，不要模拟
2. 忠实还原设计稿的布局和样式

5.3 访问需要分享码的设计稿

Prompt

/* 提示词：带分享码访问 */

获取这个设计稿的数据，分享码是 abc123：
https://clouddemo.marklion.cn/viewer/819/2A2CE54F/

5.4 批量下载文件夹中的网盘文件

Prompt

/* 提示词：浏览文件夹并批量下载所有文件 */

从 MCP MarkLion Cloud 列出这个文件夹下的所有内容：
https://clouddemo.marklion.cn/viewer/7/

然后将文件夹中所有的网盘文件下载到本地 res 文件夹中。

AI 助手会执行以下操作：

1. 调用 list_folder_children 传入文件夹 URL，获取文件夹内的所有子项

2. 筛选出其中的文件类型（非画板、非子文件夹）

3. 创建本地 res 文件夹

4. 逐个下载所有文件到 res 文件夹中

提示：AI 助手会自动调用 MCP 工具完成文件夹浏览、设计稿数据获取和资源下载，你只需提供链接和需求描述即可。

常见问题

Token 忘记了怎么办？

Token 仅在创建时显示一次。如果丢失，需要删除旧 Token 并重新创建。旧的 Token 失效后，所有使用该 Token 的客户端都需要更新配置。

Token 过期了怎么办？

在 MCP 配置页面，切换到"已过期"标签页，查看已过期的 Token。你可以删除过期 Token 并创建新的，也可以在 Token 列表中编辑 Token 以延长有效期。

配置后连接失败？

• 检查 Token 是否正确粘贴（包含 Bearer 前缀）

• 检查服务地址是否正确（包含 /mcp 路径）

• 检查网络是否能访问 MarkLion Cloud 服务器

• 确认 Token 未过期

最多可以创建多少个 Token？

每个账户最多 10 个 Bearer Token。如需创建新的但已达上限，请先删除不再使用的旧 Token。