当前位置: 首页 > news >正文

让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 我在技术分享里用过一次——节点之间有力导向的物理连线,鼠标还能拖动——底下观众的反应明显跟平时不一样。就那一页,值了。

用法也不复杂:<div>全程键盘,跟肌肉记忆对齐

最后说一个我觉得很讲究的细节——全程键盘操控。

← →翻页,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

http://www.jsqmd.com/news/717711/

相关文章:

  • 【限时解密】头部AIGC平台内部AI沙箱架构图流出(脱敏版):如何用轻量级Kata容器实现毫秒级冷启+零信任设备访问控制
  • 从一次线上故障复盘说起:我是如何用阿里云SLB+ECS+OSS架构,差点搞垮自己网站的
  • GANs技术解析:从原理到实战应用
  • Java 25 虚拟线程与结构化并发:构建高效并发应用
  • 量子最优控制在热态制备中的高效实现
  • Redis如何防止热点Key过期引发缓存击穿
  • 2025-2026年天和电话查询:选购麻将机前需了解产品特性与维护事项 - 品牌推荐
  • Yageo国巨01005系列号阻原厂原装一级代理分钟经销商
  • 反熵共同体——OpenClaw的宇宙热力学本体论(第十七篇)
  • 电机IF启动
  • 告别刷写失败!手把手教你用CANoe/CANalyzer调试UDS 37服务(RequestTransferExit)
  • Qwen3.5-2B模型精调实战:使用自定义数据集训练行业专属模型
  • Wan2.2-I2V-A14B环境部署详解:Windows系统下CUDA与模型服务配置
  • 终极网页时光机:用Wayback Machine扩展一键回溯互联网记忆
  • 唐顺之与近代内家拳
  • 别再死磕官方版了!用这个社区维护的Harbor 2.10.1离线包,5分钟搞定Arm服务器部署
  • 电力保护系统SoC架构设计与优化实践
  • 高功率半导体测试技术解析与Keithley ACS V5.0应用
  • Day 17:神经网络入门(MLP、激活函数、反向传播、优化器)
  • ARM Fast Models与MxScript开发指南
  • ZGC 2.0内存回收失效真相(JDK 25.0.1 HotFix未公开的Region扫描缺陷解析)
  • 腾讯与香港科大联手:让AI智能体像人类一样主动探索未知世界
  • OpenClaw协议霸权——从 MCP 标准到意图封建化的政治经济学(第十八篇)
  • AI写作革命:24维法医文体学精准复刻作者风格
  • 【GPR回归预测】基于matlab双向长短期记忆神经网络结合高斯过程回归(BiLSTM-GPR)的多变量回归预测 (多输入单输出)【含Matlab源码 15399期】
  • 你的车辆推荐模型为什么不准?从kNN实战聊聊特征工程里的‘归一化’陷阱
  • 核能监管文档多模态AI检索系统开发与优化
  • 为什么不同院校对AI率容忍度不同:高校AI率标准差异深度解读
  • 香港大学等九所顶尖高校联手攻克脑机接口难题:无需重新训练
  • ESP32C3的I2S音频输出引脚不够用?巧用PCM5102A的BCK/FS/DATA三线模式节省GPIO