前阵子逛 Product Hunt 的时候,我发现当天第一名的产品是 Vercel 的一个新功能,叫 Vercel Drop。

这个功能的用法很直接:把一个单文件或者一个文件夹直接拖进页面,它就帮我们完成部署。比如我们有一个单独的 HTML 文件,拖进来点击一下部署,这个 HTML 就上线了。

先给不了解 Vercel 的同学简单介绍一下。Vercel 是一个用于构建前端站点的平台,它可以非常方便地和 GitHub 连接在一起。我们每次推送代码之后,它就自动在平台上完成构建。相比自己使用云服务器部署前端,它会方便一些,因为平台内置了很多功能。

一个看起来只是把网站用拖拽形式上线的功能,为什么能拿到 Product Hunt 的第一名?我觉得主要原因是,在 AI 时代还没有一个非常方便的分发 HTML 的平台。
AI 生产的 HTML 卡在分发这一步
我们现在会很习惯使用 AI Agent 去生产各种 HTML 文件。HTML 相比 PPT 和 Word 这类文档,对 AI 来说更加友好;相比 Markdown,它展示的信息又更丰富一些,可以实现更完整的样式,AI 对这套语法也比较熟悉。我视频里演示用的那份 PPT,本身就是一个 HTML。

但是我们在本地写好一个 HTML 之后,怎么分发给别人呢?假设我做好了这个 PPT 想要分享,大概率是把它丢进微信文件传输助手,到了现场再打开。如果写了一个 PRD 方案想分享给同事,HTML 的形式就没有办法方便地打开——微信和很多 IM 工具都不支持直接查看 HTML,在移动端直接打开一个 HTML 也没那么方便。换用飞书云文档这一类产品,相比 HTML 又多绕了一步。

在 Claude Code、Codex、Cursor 这些 AI Agent 流行之后,写一个 HTML 的速度非常快,大家每天生产的 HTML 也很多。我自己做设计的过程中,也经常把 HTML 当作和 AI Agent 交流的中间产物。这时候如果想和几个同事随时分享一个 HTML,甚至不断迭代它,会发现这件事的成本很高。

在 Vercel 出这个功能之前,如果让我自己解决,我可能会自己维护一个 GitHub 站点,通过 Git 的方式持续迭代这个 HTML。Vercel Drop 出来以后,这件事就简单很多了。
Vercel Drop 的使用过程
这里演示一下。先找到 HTML 的原始文件,把它拖进页面。

拖进来之后,页面会让选择部署到哪个项目下面,我这里选择自己的项目,再填一个项目名称,然后点击部署。

部署完成之后,这个 HTML 就已经公开了。

进入 Dashboard 可以看到,Vercel 给项目分配了一个自己的域名。

接下来如果想把这个 PPT 分享给任何人,只需要把这个域名发给他,对方打开就是在线的 HTML 了。

需要注意的是,Vercel 分配的域名目前在国内可能无法访问。如果团队里的人有办法访问这类网站,他们都能正常看到内容。
两点额外的观察
对非开发者来说,Git 那一套还是比较难学习的。Vercel 这样的平台类似于一个非常轻量的云盘,团队可以把一些共有的东西直接托管上去,AI Agent 又能通过某些 Skill 或者 CLI 的方式把这些内容拉取下来,整体的协作体验会好很多。
另外 Vercel 还提供了一个 Coding Agent 插件,支持 Claude、Cursor 和 Codex。安装之后,AI Agent 想要分发 HTML 就更简单了。安装命令在部署成功的页面上可以直接复制:
npx plugins add vercel/vercel-plugin
我后续也很期待国内有产品能提供类似的功能,拖一个 HTML 进去就直接公开。毕竟目前 Vercel 的域名有无法访问的风险,用起来没有那么方便。如果后续大家想给团队里的同学或者外部分发自己的 HTML,可以使用 Vercel Drop,直接把文件拖进去就可以了。
