AI · PB · 475
HTML 幻灯片模板工作流
Html Slide Template Workflow · html-slide-template-workflow--hank-yeomans
解决什么问题
用 AI 做演示文稿容易得到 SVG 图片或"一眼假"的 AI 生成图片式幻灯片(所谓"slop AI images"),既不好改也不好复用品牌样式——怎么用 Claude Code 做出真正可迭代、可复用模板的演示文稿?
核心内容
完整工作流:
- 强制用 HTML 而不是图片/SVG:明确告知 Claude Code 把每页幻灯片做成 HTML 页面,否则它可能默认生成 SVG 或粗糙的 AI 生成图片。
- 先做出满意的几页,再固化成模板:做出想要的样式效果后,让 Claude Code 把这几页提炼成一个可复用的模板,保存为
.md文件,确保后续所有新幻灯片保持统一格式、品牌色、观感。 - 用 HTML 的可编辑性做精确迭代:因为是 HTML,可以非常具体地下达修改指令("把这里的措辞改成那样"),还可以配合 MCP 直接查看渲染出来的"幻灯片"效果,获得更强的上下文反馈闭环。
- 接受 AI 幻觉是常态,但可控:知道自己想要什么、能把需求说清楚的人,踩坑不会太多。
- 交付形态灵活:要导入 PPT 就截图放进去;如果是给客户或做现场演示,可以直接用浏览器打开这些 HTML"幻灯片",因为 Claude Code 会内置"上一页/下一页"按钮,让它们能响应鼠标交互,直接当交互式网页演示文稿用,不必导出 PPT。
适用边界
这套流程适合能容忍反复用自然语言描述细节改动的人;对设计还原度要求极高、或者团队协作评审必须在 PowerPoint 里进行的场景,HTML 路线的截图转换步骤会带来额外损耗。
关键引述 · 原话
Hank Yeomans: "With html you can be extremely specific — 'change this wording to say that' — and then you can use an MCP to view the 'slides' to show what you mean as well for greater context."
关联卡片
- 是 `claude-code-personal-agent-taxonomy--lenny-rachitsky` 中"内容/写作副驾"用例的具体展开。
出处：Hank Yeomans · 02-newsletters/everyone-should-be-using-claude-code-more.md
提炼自 Lenny Rachitsky 的 Lenny’s Newsletter & Podcast（2019–2026）。本站为个人学习用途的二次创作，与 Lenny’s Newsletter 无官方关联。
provenance · 已核验 · glm-5.2
提炼自 Lenny Rachitsky 的 Lenny’s Newsletter & Podcast（2019–2026）。本站为个人学习用途的二次创作，与 Lenny’s Newsletter 无官方关联。
provenance · 已核验 · glm-5.2