一句话让 Claude Code 生成一套能直接拿去讲的 PPT这事我一开始是不信的。直到我把一个叫 html-ppt-skill 的技能包挂上去敲了一行帮我把这份季度复盘做成 12 页的演示文稿它吐出来一个完整的 HTML 文件浏览器一打开翻页、动效、配色、排版全都在那一刻我承认我有点被震到了。这篇东西就是把我从装 Claude Code、配技能、调提示词到最终导出可编辑 PPT 的整条链路原原本本拆开讲一遍。不管你是完全没碰过命令行的职场人还是写过几年前端想找个新玩具的开发者看完都能自己跑通一遍。核心关键词就三个Claude Code、PPT Skill、html-ppt-skill全文围绕它们展开不跑题。1. 先搞清楚 html-ppt-skill 到底在干什么1.1 它不是模板库而是生成 PPT 的约束协议很多人第一次听到PPT Skill会下意识以为是个模板集合下载下来挑一个套用。这个理解偏了。html-ppt-skill 的本质是一份写给 Claude Code 看的技能说明书里面用自然语言规定了生成一份演示文稿时应该遵守哪些规则页面尺寸用 16:9、每页信息密度上限、标题字号区间、配色方案怎么选、动效只能用哪几种、图表用什么库渲染。Claude Code 读到这份说明书之后就会按照这套约束去写 HTML而不是天马行空地乱来。打个比方普通让 AI 写 PPT就像你让一个没上过班的新人做汇报他可能给你整出五颜六色的艺术字。而挂了 Skill 之后相当于你给了他一本《公司汇报规范手册》他知道标题该多大、一页最多放几个要点、什么颜色不能碰。这就是 Skill 存在的意义——把审美和规范从每次都要叮嘱变成一次配置、长期生效。1.2 为什么是 HTML而不是直接生成 .pptx这是被问得最多的一个问题。直接生成 .pptx 文件听起来更省事为什么绕一圈用 HTML我实测下来的原因有三层。第一层是可控性。.pptx 是二进制打包格式AI 要生成它得依赖 python-pptx 这类库而这类库对复杂排版的支持相当有限你想做个渐变背景加卡片阴影代码写起来又臭又长效果还经常崩。HTML 就不一样了CSS 能表达的设计语言几乎是无限的AI 写起来也顺手。第二层是渲染一致性。HTML 在浏览器里怎么显示你看到的就是什么所见即所得。而 .pptx 在不同版本的办公软件里打开字体、间距、位置都可能跑偏尤其是用了非系统字体的时候。第三层是可转换性。HTML 做完之后你完全可以再走一步把它转成 PDF 或者图片甚至用工具反向导入到办公软件里做二次编辑。也就是说 HTML 是母版最终交付格式可以按需派生。这个链路我在第 4 章会详细讲。1.3 一句话生成背后的真实工作量标题说一句话生成这话不假但你得知道那一句话背后 Claude Code 干了多少活。它至少要完成理解你的主题和受众、规划页面结构封面、目录、内容页、数据页、结尾、为每页选择合适的版式纯文字、图文、图表、时间线、生成符合 Skill 规范的 HTML 和 CSS、内联必要的 JS 实现翻页和动效。这一套下来一个中等复杂度的 15 页 PPT生成的 HTML 代码量通常在 1500 到 3000 行之间。所以一句话是入口生成是结果中间那层是 Skill 在替你把关。理解了这一点你就不会对偶尔需要补充一两句说明感到意外了——毕竟再厉害的助手也得知道你到底想讲给谁听。2. 把 Claude Code 和 Skill 装起来环境准备里最容易翻车的几个点2.1 安装 Claude Code 的三种姿势与选择逻辑Claude Code 目前主流的安装方式有三种全局 npm 安装、桌面客户端、以及在编辑器里以插件形式使用。我三种都试过给你一个直接的选型建议。如果你日常就在终端里干活全局 npm 安装是最顺手的一条命令搞定之后在任何目录下敲claude就能唤起。缺点是它依赖 Node.js 环境版本太老会报错建议 Node 18 以上。如果你对命令行有心理阴影桌面客户端更友好图形界面点点点就行适合纯办公场景。但客户端在调用本地文件、执行脚本这类操作上不如命令行灵活做 Skill 这种需要读写文件的事情会稍微别扭。如果你主力编辑器是 VS Code那插件形式是甜点区。它能在编辑器侧边栏直接对话还能感知你当前打开的文件改 HTML 的时候特别爽。我现在的日常组合就是 VS Code 插件 终端备用。提示不管你选哪种方式第一次运行都需要完成账号授权。这一步跟着界面提示走就行遇到网络相关的报错优先检查本地代理设置和防火墙别急着怀疑是软件本身的问题。2.2 Skill 的目录结构放错地方等于没装这是新手最容易踩的坑。Skill 不是随便丢个文件夹就生效的Claude Code 对技能目录有约定俗成的扫描路径。通常它会在用户主目录下的配置文件夹里找 skills 子目录每个技能一个独立文件夹文件夹里必须有一个描述文件一般是 markdown 或 json 格式写明这个技能叫什么、什么时候触发、具体规则是什么。我见过有人把技能文件直接扔在项目根目录然后纳闷为什么 Claude 不认。原因就是扫描路径不对。正确的做法是找到 Claude Code 的配置根目录在里面建 skills 文件夹再把 html-ppt-skill 整个目录放进去。放好之后重启一次 Claude Code让它重新扫描。验证是否生效有个简单办法直接问它你现在有哪些可用技能如果它能列出 ppt 相关的技能名说明装对了。列不出来就是路径或者描述文件格式有问题。2.3 描述文件里的触发条件怎么写才靠谱技能能不能被正确触发全看描述文件里那段什么时候使用我的说明。写得太窄你正常提需求它不触发写得太宽你随便聊两句它都往里套。我的经验是触发条件里要同时包含动作词和产物词。比如当用户要求创建、生成、制作演示文稿、幻灯片、PPT 时使用本技能动作词是创建/生成/制作产物词是演示文稿/幻灯片/PPT。这样覆盖了大部分口语化表达又不会误伤普通对话。另外描述文件里最好明确写出输出格式比如输出为单个自包含的 HTML 文件内联所有 CSS 和 JS。不写清楚的话AI 可能给你拆成好几个文件或者引用外部 CDN离线场景下就抓瞎了。2.4 依赖项检查别等生成到一半才发现缺东西html-ppt-skill 生成的 HTML 如果要包含图表通常会用到图表渲染库如果要包含图标可能用到图标字体。这些依赖有两种处理方式一是走 CDN 在线加载二是本地内联。在线加载的好处是文件小坏处是断网就废。本地内联的好处是彻底自包含坏处是文件体积大。我建议在描述文件里明确要求关键依赖内联、非关键依赖走 CDN兼顾体积和可靠性。还有一点如果你打算把生成的 HTML 转成 PDF那得提前装好转换工具比如基于 Chromium 的无头浏览器方案。这个工具不装后面转换那一步会直接卡住。我一般会在环境准备阶段就把转换工具一起装好省得中途返工。3. 提示词怎么写才能让生成的 PPT 一次到位3.1 一句话提示词的最小信息集标题说一句话生成那这一句话里到底该包含什么我总结了一个最小信息集缺了哪项生成结果就会在对应维度上打折。主题这份 PPT 讲什么。越具体越好2024 年 Q3 华东区销售复盘比销售汇报强十倍。页数或时长12 页、20 分钟给个范围AI 好规划结构。受众给老板看、给客户看、给同事看语气和信息密度完全不同。风格倾向商务简约、科技感、活泼、学术严谨选一个词就行。把这四项揉进一句话比如帮我做一份 12 页的 Q3 华东区销售复盘 PPT给管理层看商务简约风格。这就是一句合格的最小提示词。实测下来这种颗粒度生成的结果返工率最低。3.2 进阶用结构化提示词控制每一页的内容如果你对内容有明确要求一句话就不够了得用结构化提示。我常用的格式是分页描述每页一行写清楚这页要放什么。第1页封面标题Q3 华东区销售复盘副标题带日期和汇报人 第2页目录四个板块 第3页整体业绩概览放三个关键数字 第4页分区域对比用柱状图 ...这种写法看起来啰嗦但它把结构规划这个最耗时的环节从 AI 手里拿回来了你直接告诉它骨架它只负责填充和美化。对于正式汇报我强烈建议用这种方式因为结构本身就是汇报逻辑的体现交给 AI 随机发挥风险太大。3.3 那些让效果翻倍的隐性指令有几条指令你不说 AI 不会主动做但说了之后效果立竿见影。第一条是**每页只讲一个核心观点**。不强调的话AI 容易把一页塞得满满当当观众根本来不及看。加上这句它会主动做信息分层。第二条是**数据页必须配可视化不要纯文字罗列数字**。数字堆在页面上没人记得住一个柱状图或者环形图信息传递效率高得多。第三条是**配色不超过三种主色**。这是设计常识但 AI 不提醒就容易放飞。限定主色数量整体质感立刻上一个台阶。第四条是**留白要充足边距不小于页面宽度的 5%**。这条专治内容顶到边的廉价感。3.4 迭代式修改把 AI 当成会改稿的同事第一版生成完别急着接受也别急着推翻重来。把它当成一个会改稿的同事用具体的、指向明确的指令去调。第 5 页的图表颜色太跳了换成和整体一致的蓝色系——这种指令它能精准执行。整体感觉不太对——这种指令它只能瞎猜。修改指令的颗粒度决定了迭代的效率。我一般的迭代节奏是第一轮调结构页面顺序、增删页第二轮调视觉配色、字体、间距第三轮调细节文案措辞、数字格式。分轮次来每轮聚焦一个维度比一次性提一堆混杂需求高效得多。4. 从 HTML 到可交付文件导出与二次编辑的完整链路4.1 直接在浏览器里演示的正确姿势生成的 HTML 文件双击用浏览器打开就能演示。但直接打开有个问题地址栏、书签栏都在投影出来很难看。正确姿势是进入全屏模式一般是 F11然后配合 Skill 内置的翻页快捷键通常是方向键或空格来讲解。如果你要投屏到会议室大屏建议提前在目标机器上打开测试一遍确认字体渲染正常、动效不卡顿。我踩过一次坑在自己电脑上用的是某款设计字体到会议室机器上没装整个排版全乱了。后来学乖了要么用系统通用字体要么把字体文件也内联进去。4.2 转成 PDF最稳妥的交付格式PDF 是演示文稿最稳妥的交付格式任何设备打开都不会跑版。转换方法我推荐用无头浏览器方案命令行一条指令就能把 HTML 渲染成 PDF还能指定页面尺寸和边距。转换时有两个参数要特别注意一是页面尺寸要设成和 PPT 一致的 16:9 比例二是背景图形要勾选打印背景的选项否则渐变和色块会丢失。这两个参数不设对转出来的 PDF 会缺胳膊少腿。转完之后建议逐页翻一遍重点看图表有没有被截断、文字有没有溢出。HTML 里显示正常不代表 PDF 里也正常渲染引擎的差异偶尔会带来意外。4.3 反向导入办公软件做二次编辑有时候老板就是要 .pptx 源文件方便他自己改。这时候可以走HTML 转图片再导入的路子把每一页 HTML 截成高清图片然后在办公软件里每页插入一张图。这样做出来的文件视觉上和 HTML 完全一致但文字不可编辑。如果你需要文字可编辑那就得用专门的转换工具把 HTML 的结构映射成办公软件的文本框和形状。这类工具转换效果参差不齐复杂排版经常错位我的建议是能用 HTML 演示就用 HTML非要源文件就用图片方案别对自动转换的可编辑性抱太高期待。4.4 打包多个 HTML 的管理技巧做多了之后你会发现手头攒了一堆 HTML 文件找起来很痛苦。我的管理方法是按项目名_日期_版本命名比如q3-review_20241015_v2.html然后按项目分文件夹存放。如果几个 HTML 之间有共用资源比如同一套字体、同一个图表库可以抽出来放公共目录但要注意这样会破坏单文件自包含的特性移动文件时得连公共目录一起搬。权衡下来正式交付的文件我还是坚持单文件自包含宁可体积大一点也不要在演示现场出岔子。5. 实测中那些没人告诉你但一定会遇到的坑5.1 生成到一半中断文件不完整长文档生成时偶尔会遇到输出中断的情况生成的 HTML 打开是空白或者只有半页。这通常是因为单次输出长度触发了上限。应对办法有两个一是分页生成让它先出前 8 页确认没问题再让它续写后 8 页二是降低单页复杂度如果某页又要图表又要动效又要大段文字拆成两页。我现在的习惯是超过 20 页的 PPT 一律分批生成稳得多。5.2 中文字体在部分环境显示异常这是高频问题。HTML 里如果指定了某款中文字体而目标机器没装浏览器会回退到默认字体排版就变了。解决办法是在 CSS 的字体声明里写一长串字体回退链从首选字体一路回退到系统通用字体比如先写设计字体再写常见系统字体最后兜底写通用无衬线字体。这样即使首选字体缺失也能优雅降级。5.3 动效过多导致演示卡顿AI 有时候会热情过头给每页都加上入场动画、元素逐个飞入。单页看很酷连着翻十几页老电脑直接卡成幻灯片。我的建议是只在封面、章节过渡页、结尾页加动效内容页保持静态。演示的核心是信息传递动效是调味料不是主菜。5.4 图表数据是编的必须人工核对这一点必须重点强调。你让 AI 做图表如果没给它真实数据它会自己编一组看起来合理的数字填进去。这在正式汇报里是致命的。正确做法是在提示词里把真实数据明确写出来或者生成后逐页核对每一个数字。我一般会在生成完成后专门花十分钟做数据核对把所有图表和文字里的数字跟原始数据源对一遍。这十分钟能救你一命。5.5 配色在投影仪上偏色电脑屏幕上看着高级的深色系配色投到投影仪上可能变成一团糊。投影仪的亮度和对比度普遍不如显示器深色背景加浅色文字的组合在投影环境下经常看不清。我的经验是如果确定要用投影仪优先选浅色背景加深色文字对比度拉满。如果非要用深色系提前去会议室试投一次别等到正式场合才发现问题。6. 把 Skill 用出花几个进阶玩法6.1 定制专属 Skill把你的审美固化下来用久了你会发现每次都要叮嘱配色不超过三种留白要足很烦。这时候可以自己改 Skill 的描述文件把这些偏好直接写进去变成默认规则。比如你偏爱某种蓝灰配色就把色值写进 Skill以后生成的每一份 PPT 都自带你的风格。这一步的门槛比想象中低描述文件就是纯文本改几个词的事。改完重启生效之后所有生成都按新规则来。这是把工具变成你自己的工具的关键一步。6.2 结合真实数据源自动生成如果你有结构化的数据比如表格文件可以让 Claude Code 先读取数据再基于真实数据生成图表页。这样既避免了编数据的问题又省去了手动录入。链路是读数据文件 → 计算汇总指标 → 生成图表配置 → 嵌入 HTML。整个过程可以串成一条指令。6.3 批量生成系列 PPT如果你需要做一系列风格统一的 PPT比如每月复盘可以把模板结构固定下来只替换数据和标题。做法是先做一份满意的作为基准然后让 AI参照这份的结构和风格用新数据生成一份。这样出来的系列 PPT 视觉高度统一专业感直接拉满。6.4 用 HTML 做交互式演示HTML 相比传统 PPT 有个独有优势可以交互。你可以在页面里嵌入可点击的标签页、可展开的详情、甚至简单的数据筛选。这些在传统演示软件里要么做不了要么很麻烦。如果你的汇报需要展示不同条件下的不同结果交互式 HTML 是降维打击。我在实际使用中的体会是html-ppt-skill 这类工具真正的价值不在于省下了排版的那几个小时而在于它把做 PPT这件事的门槛从会设计降到了会描述。你只要能把想讲的东西说清楚剩下的交给它。当然数据核对、投影测试这些人工环节一个都不能省工具再强也替代不了你对内容的责任。最后分享一个小技巧每次生成完把满意的版本存一份当模板攒上三五份之后你就有了一套属于自己的风格库下次生成直接参照效果一次比一次稳。