TRAE-AI编程
WorkBuddy 设计创意（WorkBuddy × Ardot）
WorkBuddy 设计创意（WorkBuddy × Ardot）
腾讯设计 Ardot 是腾讯自研的 AI 设计智能体协作平台。WorkBuddy 在「设计创意模式」中深度集成了 Ardot 画布——支持在对话中一句话生成 UI、PPT、海报等设计稿，实时对话修改、云端同步，可随时跳转到 Ardot 进行精细化编辑，满意后一键生成应用代码，实现从创意到落地的丝滑闭环。
本篇教程将带你学习 WorkBuddy × Ardot 的基础操作。
活动说明
参与「体验设计创意模式」活动，完成任务后即可获得对应的 Credits + 能量奖励。
可通过以下方式进入任务：
- 客户端：登录 WorkBuddy，点击左侧边栏底部的头像，选择成长计划，找到「体验设计创意模式」任务。
- 官网：登录 WorkBuddy 官网，点击右上角头像进入个人中心，在左侧导航栏选择成长计划，找到「体验设计创意模式」任务。
具体活动规则及奖励内容以成长计划页面下方的活动细则为准。
开始使用设计创意
- 打开 WorkBuddy 首页，点击新建任务，选择最右侧的设计创意Tab。
- 首次使用时，需要完成 Ardot 授权连接。系统会弹出授权确认窗口，WorkBuddy 通过登录手机号自动完成与 Ardot 的身份关联，无需单独注册腾讯设计账号。
- 点击确认完成授权，即可开始使用设计创意模式。授权后，WorkBuddy 获得当前登录用户的 Ardot 画布操作权限，可以读取、编辑并同步当前 Ardot 画布中的设计内容，所有设计稿存储在云端，换设备或重新登录后仍可继续编辑。
权限详情
- 读取画布内容： 读取设计稿中的元素、样式、布局信息。
- 编辑画布： 代表您在 Ardot 画布上执行新增、修改、删除等设计操作。
- 云端同步： 与 Ardot 浏览器端保持实时双向同步。
生成与修改设计稿
选择图片素材处理方式
设计中难免遇到图片素材不足的情况，你可以指定 WorkBuddy 的处理方式。点击输入框下方的素材处理开关（按钮显示当前选择），即可随时切换：
| 方式 | 说明 | 适用场景 |
|---|---|---|
| 色块占位 | 生成色块占位，方便后续替换 | 已有图片素材稍后手动替换，或只需快速确认版式 |
| AI 生图 | 根据使用场景自动生成图片，效果更佳 | 没有现成素材，希望一次出稿即为成品 |
选择设计风格模板
设计创意模式内置多套设计风格模板，创建任务时选择模板，即可生成同款风格的画布素材，Web App、海报、PPT、移动 App 等设计类型均可使用。
- 点击输入框下方的 设计风格 选择器，展开模板列表；
- 默认展示品牌风格模板：TDesign、Apple、Meta、Miro、Notion、Spotify、Discord、Linear、X AI、Ferrari 等，选择后 AI 将按对应品牌的视觉风格生成设计稿；
- 若先选择了设计类型（如 PPT设计），列表会切换为该类型的专属风格模板（如优雅杂志、高级黑灰、创意橙黑、极简灰白等）；
- 输入设计需求并发送，AI 将按所选风格生成设计稿。
TIP
未选择模板时，AI 会根据你的描述自动匹配风格；也可以在对话中随时用自然语言指定风格，例如「换成极简风」。
对话生成设计稿
进入设计创意模式后，在对话框中用自然语言描述你想要的设计，AI 将实时在 Ardot 画布上生成。
示例指令：
- 「帮我设计一个移动端登录页」
- 「帮我设计一张产品发布会的宣传海报，主题是 XX」
- 「帮我制作一份 AI 硬件产品发布会 PPT，风格是XX」
支持的设计类型包括：移动端 App 界面、网站页面/Landing Page、品牌 Logo、海报/Banner、PPT 演示文稿等。
对话驱动修改
生成设计稿后，可以继续通过对话精准调整，三种修改方式任选：
| 方式 | 操作 | 适用场景 |
|---|---|---|
| 智能框选 + 对话 | 在画布中选中想要调整的位置，描述修改，点击发送 | 针对局部位置精准调整 |
| 纯语言指挥 | 直接在对话框中描述修改需求，无需选中 | 全局调整或不确定位置时 |
| 粘贴参考 | 粘贴网页链接或上传参考图片 | 参考其他设计风格 |
示例指令：
- 「把这个按钮整体放大」
- 「首页背景改成渐变蓝色」
- 「参考这个网页链接的视觉风格进行优化」
每轮修改后，Agent 会告知本轮具体改动内容，过程可追溯。
精修与交付设计
跳转 Ardot 精细化编辑
对话生成帮你从 0 到 80 分，Ardot 编辑器帮你从 80 分到 100 分。
AI 对话擅长快速出稿和批量调整，但设计落地的"最后一公里"往往需要精确的人工把控。Ardot 编辑器正是为此而生——它不是另一个需要学习的工具，而是你在对话出稿之后，让作品真正可交付的关键一步。
为什么要跳转到 Ardot？
| 你的身份 | 对话生成后常遇到的问题 | Ardot 编辑器帮你解决 |
|---|---|---|
| 非专业设计师（产品经理、开发、运营） | AI 出的稿大方向对了，但间距不均匀、字号层级不够清晰、颜色搭配想微调，靠对话一轮轮说不清楚 | 所见即所得的拖拽调整，不用学 Figma/PS，点选就能改颜色、拖动就能调间距，零设计基础也能出专业效果 |
| 专业设计师 | AI 生成的初稿结构不错，但细节达不到交付标准——图层命名混乱、对齐有偏差、缺少状态变体、无法导出规范切图 | 完整的专业编辑能力：精确到像素的对齐、图层管理、组件化编辑、多格式导出（PNG/SVG/PDF），满足设计交付规范 |
Ardot 编辑器的核心优势：
- 所见即所得： 直接拖拽、点选修改，不需要用语言描述"往左移 3 像素"
- 像素级精确： 对齐参考线、间距标注、精确数值输入，交付级精度
- 组件化编辑： 复用组件、批量修改样式，保持设计一致性
- 专业导出： PNG/SVG/PDF 多格式导出，支持切图标注，可直接交付开发
- 实时双向同步： 在 Ardot 里的任何改动实时回流 WorkBuddy，两边始终一致
如何跳转：
跳转 Ardot 编辑器进行精细化编辑需要使用浏览器环境。
- 点击画布 Tab 顶部的「用浏览器打开进行编辑」按钮
- 跳转后进入 Ardot 完整编辑器，体验专业设计工具的编辑能力
双向实时同步：在 Ardot 浏览器端做的任何修改会实时回流 WorkBuddy 画布 Tab，无需手动刷新。回到 WorkBuddy 后 Agent 也能读取浏览器端的最新状态继续对话修改。改完回来继续对话，Agent 能接着你的最新版本往下走。
PPT 导出下载： 对于 PPT 类设计产物，Ardot 编辑器右上角提供下载入口，可导出为 PPTX（可用 PowerPoint / WPS 继续编辑）或 PDF（适合分享与打印），打通生成 → 精修 → 交付的完整链路。
推荐工作流： 对话快速出稿（3 分钟）→ 跳转 Ardot 精修交付（5 分钟）→ 回到 WorkBuddy 生成代码（1 分钟）
这是效率最高的组合打法：用 AI 跳过从零开始的痛苦，用 Ardot 保证最终品质，用代码生成打通落地。三步走完，一个能用的产品页面就出来了。
从设计稿生成应用代码
生成应用代码的功能依赖当前画布中的设计稿状态,设计稿修改满意后，可以一键生成可运行的应用代码。
两种触发方式：
- 在对话中说「将当前画布中的设计稿生成应用」
- 或点击画布 Tab 顶部的「生成应用」按钮
生成后可继续用对话调整代码细节：「用 React 重写」「加一个 dark mode」「改成 Tailwind 样式」等。
成长计划与积分奖励
完成成长中心中的体验设计创意模式任务，即可获得对应的 Credits + 能量奖励。
任务规则如下：
- 根据成长中心的任务要求，在设计创意模式下完成对应操作，即可完成任务，例如成功创建 1 个画布、成功生成图片或视频等。
- 取消或生成失败的任务不计入任务进度，也不会发放奖励。
- 同一用户同一任务仅可获得一次奖励，重复完成不会重复发放。
- 任务完成后，奖励将自动结算，参与范围、开放时间、奖励内容及数值等规则如有调整，以成长中心实际显示为准。
TIP
快捷入口：点击左侧边栏底部的头像，弹出用户菜单，点击成长中心，即可找到「体验设计创意模式」任务。
更多建议：