他把AI模型塞进浏览器，只为做一个更好用的Figma插件

在大多数人还在纠结“要不要上云”“服务器成本怎么算”时，这位Figma插件作者直接反其道而行：不租服务器、不跑云端，把AI模型完整搬进浏览器。本场 Config 2024 的分享，给所有AI从业者上了一课——真正的产品突破，往往来自工程上的“偷懒”。

最反直觉的一幕：AI 插件，居然可以没有服务器

在 Config 2024 的舞台上，Lichin Lin 抛出的第一个“炸点”并不是炫技，而是选择：他的图像抠图插件 Cutout，没有后端服务器。没有 GPU 云实例，没有按次计费的 API，也没有用户图片上传到远端。整个图像分割模型，直接跑在用户浏览器里。

这在今天几乎是反直觉的。行业默认的路径是：模型在云端，客户端只是 UI。但 Lichin 遇到的现实问题非常具体——自己掏钱跑 AI 服务器太贵，而“按用量收费”对插件用户来说几乎不可接受。于是他干脆换了个问题问法：如果模型不在云上呢？

这个选择直接改变了产品形态：成本几乎为零、隐私天然更好、用户即点即用。代价也很明显——一切计算压力都落在浏览器上，而这正是他后面所有工程技巧的起点。

Curve Text 的真正秘密：别高估“算法”，先用好平台能力

在讲 AI 之前，Lichin 先分享了一个完全不同风格的插件：Curve Text，一个能把文字沿任意路径弯曲的 Figma 插件。它看起来像“几何算法很复杂”，但真相恰恰相反。

灵感来自一个 SVG 业余项目。他发现，在 SVG 世界里，文本沿路径排版早就不是难题。关键不是重新发明算法，而是：如何拿到每个字符的精确位置、尺寸和旋转角度。

答案出乎意料地简单——浏览器原生 HTML API。通过获取单个字符的起止位置，就能用基础数学算出宽高和旋转角度。剩下的工作，只是把这些信息一一映射成 Figma Canvas 里的文本节点。

Lichin 总结得很直白：“有时候你不需要过度设计，一个足够简单的方案，就能完美解决问题。”这句话对插件开发者尤其残酷也尤其真实：真正的难点，往往不是你以为的那个。

10 行代码跑 AI：Transformers.js 改变了游戏规则

Cutout 插件的转折点，来自 Hugging Face 的一个 Demo。通过 Transformers.js，这个与 Python Transformers API 几乎等价的库，预训练的分割模型可以直接在浏览器中运行。

流程简单到让人不安：加载模型，传入图片和点击点，模型返回 mask。十几行代码，一个完整的图像分割管线就跑起来了。最重要的是——没有服务器。

但问题马上出现：浏览器会卡死。AI 推理是重活，直接跑在主线程上，Figma 会直接“假死”。解决方案不是换模型，而是换线程。

Web Worker 成了关键组件。Lichin 把整个分割推理流程丢进 Worker，让主线程只负责 UI。结果很干脆：界面不再冻结，插件体验从“实验品”变成“可用工具”。这是典型的工程思维胜利——不是模型更强，而是调度更聪明。

真正的加速器不是云 GPU，而是 WebGPU

如果说在浏览器跑 AI 已经够激进了，那下一步更夸张：用 WebGPU。

在展示的 benchmark 中，同样的推理任务，WebGPU 相比 CPU 可以快 10 倍以上，在某些设备上甚至接近 100 倍。Cutout 插件已经切换到 WebGPU，速度直接提升 5 倍。

这意味着什么？意味着“客户端 AI”不再只是玩具。随着浏览器、硬件和模型持续成熟，过去只能在云端完成的任务，正在被一点点拉回用户设备。

更重要的是，这条路径天然降低成本、提升隐私、减少架构复杂度。对独立开发者和小团队来说，这是以前根本不存在的选择。

总结

这场分享真正打动人的地方，并不在于某个具体插件，而在于一种思路转变：别急着上云，先看看浏览器能做到什么。对 AI 从业者来说，这意味着产品设计的自由度正在扩大；对开发者来说，工程能力正在重新成为差异化核心。

如果你在做工具、插件或垂直 AI 应用，Lichin 的路径值得认真研究：先用最便宜、最简单的方式跑通价值，再用工程技巧榨干平台潜力。也许下一次让人“哇哦”的产品，并不是更大的模型，而是更聪明地使用现有技术。

关键词： 客户端AI， Figma插件， Transformers.js， WebGPU， 图像分割

事实核查备注： 需要核查：1）Transformers.js 与 Python Transformers API 等价性的官方表述；2）WebGPU 在不同设备上 10-100 倍加速的具体 benchmark 数据来源；3）Cutout 插件当前是否已在 Figma 社区公开并使用 WebGPU。