职场上有一件事，几乎所有打工人都逃不掉——做 PPT。
周报要 PPT，项目汇报要 PPT，季度复盘要 PPT，给客户提案还是要 PPT。我认识一个做产品的朋友，上周跟我吐槽说她一周做了四份 PPT，其中两份领导看完说了句"再调调"，然后就没然后了。三天的活儿，白干。
做 PPT 这件事真正折磨人的不是写内容——内容你有想法就能写。折磨人的是排版。对齐、字号、配色、间距，调完这页调下页，调完下页发现跟上一页风格不统一，回头再调第一页。一个周五下午开始的 PPT，周日晚上还在微调标题的圆角大小。
然后我记起前两天装的一个skill。
一行命令，端上桌
html-ppt-skill 是 Claude Code 的一个 skill。Claude Code 你可以理解为 Anthropic 出的命令行工具——在终端里直接跟 Claude 聊天，它帮你干活、写代码、改文件，都在本地完成。
安装就一行：
npx skills add https://github.com/lewislulu/html-ppt-skill
没有 build，没有 node_modules 黑洞，没有 npm install 半天转圈圈。纯静态 HTML + CSS + JS，字体走 CDN。装完之后，跟 Claude Code 说"帮我做一个关于 XX 的 PPT"，它就按这个 skill 的规范来生成。
第一次用的时候我没抱期待——这类工具我见过太多了，装完打开一看，三个模板两个歪。但这次不太一样。
打开生成的 HTML，双击，浏览器里直接出 slides。按 ← → 翻页，按 F 全屏。
嗯，就那么丝滑。
36 个主题，T 键随便切
这个 skill 里最让我有感觉的是主题数量——36 个。不是换个背景色就号称新主题那种，是真真切切视觉风格完全不同的设计。
我大概分了一下：
清淡系——minimal-white、editorial-serif、soft-pastel、xiaohongshu-white。适合不想让设计盖过内容的场景。上周内部评审我用了 minimal-white，领导扫了一眼说"看着舒服"，这种评价听着简单，其实挺难得。
暗色系——tokyo-night、dracula、catppuccin-mocha、nord。技术分享标配。tokyo-night 那个蓝，怎么说呢，像凌晨三点还在写代码的编辑器——一种带温度的冷。我前阵子做内部分享就用了这个，同事们居然主动问"你这 PPT 用的什么做的"。
敢亮系——neo-brutalism、cyberpunk-neon、vaporwave、y2k-chrome。创业路演用 neo-brutalism，硬描边加黄底色，那股"我说真的"劲一下子就出来了。产品发布会用 glassmorphism，Apple 那味儿。
职业系——corporate-clean、pitch-deck-vc、academic-paper、engineering-whiteprint。董事会汇报别整花的，corporate-clean 就对了。
切主题不用改一行代码。打开 HTML，按 T 键循环切换。也可以在 <body> 上写 data-themes="a,b,c" 圈定候选范围。
这个功能看着不起眼。但我之前给甲方做方案，他说"能不能换个感觉"，在 Keynote 里我得把每页重调。现在？按两下 T 键，三十秒搞定。就像炒菜最后撒把盐——动作不大，但少了就是差那口味。
15 套完整模板，不是半成品拼盘
主题管颜色和排版基调，模板管页面结构。15 套模板，每一套都是封面到结尾页的完整 PPT，不是"你自己拼"的那种素材库。
挑几个我实际用过的说：
xhs-white-editorial（白底杂志风）——小红书图文专用。渐变标题、马卡龙色卡片、黑底白字高亮标签，3:4 竖版比例，截图就能发。上面那张图就是用它生成的，没做后期。
pitch-deck（融资路演）——白底蓝紫渐变，大数字、增长曲线、商业模式画布，YC 风格。做融资 BP 的可以直接端上去。
tech-sharing（技术分享）——GitHub 暗底，JetBrains Mono 等宽字体，代码高亮块，议程页加 Q&A 页。技术分享会标配。
presenter-mode-reveal（演讲者模式）——这个真的猛。每页可以写 150 到 300 字的逐字稿，按 S 键弹出一个独立窗口——左边是当前页和下一页的像素级预览，右边是大字号的稿子，底部还有计时器。做公开演讲的时候这玩意儿，坦白讲比 Keynote 的演讲者视图好用。
所有模板的 CSS 都用 .tpl-名字 做了命名空间隔离。听着是工程细节，但实际意义是——你可以在一个 HTML 里同时加载多套模板，样式不打架。我上次做模板对比展示，60 页塞了 15 套模板，零冲突。
这种"后厨干净"的设计，用起来才放心。
31 种布局，搭积木一样拼页面
模板是成套的，但有时候你只想要某一个页面。比如一个数据大字页、一个对比表、一个流程图。
31 种布局就是拆开的零件。按功能分了这些：
- • 数据：KPI 四格、数据表、柱状图、折线图、饼图、雷达图
- • 计划：时间线、路线图、甘特图、优缺点、待办清单
用起来就是——打开 HTML 文件，复制 <section class="slide">...</section> 那段到你的 PPT 里，把 demo 数据换成自己的。本质上跟备菜一样：菜谱（布局）有了，食材（你的内容）换一下，炒出来的就是你的菜。
47 种动效：27 CSS + 20 Canvas
动画这块我用得不算多——大部分商务 PPT 不需要花里胡哨的入场效果。但做发布会和教学课件的时候，有些动效确实能加分。
CSS 动画 27 种，加 data-anim="fade-up" 就行。fade-up、slide-in、scale-in、zoom-pop、blur-in……常用入场效果全有。列表类的用 anim-stagger-list 逐项出现，节奏感很好。还有 3D 类的——card-flip、cube-rotate、page-turn，做翻页效果很自然。
Canvas 特效 20 种就有点猛了。粒子爆炸、烟花、星空、矩阵雨、知识图谱（力导向图）、神经网络脉冲、星座连线、轨道环、银河漩涡……
大部分场景用不上。但 knowledge-graph 我在技术分享里用过一次——节点之间有力导向的物理连线，鼠标还能拖动——底下观众的反应明显跟平时不一样。就那一页，值了。
用法也不复杂：<div data-fx="knowledge-graph">...</div>，加一个 fx-runtime.js 脚本。
全程键盘，跟肌肉记忆对齐
最后说一个我觉得很讲究的细节——全程键盘操控。
← → 翻页，F 全屏，O 总览网格，T 换主题，S 演讲者模式，N 快速备注。URL 里写 #/3 直接跳到第三页。按 A 还能临时给当前页加个随机动画看看效果。
你可能会说这有什么稀罕的。但你想想——大部分 HTML 做的 PPT 要么要点按钮，要么要用触摸板手势。这个直接键盘操作，跟用 Keynote 的习惯完全一致。演讲的时候你不需要低头找按钮，手放在键盘上就行了。
这个小选择背后是一种态度：工具应该迁就人，不是人迁就工具。
嗯。
几个藏在细节里的设计决策
说几个不太容易被看到但实际影响很大的设计选择。
纯静态文件。 没有 React、没有 Vue、没有构建工具。就是 HTML 文件，双击浏览器打开。这意味着什么？十年后你翻出这个文件，照样能打开。你不用担心某个框架不维护了、某个包管理器挂了。这锅菜不依赖任何复杂的厨具。
CSS 变量驱动。 所有颜色、圆角、阴影都是 CSS 变量，主题只覆盖变量值。你想定制自己的风格，改几个变量就行。不需要理解每个主题的实现——就像改调料配方，不用重新学做菜。
iframe 像素级预览。 演讲者模式里当前页和下一页的预览，不是截图——是真正的 iframe 加载了完整 HTML。所以预览跟你实际看到的效果完全一致：颜色、字体、布局，零误差。
适合谁
这个技能不是给所有人的。你平时做 PPT 就是套个模板贴点字，Keynote 或者 WPS 够用。
但如果你是这几种情况：
- • 经常用 Claude 辅助生成内容，然后还要手动排版成 PPT
- • 做技术分享、教学、公开演讲比较频繁，需要快速出 slides
那它确实能帮你省掉不少重复劳动。我自己用了快两个月了，最直观的感受是——做 PPT 这件事，终于不需要在"好看"和"快"之间选了。
当然，也可能是我太容易满足了。但去看了看 GitHub 上的代码质量和文档完整度——我觉得这判断我大概有八成把握。
项目开源在 GitHub，MIT 协议。搜 html-ppt-skill 就能找到。
交流相关问题：wangzhifeng@tongdog.com.cn
