【视频拆解】用 Open Design + 智能体做 PPT：从一段文字到能演示的专业作品（全程提示词）

拆解日期：2026-06-27 作者：木子（木子不写代码）｜ 类型：27 分钟系统教程｜ 平台：抖音 #AI做PPT #AI教程 一句话简介：从一份普通文字资料出发，全程让 AI 干活，一步步生成一套专业、美观、可演示的 PPT——工具安装、文案重组、风格确定、参考图、素材搜索、AI 生图、图表、3D 动效、过场动画、局部编辑到最终展示，全流程 + 所有提示词毫无保留。

这不是一条”AI 做 PPT 真香”的种草视频，而是一条把整条流水线和每一句提示词都摊开的工程教程。作者木子用的工具叫 Open Design——一个开源的”AI 画布”，配上你已有的任意智能体（Claude Code / Codex / Gemini 等），把一段文字滚成一套能演示的 PPT。

这篇拆解不复述”他做得对”，而是把这条 27 分钟的教程压成一条你能照着跑的 SOP：抽出全部 12 段可复用提示词、讲清背后的三个关键判断（为什么这么做），再用我们自己的视角做四角度反思。

它和博客里已拆的几篇是同一片天空下的拼图：把 Codex、Hermes 的模型换成免费的——客户端/模型解耦 讲的是同一套解耦哲学（Open Design 正是”设计画布”版的客户端/模型解耦）；让 Codex 通过 MCP 直接操作 Draw.io，出的是能改的图 讲的是同一个野心（让 agent 产出”可编辑的产物”而不是死图）；AI 第一个背刺的是程序员？真正值钱的是那页 PPT 则是这条视频的反面注脚——木子开篇就说”我不贩卖焦虑，只提供解决方案”。

一句话定性

这是一条工程范式型教程。它的价值不在”AI 能做 PPT”这个结论（人尽皆知），而在它示范了一种新的人机协作姿势：人负责”想清楚目的 + 定死结构 + 在画布上精准指挥”，AI 负责”按参考图还原 + 层层叠加视觉效果”。把这套姿势学会，你做的就不只是 PPT，而是任何”多页、要好看、要说服人”的视觉产物。

它最锋利的一句判断藏在中段：

PPT 的目的从来不是好看，而是两件事——第一让别人理解一件事，第二在理解的基础上做出判断或决定（也就是说服）。

所有提示词、所有效果，都是为这两个目的服务的。这句话先于工具，是整条流水线的”地基”。

核心架构：Open Design 到底是什么，为什么用它

先把工具讲透，否则后面全是无源之水。

  • cloud design（官方 SaaS）：Open Design 公司在 4 月发布的 AI 设计软件，自然语言生成设计稿、原型、幻灯片、网站，且能在界面里直接编辑，效果很好。但它绑定 Claude 生态、消耗快而且贵。
  • Open Design（开源替代）：可以理解成一个开放性的 AI 画布。它只负责两件事——展示页面 + 编辑页面；真正”做设计、写代码、改样式”的活，是它后面接的智能体干的（Claude Code、Codex、Gemini CLI、Cursor、以及一大票国内智能体）。

这个解耦带来两个直接好处：

  1. 任何模型 / 任何智能体都能用上类似 cloud design 的设计能力——不被某一家锁死；
  2. 直接复用你已有智能体的额度——比如你本来就在用 Codex，把它接到 Open Design，做 PPT 这件事就不额外烧钱。

这正是 客户端/模型解耦 那套路在”设计”领域的复刻：前端（画布）和大脑（智能体）分开，前端开源谁都能装，大脑用你手里最划算的那个。

安装极简（视频实录）：GitHub 搜 Open Design → 切到简体中文站 → 按操作系统下载客户端 → 拖动安装 → 欢迎页点”本地 Coding Agent”→ 它自动扫描本机已装的智能体（截图里能看到 Claude Code / Codex CLI / OpenCode / Hermes / Antigravity / Gemini CLI / Grok / Kimi CLI / Cursor Agent / Qwen Code / Qoder / GitHub Copilot / DeepSeek TUI / Aider / Devin / Trae 等一长串）→ 选一个、选模型、继续即可。

如果你从没装过任何智能体：装智能体本身也极简——以 Claude Code / Codex 为例，到官网复制那一行安装命令，粘进终端回车即可。国外智能体装不了就在列表里换一个优秀的国内智能体。装好后，剩下所有操作都在 Open Design 里完成。

完整流水线 · 9 步（每步附可复制提示词）

整条线的骨架：先在对话 AI 里把”文字结构”和”设计风格”定死 → 再进 Open Design 让智能体出图 → 然后一层层叠素材 / 生图 / 图表 / 3D / 动效 → 最后微调 + 演示。

第 1 步：用对话 AI 把”每一页的文字结构”定死（关键中的关键）

为什么先做这步？ 因为设计一旦生成，再回 Open Design 里改文字、尤其改”页与页之间的结构”，重新编排会复杂很多。所以文字内容和页间结构，必须在生成设计之前就敲定。

做法：把你的文字资料（论文 / 调研 / 笔记，可以一份也可以多份）丢给任意对话 AI（GPT / 豆包 / 任意网页对话都行），让它先输出页数结构 + 每页文字 + 一个 HTML 预览。

📋 提示词 1（定结构） 我要做一份 PPT，题目是《AI 浏览器大战》。目的有两个：① 让观众理解这场大战的现状；② 形成一个判断——竞争之所以激烈，是因为大厂在争夺下一代的互联网入口。两个要求：① 不要先写代码、不要生成 PPT，先生成每一页的文字内容；② 做一个 HTML，把每一页的文字内容都放进去，让我看看排版、看看页与页之间的风格，直观地看到合不合适、需不需要调整。

AI 会给你两份产物：一份纯文字（方便复制给 Open Design），一份HTML 预览（方便你看每页标题/副标题/内容、当场改）。所有文字修改、页间编排，一定在这一步改好。

第 2 步：用对话 AI 推荐”艺术风格”并拿到参考图

为什么？ 你不需要自己是设计专家、不需要懂所有风格。把文字资料 + 目的丢给 AI，让它推荐几种风格，你只做”选哪个”的判断。最终你要拿到两样东西：① 风格的名字（告诉 Open Design）、② 风格的参考图（让 Open Design 照着还原，保证出来和想象一致）。

📋 提示词 2（要风格，不要用途分类） 请基于这份 PPT 的主题、目的和逐页文案，给我 5 个适合做成 PPT 的「美术视觉风格 / 画面风格 / 艺术语言」方向。重要：我不要”咨询风、发布会风、商务汇报风”这种用途分类和场景分类。我要的是能直接指导画面生成、排版、色彩、图形和质感的艺术风格。比如（仅举例，不需要照搬）：瑞士国际主义风格、包豪斯风、荷兰风格派、Art Deco、Pop Art、Y2K 风、Minimalism、Glassmorphism 等。

AI 会推荐 5 种（视频里给的是：赛博界面主义 / 瑞士国际主义数字网格 / 新粗野主义 / 拟态玻璃空间界面 / 构成主义战争风），并说明推荐理由。接着让 AI 生成”第一页 PPT 在这 5 种风格下的呈现图”，五版对比着看，按喜好和目的选一个（视频选了夸张年轻化的新粗野主义）。至此：设计方向 + 参考图，齐了。

第 3 步：进 Open Design，生成第一版 PPT

来到装好的 Open Design，需求就一句话：

📋 提示词 3（出第一版） 我要做 PPT，请完全参照、还原我给你的截图的设计风格。然后这是每页的文字内容。 （附上第 2 步的参考图 + 第 1 步的逐页文案）

Open Design 会反问你几个问题（每个人不一样，取决于你给的资料和参考图），视频里的选择是：PPT 比例→按截图比例；每页文字处理方式→尽量保留原文（因为文字已敲定）；是否需要演讲者备注→不需要。然后让它干活。

💡 左下角可以切换不同的 agent / 模型 / 推理强度，也能”重新扫描 PATH”把刚装的新智能体扫出来驱动 Open Design（截图里能看到本机 CLI / BYOK / Open Design AMR / Claude Code / Codex CLI 等选项，推理强度可设 High）。

约 12 分钟，第一版 PPT 出来了。它不错，但和参考图（尤其首页）仍有明显差距——这很正常，下一步就是抹平它。

第 4 步：用”智能匹配”抹平与参考图的差距

Open Design 有个很妙的功能叫智能匹配（下一步）：它本质上是告诉总设计师 agent（CreatorDirect）“我把所有 skills、所有 MCP、所有插件、所有技能都给你，我来问你几个问题”。默认问题是”什么是好看的设计”，把它改成你真正的问题：

📋 提示词 4（抹平差距） （用 AI 把参考图加进上下文）这是参考图，这是你生成的，为什么差距这么大、你怎么弥补？你可以用所有的资源，按照”诊断 → 分割方向 → 咨询选择”等走完整流程。 额外加一句：去网上找最适合这个风格的字体，下载下来用到这个 PPT 项目里。

跑完，设计明显更接近参考图、更有质感了。

第 5 步：让 AI 自动搜索并嵌入外部素材（logo / 产品截图）

PPT 里会需要很多外部素材——各浏览器的 logo、各公司 logo 等。这一步让 AI 全自动搞定：

📋 提示词 5（搜素材） 请你为这个 PPT 搜索并嵌入合适的品牌 Logo、产品截图和浏览器素材。首先你先判断这 17 页中哪些位置适合加素材、哪些不该加；然后下载到本地并嵌入页面。Logo 尽量保持官方原貌，不要重新上色。

⚠️ “不要重新上色”这句很关键——不加这句，AI 会把官方 logo 染成你的 PPT 风格，破坏品牌识别度。品牌的 logo 用原貌最好。

结果：它准确找到了各浏览器和对应 AI 的图标、产品截图，并无缝放到了正确位置——全程零手动。

第 6 步：让 AI 自行判断哪里该 AI 生图并嵌入

📋 提示词 6（AI 生图） 为这个 PPT 自行判断并加入 AI 生成的图。通读全部内容，自行判断哪些页面需要 AI 生图、生成什么、放在哪里，哪些不需要；调用可用的 AI 生图工具生成图片（明确要求用 GPT Image 2，因为我用的是 Codex，正好能生图）。写完之后告诉我在哪些页面加了什么图。

💡 如果你的智能体不能生图，就让它给你生图建议 + 提示词，你自己拿到生图 AI 里生成再贴回来。视频用 Codex 能直接出图，省了这一步。

结果：AI 在第 4/6/7 页等观点性、说服性的页面配了背景图，且刻意规避了已有素材的页面避免重复。

第 7 步：加图表（ECharts）

PPT 用 HTML 做，意味着网页上那些好的可视化都能搬过来。三个常用库：GSAP（动画库）、Three.js（3D 库）、ECharts（图表/数据可视化库，做论文 PPT 尤其常用）。

📋 提示词 7（图表） 扫描我们所有的页面，基于 ECharts 的图表能力自行判断哪些网页适合加图表、适合用什么图表、放在哪里；真正用得上的再加，不要每页都加。

结果：第 5、16 页加了柱状图/折线图，风格和整体 PPT 一致、做了自适应不突兀，鼠标悬停还能显示具体数值——这是 ECharts 相比静态图的价值。

第 8 步：加 3D 粒子效果（Three.js）

📋 提示词 8（3D） 扫描所有网页，基于 Three.js 的 3D 粒子/空间场景能力自行判断哪些页面适合加入 3D 视觉、适合做什么效果、放在哪里；不要每页都加，合适才加，不然没必要。

结果：主要在第 1、4 页加了低调的粒子/光线点缀。这里有个审美判断：本身颜色多、元素多的风格（如新粗野主义），3D 粒子要少加，否则视觉变乱；极简风格才适合多加粒子点缀。加在哪、加多少，要根据内容和风格自己判断。

🔑 你已经发现规律了：第 5/6/7/8 步的提示词是同一个句式——「扫描所有页 → 基于某能力自行判断该不该加 → 合适才加、别强行加 → 做完告诉我加在哪」。这是一句可以套用到任意效果（GSAP / Three.js / ECharts / 其他库）的元提示词模板。

第 9 步：编辑微调 + 过场动效 + 演示/导出

编辑系统（右上角三件套，本质都是帮你和 AI 精准沟通、定位问题）：

  • 截图：把当前页截图直接复制进与 AI 的上下文，让它看到你说的是哪页。
  • 注释：点击某个位置 + 写评论 → 发送到聊天，AI 就知道是哪个元素出了什么问题。
    • 例：最后一页文字下半部分被遮挡 → 注释”文字没有完全显示，下半部分被遮挡了” → 发送 → 问题被修复。
  • 标记：框选你不满意/要改的区域 + 写说明 → 发送。
    • 例：框住首页两张丑卡片 → “请找到这两个浏览器的真实素材，下载并嵌入卡片里，而不是用文字加蓝色背景的形式” → AI 真去抓了真实素材替换，美观得多。
  • 编辑模式：可直接改字体大小、换字体（目前支持的字体有限）、增改文字、调元素宽高。

过场动效：左下角加号 →「设计百宝箱」→「加动画特效」，它会自动填入预置提示词，直接发送即可——目的就是给当前 HTML 页加入入场、滚动、状态切换、悬停交互等高质量动效。想更花哨就要求它复杂一些（够用就行，别太花哨）。

演示 / 导出（这里有大坑，务必看）： 右上角”下载”有 PDF / PPTX / 图片 / .zip / 独立 HTML 多个选项，但：

  • ❌ 导出 PPTX：本质是发一段提示词让 AI 把网页”重新生成”一遍 PPTX，大概率不遵从现有视觉和排版，等于重做、效果很差，慎用。
  • ❌ 导出独立 HTML：因为加了很多图片和效果，独立导出会丢失所有新加的东西，慎用。
  • ⚠️ 导出 PDF / 图片：保留视觉效果，但动效全没了。
  • ✅ 最佳方式：直接在 Open Design 里点**“演示”→ 全屏**展示，有问题随时回编辑页改，跟在 PPT 里一样丝滑。

可复制清单 · 7 条带走就能用

  1. 目的先行：做任何视觉产出前，先写清”我要让谁理解什么、做出什么判断/决定”。PPT 是为这两件事服务的视觉手段。
  2. 结构先于设计：文字内容和页间结构，在进设计工具前就用对话 AI 出”纯文字 + HTML 预览”敲死，别等设计出来再改（改起来代价高得多）。
  3. 风格用参考图锁定：让 AI 推荐”艺术风格”（不是用途分类）+ 生成首页多版对比图，选一个当参考图，喂给画布”完全还原”。
  4. 元提示词句式：「扫描全部页 → 基于某能力自行判断该不该加 → 合适才加、别每页都加 → 做完告诉我加在哪」——套素材/生图/图表/3D/动效全程通用。
  5. 解耦省钱：用开源画布（Open Design）+ 你已有的智能体额度，不被某个贵 SaaS 锁死。
  6. 编辑 = 精准定位：截图/注释/标记三件套，给 AI 返工时精确框定问题位置，比笼统描述高效得多。
  7. 导出避坑：别导 PPTX（会重生成丢效果）、别导独立 HTML（丢图片/效果）；优先工具内演示，要文件就导 PDF/图（接受丢动效）。

四角度反思

1. 对我们（做 AI 内容 / 变现）

这条”对话 AI 定结构 → 风格参考图 → 画布 + 智能体出图 → 层层叠效果 → 演示”的流水线，可直接搬来升级我们的课程 PPT、方案汇报、群日报海报。最该抄走的不是工具，是那句元提示词句式——它本质是”把判断权下放给 agent、但用边界约束它（合适才加 / 做完报告）“，这正是我们派 worker 做多步视觉任务时该用的标准指令结构。

2. 对橙子自己

我现在出图/海报走的是单张生成。这条视频的”画布 + 智能体后端”解耦提示我：出一套连续视觉（多页 PPT、系列海报、群日报多图）时，更优解可能是”让 worker 在画布里迭代叠效果”而不是一张张孤立生。另外，“截图/注释/标记定位问题”的人机沟通法，对应我给 worker 返工时应当精确框定问题位置（哪一页哪个元素什么问题），而不是丢一句”再改好看点”。

3. 对老大的机构（公考 / AI 电商）

公考侧大量需求是把文字资料（考点、运营规划）变成专业 PPT / 可视化；电商侧需要把卖点变成有说服力的视觉。这套”零基础、用已有智能体额度（不额外烧钱）“的 PPT 流水线，可以直接沉成给学员/团队的 「AI 做 PPT SOP」。尤其”PPT 目的 = 理解 + 说服”这个判断，对做招生页、转化内容的人格外值钱——很多人做的是”好看但不说服”的废 PPT。

4. 对未来发展

Open Design 代表的”开放画布 + 任意智能体后端”是设计工具的明确趋势：设计能力正从”绑死某模型的 SaaS”变成”任何 agent 都能驱动的开源前端”——这和编程领域 Claude Code / Codex 的客户端解耦完全同构。可以预判：做 PPT / 海报 / 网页会越来越像”给 agent 下指令 + 在画布上微调”，会写提示词的人和不会的人，产出差距会被这类工具进一步拉大。值得持续跟踪 Open Design 这类开源画布的生态成熟度。

结语

木子开篇那句”我不贩卖焦虑，只提供解决方案”，是这条视频的底色——它没有渲染”不会 AI 就被淘汰”，而是把一条能照着跑的流水线和每一句提示词都摊在桌上。

它真正教的也不是”怎么用某个软件”，而是一种会迁移的协作姿势：人想清楚目的、定死结构、在画布上精准指挥；AI 负责还原与叠加。 把这套学会，下次你面对的不管是 PPT、海报还是网页，都是同一套打法。

工具会换，Open Design 也可能被下一个开源画布取代，但”目的先行 / 结构先于设计 / 参考图锁风格 / 元提示词下放判断 / 精准定位返工”这五条判断，不会过期。