Repo: RizzoTho/html-slides-annotator

前因

7月初，我参与了一场 Codex自动化分享，还提前做了一个特别多 Diagram 图的PPT，或者说 HTML 样式的slides。

看起来准备充分，但其实我因为首次公开分享创作成果而非常紧张。

我紧张的时候有一个习惯，就是不断地划拉、圈画我正在讲的内容。

可是浏览器上HTML本地文件可没有给PPT做标记的设计呀

当我想到这个问题的时候，我就自然而然地决定了，我要给自己做一个浏览器HTML标注插件。

功能设计

基础功能

我对标注只有三个功能需求，箭头、铅笔（自由标注）和方形框选，外加三种标注颜色、三种粗细选择。Claude 自然给我提供了一个解决方案——tldraw SDK。我对技术栈选择向来是一个凡夫俗子的态度，只看代码量和运行内存；tldraw 看起来没有要触犯这两个决策的样子，遂接受。

翻页清除

另外一个关键功能是，这个标注器是一次性的，它并不真正地改变 HTML 的内容。于是我认为可以随翻页键直接对页面上的标注信息进行清除。毕竟任何的翻页动作，其实都是要改变页面信息，所以可以默认可以直接清除所有信息。

工作现场

带着这个标注器，我颤颤巍巍地完成了演讲。标注功能其实完全能符合一个人演讲过程中的写画需求，倒不如说其实紧张时标注过多还是容易走神。

唯一不那么完美的地方是，tldraw SDK 会在右下角保留一个需要 license 的浅色水印，或者说牛皮藓。上面写着“Get a license for production”。

自带解决方案的绊脚石

Claude 劝我没有必要为了一个本地个人工具走销售流程，而我同时也发现，短暂申请的 hobby license 有效期只到10月份。这就是为什么我决定裁撤 tldraw SDK，转向perfect-freehand。

perfect-freehand 是 tldraw 作者自己开源的手绘笔迹算法,MIT 协议,几 KB。tldraw 画笔那种"有压感、笔锋自然"的效果就是perfect-freehand 的效果。更换这一块方案的代价不高，所以欣然和tldraw说了再见。

一些功能优化的思考

后续没有增加太多的功能，主要优化了toolbar的ui：

1. 将toolbar从顶部移动到了底部：演讲场景下鼠标常在下半屏活动，工具栏放底部居中可能更顺手，也更少遮挡PPT标题；

2. 手动清屏的 clear 按钮在 hover toolbar 的时候再出现。

对一个标注器的功能，还能怎么样地优化呢？我总是用户往往更青睐于设计宜人性高，功能克制、不屎山臃肿的产品。对于这样的本地标注器，现在想来暂时就很好了。