第一个感觉是爽。给学生准备一节课的互动演示，说一句话，几十秒出来一个网页。能点、能拖、能做题反馈，比 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-editnpm run install:allnpm run buildnode scripts/start.mjs "你的课件路径"
第二行装依赖时可能蹦出 esbuild、fsevents 的英文警告，忽略它，不影响使用。最后一行敲完，浏览器自动打开。就这么简单。
能用什么类型的文件
只要 HTML 都行。大模型生成的课件、网页导出的、单个 HTML 文件、一整套文件。工具自动识别类型。连 DeepSeek 生成的普通网页、在线测试卷，都能导入改。
不挑来源，不挑结构。
回到最初的判断
HTML 是 Agent 时代的 PPT，这个趋势正在发生。大模型写 HTML 课件的效率已经很高，但修改环节一直卡着。老师不是不会用大模型，是用了以后发现更折腾。改一个小地方比从头生成还麻烦，这不对。
画框改 HTML，就是把修改这件事从“操作代码”变成“表达需求”。老师说人话，AI 理解你的课件长什么样，定点修改，不动其他。
今天打开你的浏览器，用大模型生成一份 HTML 课件，按上面的四行命令装好 slides-edit。画框，写话，点按钮。改完一个地方，你看看页面是不是还能正常显示，看看AI有没有画蛇添足。尝试几次，你就知道这件事值不值得。
