前两天做了一个小的直播分享，分享的时候就想着能不能用网页的形式做个 PPT，在之前的环境下，如果我说我想做个网页版的 PPT 肯定是有点大材小用，或者用力过猛。
但是在现在 Claude 和 DeepSeek 已经可以一键生成 HTML 页面的的现在，却把这一切变成了可能。
所以我就制作了下面这个页面：
https://jhailab.online/poju_live/
首先为什么我想用 HTML 页面来制作 PPT，好处在哪里呢？
相比传统的 PPT 工具，HTML 页面制作的演示文稿有几个明显的优势：
第一，高度定制化。你可以完全按照自己的想法来设计每一个细节，不受模板的限制。想要什么动效，什么交互方式，只要 HTML/CSS/JS 能实现，你就能加进去。
第二，跨平台兼容性强。不管是在 Windows、Mac 还是手机平台，只要有浏览器就能正常展示，不用担心字体丢失、排版错乱这些传统 PPT 经常出现的问题。
第三，易于分享。一个链接就能分享给所有人，对方不需要安装任何软件，打开链接就能查看，特别适合在直播或者远程分享场景下使用。
第四，更丰富的交互可能性。HTML 页面可以嵌入各种互动元素，比如实时投票、动态图表、甚至是小游戏，让你的演示更加生动有趣。
但以前制作一个这样的网页 PPT，要么需要找专业的前端开发，要么需要自己花大量时间学习前端技术，成本太高了。现在有了 Claude 和 DeepSeek 这样的 AI 工具，只需要使用我的提示词就可以在几分钟内就能生成一个完整的 HTML 页面，真的是太方便了。
所以，今天的主题是
一段提示词就能使用 Claude 制作网页版 PPT
本文会根据以下内容顺序进行：
需求分析 分步实现 提示词编写、测试 总结
今天的内容所有的提示词都是作为参数需要进行输入的，然后可以一键生成。之后如果大家再有什么不太满意的地方，再进行对话修改微调就好啦~
一）输入
基于提示词模板调整好的提示词
二）输出
完整的 HTML 代码 => PPT 页面
二、提示词编写、测试一）提示词
你是一个有着10年经验的前端 UI 设计师，你始终坚持着只有最原始的工具才能塑造出最完美的设计，所以你一直专注于使用 HTML,css,js 绘制出最美的页面。
- 口头语：“用什么 PowerPoint, 网页端才能做出最好的“PPT””
- PPT 中不许留下作者的痕迹，哪怕只是口头语也不行。
请你基于以下内容帮我制作一个html页面的PPT，要求有适配的特效，尽量多的使用动画效果。
1. 分析内容，分为多个页面：
- 必须包含：首页(介绍页)、目录、感谢页
- 可包含：标题页、详情页等
2. 提取精华内容作为 PPT 页面
3. 设计要求：
- 动态效果、样式、特效丰富
- 无图片展示内容，无需预留图片位置
- 空间合理安排
- 可选使用 SVG 或插件绘制图表（树状图、扇形图等），自由选择最佳方式
- 字体大小与字体适配内容
- 包含翻页按钮
- 元素不重叠，避免过于拥挤，适当留白
4. 设计关键词：
- 无限的创意自由
- 响应式设计
- 动态效果
- 更多互动效果
- 数据整合
- 网络原生体验
- 画面精美
- 注意细节
下面是我 PPT 想要制作的内容，请你根据下面内容进行设计。整体风格使用[风格]
---
[内容]
---
二）效果展示
我随便在 MQ 老师的公众号复制了一篇文章哈！内容就不给大家看了！大家感兴趣的可以自己去看看~
简约风
预览链接：https://jhailab.online/ai-education-presentation.html
手绘风
预览链接：https://jhailab.online/powerpoint/handdrawn-presentation.html
像素风
预览链接：https://jhailab.online/powerpoint/pixel-presentation.html
自然风格
预览链接：https://jhailab.online/powerpoint/natural-ai-education-presentation.html
四、总结建议使用 Claude Thinking 模型，这样可以一次生成，效果也比较好！
与之前一样~我还是做了一个总得预览页面，大家感兴趣可以去看看呀！
https://jhailab.online/powerpoint/
DeepSeek v3 应该也是可以完成的，大家可以去试试，不过估计得点击几次继续生成才行。
代码实在懒得调了嘿嘿~
好啦，写到这里我们今天的内容也结束啦，感谢大家的观看，也希望我的内容能够让大家喜欢有所收获。
