前两天做了一个小的直播分享，分享的时候就想着能不能用网页的形式做个 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 应该也是可以完成的，大家可以去试试，不过估计得点击几次继续生成才行。
代码实在懒得调了嘿嘿~
好啦，写到这里我们今天的内容也结束啦，感谢大家的观看，也希望我的内容能够让大家喜欢有所收获。
