你上次做 PPT 花了多久？

我的记忆是这样的：打开软件，翻模板，找到一个差不多的，改配色，换字体，插图片，图片风格不统一，再去找，找到之后大小不对，裁剪，对齐，发现某一页的标题字号和其他页不一样……

两小时过去了。内容还没开始写。

这不是个例。身边做 PPT 痛苦的人太多了，不是因为不会做，是因为这个过程太碎片化、太耗时间。大部分精力花在了排版和调整上，而不是思考内容本身。

起因是我女儿的家长会

我女儿今年读小班。之前去开家长会，老师在投影上放了一份 PPT，日常活动照片、课程安排、作息时间表、注意事项，内容不少。我坐在下面想，这些内容做成一个简单的演示文稿应该挺快的吧。

回去之后我做了一个。

不是用 PowerPoint，不是用 Canva，是在 Claude 里打了一行指令，等了一分钟，一份完整的演示文稿就出来了。

暖色调，圆角卡片，图标活泼。打开浏览器就能放映，支持全屏，支持键盘翻页。

它生成的不是 .pptx 文件，是一个 .html 文件。

为什么是 HTML？

很多人第一次听到“HTML 版 PPT”会愣一下。

传统 PPT 有几个老问题：

格式不兼容。 你用 Mac 做的，Windows 用户打开可能字体变了、排版乱了。你装了特殊字体，别人没装就显示不出来。

文件臃肿。 想嵌入视频，文件突然变成几百 MB。想发给别人，微信传不了，邮件超大小限制。

依赖软件。 对方得装 PowerPoint 或者 Keynote 才能看。演示现场借了一台电脑，发现没装 Office，这种事发生过的举手。

HTML 没有这些问题。

浏览器是全世界安装量最大的“软件”，不管什么系统，打开体验完全一致。一个 HTML 文件把所有样式、动画、图标都内嵌在里面，不依赖外部资源，不依赖安装包。

而且 HTML 天生支持的东西，平滑动画、响应式布局、交互效果，在传统 PPT 里要花很多功夫才能实现，甚至根本做不到。

比如响应式布局。你在电脑上做的 PPT，手机打开比例全是错的。但 HTML 版本在电脑上是全屏演示模式，发到手机上会自动切换成垂直滚动模式，一个文件，两种体验，不需要“电脑版”和“手机版”两个版本。

不是套模板，是真的在设计

这个指令最让我觉得有意思的地方：它不是从模板库里挑一个套上去。

你给它一个主题，它会先做几件事：

1. 分析主题
   ，判断目标受众是谁，情感调性是什么
2. 识别品牌
   ，如果主题涉及已知品牌，比如 Apple、OpenAI、特斯拉，会提取品牌色和视觉语言
3. 选择配色
   ，品牌色优先，没有品牌就从语义色彩系统中选，海洋用蓝绿，科技用紫蓝，教育用蓝橙
4. 规划动效
   ，根据内容类型选不同的页面切换方式、入场动画、氛围效果
5. 生成代码
   ，所有东西写进一个 HTML 文件

我测试了几个完全不同的主题，看看它怎么处理：

幼儿园小班家长会

暖色调，圆角卡片，图标是小星星和小花朵风格。

页面切换用的是“旋转进入”，带着一点弹性的转场，活泼但不乱。入场动画是“波浪入场”，内容元素一个接一个冒出来，像小朋友排队出场。

背景有淡淡的浮动粒子，是那种很轻的彩色小点。

整体感觉：一个很用心的老师，花了很多时间做的。但你只花了一分钟。

高中物理·电磁学

完全变了。

板书风格，深色背景加公式。页面切换变成了“缩放进入”，每一页像从远处推过来，有聚焦感。入场动画是“裁切展开”，标题文字像黑板上的粉笔字一样一行一行显现。

数据页有数字滚动效果，公式和图示搭配清楚。如果你是物理老师，这份课件直接拿去用，学生看着也不会觉得无聊。

动效也是亮点，比如电容器那一页，电场线在两极板之间持续流动，抽象的概念瞬间有了直观感受：

马斯克：从 PayPal 到火星

深色科技主题，页面切换带着缩放感，像 Keynote 的演讲效果。配色自动用了科技感强的紫蓝渐变。

它还在页面里加了导航圆点，右侧一列小圆点，鼠标悬浮会显示每页标题，点击可以跳转。按 F 键全屏，按方向键翻页，体验跟专业演示软件一样。

时间线页做得很好，从 PayPal 到 SpaceX 到 Neuralink，节点依次点亮，配合年份的数字飞入效果。像一篇科技媒体的视觉专题。

物业业主大会

正式商务风，信息密度高。

这种场景最容易翻车，内容太多，塞进去就乱。但它处理得很好：费用明细用了数字滚动计数器，收缴率用了进度条动画，关键数据用大字突出。

页面切换是标准的水平滑动，配合紧凑的交错淡入。不花哨，但专业、清晰。适合投屏在业主大会现场用。

登月历史

史诗叙事风格，深空色调，背景有微弱的星空粒子。

页面切换用的是垂直滑动，从上到下推进，配合时间线从 1961 年到 1969 年的叙事节奏。关键节点有全屏文字冲击效果，阿姆斯特朗那句名言放大到撑满屏幕，短暂停留后缩小进入正文。

像纪录片的视觉包装，不是 PPT。

星空背景是动态的，微弱的粒子缓缓漂浮，配合深空色调，沉浸感很强：

简历：李明远

这是最近新加的功能，它还能做简历。

当主题里出现“简历”、“个人介绍”、“Portfolio”这些关键词，它会自动切换到简历模式。跟普通演示完全不同的一套设计逻辑：

动效变得非常克制，没有粒子，没有追光，没有旋转进入，页面切换只有水平滑动或淡入淡出。简历不需要花哨，需要的是专业。

排版变紧凑了。普通演示一页只放一个核心信息，大量留白；简历一页可以放 2-3 段工作经历、多个项目条目，页边距更小，字号更紧凑。

内容结构是固定的：封面（姓名、职位、一句话标签、联系方式）→ 个人简介 → 工作经历（倒序） → 项目经历 → 教育背景 → 技能专长 → 结尾。

最实用的一点：支持打印导出 PDF。 内置了 @media print 样式，用浏览器打开后选择“打印 → 另存为 PDF”，就能得到一份排版干净的 PDF 简历。动效自动关闭，导航元素自动隐藏，背景色转为白色，文字转为黑色。在线能演示，打印能投递。

一些可能被忽略的细节

这些不是大卖点，但用起来会觉得“这个东西真的考虑到了”：

全屏演示。 左上角有全屏按钮，按 F 键也可以。进入全屏后跟 PowerPoint 的放映模式一样，界面干净，只留内容和导航圆点。

键盘快捷键。 方向键翻页，Home/End 跳首尾，PageUp/PageDown 也支持。Esc 退出全屏。

品牌色自动识别。 主题里提到“苹果公司”，配色就往 Apple 的视觉语言靠；提到“OpenAI”，就往黑绿配色靠。它不是随便选一个好看的颜色，是在匹配读者对这个品牌的认知预期。

无障碍支持。 所有动效在 prefers-reduced-motion 设置下会自动关闭。不干扰有需要的用户。

移动端适配。 手机上打开会自动隐藏导航圆点和自定义光标，切换成触摸滑动 + 垂直滚动。交互方式完全适配触屏设备。

文件极小。 通常 30-50KB，比一张手机照片还小。因为不依赖外部资源，所有样式和图标都是内联的。

图片策略很聪明。 它不是简单地“配张图”，而是根据内容类型决定要不要配图、用什么风格的图。儿童教育类用 SVG 卡通插画，品牌展示类会自动搜索官方 logo 和产品图，人物传记类会找正式照片。而且每张图片都有降级方案，加载失败时自动显示首字母占位或品牌文字，不会出现空白框。

怎么用

在 Claude Code 里输入：

/project:alltoppt 你的主题名称

等大概一分钟，HTML 文件就生成好了。双击打开浏览器，就能放映。

如果是做简历，输入 /project:alltoppt 简历 张三 就行。它会自动进入简历模式，生成后用浏览器的“打印 → 另存为 PDF”可以导出。

怎么获取

这个指令是我自己写的，目前在 Claude Code 里使用。

它本质上是一套给 Claude 的“设计规范”，告诉 Claude 在生成演示之前应该怎么分析主题、怎么选色、怎么选动效、怎么处理响应式布局。Claude 根据这套规范，每次都做独立的视觉设计，而不是重复使用同一套模板。

感兴趣的可以私信我。后续会整理好放到 GitHub 上开源。

如果你也在用 Claude Code 做一些有趣的事情，欢迎交流。