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

Product Hunt 当天榜首是 Vercel Drop

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

Vercel Drop 的页面,拖入文件即可部署

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

Vercel 官网

一个看起来只是把网站用拖拽形式上线的功能,为什么能拿到 Product Hunt 的第一名?我觉得主要原因是,在 AI 时代还没有一个非常方便的分发 HTML 的平台。

AI 生产的 HTML 卡在分发这一步

我们现在会很习惯使用 AI Agent 去生产各种 HTML 文件。HTML 相比 PPT 和 Word 这类文档,对 AI 来说更加友好;相比 Markdown,它展示的信息又更丰富一些,可以实现更完整的样式,AI 对这套语法也比较熟悉。我视频里演示用的那份 PPT,本身就是一个 HTML。

演示用的 PPT 本身就是一个 HTML 文件

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

大部分 AI 写出的 HTML 仍然保存在本地

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

AI Agent 让 HTML 的生产速度大幅提升

在 Vercel 出这个功能之前,如果让我自己解决,我可能会自己维护一个 GitHub 站点,通过 Git 的方式持续迭代这个 HTML。Vercel Drop 出来以后,这件事就简单很多了。

Vercel Drop 的使用过程

这里演示一下。先找到 HTML 的原始文件,把它拖进页面。

在 Finder 里找到 HTML 文件拖入页面

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

选择项目和项目名称后点击 Deploy

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

部署成功页面,附带 Coding Agent 插件的安装提示

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

Dashboard 里显示部署状态和分配的域名

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

部署后通过域名访问的线上 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,直接把文件拖进去就可以了。