用大模型生成 HTML 课件这件事，我一直在用。第一个感觉是爽——给学生准备一节课的互动演示，说一句话，几十秒出来一个网页。能点、能拖、能做题反馈，比 PPT 的翻页动画强太多。

特别是一道立体几何题，PPT 放三个视角的截图，HTML 直接给你一个可旋转的三维模型。学生自己拖拽看，感觉完全不一样。

所以我对这个趋势的判断很明确：HTML 是 Agent 时代的 PPT。

就像大模型写 Markdown 文档已经稀松平常，写 HTML 课件也一样。我们接受 Markdown 代替 Word 的时候，没人觉得奇怪。现在该接受这件事了。

爽完以后，问题来了

生成容易，改起来要命。

老师觉得标题字号大了、第三页配色不对、想加个数据卡片——全是正常需求。但 HTML 是代码。你得打开源码，在几百行的 div 和 span 标签里找到对应那行。改一个字号，你可能得先理解这段代码的结构。改完字号，旁边一个元素莫名其妙歪了，因为你少写了个闭合标签。

不懂代码的老师，只有两条路：

一是直接在代码里按 Ctrl+F，找到看起来像字号的地方，改掉。90% 的几率改错地方，或者改对了但把布局搞乱。最终结果是整个文件崩掉，页面显示成一堆乱码。

二是把代码复制到大模型聊天框，说"帮我改一下标题字号"。大模型很听话，但它会把整个文件从头到尾重写一遍。你只改标题字号，它把配色改了、排版调了、加了段简介。你没动的地方它也动了。改完还得从头检查一遍，再把几十页代码复制回来。来回倒腾的时间，比以前做 PPT 还长。

改一个小地方，风险比改的内容还大。这是用 HTML 做课件的老师最真实的痛。

那怎么办

我琢磨了一段时间，看了几个开源项目的思路，自己优化了一个 Skill，叫 slides-edit。

核心想法很简单：像改图一样改 HTML。你在课件上画框，写一句话说怎么改，AI 去改。不碰代码，不复制粘贴。

具体用法是这样：

浏览器打开你的 HTML 课件，页面就是课件的样子。鼠标按住拖拽，在页面上画矩形框，框住要改的地方。框变红，带编号①②③。框旁边自动弹出小窗，写"修改要求"。

说人话：标题字号改小、这块背景换浅色、这页加个数据卡片。想改几处画几个框，每个框写不同要求。点"应用全部修改"，AI 在后台读文件、改代码，几秒后页面刷新——改好了。

全程你就做了三件事：画框，写话，点按钮。

多举几个例子

场景一：改完课件发现标题字号大了。以前要打开源码找 font-size 那行，找到了还不确定是不是这个。现在画框框住标题，写"字号改小"，点应用。完事。

场景二：某一页内容太挤，想重新排版。以前要么自己一行一行调 margin 和 padding，要么把整页代码丢给大模型重写，然后祈祷它保持其他页面风格一致。现在框住整页，写"这页太挤，重新排一下让阅读舒服"。AI 自己调间距和布局，风格跟着现有的走。

场景三：整份课件想换个主题色。以前要全局搜索替换颜色值，漏一个就违和。现在框住几个关键元素，写"整体换成暖色调"。AI 把配色统一改掉，不会出现一页蓝一页红的情况。

场景四：加一页新内容。框住空白区域，写"这里加一个数据对比的卡片，放三个关键数字"。AI 按现有风格生成，不会出来一个风格突兀的新页面。

这四个场景的共同点：以前每个都要碰代码或重写文件，现在都是画框加写一句话。从"操作代码"变成了"表达需求"。

为什么画框比聊天框好用

有人会问：跟大模型聊天说"帮我改课件"不也一样？区别很大。

聊天框里，大模型看不到你的课件长什么样。它只能靠你描述来猜。你说"标题太大"，它不知道你说的是哪个标题、现在多大。它只能按经验猜一个大概，然后重写整个文件。重写就意味着一件事：它把没问题的地方也改了。

画框的方式，是在课件上直接指给它看。框住的就是要改的地方，AI 看得见。而且它会严格只改框住的区域，其他地方不动。这不是猜测，是定点修改。

两种改法互补

画框加 AI 改，适合说不清具体怎么改但知道要改什么的场景。比如"这页太挤重新排""整体换暖色""加个对比表格"。你说人话，AI 动手。但是需要接入 Agent CLI。

直接动手改，适合精准微调。双击改字、拖动元素挪位置、拖手柄缩放。不经过 AI，秒改秒存。

两种互补：画框改大方向，拖拽调小细节。从宏观布局到微观调整，一个工具全搞定。

装起来不麻烦

这是一个 Skill，搭配 WorkBuddy 是最佳食用搭配。

Node.js：去 nodejs.org 官网下，选 LTS 版本，双击装。终端敲 node -v 能看到版本号就成了。

AI 命令行工具：最佳搭配是 WorkBuddy 桌面端，装完自带 codebuddy，零配置直接能用。如果你已经在用别的——Claude Code、Gemini CLI、Codex 这些也行，按各自的官方文档装。不装 AI 工具也能用即时编辑（双击改字、拖动元素），只是用不了画框让 AI 改。

装好后，解压文件夹，终端跑四行命令：

cd slides-edit
npm run install:all
npm run build
node scripts/start.mjs "你的课件路径"

第二行装依赖时可能蹦出 esbuild、fsevents 的英文警告，忽略它，不影响使用。最后一行敲完，浏览器自动打开。

能用什么类型的文件

只要 HTML 都行。大模型生成的课件、网页导出的、单个 HTML 文件、一整套文件。工具自动识别类型。连 DeepSeek 生成的普通网页、在线测试卷，都能导入改。

不挑来源，不挑结构。

回到最初的判断

HTML 是 Agent 时代的 PPT，这个趋势正在发生。大模型写 HTML 课件的效率已经很高，但修改环节一直卡着。老师不是不会用大模型，是用了以后发现更折腾。改一个小地方比从头生成还麻烦，这不对。

画框改 HTML，就是把修改这件事从"操作代码"变成"表达需求"。老师说人话，AI 理解你的课件长什么样，定点修改，不动其他。