腾讯设计

中文

English

中文

English

Appearance

Ardot MCP Server 简介 ​

Ardot MCP Server 是腾讯设计 Ardot 提供的 Model Context Protocol 服务端实现，让 AI Agent（如 Claude、Cursor、Windsurf、CodeBuddy, WorkBuddy 等）能够直接读取和操作 Ardot 设计稿，实现设计与代码的双向联动。

Ardot MCP Server 帮助开发者更快速、更准确地探索和实现设计： ​

  • 从 Ardot 设计文件获取设计上下文，支持基于设计稿进行读取、修改与生成
  • 增强设计组件和 Code Connect 的工作方式（即将推出）

快速开始 ​

1. 准备可用环境 ​

  • 使用支持 MCP 服务器的 AI Agent 或代码编辑器，例如 CodeBuddy、WorkBuddy、Cursor、Claude Code、Codex 等。
  • 推荐优先使用 CodeBuddy 或 WorkBuddy。

2. 访问 Ardot 官网并登录 ​

  • 访问 Ardot 官网 注册登录。
  • 下载桌面端，并在客户端中打开任意设计文件。

下载 Ardot 桌面端 ​

平台芯片/架构下载地址
macOSApple Silicon (M1/M2/M3/M4)Ardot_latest_macOS_arm64.dmg
macOSIntelArdot_latest_macOS_x86_64.dmg
Windows桌面端即将推出

Ardot 同时支持 macOS 桌面端和 Web 端（PC 浏览器），Ardot MCP 优先支持 macOS 桌面端。

如何使用 MCP Server ​

MCP Server 配置入口 ​

  1. 点击 Ardot 首页右上角的 MCP 配置入口。

    MCP 配置入口

  2. 在配置弹窗中开启您所需的代码编辑器。

    开启所需代码编辑器

  3. 打开任意 Ardot 设计文件，检查服务连接是否正常。

    检查服务连接状态

  4. 在终端对话中输入您想要的设计内容。

示例提示词：

使用 Ardot，为我设计一个 Todo List，并带上日程管理与 AI 总结功能，风格采用渐变弥散风，带玻璃拟态效果。

输入设计内容示例

MCP 工具列表 ​

Ardot MCP Server 提供以下 11 个工具（更多 API 持续更新中）：

查询类 ​

工具名说明
fetch_editor_state获取当前编辑器状态，包括活跃画布、用户选区、打开的文件等基本信息，适合在开始设计任务前了解当前上下文
batch_read批量检索节点——支持按 name/type 正则模式搜索、按节点 ID 精确查找，可控制返回层级深度和数据详细程度
capture_screenshot获取指定节点或画布区域的截图，用于验证 AI 生成的布局是否正确、检查视觉效果和组件外观
capture_layout获取设计文件的布局结构树，支持按深度限制返回范围，可仅返回存在重叠、裁剪等布局问题的节点

设计系统 ​

工具名说明
fetch_variables读取设计文件中定义的变量（Design Token），包括颜色、间距、字号等，可用于生成 CSS 全局样式规则
apply_variables创建或更新设计变量集合，支持多模式（如 Light/Dark），支持 COLOR、FLOAT、BOOLEAN、STRING 四种变量类型，默认合并模式
fetch_guidelines获取 Ardot 设计规范指引，支持 7 个主题：table（表格）、landing-page（落地页）、web-app（Web 应用）、mobile-app（移动端）、slides（幻灯片）、code（代码生成）、tailwind（Tailwind CSS v4）

编辑操作 ​

工具名说明
batch_edit批量执行设计操作，支持 7 种操作类型：Insert（插入）、Copy（复制）、Update（更新）、Replace（替换）、Move（移动）、Delete（删除）、Image（生成/获取图片），每次调用建议不超过 25 个操作
locate_available_space在画布中按指定方向（上/右/下/左）和尺寸查找空白区域，可指定起始参考节点和最小间距，用于放置新设计内容

辅助工具 ​

工具名说明
get_available_fonts获取当前环境中可用的字体列表及其样式，用于在创建文本节点后验证字体是否可用，确保使用正确的 fontName（family + style）组合
export_to_code将设计稿节点导出为前端代码（即将推出），支持将选中的设计元素转换为可用的组件代码

使用场景 ​

设计稿转代码 ​

用户：基于当前设计稿的登录页面，帮我生成 React 组件代码
AI：[调用 fetch_editor_state 获取当前状态]
    [调用 capture_screenshot 获取页面截图]
    [调用 batch_read 获取图层结构和属性]
    [调用 fetch_guidelines 获取代码生成规范]
    → 生成完整的 React 组件代码

AI 辅助设计 ​

用户：在当前画布右侧创建一个 Dashboard 页面
AI：[调用 locate_available_space 找到空白区域]
    [调用 fetch_guidelines 获取 Web 应用设计规范]
    [调用 batch_edit 创建页面结构和组件]
    [调用 capture_screenshot 验证设计效果]
    → 完成 Dashboard 页面设计

设计系统管理 ​

用户：为项目创建一套亮色/暗色主题的设计变量
AI：[调用 fetch_variables 查看现有变量]
    [调用 apply_variables 创建颜色、间距、字号等 Token]
    → 完成设计变量定义

设计审查 ​

用户：检查当前页面是否存在布局问题
AI：[调用 capture_layout 并设置 problemsOnly=true]
    → 返回所有存在对齐/溢出问题的节点

常见问题 ​

MCP Server 连接失败？ ​

  1. 确认 Ardot 编辑器已打开并加载了设计文件
  2. 检查 AI 工具的 MCP 配置是否正确
  3. 重启 AI 编程助手重新建立连接

batch_edit 操作报错？ ​

  • 确保每个 Insert / Copy / Replace 操作都有绑定名
  • 单次调用不超过 25 个操作
  • 不要对刚复制的节点的子节点使用 Update，因为子节点 ID 会重新生成

截图为空或不完整？ ​

  • 确认 nodeId 指向的节点在画布可见范围内
  • 检查节点是否有实际内容（空 frame 不会产生有意义的截图）

Roadmap ​

Ardot MCP Server 正在持续迭代中，以下是近期的发展规划：

2026 Q2 ​

功能状态描述
团队组件库调用开发中支持读取和调用团队共享组件库，AI 可直接复用团队设计资产
样式风格优化开发中优化 AI 生成设计稿的样式质量，提升视觉还原度与风格一致性
截图优化开发中提升截图清晰度与准确性，优化大画布场景下的截图体验
Token 消耗优化开发中精简工具调用的数据返回量，降低 AI 对话中的 Token 开销
多 Agent 多开调用规划中支持多个 AI Agent 同时连接并操作多个设计文件
云端 MCP 能力规划中支持云端部署 MCP Server，无需本地安装即可使用

2026 Q3 ​

功能状态描述
CLI 版本规划中
动效生成支持规划中MCP 支持生成动效，丰富 AI 设计生成能力

以上计划会根据用户反馈和业务优先级灵活调整，欢迎通过 Issue 提交需求和建议。

Copyright © 1998-2026 Tencent. All Rights Reserved.