AI agent 做ppt最好的工作流是什么？

还做啥ppt啊，让ai用html模拟ppt，又快又好看，还不用装office，你舒服，ai也舒服

直接出图的话，能一次性出多少页ppt的图呢

出图的速度很慢 除非优化下并行 不然1分钟1张1K

office 自带AI做的感觉还行

这个是不是得要365订阅才能用呀

是的，之前有一个活动，领了五年的个人订阅。

还做啥ppt啊，让ai用html模拟ppt

主要是国企央企党政机关 PPT 这方面才是核心需求，

还是很有需求和市场的，目前看几个 AI 都做的不咋样，搞不出那种 性冷淡商务风 ^-^。

私下用用得了，现在很多正经场景比如工作，学术环境，都要求ppt。

我觉得PPT就是个形式，关键还是内容本身。用HTML做演示主要就是方便，不用装Office，浏览器打开就能放，不用担心兼容问题，html+js+css是一套完备的编程语言了，扩展性比ppt好太多，而且我可以很快做一套好看的html页面。ai时代，人人都是前端程序员，ai不友好的工具很大概率被替代的。

佬可以尝试下我的提示词。让ai参考claude官网生成的。模型最好用glm-5.2，它的效果是最好的，fable反而没那么好看。agent用claude code

# PPT 样式 HTML 生成提示词



> 用这份提示词，配合你的 Markdown 逐字稿/大纲，即可生成同样风格和功能的全屏交互式 HTML 演示文稿。



---



## 提示词



请根据我提供的文档内容，生成一份**单文件、无外部依赖、可直接用浏览器打开**的 PPT 样式 HTML 演示文稿。要求如下：



### 一、整体风格：Claude 官网风格



- **背景**：暖米色 `#F5F4EE`，卡片背景 `#FAF9F5`，次级背景 `#EDEAE0`

- **主色**：Claude 橙 `#D97757`（强调）、深橙 `#C15F3D`、浅橙 `#E8A88E`、橙背景 `#F9E8DE`

- **辅色**：雾蓝 `#5B7B9A`、苔绿 `#6B8E6B`、砖红 `#C75B5B`

- **文字**：主文 `#1F1E1D`、次文 `#6B6963`、浅文 `#9B9890`

- **边框** `#D9D6CC`；**阴影**：柔和低透明度 `0 2px 20px rgba(31,30,29,0.06)`，大阴影 `0 8px 40px rgba(31,30,29,0.10)`

- **字体**：衬线标题 `Noto Serif SC`（900/700/600）、无衬线正文 `Noto Sans SC`（300-700）、数字/标签 `Inter`。通过 Google Fonts 引入。

- **装饰**：全屏低透明度（0.03）SVG 噪点纹理叠加层，增加质感

- **圆角**：卡片 14-16px，徽章 100px；**不要**用高饱和、纯白、扁平化 Material 风格



### 二、交互功能（必须全部实现）



1. **全屏**：按 `F` 键或点右上角按钮进入/退出全屏；兼容浏览器 `requestFullscreen` API

2. **点击翻页**：点击屏幕左侧 30% 区域后退，右侧前进

3. **键盘**：`← →` / `空格` / `PageUp PageDown` 翻页，`Home/End` 跳首尾，`F` 全屏

4. **触摸滑动**：左右滑动翻页，阈值 50px

5. **导航箭头**：左右两侧悬浮圆形按钮，首尾页自动隐藏

6. **进度条**：底部 3px 橙色填充进度条

7. **页码计数**：右上角 `01 / 24` 格式

8. **操作提示**：底部居中脉冲提示文字，首次翻页后消失



### 三、幻灯片系统



- 每页 `<section class="slide">` 绝对定位全屏覆盖，通过 `.active` 类切换显示

- 切换时 `opacity + visibility` 过渡，0.5s 缓动

- **进入动画系统**（关键）：元素加 `.anim` 类，默认 `opacity:0; translateY(24px)`，当父 `.slide.active` 时复位；用 `transition-delay` 实现错峰入场。提供四种变体：

  - `.anim`：上浮淡入

  - `.anim-scale`：缩放淡入

  - `.anim-left`：从左滑入

  - `.anim-right`：从右滑入

- 所有动画用 `cubic-bezier(.2,.8,.2,1)` 缓动，时长 0.7s



### 四、图表与可视化（纯 SVG/CSS，不用图表库）



根据内容选用，全部用内联 SVG 实现，并带入场动画：



- **环形图（donut）**：用 `stroke-dasharray` 描边动画呈现占比（如 30/70 配比）

- **柱状图/区间条**：用 CSS 渐变色块拼接（如 25-45μm 安全窗口的红/绿/橙三段）

- **折线图**：用 SVG `<path>` + `stroke-dashoffset` 描线动画；多条曲线可叠加并标注交叉点（如凝胶退场 vs 胶原进场）

- **时间线**：横向轴 + 圆点节点 + 年份/标签，节点用 `pop-circle` 弹出动画

- **流程图**：方框/圆 + 箭头 + 文字标注（如珊瑚→羟基磷灰石→骨支架）

- **统计卡**：大数字 + 标签，数字用衬线 900 字重 + 橙色

- **色卡/图示**：圆形色块 + 名称（如矿物伪装色卡）

- **SVG 动画类**：`.bar-rect`（柱条纵向生长）、`.draw-line`（路径描线）、`.donut-arc`（环形描边）、`.pop-circle`（圆点弹出），均依赖 `.slide.active` 触发



### 五、排版组件



- **eyebrow**：小写大写字母 + 字间距，橙色，段标签

- **title-xl/lg/md**：衬线、900/700/600 字重，`clamp()` 响应式字号，负字间距

- **body-lg/md/sm**：无衬线，1.7 行高，次文色

- **card / card-accent**：白底/橙底圆角卡 + 细边框 + 阴影

- **stat-card / stat-num**：统计数字卡

- **timeline / tl-item**：时间线节点

- **pillar-grid**：2×2 支柱网格（安全性论证）

- **acts**：三栏卡片（三幕剧）

- **faq-item**：编号问答卡

- **takeaway-list**：要点编号列表

- **redline-box**：橙边框警示框

- **big-year**：超大半透明年份水印（绝对定位角落）



### 六、内容映射规则



- 把文档的每个"段/章"拆成 1-3 页幻灯片，总页数 20-26 页

- **封面页**：大标题（渐变文字）+ 副标题 + 元信息徽章

- **数据页**：凡出现百分比、数字、范围，优先用统计卡或图表呈现，不堆文字

- **流程页**：凡出现"先…后…""从…到…"，用时间线或流程图

- **对比页**：凡出现两个对立概念，用双栏/双曲线

- **结尾页**：引语 + CTA 按钮 + 免责声明

- 每页文字精炼到 2-4 句，细节留给图表；保留原文金句作为衬线引语



### 七、技术约束



- 单个 `.html` 文件，所有 CSS 内联在 `<style>`，所有 JS 内联在 `<script>`

- 仅可引用 Google Fonts CDN，不引用任何 JS/CSS 库

- 所有图表用内联 SVG，不依赖外部图片

- 中文 `lang="zh-CN"`，`<meta charset="UTF-8">` + viewport

- 兼容 Chrome/Firefox/Safari，支持触屏



---

佬可能误会我的意思了，不是html不行，是目前的环境对ppt的需求还是很大。

比如我在国外上大学那会，很多assignment都是要求ppt的格式的。

再比如，工作环境，很多时候人家就只认ppt，没办法。

ai不友好的工具很大概率被替代的。

这点很认同的，但是还有好久呢。

有好多杂志skill,生成html网页的,动销风格都可以自定义,佬可以搜一下