夜雨聆风最近看了一篇文章，Claude code的员工Thariq讲自己现在越来越少让 Claude Code输出Markdown，而是直接让它做HTML。
他的这篇推文在各大论坛引起来很大的反响。
这个观点我看完以后，第一反应是：Html代替Markdown可能尚需验证，但是代替PPT岂不是更合理一点？
首先，AI工具做PPT一直都很尴尬。
无论号称做PPT多牛逼的AI工具我都去试了，也不过如此而已，关键最后还收费了。
你让它生成PPT，它确实能生成。标题有了，页面也有了，甚至还有一点设计感。但生成过程中经常会遇到几个问题：
版式不稳定，一页好看，一页突然跑偏 图片和文字容易挤在一起 图表做得很生硬，看起来像模板拼出来的 想优化细节，只会越改越糟
既然AI各类工具做HTML那么牛逼，为啥不直接做个HTML页面，何必执着于直接做PPT。
为什么HTML反而更适合AI
PPT对AI来说，其实是一个很别扭的格式。
它既要处理内容，又要处理排版，还要控制每一页的位置、字体、图片、间距。只要其中一个元素没控制好，整页看起来就很奇怪。
HTML不一样。
HTML本来就是给浏览器看的。它可以天然处理布局、颜色、图片、表格、图表和响应式，还可以用CSS控制整体风格。AI天生就是写代码的，比写 PPT 路径更加直接。
更重要的是，HTML不一定非要定义成是一个前端网页。
它可以是一个演示页。
可以是一份汇报材料。
可以是一页一页往下讲的方案稿。
也可以是一个现场演示用的辅助页面。
总之。
你要讲方案，就把它做成一个长页面。
你要讲产品，就把关键界面和流程排出来。
你要讲数据，就把图表做清楚。
你要讲流程，就做成流程图、卡片、时间线。
这和 PPT 的目的其实是一样的：用最少的文字和图把一个东西讲清楚。
HTML比PPT多出来的价值
PPT 的使用场景是演示和汇报。
所以 HTML要解决的重点很明确：让你在现场讲的时候更通顺。
比如你做一个产品方案，PPT 里通常是几张截图加几段说明。HTML里可以把截图、流程、模块解释放在同一个页面里，讲到哪里就点到哪里，整体更连贯。
这对汇报太有用了。
而且做的页面要服务于你的讲述节奏。
第一屏讲结论，中间讲方案，后面讲实施步骤和风险。每一屏还可以层层下钻，由浅到深。
这才是HTML替代PPT的重点。
适合做成 HTML 的场景
我觉得这几类场景，都可以优先考虑 HTML，而不是PPT。
第一种：产品原型演示。
客户想知道产品大概怎么用，不想听你讲20页功能清单。HTML可以把关键页面按业务流程排出来，你一边讲，一边展示。
第二种：解决方案汇报。
传统PPT是背景、痛点、方案、架构、排期。HTML也能做，而且可以把架构图、流程图、模块说明放在一个页面里。你投屏讲的时候，点击比翻页更连贯。
第三种：数据报告。
只要涉及表格、图表、趋势、对比，HTML会更舒服。重点放在投屏效果上：图表要清楚，解释文字和结论也要贴在旁边。
第四种：培训材料。
HTML可以把教程、截图、操作步骤、视频、代码片段放在一起。你讲课时还可以输入和点击，比在 PPT 里塞一堆截图更自然。
第五种：项目进展展示。
周报、月报、阶段成果，都可以做成HTML。左边是时间线，右边是成果截图和风险说明。拿来开会汇报，比临时拼PPT更快。
具体怎么做
操作也不复杂。
你可以直接跟AI说：
请把下面这份方案做成一个可演示的HTML页面。要求：1. 面向客户汇报，不要做成营销官网。2. 第一屏讲清楚项目目标和核心价值。3. 中间用模块卡片、流程图、时间线展示方案。4. 需要有一个产品流程演示区域，模拟核心使用流程。5. 最后给出实施步骤、交付物和下一步建议。6. 页面要适合投屏演示，重点服务现场讲解。如果你已经有文字稿，就把文字稿贴进去。
如果你有项目资料，就让AI先读资料，再生成HTML。
如果你有竞品网站，也可以让它先用Browser Use打开几个网站看看，再总结风格和结构。
整个流程可以这样走：
第一步：先让 AI 整理内容
不要一上来就让它写 HTML。
先让它把内容整理成演示结构。
你可以这样说：
请先把这些资料整理成一个客户演示结构。不要写 HTML。只输出页面大纲：- 每一屏讲什么- 这一屏的目的是什么- 需要放哪些文字、图表或原型- 客户看完应该理解什么这一步很重要。
因为HTML做得好不好，关键在于逻辑顺不顺，页面炫不炫反倒没那么重要。
客户从第一屏看到最后一屏，要能自然理解：你为什么做这个、怎么做、做完有什么价值、下一步怎么推进。
第二步：让 AI 生成第一版 HTML
大纲确认后，再让 AI 开始做页面。
根据上面的演示大纲，生成一个完整的 HTML 文件。要求：- 单文件 HTML，CSS 和 JS 都写在里面- 适合 16:9 投屏演示- 页面可以滚动，也可以用顶部导航辅助演示- 风格专业、克制，适合 B 端客户汇报- 不要使用花哨渐变和夸张动效- 图表和流程图优先用 HTML/CSS/SVG 实现- 所有模块都要有清楚的小标题和一句解释个人提示：
别让 AI 做得太像公司官网，很多 AI 一写 HTML，就喜欢大标题、大渐变、大卡片，看起来很热闹，但不像汇报材料。客户汇报要正式一点，信息密度要高一点。
建议用Frontend Design这个skill，出的页面老厉害了，很有设计感，用了的都说好。
第三步：用浏览器验证
HTML 的好处是有浏览器的地方就可以直接打开看。但是如果不是你的电脑演示，那就要做好适配，否则容易变形。
所以生成以后，我们要打开验证，而且要在多个浏览器验证，检查几个点：
有没有白屏 字有没有重叠 图表有没有跑版 会议室投屏尺寸下能不能正常看 投屏比例下第一屏是否完整 导航、图表、流程区域是否正常显示
这一步不要省。
这一步也是HTML无法短时间代替PPT的原因，因为受限于演示环境。PPT没有那么多浏览器要适配，而Html则需要。
第四步：按你的要求修改
第一版出来以后，不要只说“美化一下”。
这种指令太空了，AI 会开始乱加装饰。
你要给出明确的修改意见。
现在用Codex或Cursor都可以直接在浏览器里面打开进行标注，圈出你要改的地方然后输入修改意见，这个非常方便。
Claude code目前没有，只能Alt+V贴图进去加上描述修改。
按照你的想法，这样改出来的东西会更接近真实汇报。
第五步：演示方式
HTML 做好以后，不要把它想成网页链接。
它首先是你的演示材料。
最简单的方式，就是本地打开 HTML，投屏讲。
正式一点，可以放到本地演示目录或内网地址，方便你自己在会议现场打开。
如果客户一定要 PPT，也可以把 HTML 页面截图，再放回 PPT 里。
所以这里的思路要换一下：用 HTML 生成更好看的演示稿，再按需要导出或截图。
一个完整提示词
如果你懒得拆这么细，也可以直接用这一版：
目标：用一个适合投屏讲解的 HTML 页面讲清楚方案。要求：1. 先整理成演示结构，再生成 HTML。2. 页面面向客户汇报，风格专业、克制、信息密度适中。3. 第一屏讲清楚项目目标、客户痛点和方案价值。4. 中间用模块卡片、流程图、时间线、对比表讲清楚方案。5. 如果涉及产品功能，请按演示顺序排出关键界面和业务流程。6. 如果涉及数据，请做成适合投屏讲解的清晰图表，不要只堆文字。7. 最后一屏给出实施步骤、交付物和下一步建议。8. 生成单文件 HTML，CSS 和 JS 都写在文件里，方便本地打开演示。9. 完成后用浏览器打开检查，修复白屏、错位、文字重叠和投屏比例问题。
后面在对话框把你的参考资料包@上去就行。
最后
AI做PPT不行，不代表AI做不了演示。
只是PPT这个格式本身，对AI来说有点别扭。
以前我们默认“汇报就是要用PPT”，是因为大家习惯了用PPT做演示。现在大模型能写页面、能画图、能排版、能本地验证，那 HTML 其实就是一个更适合LLM生成的演示稿。
尤其是做方案、原型、报告这种东西，HTML不一定是最终交付物，但很适合作为现场演示稿。
客户要看的也不是 .pptx 这个后缀。
客户要看的是：这个方案我能不能看懂，这个产品我能不能想象出来，这个项目值不值得继续推进。
如果HTML能把这件事讲清楚，那就让AI直接做HTML。
别在PPT里折磨它，也别折磨自己。
