AI TOOLS

我做了一个 HTML 可视化编辑器

——AI 生成的网页，终于不用回代码里改了

黄晨征 ｜ 全文约 1800 字

这两年，用 AI 生成 HTML 页面变得很容易。

一句话，可以生成一个产品页。一段需求，可以生成一份汇报稿。甚至一套幻灯片，也能直接生成 HTML。

但问题很快就来了。

标题大了。文字要换。间距乱了。按钮颜色不合适。幻灯片想一页一页检查。

对工程师来说，这些可能就是几行 CSS。但对普通用户来说，就是一道门槛。

所以我做了一个小工具：HTML Visual Editor，一个本地运行的 HTML 可视化编辑器。

● ● ●

很多工具都在解决“怎么生成页面”。但我遇到的真实问题是：页面已经有了，最后 10% 的修改很麻烦。

尤其是 AI 生成的 HTML。AI 可以很快给你一个页面雏形，但它很难一次性把所有细节都做到你满意。

▎可以改什么:标题字号、段落文案、卡片间距、背景颜色、按钮大小、页面圆角、汇报页里的某一句话。

▎为什么要这样做:如果每次都让 AI 重新生成，很容易把原来好的地方改坏；如果自己改代码，又需要懂 HTML 和 CSS。

● ● ●

打开工具后，默认就是“上传文件”。支持 .html 和 .htm，也可以切换到“粘贴代码”。

但我更希望普通用户不用管代码。所以默认入口改成了上传文件。你把 HTML 文件放进去，工具会直接渲染成页面。

● ● ●

进入编辑模式后，不需要找源码。你只要在页面上点击元素：标题、段落、按钮、卡片、区块，工具会识别你点中的元素。

以前是：找 DOM → 找 class → 找 CSS → 改数值 → 刷新页面现在是：点一下 → 调一下 → 看到结果

选中元素后，点击“版式”，会打开样式面板。这里放的不是全部 CSS，而是最常用、最容易改错、也最适合可视化调整的部分。

这些调整都会实时显示在页面上。你不用记 CSS 属性名，也不用担心少写一个单位。

● ● ●

有时候我们不是要改样式，只是要改一句话。

比如把“项目进展汇报”改成“建设进展汇报”。这种修改如果回代码里找，很烦。

所以工具里有一个“编辑文字”按钮。选中元素后点它，就能直接修改文字内容。

它适合改标题、改按钮文案、改段落说明、改卡片内容，也适合改汇报页里的某一句表述。

● ● ●

编辑完成后，可以直接点击“下载 HTML”。

导出时，工具会自动清理掉编辑器自己注入的内容，包括工具栏、样式面板、选择框、注入脚本和临时编辑属性。

● ● ●

HTML 幻灯片是一个很常见的场景。比如汇报材料，可能是 16 页、30 页，甚至更多页。

但 HTML 里的“分页”没有统一标准。有的页面是多个 .slide，有的是滚动分页，有的是叠层幻灯片，有的是 JS 数组动态渲染，也有自定义键盘翻页和路由。

这样用户不会看到一个“看起来能点，但实际不工作的按钮”。

现在编辑器会尽量识别明确的 slide/page 元素、叠层式幻灯片、滚动分页、重复页面块，以及运行时页码。但不承诺所有 HTML 幻灯片都能完美适配。

● ● ●

它不是一个低代码平台，也不是一个网页设计器，更不是 Figma 替代品。

它只解决一个具体问题：HTML 已经有了，我想快速微调并导出。

黄晨征 ｜ 2026.06.02 ｜ 全文约 1800 字

部分内容由 Atlas AI助手辅助生成

#HTML可视化编辑器 #AI工具 #AI办公 #HTMLPPT #AI提效 #开源工具 #网页编辑器