让AI做PPT?职场人士必备PPT制作skill:html-ppt-skill
职场上有一件事,几乎所有打工人都逃不掉——做 PPT。
周报要 PPT,项目汇报要 PPT,季度复盘要 PPT,给客户提案还是要 PPT。我认识一个做产品的朋友,上周跟我吐槽说她一周做了四份 PPT,其中两份领导看完说了句"再调调",然后就没然后了。三天的活儿,白干。
做 PPT 这件事真正折磨人的不是写内容——内容你有想法就能写。折磨人的是排版。对齐、字号、配色、间距,调完这页调下页,调完下页发现跟上一页风格不统一,回头再调第一页。一个周五下午开始的 PPT,周日晚上还在微调标题的圆角大小。
然后我记起前两天装的一个skill。
一行命令,端上桌
html-ppt-skill 是 Claude Code 的一个 skill。Claude Code 你可以理解为 Anthropic 出的命令行工具——在终端里直接跟 Claude 聊天,它帮你干活、写代码、改文件,都在本地完成。
安装就一行:
npx skillsaddhttps://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 四格、数据表、柱状图、折线图、饼图、雷达图
•代码:语法高亮、diff 对比、终端模拟
•图表:流程图、架构图、步骤卡、思维导图
•计划:时间线、路线图、甘特图、优缺点、待办清单
•收尾:CTA 行动号召、感谢页
用起来就是——打开 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 我在技术分享里用过一次——节点之间有力导向的物理连线,鼠标还能拖动——底下观众的反应明显跟平时不一样。就那一页,值了。
用法也不复杂: 最后说一个我觉得很讲究的细节——全程键盘操控。 你可能会说这有什么稀罕的。但你想想——大部分 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<div>全程键盘,跟肌肉记忆对齐← →翻页,F全屏,O总览网格,T换主题,S演讲者模式,N快速备注。URL 里写#/3直接跳到第三页。按A还能临时给当前页加个随机动画看看效果。几个藏在细节里的设计决策
适合谁
