Appearance
第 12 章 WorkBuddy 的代码开发与设计创意
新建任务时，输入框上方有三块：日常办公、代码开发、设计创意。前面各章走的是日常办公。这一章讲另外两块怎么开口，交回来的是什么，以及什么时候该从日常办公换过去。
1. 三块各交什么
三块都是用一句话派活。差别在交回来的东西。
| 日常办公 | 代码开发 | 设计创意 | |
|---|---|---|---|
| 交给它的事 | 写文档、做分析、整理资料、出幻灯片文稿 | 写代码、读已有项目、做能打开的网页 | 出海报、界面、品牌和演示的视觉稿 |
| 交回来的东西 | 文档、表格、研究结论、幻灯片 | 能在右侧预览的网页。这一章交一页 HTML 汇报页 | 画布上的设计稿。可以下载，也可以再生成应用 |
| 同一张销售表 | 要文字结论时留在这里，或交给第 6 章的数据分析报告师 | 要在会上投屏时，做成一页 HTML | 要先看版式、配色和海报时再用 |
日常办公下面还有「深度研究」。复杂题目先检索、再分析、再整理，交回来的是研究结果。它跟在文档、数据和幻灯片旁边，仍属于日常办公。
2. 切换以后再说话
四步。
- 点「新建任务」。
- 点「日常办公」「代码开发」或「设计创意」。
- 点下面的场景胶囊。
- 在输入框里写清要做什么、给谁看、交回什么。工作空间和权限仍在输入框下方。
代码开发下面这些胶囊，课堂只用「网站开发」。
| 胶囊 | 用来做什么 |
|---|---|
| 日常开发 | 在已经打开的项目里写代码、查问题、改错误 |
| 网站开发 | 按需求做出能打开的网页。汇报页走这里 |
| 小程序 | 生成微信小程序，并在旁边预览。生成和发布放在后面的章节 |
| Agent 应用 | 做基于 Agent 的应用 |
| Skill 开发 | 编写可复用的 Skill，文件怎么写见第 5 章 |
| CI/CD | 整理持续集成和持续交付 |
| 文档 | 写 README 和开发说明 |
设计创意第一次使用会要求确认 Ardot 授权。用手机号把 WorkBuddy 和 Ardot 连上，不用另外注册一套账号。设计稿在云端，换一台电脑还能接着改。场景胶囊、素材处理和设计风格，第 4 节按输入框上的位置说明。
3. 代码开发：把销售表做成汇报页
选「代码开发」，再选「网站开发」。
材料用第 6 章那份模拟表。下载 2026 年第三季度销售表示例。四个产品、三个渠道，工作表名是「第三季度销售」。第 6 章让数据分析报告师把它收成文字报告。这一章把同一张表做成一页 HTML，会上投屏用。
把文件放进当前工作空间，用下面这段话。
text
这是 2026 年第三季度销售表，文件名是 2026-q3-sales-demo.xlsx，只读工作表「第三季度销售」。
请做一页给部门负责人汇报用的 HTML，文件名 sales-q3-board.html。
页面只含这一屏：标题、不超过 4 个核心指标、按产品的对比、按渠道的对比、需要人工看的格子。
数字、空着的格子、对不上的金额，都只来自这张表。看不出原因的，标成待核实，不要编业务故事。
不要改原表。先在右侧预览，先不要发布到外网。看完这一屏，要能回答三件事：这一季卖了多少，哪个产品和哪个渠道占大头，哪几格空着或算不平。第 6 章已经列过合格报告里要指出的那些格子。这一页把它们摊在屏上，提示词里不把答案行再写一遍。
这种汇报页的样子是：上面几个大数字，下面是要人看的事项。下面这张是另一套经营数据的版式。你这一页上的数字，全部来自第 6 章那张销售表。
数字留在表里，页面负责排成能看的一屏。页面上的每个数字，都要能在这张表里找到对应的一格。课堂读的是那份 xlsx。
右侧预览里对过标题、四个指标和两张对比之后，再决定要不要给别人看。要发给同事，在分享里打开「发布为网站」，得到一个链接。课堂先停在预览。
要改的是已经存在的项目代码，胶囊改选「日常开发」，工作空间指到那个项目。
4. 设计创意：先选场景
选「设计创意」。输入框下面是场景胶囊。点中哪一个，这一轮就按那个场景出稿。
| 胶囊 | 交回来的东西 |
|---|---|
| 视觉海报 | 按主题出视觉方案和海报。默认走 AI 生图 |
| 运营海报 | 活动、营销、推广用的物料 |
| PPT 设计 | 把内容做成能看的演示文稿 |
| 生成图片 | 按文字描述出图片和视觉素材 |
| 生成视频 | 把创意、文字或图片转成视频 |
| 品牌设计 | 品牌视觉、Logo、品牌素材 |
| 网站设计 | 网站的页面结构、视觉和界面方案 |
| 移动端 App | 手机应用的界面和交互方案 |
| 设计系统 | 规范、组件，以及以后能复用的一套样式 |
| Web App | 网页应用的界面、交互和页面结构 |
| 图标&插画 | 用 AI 生图做图标、插画 |
三种常见开口。
| 要的东西 | 怎么开口 |
|---|---|
| 一张发布会海报 | 选「视觉海报」，素材用 AI 生图。说主题、给谁看、竖版还是横版 |
| 一组产品图标 | 选「图标&插画」，素材用 AI 生图。说数量、统一风格、要透明底还是要色块 |
| 一份能改的演示 | 选「PPT 设计」，再选这一类的风格模板。说页数和每页的标题 |
4.1 输入框下方先选两件
素材处理的按钮在输入框下方，按钮上的字就是当前选中的那一项。
| 按钮上的字 | 它会做什么 | 什么时候用 |
|---|---|---|
| 色块占位 | 先放色块，图以后再换 | 素材已经有了，这一轮只看版式 |
| AI 生图 | 按场景直接生成图 | 没有现成图，希望这一稿就能用。视觉海报、图标&插画默认走这里 |
设计风格也在输入框下方，按钮写「设计风格」。点开是一套模板。
- 还没点场景时，列表是品牌模板：TDesign、Apple、Meta、Miro、Notion、Spotify、Discord、Linear、X AI、Ferrari。选中以后按这个品牌的视觉来出。
- 先点了设计类型，例如「PPT 设计」，列表换成这一类自己的模板，例如优雅杂志、高级黑灰、创意橙黑、极简灰白。
- 一个都不选，它按你的描述自己配。对话里也可以再说「换成极简风」。
4.2 出一页，再改
课堂做一页展示稿。点「网站设计」，素材处理选「AI 生图」，再用这段话。
text
做一页主题为「AI 发展趋势 · 2025-2026」的展示页。
要有标题、三到六个趋势卡片，每张卡片有一个数字。
深色背景。没有来源的金额不要写成事实；数字只作版式示例时，标成「示例」。发出去之后，右侧画布出稿。
要改这一稿，用下面三种里的一种。每一轮它会说明改了什么。
| 方式 | 怎么做 | 用在 |
|---|---|---|
| 框选再说话 | 在画布上选中一块，写下要改的，再发送 | 只改这一处，例如把这个按钮放大 |
| 直接说 | 不选中，在输入框里说 | 整页调整，或还不确定改哪一块 |
| 贴参考 | 贴网页链接，或上传一张参考图 | 要靠近另一套视觉 |
框选时，先点画布上方的框选，圈住要改的那一块，在浮出的框里写下要求，再发送。
4.3 拿走文件
演示文稿下载 PDF 或 PPTX。PPTX 可以再用 PowerPoint 或 WPS 改。
图标、插画和海报拿走图片。要对齐到像素、导出 PNG、SVG 或 PDF，点画布上的「用浏览器打开进行编辑」，进入 Ardot。那边改过的内容会回到这边。
版式定了，而且要的是能打开的页面，再说「将当前画布中的设计稿生成应用」，或点画布上的「生成应用」。海报、图标和视频的交付物就是设计稿和下载下来的文件。生成的是代码，后面改布局、配色，可以接着在对话里说。从这里起，交付物就是代码开发那一侧的网页。
5. 做完留在哪一块
| 你要拿走的 | 留在 |
|---|---|
| 文字结论、研究、周报 | 日常办公。销售表的文字报告继续用第 6 章的专家 |
| 会上投屏的 HTML | 代码开发，选网站开发 |
| 海报、图标、插画、PPT 视觉稿 | 设计创意。下载图片或 PPTX |
| 能打开的页面 | 从画布点「生成应用」，之后留在代码开发 |