第 6 章 设计创意：对话出稿→精修→生成代码
你让 AI 帮你写文案、整理表格，它都干得不错。但一到设计这件事——做个 App 界面、出张活动海报、搭个落地页——你就会发现，普通 AI 要么只能给你一段描述性的文字，要么丢给你一张死板的图片，改不了细节，更没法直接变成可以用的代码。
设计这件事的痛点很明确：出稿慢、改起来更慢、从设计稿到代码中间还隔着一座山。
WorkBuddy 的设计创意模式就是为了打通这条路。它接入了腾讯 Ardot AI 设计平台的画布能力，让你用对话出稿、用对话精修、用专业编辑器细调，最后还能一键生成应用代码，整个过程不用切工具。
这个 Skill 能干什么
设计创意模式把设计的全流程浓缩在 WorkBuddy 里，核心能力有三个：
| 能力 | 做什么 | 适合谁 |
|---|---|---|
| 对话出稿 | 用自然语言生成 App UI、网站/落地页、品牌 Logo、海报/banner、PPT | 没设计基础、想快速出稿的人 |
| 对话精修 | 框选画布元素 + 自然语言指令修改，支持粘贴参考图 | 想微调但又不会用设计工具的人 |
| 跳转 Ardot 细编辑 | 进入 WYSIWYG 编辑器，拖拽、像素级调整、组件化编辑、专业导出 | 需要像素级精度的设计场景 |
一句话概括：你说话，它画图；画完不满意，继续说话改；改到差不多，跳进去精调；调完一键出代码。
连接 Ardot
设计创意模式底层接的是腾讯 Ardot AI 设计平台，所以第一次用需要授权连接。
操作路径：
- 打开 WorkBuddy 主页，点击新建任务；
- 在任务创建面板顶部，选择设计创意页签；
- 首次使用会弹出 Ardot 授权窗口，按提示完成授权即可。
授权过程是自动的——WorkBuddy 会通过你登录 WorkBuddy 时用的手机号，自动匹配并关联你的 Ardot 账号。如果你之前没注册过 Ardot，这一步会帮你自动创建关联，不用额外操作。
授权完成后，之后每次进入设计创意模式都不用再授权，直接开始用。
三种用法
对话出稿
最基础的用法就是用对话直接生成设计稿。你只需要描述你想要什么，WorkBuddy 就会在画布上实时生成。
支持的出稿类型包括：
- 移动端 App 界面
- 网站 / Landing Page
- 品牌 Logo
- 海报 / Banner
- PPT 演示文稿
举个例子，你可以这样描述：
帮我设计一个健身记录 App 的首页。
风格：简洁、运动感，主色调用活力的橙色。
需要包含：今日运动数据卡片、本周训练计划列表、底部导航栏。WorkBuddy 会理解你的描述，在画布上生成对应的界面。生成过程中你可以实时看到结果，不满意就继续用对话调整。
对话出稿的关键技巧是先给方向，再补细节。第一轮不需要把所有要求说完，先出一个大致框架，再一轮轮精修。
框选精修
出稿之后，你可能会觉得某个局部不对——标题太大了、按钮颜色太深、配图想换个风格。
传统做法是重新描述整个页面，让 AI 再生成一遍，结果可能别的部分又变了。设计创意模式提供了更精准的方式：框选 + 对话。
操作方式：
- 在画布上用鼠标框选你想修改的元素；
- 在对话框里输入你的修改要求；
- WorkBuddy 只针对框选区域做调整，不会动其他部分。
比如你框选了一个卡片，然后说：
把这张卡片的背景色改成渐变，从橙色到深橙，
标题字号放大，副标题去掉。除了语言指令，你还可以直接粘贴一张参考图到对话框里。比如你看到某个 App 的某个页面风格很好看，截个图粘贴进来，告诉 WorkBuddy"参考这个风格改"，它就会分析参考图的视觉特征并应用到你选中的区域。
框选精修的好处是改动范围可控——你说改哪儿就改哪儿，不会牵一发动全身。
跳转 Ardot 细编辑
对话能解决大部分问题，但有些场景需要像素级的精度：Logo 的圆角差 2px、行间距要精确到 8 的倍数、组件对齐要严格遵循设计规范。这时候对话修改的颗粒度就不够了。
设计创意模式支持一键跳转到 Ardot 的完整编辑器，做所见即所得的专业编辑。
Ardot 编辑器提供的能力：
| 能力 | 说明 |
|---|---|
| 拖拽编辑 | 所有元素可直接拖动、缩放、调整层级 |
| 像素级精度 | 数值输入精确控制位置、尺寸、间距 |
| 组件化编辑 | 元素以组件形式管理，支持复用和批量修改 |
| 专业导出 | 支持高质量图片、PDF、SVG 等专业格式导出 |
跳转过去之后，你在 Ardot 里做的修改会实时同步回 WorkBuddy 的画布。也就是说，两边是同一份设计稿，不用担心版本不一致。
一键生成代码
设计稿定稿后，最让人头疼的往往是"怎么变成能用的东西"。设计创意模式提供了直接从画布生成应用代码的能力。
两种触发方式：
- 在对话框里直接说：
将当前画布中的设计稿生成应用- 或者点击画布上的生成应用按钮。
WorkBuddy 会根据设计稿的内容，生成对应的应用代码。生成之后，你还可以继续用对话调整代码，比如：
把生成的代码中卡片列表改成支持横向滚动，
每个卡片的点击事件加上跳转到详情页的占位逻辑。这意味着从设计到代码不用跨工具、不用复制粘贴、不用对接设计师和开发——一个人在 WorkBuddy 里就能走完全流程。
推荐工作流
把三种用法串起来，最高效的工作流是这样的：
| 步骤 | 用什么 | 耗时 | 做什么 |
|---|---|---|---|
| 1. 快速出稿 | 对话出稿 | 约 3 分钟 | 描述需求，生成初稿框架 |
| 2. 精调细节 | Ardot 细编辑 | 约 5 分钟 | 跳转编辑器，做像素级调整 |
| 3. 生成代码 | 生成应用 | 约 1 分钟 | 一键将定稿设计转为应用代码 |
整个流程不到 10 分钟，从一句话需求到可运行的应用代码。
为什么不建议全程只用对话？因为对话出稿的速度优势在于"快"，但精度有限；Ardot 细编辑的优势在于"准"，但慢。把它们组合起来，快的地方用对话、准的地方用编辑器，才是效率最高的搭配。
反过来也不建议跳过对话直接用 Ardot 从零开始画——那就失去了 AI 出稿的速度优势，跟用传统设计工具没区别了。
使用建议
先框架后细节。 第一轮对话先出整体布局，确认方向对了再一轮轮加细节，避免在错误的方向上浪费精修时间。
框选精修优于重新生成。 需要改局部时，优先用框选 + 对话，不要整页重新生成。重新生成的不确定性太高，可能改好了 A 又坏了 B。
粘贴参考图是最快的风格传递方式。 与其用文字描述"我想要那种简约风格的、留白多一点的感觉"，不如直接截一张你喜欢的图粘进去，AI 理解图片比理解抽象描述准得多。
生成代码后继续用对话调。 代码生成不是终点，你可以继续提需求调整代码逻辑，不用手动改。
专业导出走 Ardot。 如果最终需要高清图片或 PDF 等专业格式，记得在 Ardot 里导出，不要直接截图画布。
云同步不用担心丢稿。 设计稿会自动云端同步，你在 WorkBuddy 和 Ardot 之间切换时，数据是一致的。