老实说，我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演示稿。