我做了HTML可视化编辑器,解决用HTML做 PPT 痛点!

大家好，我是在用AI做PPT的小亮。

最近，我一直在用 HTML 生成 PPT，但这个体验是分裂的。HTML 能展示更丰富的视觉效果，能做出更有设计感的 UI 布局，也天然更容易被 AI 一次性生成。

但是，当你想改点东西的时候，麻烦就来了。

尤其是在一些关键场合。比如你马上就要上台讲了，想把某页的数据微调更新一下，把标题措辞调整一下。这个方便就消失了。你要么再去求 AI 帮你改，来来回回好几轮，改完还不一定对；要么自己硬着头皮看源码。

所以，我做了一个东西。

一个 HTML 可视化编辑器，开源的，叫做html-ppt-editor

//01-项目介绍

它的核心理念很简单，就是让你像用 Figma 或者传统 PPT 编辑器一样，去编辑任何 HTML 页面。不用看代码，不用懂 CSS，点哪改哪。

你把你的 HTML 文件上传上去，中间是一个画布，你的页面就渲染在里面。然后你点击任意一个元素，标题也好、段落也好、按钮也好，右边就会弹出一个属性面板。

在这个面板里，你可以改文字内容、改颜色、改字号、改间距、改圆角、改阴影。就跟你在 PPT 里改一个文本框一模一样，只不过底层是 HTML。

说几个我自己觉得比较爽的功能吧。

画布上有一个悬浮的快捷工具条。你选中一个文本元素，工具条就弹出来，加粗、斜体、下划线、对齐方式、复制样式、粘贴样式、清除样式，全在上面。这个小细节让编辑效率直接拉满了。

还有一个我觉得特别实用的，源码和画布是联动的。你在画布上点了某个元素，左边的源码区会自动高亮跳转到对应的那段代码。对于那些懂一点代码、想精修的用户来说，这个太有用了。你不用自己在几百行代码里大海捞针了。

撤销、重做这些基本操作都有。草稿会自动保存到本地，刷新浏览器也不丢。画布支持 16:9 和 4:3 两种比例，还有自适应模式。缩放支持 Fit、75%、100%、125%，你可以根据需要切换。

默认状态下源码区是折叠的，画布和属性面板占据主要空间。这是故意的，因为大部分用户不需要看代码，给他们一个干净的编辑界面就好。但如果你需要，展开就行。

最后导出的时候，一键导出一个干干净净的 HTML 文件。没有编辑器的残留代码，没有多余的 script 标签，直接就能拿去用。

坦率的讲，这整个项目本身也是我用 Vibe Coding 做出来的。不依赖任何构建工具，不依赖任何外部 npm 包，纯原生的 HTML、CSS、JavaScript。

//02-写在后面

说到这个，其实我在做的时候想到了一个挺有意思的事。

AI 时代有一个非常典型的最后一公里问题。

AI 能帮你生成 90% 的内容，但最后那 10% 的微调，往往才是最耗时间的。写文章是这样，做设计是这样，HTML PPT 更是这样。

那 90% 的生成，已经有无数工具在解决了。各种 AI PPT 生成器，各种 Skill，各种一键出稿。这个赛道挤得不行。

但是那 10% 的我就想稍微改一下，反而是被大家忽略的。

仔细想想，这个模式其实到处都是。AI 帮你写了一篇稿子，95% 都挺好的，但有两句话你想调整，你得回去跟 AI 来回沟通半天。AI 帮你生成了一段代码，整体逻辑没问题，但有个变量名你想改，你得去理解整段代码的上下文。

生成容易，微调难。创造容易，掌控难。

这是 AI 工具发展到现在，一个非常普遍但还没被好好解决的问题。

我做这个项目，就是想在 HTML PPT 这个场景下，解决这最后 10%。

//03-下一步方向

当然，说实话，我也不瞒大家，现在的版本还比较早期。

还有因为用的plus，额度太不够用了。。。很多bug没能改彻底。

目前只支持上传单个 HTML 文件，还不支持上传整个文件夹，如果你的 PPT 有外部 CSS 或者图片资源的引用，目前处理得还不够好。交互逻辑也还有不少可以优化的地方，比如拖拽调整元素位置、批量样式修改、多页管理这些功能，都还在规划中。

但核心的编辑流程已经完全跑通了，上传、点选、修改、导出，这条链路是完整的、可用的。

而且这是一个完全开源的项目，GitHub 上搜 kejixiaoliang/html-ppt-editor就能找到。不依赖任何外部服务，不需要注册，不需要联网，本地跑起来就行。

之后的迭代方向，我大概想了几个。

支持文件夹上传是第一优先级，这样带外部资源的 HTML 也能编辑了。然后是优化拖拽交互，让元素位置的调整更直觉化。再往后可能会考虑加入一些快捷模板，让用户不只是编辑已有的 HTML，还能从零开始快速搭建。

如果你也在用 HTML 做 PPT，或者你身边有人在用 AI 生成各种 HTML 页面然后苦于修改，欢迎去试试，有问题直接提 issue，我都会看。

我始终觉得，好的工具应该是让技术变得透明的。

你不需要知道 HTML 是什么，不需要知道 CSS 是什么。你只需要知道，这个标题我想大一点，这个颜色我想深一点，这个间距我想宽一点。

然后点一下，改了。

以上就是本文的全部内容啦！如果觉得这篇文章有帮助，希望您能点个赞、点个推荐，给公众号点个星标⭐，还可以转发给身边的朋友，我们下期再见

这里是科技小亮

持续分享AI等有趣内容

欢迎点击下方卡片关注小亮