把一个写好的下拉框直接丢给 AI 编程助手，往往是个馊主意。代码是能跑起来，但只要你想改点非常规交互，AI 就会在死板的组件模板里撞墙；反过来让它从零手写，焦点管理、键盘导航和 ARIA 无障碍规范又会漏得像筛子。2026 年 11 月 12 日，Vercel Labs 在 npm 上以 Apache-2.0 协议开源了 0.1.0-beta.1 版本的 UI SDK（GitHub 仓库 main 分支的 packages/core/package.json 版本号随后已推进至 0.1.0-beta.2）。表面看，这是前端圈又多了一个跨框架无头组件库；往深处拆，Vercel 是在重写一套面向 Agent 的前端双端协议：编译期给 AI 递上原子积木，运行期给 AI 留好接管网页的后门。
先把这组开源包的硬底子摊开。UI SDK 一口气发了 6 个 npm 包，底座是 @ui-sdk/core，外加 5 个薄适配器：@ui-sdk/react、@ui-sdk/vue、@ui-sdk/svelte、@ui-sdk/solid 和 @ui-sdk/web。仓库里塞进了 10 个分类、50 多个底层行为和 51 个组件模块，无需 GPU 就能在现代浏览器里跑，还附带了一份可选的 web.css 默认样式。它的胃口很大，同时对宿主环境挑剔得近乎苛刻——强制要求 React 19+、Vue 3.5+、Svelte 5.33+ 或 Solid 2.0.0-rc.14+。
拆碎组件：为什么给 AI 递积木而不是给成品
前端无头组件库（Headless UI）此前已经走过两代。第一代是 Radix Primitives、React Aria 和 Base UI，给人类程序员提供不带样式的成品组件或 Hooks，大多绑死在 React 船上；第二代是 Zag.js 及其上层的 Ark UI，用有限状态机把交互逻辑抽出来，靠运行服务和 connect(service, normalizeProps) 生成元素属性，实现了跨框架复用。
到了 UI SDK 这里，Vercel 选了另一条路。它不用状态机那套连接机制，而是用 definePrimitive 把更小粒度的行为塞进带有状态、API 和插槽（slots）的原语里，各框架再用 createParts 渲染出完全一致的结构。比如写一个下拉选择框，它不给 Agent 成品的 Select，而是给 createPopup（弹层定位）、createSelection（单选多选）和 createTypeahead（输入跳转），再加上 createRovingFocus（方向键移动焦点）或 createFocusRecovery（焦点恢复）。用同一套零件，AI 既能拼出常规的日期选择器、树形菜单，也能拼出人类还没命名的混血组件。
为了让 AI 顺手接过这些零件，安装引导直接做成了一段提示词。一行 npx skills add vercel-labs/ui --skill ui-sdk 敲下去，它会装好包并在 AGENTS.md 里写下指引，让智能体去读内置的 skill 和 llms.txt。但我不太买账的是把这套配置吹成独家创举。翻开竞争对手 React Aria 的文档就会发现，Adobe 团队早已悄悄上线了 MCP 服务器、Agent Skills 和 llms.txt 支持。真正拉开差距的不是文档喂饭技巧，而是底层到底用行为原语组装还是用状态机。
况且，自由拼装是有代价的。UI SDK 并不能变出全自动的无障碍合规魔法——自定义组合组件时，作者依然得自己正确连接行为，手动补齐准确的名称、角色、说明和验证语义。官方为此专门配了一个验证键盘行为、ARIA 关系和服务端渲染属性的测试工具包。真要论复杂无障碍场景、移动端手势和国际化测试的深厚家底，处于早期阶段的 UI SDK 离 React Aria 和 Radix 差着好几年的实战踩坑距离。
- 风险.UI SDK 的无障碍合规并非全自动兜底，AI 自由拼装自定义组件时若漏配角色与验证语义，仍会产出残障用户无法使用的半成品。
砍掉 69% 调用：跑分奇迹与实验盲区
如果只解决写代码，这充其量是个趁手的脚手架。UI SDK 真正狠的一刀，砍在网页运行时的 Agent 交互上。
过去让浏览器 Agent 操作一个网页，它得先抓取几万字符的完整 DOM 树，或者高频截图走视觉识别，Token 烧得心疼，链路又长又慢。UI SDK 在 @ui-sdk/core/agent 里导出了一个 createAgent() 桥接器，在页面渲染前就埋好内应，并支持通过 WebMCP 向浏览器注册工具。Agent 进场后不用再摸黑爬 DOM，直接调三个结构化接口就行：agent.snapshot() 列出所有组件状态与可用动作，query 负责查询，agent.act() 直接传入动作（比如用 setValue 重命名项目）。宿主应用还能传入 allow 回调做权限拦截，或者在变更回调里识别 source: "agent" 并随时掐断危险操作。
Vercel 用 Claude Code 调未具名版本的 Sonnet 跑了一个项目设置任务（改名、改成员、改通知并保存），拿 UI SDK 桥接器跟传统浏览器工具连跑 3 次取中位数。账面数字漂亮得惊人：工具调用从 16 次砍到 5 次（降幅 69%），读取文本从 39.8k 字符跌到 6.8k（降幅 83%），耗时从 41 秒缩到 16 秒（快了 61%），单次花费从 0.073 美元降到 0.032 美元（省了 56%）。
但凡做过严谨基准测试的人，看一眼小字注释就会皱起眉头。这场测试不仅样本薄得只有 1 个任务，更致命的是对照组换了另一个未具名的组件库。实验同时改变了交互通道和底层 DOM 结构两个变量，你根本没法证明省下来的 25 秒里，到底有多少归功于 createAgent 桥接器，又有多少是因为对照组原本的组件 DOM 过于臃肿。拿带变量污染的数据当主打招牌，说服力得先打对折。
网页的双重受众：给人类看皮囊，给机器留接口
跳出跑分争议，我更在意的是这件事背后的行业风向。
十九世纪末铁路网铺开时，真正让货运效率爆发的不是蒸汽机车头多烧了几铲煤，而是全美统一了标准轨距和自动车钩，省去了跨线人工倒装的笨功夫。《淮南子》里讲，匠人造车，不在于寸寸雕琢木料，而在于合乎规矩准绳。今天的前端基建也在经历一场类似的轨距改造——只不过过去三十年的网页只服务人类眼睛，接下来的网页必须同时服务人类和 Agent。
靠截图和爬 DOM 操作网页是权宜之计，组件自带机器接口才是正道。
来看看棋盘上的几大主流方案目前各自站在什么位置：
| 对比维度 | Vercel UI SDK | Radix / Base UI | React Aria | Ark UI (Zag.js) |
|---|---|---|---|---|
| 核心抽象 | 50+ 原子行为与插槽原语 | 无样式成品组件 | Hooks 与无头组件 | 有限状态机驱动 |
| 框架支持 | React 19+ / Vue / Svelte / Solid / Web | 仅限 React | 仅限 React | React / Vue / Solid / Svelte |
| Agent 工具链 | Skill / llms.txt / createAgent / WebMCP | 未公开披露 | MCP Server / Skill / llms.txt | 未公开披露 |
| 版本成熟度 | 0.1.0-beta.1 / beta.2 | 1.8.1 / 1.9.0 稳定版 | 1.22.1 稳定版 | 5.40.0 稳定版 |
对企业前端架构师来说，现在立刻把存量项目切到 UI SDK 无异于给自己找麻烦。React 19+ 和 Solid 2 RC 的严苛依赖直接把绝大多数生产环境挡在门外，Beta 阶段的 API 随时可能推翻重来，日常业务老老实实用 React Aria 或 Ark UI 依然更稳妥。
但对做 AI 编程工具和浏览器 Agent 的团队而言，createAgent 提供了一个极具启发性的样板。与其在模型端绞尽脑汁训练 AI 看图找按钮，不如在前端组件库底层直接把状态快照和动作接口暴露出来，再用 allow 回调把住权限关口。接下来值得盯紧两个信号：一是 WebMCP 浏览器标准能不能真正铺开，二是 React Aria 和 Radix 会不会跟进内建这种运行时桥接层。当组件库把机器接口变成标配，前面那个让 AI 抓瞎的下拉框难题，才算真正翻篇。