老实说，我PPT做得很难看，所以一般的做法就是网上下个模板，修修改改。

每次做技术分享，我都对着PowerPoint发愁：

• 选模板？不知道哪个好看
• 调格式？对不齐、配色混乱
• 改内容？加一页就要重新调整半天

AI出现后也有很多AIPPT相关的商业化产品，我也尝试用过一些，说实话，不太能满足我的需求。比如，我只希望生成一个单页PPT，很多商业化产品就做不到，一生成一大堆，个别支持的效果还不理想。

---

01

意外发现：AI生成了HTML演示稿

去年有一次，我需要准备一份与客户交流的技术方案。我想能不能用Claude Code生成一下，看看效果。

我打开Claude Code，输入：

diff

帮我生成一份技术方案演示稿，主题是系统架构升级。 需要讲清楚： - 当前系统的问题 - 升级后的架构 - 技术优势 - 实施计划

我没指定输出格式。

结果，AI意外地生成了一份 HTML代码。

我把代码保存为 .html 文件，在浏览器打开——

效果出乎意料的好

• 界面简洁，黑色主题专业感十足
• 键盘操作流畅，← → 切换页面
• 代码可以直接修改，不需要复杂的布局、排版、样式调整
• 可以直接部署到公司内网，同事用浏览器就能看

用这个HTML演示稿，我把技术方案给客户讲清楚了。

几个示例性样张

---

02

现在的工作流

后来，在公司内部分享、客户交流，我都用这个方式：

Step 1: 告诉Claude需求

markdown

帮我生成一份技术方案演示稿的HTML代码，样式整体使用Tailwind CSS。 主题：系统架构升级方案 受众：客户技术团队（技术负责人、架构师） 时长：15-20分钟 内容结构： 1. 标题页：系统架构升级方案 + 副标题 2. 现状问题： - 当前系统响应慢，P99延迟超过500ms - 扩展困难，新增业务需要改核心代码 - 维护成本高，3人团队全职维护 3. 升级目标： - 性能提升：P99延迟降低到100ms以内 - 可扩展：支持插件化业务扩展 - 成本降低：运维成本降低40% 4. 技术方案： - 架构：分层架构 + 领域驱动设计 - 技术栈：Go + gRPC + PostgreSQL - 关键技术：读写分离、缓存策略、消息队列 5. 实施计划： - 第一阶段：核心服务重构（2周） - 第二阶段：业务迁移（3周） - 第三阶段：灰度验证（1周） 6. 预期收益：总结页 风格要求： - 黑色主题，简洁专业 - 大标题清晰，要点简洁（每页3-5个要点） - 支持键盘左右键切换 - 代码要完整可运行，方便我后续修改

Step 2: 复制HTML代码

Claude直接输出完整的HTML代码，或者让AI直接输出到html文件。

Step 3: 保存并打开

保存为 .html 文件，双击在浏览器打开。

Step 4: 根据需要微调

直接在代码里修改文字、样式。

---

03

对比传统PPT

对比项	传统PPT	HTML演示稿
样式调整	需要布局、排版、样式、动画设计	直接改CSS
版本控制	难以diff	Git管理，清晰可见
复用性	复制粘贴容易出错	直接改代码，易于复用
分享方式	文件传输	部署到网页
扩展性	受限于软件功能	无限可能（动画、交互）

HTML演示稿的优势在于：

• 程序员熟悉的方式
• 代码可控，易于修改
• 部署方便

但如果你需要：

• 复杂的图形设计，个性化比较强
• 丰富的多媒体内容
• 与非技术人员协作编辑

传统PPT可能更合适。

---

04

适用场景

• 技术分享
• 客户方案交流
• 代码评审
• 架构设计讨论
• 团队培训

---

封装成 Skill

我把这套生成HTML演示稿的Prompt模板抽取成了一个可复用的 Skill，方便以后直接调用。

感兴趣的同学后台回复 html-slides 获取skill文件。

如果你不想配置Skill，也可以直接用这个简化版Prompt：

css

帮我生成一份技术方案演示稿，主题是[你的主题]。 需要讲清楚： - [要点1] - [要点2] - [要点3] 直接给我HTML代码，黑色主题，支持键盘←→切换。

写在最后

这不是"HTML优于PPT"的讨论，而是找到适合自己的工具。

对我来说，用HTML做演示稿：

• 更快（不需要复杂的布局、排版、样式、动画设计）
• 更好（代码直接控制）
• 更爽（程序员的方式做演示）

如果你也受困于PPT制作，不妨试试让AI帮你生成HTML演示稿。