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

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

我在 WorkBuddy灰度版本中偶然触发了一个「隐藏技能」ardot-design-assistant，它通过 MCP 协议将腾讯最新发布的 AI 设计工具 Ardot 无缝接入对话流，一句话生成可编辑设计稿。

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

今天系统提示我 WorkBuddy 版本又又又又有更新，这次版本是 V5.0.2 ，和之前的更新一样，推给我的是灰度测试的版本，但是是一次大版本更新。整体感受上，这个版本的稳定性确实有提升，上下文占用的数值显示也更直观了，一些功能做了收纳调整，界面清爽了不少。

但真正的惊喜发生在我做一篇公众号文章排版的时候。

当时我在对话框里使用 GPT-5.5 进行任务处理，突然注意对话引用了一个没见过的技能，并关联了一个MCP工具，在右侧出现了我从未见过的页面。

我才发现，到对话框下方的技能列表里，悄然出现了一个我此前从未见过的技能——ardot-design-assistant。更奇怪的是，我翻遍了技能管理页面，根本找不到这个技能的任何入口。它就像凭空出现一样，只有在对话过程中被实际触发时才显露踪迹。

对话框中触发的 ardot-design-assistant 技能

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

Ardot —— Your eyes, your rules. 智能设计工具，让灵感鲜活落地。

Ardot 在 WorkBuddy 右侧任务窗格加载的引导页

下面列出了六大核心能力：

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

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

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

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

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

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

Ardot 的核心能力矩阵

特别值得关注的是，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 服务器提供的一系列工具。以下是完整的工具清单：

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

3.3 标准工作流解析

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

Ardot 对话驱动设计的标准 9 步工作流（基于 MCP 工具链）

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

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

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

在技能首次被触发时，会出现一个账号链接页面（很遗憾我没有截到图，当时没意识到这是个重要节点）。这应该是 Ardot 的 OAuth 授权流程，用于将 Ardot 账号与 WorkBuddy 会话关联。

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

4.2 可视化编辑界面

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

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

智能框选后可以进行快速修改

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

4.3 一键生成应用

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

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

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

整个过程中，设计稿的变量、组件、布局数据都会通过 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 在生成新页面时会优先引用已有组件而非从头创建

这意味着，你可以为自己的团队建立一套完整的设计规范（颜色体系、字体层级、组件库、间距规则），上传到 Ardot 后，AI 生成的所有设计稿都会自动对齐这套规范。这对于有品牌一致性要求的企业来说，价值巨大。

更进一步，如果 WorkBuddy 能够将 DESIGN.md 的解析能力与其他工作流结合（比如前端组件库文档、API 规范文档），理论上可以实现「规范即代码、代码即设计」的闭环——设计规范、UI 组件、前端实现三者在同一套约束下自动对齐。

在研究明白后我也马上添加上我自己的design.md文档，把多个网站和图形设计标准约束起来。

六、复现困境：为什么「连不上了」？

在我成功触发一次之后，后续多次尝试复现这个能力，都未能再次成功。

• 当我选择 ardot-design-assistant 技能是提示MCP Adapter 未连接
• 新对话右侧任务窗格不再加载 Ardot 设计器

因此我深入研究了一下，发现如果按照SKILL调MCP形式完成连接，我需要安装Windows版本的Ardot的客户端并激活MCP服务，而该客户端尚未推出，在MCP连接器中也未有此服务！刚刚幽灵般出现的功能应该是提前释放给部分用户的灰度功能，而且有如下可能的限制：

1. 灰度发布：这个 MCP 接入能力可能还处于小范围灰度测试阶段，只有部分账号或部分时段可以访问
2. 会话级授权：首次触发时的账号授权可能是会话级别的，会话结束后 token 失效，需要重新走授权流程，但目前缺少触发授权页面的路径
3. 服务端开关：Ardot MCP 服务可能有一个服务端的功能开关，测试完成后临时关闭了

无论如何，这个「昙花一现」的体验反而更让我确信：这不是 bug，而是一个正在酝酿中的正式功能。否则不会有如此完整的工作流文档、如此成熟的 MCP 工具链、以及如此精致的引导界面。我刚刚的成功使用，是其MCP能力免除本地应用端口连接的一次灰度测试。

七、MCP 协议：为什么是 Ardot + WorkBuddy 的组合值得关注？

MCP（Model Context Protocol，模型上下文协议）是 Anthropic 推出的开放协议标准，旨在让 AI 模型能够安全、结构化地访问外部工具和数据源。Ardot 选择基于 MCP 与开发工具对接，这个决策本身就有很强的信号意义。

传统设计→开发流程的痛点

在传统工作流中，设计师和开发者之间有一道「翻译鸿沟」：

传统「截图+口述」传递方式导致的设计信息大量损耗

这个过程不仅低效，而且极易产生误差。一个按钮的圆角是 8px 还是 12px、一段文字的 line-height 是 1.5 还是 1.6、卡片之间的 gap 是 16px 还是 24px——这些细节在「截图+口述」的传递方式中几乎必然会失真。

MCP 协议带来的改变

Ardot 通过 MCP 协议与 WorkBuddy 对接后，设计稿不再是以「像素图片」的形式传递，而是以结构化数据的形式传递：

Ardot 通过 MCP 协议将设计稿以结构化数据形式零损耗传递到开发环境

这意味着：

• 零信息损耗：设计稿的每一个细节都以结构化数据的形式完整传递
• 变量级同步：设计师调整主题色，代码中的变量值自动同步
• 组件级复用：设计系统中的组件与代码组件库可以一一对应
• 实时迭代：对话中修改设计，代码侧可以即时响应

Ardot 官方在发布文章中也特别强调了这一点：

「设计稿 + 变量、组件、布局数据等设计细节 → 直接拉进 CodeBuddy → 一键代码还原。设计师出稿，开发直接取代码，中间零摩擦。」

八、想象空间：WorkBuddy + Ardot 的未来可能性

基于目前的技能文档和实际体验，我可以大胆设想几个 WorkBuddy + Ardot 组合可能带来的变革性场景：

场景一：对话驱动的产品原型

产品经理在 WorkBuddy 中描述一个功能需求：「做一个用户注册页面，包含邮箱输入、密码输入、同意条款复选框和提交按钮，风格要简洁专业」。Ardot 自动生成可编辑的高保真原型，PM 在右侧画布上微调后，一键生成可运行的 React/Vue 代码，前后端可以直接在此基础上对接接口。

场景二：Design.md 驱动的品牌一致性

企业上传自己的 DESIGN.md（包含品牌色、字体规范、组件定义），之后任何人在 WorkBuddy 中要求「设计一个活动落地页」「做一个后台仪表盘」「出一套宣传海报」，AI 都会自动遵循企业规范生成，不会出现「每个页面风格都不一样」的灾难。

场景三：代码与设计的双向同步

前端开发者在代码中调整了一个组件的样式，Ardot 可以反向同步到设计稿中；设计师在 Ardot 中更新了视觉方案，代码侧自动收到变更通知。设计与代码不再是两个分离的世界，而是同一个系统的两种视图。

场景四：多 Agent 协作的设计流水线

结合 WorkBuddy 的 Agent 团队能力，可以实现「设计 Agent + 前端 Agent + 测试 Agent」的自动协作：设计 Agent 出稿 → 前端 Agent 写代码 → 测试 Agent 跑视觉回归 → 发现问题 → 回到设计 Agent 修改 → 循环直至通过。

九、结语：一个「未完成」的彩蛋，预示着什么？

说实话，作为一个 WorkBuddy 的重度用户，我对这次「意外发现」的感受是复杂的。

一方面，我为这个功能的想象空间感到兴奋。如果 WorkBuddy 能够正式官宣并稳定提供 Ardot MCP 接入能力，它将成为国内第一个将 AI 设计工具深度集成到对话流中的 IDE 类产品，目前Claude design还尚未正式投入生产。这不是简单的「插件式集成」，而是从协议层、技能层、交互层的全面打通。这意味着 WorkBuddy 不再只是一个「写代码的工具」，而是进化成了「从想法到产品的完整工作流平台」。

另一方面，复现失败的经历也提醒我，这个功能显然还在打磨中。腾讯 Ardot 5 月 18 日才公测，WorkBuddy 能在 6 月初就将 MCP 接入做到这个完成度，说明双方团队的对接非常紧密。但「做得快」不等于「做得好」，账号授权流程的稳定性、会话状态的持久化、错误情况的优雅处理，这些细节都需要时间打磨。

不过，正是这种「半成品」的状态，让我看到了真实的进展。如果一切都是完美无缺的，我反而要怀疑这是不是精心策划的营销 Demo。有 bug、有瑕疵、有复现困难——这才是一个真实产品迭代过程中的正常状态。

设计，正在从「手工艺术」变成「可编程的创意工程」。

而 WorkBuddy + Ardot 的组合，可能是这个转变中最值得关注的早期信号之一。

写在最后 如果你也在使用 WorkBuddy 5.0.2+ 版本，不妨在对话中试试这些触发词：「帮我设计一个登录页面」「生成一个官网首页」「做一个数据仪表盘」。如果幸运的话，你或许也能触发这个隐藏技能，亲眼见证 AI 产设研一体时代的黎明。 期待 WorkBuddy 和 Ardot 团队的正式官宣。

参考链接：

• Ardot 官网：ardot.tencent.com
• Ardot 帮助文档：docs.ardot.tencent.com
• Ardot 公测公告：腾讯新闻
• MCP 协议规范：modelcontextprotocol.io