教你用AI做炫酷动效的PPT,靠HTML实现!

比PPT更炫的一种做法

先看这个。这是苹果第一款折叠屏，iPhone Duo的介绍演示。翻页的时候，手机会在屏幕上慢慢展开。关键参数，一个一个跳出来。

但它不是PPT。它是一个网页，也就是HTML。双击打开，浏览器里就能直接放。

资料截图：配套 HTML 演示文件的实际播放画面。

这期我就从零教你做出这样的效果。从写文案，到定风格，再到做出HTML动效版。最后，再顺手出一份能改的PPT。

HTML和PPT到底差在哪

先说清楚，HTML和PPT差在哪。HTML本质上就是网页。滚动、转场、数字跳动，它都能做。这类定制动效，用HTML来做更自由。所以自己上台讲、录视频、做产品展示，用HTML更出彩。现在大家都在讲怎么用AI做PPT。我觉得，可以多走一步。同样一份内容，做成HTML，动态效果会好很多。

但它有两个短板。第一，别人不好改。想改一个字，要么回去找AI，要么去改代码。第二，它依赖浏览器。如果图片或者字体依赖外部资源，换一台电脑就可能加载不出来。

PPT正好反过来。动效没那么自由，但用独立文本框做出来的文字能直接改，也方便用常见的演示软件打开。

所以我的建议很简单。自己讲、要效果，用HTML。要发给别人、还要接着改，用PPT。同一份内容，两个版本都可以出。

工具和资料

工具我用到的智能体是Codex。你用WorkBuddy这类智能体，也一样能做。打开Codex，新建一个项目。找到苹果官网iPhone Duo的新闻稿链接，发给Codex。参数、价格、日期都从这里来，AI不用自己编。

第一步：先出文案，不出PPT

第一步，可能有点反直觉。先不让AI做PPT，先让它只写文案。

为什么要多这一步？因为这个时候，改文字的成本最低。一句话不对，删掉重写就行。一旦有了排版，改一句话，整页都要跟着动。文字多一行，页面可能就挤爆了。

怎么交给AI呢？告诉它三件事：给谁看，想让他记住什么，做几页。比如我这里写的是：给想换新苹果手机的人看。让他们记住，这是苹果第一款折叠屏。做8到10页。再和他说每页只写标题、要点和讲稿，先别做设计。

根据这份苹果 iPhone Duo 官方新闻稿，帮我写一份演示文案。给想换新苹果手机的人看。让他们记住，这是苹果第一款折叠屏。做 8 到 10 页。每页只写标题、要点和讲稿，先别做设计。所有数字只用新闻稿里的，新闻稿没有的标【待确认】。输出一个 Markdown 文件。

文案出来之后，你要看两样。第一，看顺序。重点看第一页，是不是一上来就讲折叠屏这个新特点。要是被放到了后面，就让它调到前面。第二，看数字，拿官网逐条对一遍。AI写错一个数，后面做得再好看也白搭。

第二步：定风格，三种方法

现在文案定了，再定风格。这里有三种方法。

第一种，有模板，就先用模板。比如公司有固定的汇报模板，直接交给AI。让它把文案套进去，logo、配色、字体都别动。

第二种，没有模板，但有喜欢的参考。一张截图，或者别人做的一页PPT。直接发给AI，让它照着这个感觉来。

第三种，你也不知道自己想要什么。这种情况其实最常见，这期就用这种方法演示。把刚才定稿的文案发给AI，跟它聊。告诉它给谁看，想要什么感觉。比如我这里写的是：给想换新苹果手机的人看。要像苹果发布会那样，干净、有质感。请推荐3套风格，每套出一张封面预览。

这是定稿的演示文案。给想换新苹果手机的人看，要像苹果发布会那样，干净、有质感。请推荐 3 套差异明显的视觉风格，每套说明配色、字体和版式特点，并各出一张封面预览。

为什么要先看预览？因为光靠几个形容词，你想的和AI想的，可能不是一个样子。先看到图再选，比来回改描述快多了。

等3套风格出来，我们就选最接近发布会感觉的那一套。把这张预览图存下来，后面每一页都照着它来。好，风格定了，接下来做页面。

第三步：做出HTML动效版

内容和风格都有了，开始做HTML。把定稿的文案和那张预览图，一起发给Codex。再把动效要求说清楚。比如我这里写的是：从封面翻页时，让手机从合上到慢慢展开。参数页，让数字一个一个跳出来。用键盘左右键翻页。做成一个单独的HTML文件。文案一个字都别改。

用这份定稿文案和这张风格预览图，做一个 HTML 演示。从封面翻页时，让手机从合上到慢慢展开。参数页，让数字一个一个跳出来。用键盘左右键翻页。做成一个单独的 HTML 文件，样式、脚本、图片都内嵌，不依赖网络。每一页风格都和预览图统一。文案一个字都别改。

为什么要单独一个文件？因为所需资源都放进了同一个文件，拷到其他电脑，用浏览器就能打开。不容易出现缺图、缺文件的情况。

生成好之后，用浏览器打开，从第一页翻到最后一页。就按刚才提的要求，一条条对。比如，封面的手机有没有展开，文字跟定稿的文案对不对得上。哪里不满意，截图发给AI，告诉它改哪儿就行。

资料截图：配套 HTML 演示文件的尺寸页。

第四步：再出一份能改的PPT

如果这份内容还要发给同事、领导，就再出一份PPT。还是同一份文案，同一张风格图。比如我这里写的是：生成一个可编辑的PPTX文件。文字和图表都要能改，不要把整页做成图片。动效简单点，用PPT自带的就行。

用同一份定稿文案和风格预览图，生成一个可编辑的 PPTX 文件。文字和图表都要能改，不要把整页做成图片。动效简单点，只用 PowerPoint 自带的。生成后检查每页有没有文字溢出。

为什么特别强调不要做成图片？因为整页是图片的话，看着一样，但一个字都改不了。

做完打开。随便找一页，点一下标题，看能不能直接改字。再逐页看一遍，有没有文字溢出、图表能不能改，检查完再发出去。

先定文案，再做页面

回到开头的问题。HTML，动态效果更好，适合自己讲。PPT，好改好传，适合交给别人。但不管出哪个版本，顺序都一样。先定文案，再定风格，最后才是做页面。AI现在能帮你排版、做动效。但讲什么、给谁看，还是得你自己定。