设计创意（WorkBuddy × Ardot）
腾讯设计 Ardot 是腾讯自研的 AI 设计智能体协作平台。WorkBuddy 在「设计创意模式」中深度集成了 Ardot 画布——支持在对话中一句话生成 UI、PPT、海报等设计稿，实时对话修改、云端同步，可随时跳转到 Ardot 进行精细化编辑，满意后一键生成应用代码，实现从创意到落地的丝滑闭环。
本篇教程将带你学习 WorkBuddy × Ardot 的基础操作。
一、连接
打开 WorkBuddy 首页，点击「新建任务」，选择最右侧的 设计创意 Tab。
首次使用时，系统会弹出授权确认窗口。WorkBuddy 通过登录手机号自动完成与 Ardot 的身份关联，无需单独注册腾讯设计账号，点击确认后即可使用。
权限详情：
•
读取画布内容： 读取设计稿中的元素、样式、布局信息
•
编辑画布： 代表您在 Ardot 画布上执行新增、修改、删除等设计操作
•
云端同步： 与 Ardot 浏览器端保持实时双向同步
连接后，WorkBuddy 获得当前登录用户的 Ardot 画布操作权限，所有设计稿存储在云端，换电脑、重新登录均不会丢失。
二、使用
对话生成设计稿
进入设计创意模式后，在对话框中用自然语言描述你想要的设计，AI 将实时在 Ardot 画布上生成。
示例指令：
•
「帮我设计一个移动端登录页」
•
「帮我设计一张产品发布会的宣传海报，主题是 XX」
•
「帮我制作一份 AI 硬件产品发布会 PPT，风格是XX」
https://www.codebuddy.cn/docs/static/ardot-01.bMnnRA1n.png
支持的设计类型包括：移动端 App 界面、网站页面/Landing Page、品牌 Logo、海报/Banner、PPT 演示文稿等。
对话驱动修改
生成设计稿后，可以继续通过对话精准调整，三种修改方式任选：
#TmusQSQQQcXC text { white-space: pre; }#TmusQSQQQcXC .fb0 { stroke: var(--N900-FG, 0.15); }#TmusQSQQQcXC .fb0 {stroke: rgba(31,35,41, 0.15)}#TmusQSQQQcXC .fx0 { stroke-miterlimit: 10; }#TmusQSQQQcXC .fx0 {stroke-miterlimit: 10}#TmusQSQQQcXC .fa1 { fill: rgb(187, 191, 196); }#TmusQSQQQcXC .fa1 {fill: rgb(187, 191, 196)}#TmusQSQQQcXC .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#TmusQSQQQcXC .fx1 {font-style: normal}#TmusQSQQQcXC .fx2 { text-anchor: middle; }#TmusQSQQQcXC .fx2 {text-anchor: middle}#TmusQSQQQcXC .fx3 { dominant-baseline: central; }#TmusQSQQQcXC .fx3 {dominant-baseline: central}#TmusQSQQQcXC .fx4 { stroke: none; }#TmusQSQQQcXC .fx4 {stroke: none}#TmusQSQQQcXC .fc0 { fill: var(--text-caption); }#TmusQSQQQcXC .fc0 {fill: #646a73}#TmusQSQQQcXC .fa2 { fill: var(--text-link-disabled); }#TmusQSQQQcXC .fa2 {fill: rgb(187, 191, 196)}#TmusQSQQQcXC .fa3 { fill: rgb(246, 246, 247); }#TmusQSQQQcXC .fa3 {fill: rgb(246, 246, 247)}#TmusQSQQQcXC .fx5 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#TmusQSQQQcXC .fx5 {font-style: normal}#TmusQSQQQcXC .fx6 { text-anchor: start; }#TmusQSQQQcXC .fx6 {text-anchor: start}#TmusQSQQQcXC .fx7 { dominant-baseline: alphabetic; }#TmusQSQQQcXC .fx7 {dominant-baseline: alphabetic}#TmusQSQQQcXC .fc1 { fill: rgb(103, 103, 108); }#TmusQSQQQcXC .fc1 {fill: rgb(103, 103, 108)}#TmusQSQQQcXC .fc2 { fill: rgb(60, 60, 67); }#TmusQSQQQcXC .fc2 {fill: rgb(60, 60, 67)}#TmusQSQQQcXC .fb1 { fill: var(--N900-FG, 0.15); }#TmusQSQQQcXC .fb1 {fill: rgba(31,35,41, 0.15)}#TmusQSQQQcXC .fb2 { fill: rgb(226, 226, 227); }#TmusQSQQQcXC .fb2 {fill: rgb(226, 226, 227)}#TmusQSQQQcXC .fa4 { fill: var(--bg-body); }#TmusQSQQQcXC .fa4 {fill: #fff}ABC1234方式操作适用场景智能框选 + 对话纯语言指挥粘贴参考在画布中选中想要调整的位置，描述修改，点击发送直接在对话框中描述修改需求，无需选中粘贴网页链接或上传参考图片针对局部位置精准调整全局调整或不确定位置时参考其他设计风格
示例指令：
•
「把这个按钮整体放大」
•
「首页背景改成渐变蓝色」
•
「参考这个网页链接的视觉风格进行优化」
每轮修改后，Agent 会告知本轮具体改动内容，过程可追溯。
跳转 Ardot 精细化编辑
对话生成帮你从 0 到 80 分，Ardot 编辑器帮你从 80 分到 100 分。
AI 对话擅长快速出稿和批量调整，但设计落地的"最后一公里"往往需要精确的人工把控。Ardot 编辑器正是为此而生——它不是另一个需要学习的工具，而是你在对话出稿之后，让作品真正可交付的关键一步。
为什么要跳转到 Ardot？
表格加载中...
Ardot 编辑器的核心优势：
•
所见即所得： 直接拖拽、点选修改，不需要用语言描述"往左移 3 像素"
•
像素级精确： 对齐参考线、间距标注、精确数值输入，交付级精度
•
组件化编辑： 复用组件、批量修改样式，保持设计一致性
•
专业导出： PNG/SVG/PDF 多格式导出，支持切图标注，可直接交付开发
•
实时双向同步： 在 Ardot 里的任何改动实时回流 WorkBuddy，两边始终一致
如何跳转：
点击画布 Tab 顶部的「用浏览器打开进行编辑」按钮
跳转后进入 Ardot 完整编辑器，体验专业设计工具的编辑能力
https://www.codebuddy.cn/docs/static/ardot-06.Didz9awO.png
双向实时同步：在 Ardot 浏览器端做的任何修改会实时回流 WorkBuddy 画布 Tab，无需手动刷新。回到 WorkBuddy 后 Agent 也能读取浏览器端的最新状态继续对话修改。改完回来继续对话，Agent 能接着你的最新版本往下走。
推荐工作流： 对话快速出稿（3 分钟）→ 跳转 Ardot 精修交付（5 分钟）→ 回到 WorkBuddy 生成代码（1 分钟）
这是效率最高的组合打法：用 AI 跳过从零开始的痛苦，用 Ardot 保证最终品质，用代码生成打通落地。三步走完，一个能用的产品页面就出来了。
从设计稿生成应用代码
设计稿修改满意后，可以一键生成可运行的应用代码。
两种触发方式：
•
在对话中说「将当前画布中的设计稿生成应用」
•
或点击画布 Tab 顶部的「生成应用」按钮
生成后可继续用对话调整代码细节：「用 React 重写」「加一个 dark mode」「改成 Tailwind 样式」等。
三、注意事项
•
使用设计创意模式需要先完成 Ardot 授权连接
•
设计稿存储在云端，换设备登录后可继续编辑
•
跳转 Ardot 编辑器需要浏览器环境
•
生成应用代码的功能依赖当前画布中的设计稿状态
•