距离上次发那篇《马桶镶金边》已经过去几天了。
说实话,发完之后我挺忐忑的。毕竟那俩工具说白了就是个 HMTL 编辑器 + PDF 转换器,功能简陋,UI 凑合。评论区有人说"这不就是给 div 加了个 contenteditable 吗",我都没敢回——他说得对。
但工具发出去之后,最意外的不是 Star 数,而是我自己真的在用。
改个邮件模板,不再打开 VS Code;导个活动页 PDF,不用找在线转换网站传文件。自己写的东西自己天天用,那种感觉挺奇妙的——就像蹲在自己镶金边的马桶上,发现还真挺舒服。
既然用着用着就想改,改着改着就改出了第二版。
第二版改了什么
这次没有重写,没有推翻,就是在原有基础上把短板补上:
✏️ HTML 编辑器
- 新增 上传本地 HTML 文件,直接加载到编辑器
- 新增 导出编辑后的 HTML 文件下载
- 优化 依赖全拉到本地,不依赖任何 CDN
- 优化 PDF 导出替换了 Adobe 标识,干净无痕
- 优化 支持一键跳转到独立 PDF 转换工具
HTML 转 PDF
- 优化 同样换了本地依赖,不依赖 CDN
- 优化 兼容 GitHub Pages 部署,中英文双语
最核心的一个改动:从 CDN 依赖改成了本地依赖。
之前所有的库(html2canvas、jsPDF、Tailwind、Google Fonts)都是走 CDN 加载的。好处是省空间,坏处是没网就白屏。这次把总共 30 多个字体文件 + 3 个 JS 库 全部下载到本地仓库,以后打开即用,离线也能跑。
离线可用 — 这是纯前端工具的尊严。如果连打开个 HTML 文件都要联网,那和在线工具有什么区别。
项目现在长这样
从"俩 HTML 文件"变成了"中英文双语的完整工具集"。结构还是很简单,但不再简陋了。
AI 在这次改版中的角色
这次和 AI 的合作方式变了。
上次我是这么干的:
AI: 好的,加了
我: PDF 导出效果不对
AI: 改好了
这次变成:
AI: 因为 jsPDF 内部用了 CID 字体映射
我: 能不能去掉?
AI: 可以通过 output('arraybuffer') 拿到二进制替换
我: 不行,还是不行,你别绕圈子,直接把这个逻辑写成手写 PDF
AI: ✗ 手写 PDF 对象偏移算错了
我: 算了恢复原来的,别折腾了
AI: 好的恢复
看出来没?我有了判断力。我知道什么方案能走通、什么方案是死胡同、什么时候该放弃。
上次是"AI 写啥我用啥",这次是"AI 写了,我 review,不行打回重写"。角色从用户变成了技术负责人。
版本对比
| 功能 | v1.0 | v2.0 |
|---|---|---|
| 上传 HTML | ❌ | ✅ 本地文件直接加载 |
| 导出 HTML | ❌ | ✅ 下载编辑后的代码 |
| 中英文切换 | ❌ 只有中文 | ✅ 中英文双语 |
| 离线可用 | ❌ 依赖 CDN | ✅ 全本地依赖 |
| PDF Adobe 标识 | ❌ Chrome 提示 | ✅ 干净无痕 |
| GitHub Pages | ❌ 手动部署 | ✅ gh-pages 自动部署 |
给谁用
和上次一样,目标用户没变:
- 运营和产品 — 改个活动页排版不求开发,上传 → 拖拽 → 导出 PDF,一气呵成
- 前端新手 — 写完代码可视化看效果,不用打开 DevTools
- 需要离线工具的人 — 下载到本地,断网也能用
链接
GitHub 仓库 在线体验
中英文双语 · 离线可用 · MIT 开源
从"马桶镶金边"到"精装修",最开心的不是多了几个功能,而是证明了一件事:
用 AI 做的东西,自己真的会用、会改、会迭代。
这才是"AI 辅助开发"最真实的模样——不是一次生成就完事,而是像搭积木一样,一点一点修成自己想要的样子。
下一个版本会是什么样?我也挺期待的。
