实测WorkBuddy灰度版本接入腾讯AI设计工具Ardot

来源：互联网 2026-07-05 06:29:07

WorkBuddy灰度版本V5.0.2中隐藏接入腾讯AI设计工具Ardot，通过对话触发ardot-design-assistant技能，在右侧窗格加载完整设计界面，支持自然语言生成可编辑设计稿、规范约束、一键转代码等功能，基于MCP协议实现设计数据零损耗传递至开发环境。

实测！WorkBuddy 灰度版本集成腾讯AI设计工具 Ardot

最近，WorkBuddy 的灰度版本推送了一次大版本更新——V5.0.2。更新通知弹出来的时候，并未引起太多注意：稳定性有所提升，上下文占用的数值显示更直观了，功能做了收纳调整，界面也清爽了不少。但真正的变化，藏在一次公众号文章排版的过程中。

当时正在对话框里用 GPT-5.5 处理任务，突然发现对话引用了一个未见过的技能，还关联了一个 MCP 工具，右侧任务窗格弹出了一个从未见过的页面。顺着对话框下方的技能列表看去，一个陌生的技能名悄然出现——ardot-design-assistant。更奇怪的是，翻遍技能管理页面，根本找不到这个技能的入口。它就像凭空出现，只有在对话中被实际触发才显露踪迹。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

实测WorkBuddy灰度版本接入腾讯AI设计工具Ardot

随着技能激活，右侧任务窗格瞬间加载出了一个完整的 Ardot 设计界面——黑色画布、熟悉的工具栏、以及一个精美的引导页。引导页上赫然列出六大核心能力：

说一句，出一篇 —— 想法进去，可交互的原型出来
带着规范设计 —— 上传 DESIGN.md，出图自动对齐规范
哪里不满意，选中再聊 —— 框选元素直接对话，局部打磨不伤全局
你主导，Buddy 来做 —— 方向你定，脏活累活交给 Buddy
设计完，一键转代码 —— 原型确认即生成前端工程
点开就能改 —— 云文档在线编辑，想调就调

Ardot？那不是腾讯上个月刚发布的 AI 设计工具吗？它怎么会以这种方式出现在 WorkBuddy 里？

一、意外发现：对话框里蹦出的「神秘技能」

技能被触发的过程颇为偶然。当时正在处理公众号文章的排版任务，对话框内出现了一个名为 ardot-design-assistant 的技能。这项技能并未在技能管理页面中列出，只有实际触发时才可见。这一现象立即引起了注意。

二、Ardot 是什么？腾讯的 AI 设计智能体平台

在深入讲接入细节之前，先简单介绍一下 Ardot 的背景。

Ardot（爱点）是腾讯自研的 AI 设计智能体平台，于 2026 年 5 月 18 日正式开启公测，官网地址是 ardot.tencent.com。目前支持 macOS 客户端和网页端，注册即享 1000 Credits 免费额度。

它不是又一个「能画图的 AI 工具」。Ardot 的定位非常明确——AI 驱动的产设研协作平台。区别于传统 AI 设计工具生成的是静态图片，Ardot 生成的是可编辑、可复用、可交付的团队资产。

Ardot 的核心能力矩阵

能力维度	具体功能
AI 生成设计稿	文生 UI（自然语言描述生成布局与组件）、图片转可编辑设计稿、批量生成矢量图标
局部智能编辑	修改按钮色彩、icon 风格等任意局部元素，框选后直接对话修改
规范约束	支持上传 DESIGN.md 规范文件，AI 出图自动对齐设计规范
团队协作	多人实时协作、在线评论标注、版本对比、精准评审
企业级管理	智能权限中心、全方位行为追溯、人员与资产无缝交接
设计转代码	基于 MCP 协议，设计稿直接对接开发环境，一键还原代码
生态兼容	支持 Figma 文件完整导入，零成本迁移历史设计资产

特别值得关注的是，Ardot 在发布时就高调宣布支持 MCP（模型上下文协议），可以无缝对接 WorkBuddy、Cursor、Claude Code 等 IDE 工具。这不仅仅是「导出代码」那么简单，而是将设计稿的变量、组件、布局数据等完整的设计细节，通过协议层直接拉进开发环境，实现「设计师出稿，开发直接取代码」。

三、揭秘隐藏技能：ardot-design-assistant 是怎么工作的

既然技能管理页面看不到这个技能，那它到底是怎么被调用的？带着好奇，深入研究了一下 WorkBuddy 的技能文件系统，找到了这个隐藏技能的完整文档。

3.1 技能触发机制

ardot-design-assistant 是一个全自动触发技能，无需手动安装或配置。当对话内容匹配到特定语义时，它会自动激活并将设计请求路由到 Ardot MCP Server。

触发词库非常广泛，几乎覆盖了所有与设计相关的表达：

英文：generate/create/design a page、create landing page、make a dashboard、design a login screen、modify the design、update the layout、convert design to code、export as webpage
中文：生成页面、设计页面、创建界面、修改设计稿、调整布局、生成设计、做一个页面、画一个页面、设计稿转代码、转为前端代码、生成应用、切图

也就是说，只要在 WorkBuddy 的对话中表达了任何设计意图，这个技能就会自动接管。

3.2 MCP 工具链全景

技能激活后，WorkBuddy 通过 MCP 协议调用 Ardot 服务器提供的一系列工具。以下是完整的工具清单：

工具名称	功能说明
`create_design`	创建新的 Ardot 设计文件并在编辑器中打开
`open_design`	通过 URL 或文件 ID 打开已有的 Ardot 设计文件
`fetch_editor_state`	获取当前编辑器状态、页面结构、组件列表
`fetch_variables`	读取设计变量（支持 Light/Dark 模式切换）
`fetch_style_guide`	获取 AI 设计风格指南（支持按标签筛选）
`locate_available_space`	在画布上定位可用空间，避免元素重叠
`batch_read`	批量读取节点信息（支持按名称模式匹配、深度递归）
`batch_edit`	批量编辑操作（每次最多 25 个操作：插入/更新/复制/移动/删除/图片）
`capture_layout`	捕获布局结构，用于验证和对齐检查
`capture_screenshot`	捕获视觉截图，用于验证设计效果
`scan_exportable_resources`	扫描可导出的图片和 SVG 资源
`apply_variables`	应用设计变量到组件
`substitute_all_matching_properties`	全局批量替换样式属性

这些工具的组合，构成了一套完整的「对话驱动设计」工作流。

3.3 标准工作流解析

根据技能文档，一个典型的设计任务会经历以下步骤：

实测WorkBuddy灰度版本接入腾讯AI设计工具Ardot

整个流程都是自动化的。只需在对话框里描述想要的设计，AI 会自动完成从文件创建、状态读取、风格选择、布局定位、元素绘制到效果验证的全过程。

四、实测体验：从对话到设计画布

4.1 首次接入：账号授权与引导页

在技能首次被触发时，会出现一个账号链接页面。这应该是 Ardot 的 OAuth 授权流程，用于将 Ardot 账号与 WorkBuddy 会话关联。

授权完成后，右侧任务窗格会加载 Ardot 的设计器界面。每次打开时会先展示引导页，介绍 Ardot 的六大核心能力，底部有一个输入框：「在左侧对话框输入你的想法，开始创作」。

4.2 可视化编辑界面

引导页之后进入正式的设计画布。Ardot 在 WorkBuddy 右侧任务窗格中提供的界面功能相当完整：

实测WorkBuddy灰度版本接入腾讯AI设计工具Ardot

移动工具：拖拽调整元素位置
手型工具：平移画布视角
智能框选：框选多个元素后，可以直接在对话框中描述修改需求，AI 会自动调整选中区域
属性面板：查看和编辑选中元素的详细属性

实测WorkBuddy灰度版本接入腾讯AI设计工具Ardot

这种「左侧对话驱动 + 右侧可视化编辑」的双 pane 模式，创造了一种全新的设计交互范式：可以用自然语言描述宏观意图，同时用鼠标在画布上进行微观调整，两者实时同步。

4.3 一键生成应用

在 Ardot 界面的右上角，有一个醒目的「生成应用」按钮。点击后，WorkBuddy 会自动在对话框中发送一条预设的提示词，触发「设计转代码」工作流。

根据技能文档中的 design-to-code-workflow.md，这个工作流分为四个阶段：

设计分析阶段：读取设计文件结构、节点层级、布局模式、样式数据
资源导出阶段：将图片填充导出为 PNG/JPEG，矢量元素导出为 SVG，纯 CSS 可实现的元素则保留为代码
代码生成阶段：将设计结构映射为 HTML DOM，布局映射为 CSS Flexbox，样式映射为具体 CSS 属性
验证预览阶段：本地启动预览服务器，对比设计稿与代码实现的一致性

整个过程中，设计稿的变量、组件、布局数据都会通过 MCP 协议完整传递到开发侧。

4.4 网页版联动

Ardot 在 WorkBuddy 中的嵌入版本还支持一键打开网页版进行编辑。点击后会在浏览器中打开 ardot.tencent.com 的对应文件，可以使用完整的 Web 版功能进行更精细的调整，修改结果会自动同步回 WorkBuddy 的设计文件。

五、DESIGN.md 约束：让 AI 设计「有规矩」

在 Ardot 的引导页上，「带着规范设计」被放在非常显眼的位置。这指的是 Ardot 支持通过 DESIGN.md 文件来约束 AI 的生成行为。

虽然 Ardot 官网目前的公开资料中没有过多展开 DESIGN.md 的技术细节，但从技能文档中可以推断出这个机制的大致逻辑：

风格指南加载：fetch_style_guide 工具支持按标签获取设计风格，标签列表涵盖 modern、minimal、corporate、playful、dark-mode 等风格维度
设计变量系统：fetch_variables 和 apply_variables 工具支持定义颜色、间距、字体等品牌级变量，AI 在生成时会自动绑定这些变量而非硬编码数值
组件复用机制：batch_read 可以扫描设计系统中已有的可复用组件，AI 在生成新页面时会优先引用已有组件而非从头创建