Vercel UI SDK 开放测试：不让 Agent 直接写组件，而是给它一套「行为原语」

要点

• Vercel Labs 的 UI SDK 进入 public beta：仓库 vercel-labs/ui，Apache 2.0，已发 @ui-sdk/*@0.1.0-beta.2（2026-11-13），文档在 ui-sdk.dev。
• 定位不是组件库，是行为库：@ui-sdk/core 提供键盘导航、焦点管理、选择、关闭（dismissal）、弹层、拖拽与缩放，以及这些行为所需的 ARIA。
• 五套适配器：React / Vue / Svelte / Solid / Web Components，共用同一套 parts 命名。
• API 的核心三件套是 definePrimitive（声明 state / api / slots）、createParts（映射到具体标签）、以及 slot() 里的 attrs / on / press / bind 声明。
• 仓库把「给 agent 用」写在明面上：简介是「A library of behaviors for agents to build the next generation of user interfaces」，并附 npx skills add vercel-labs/ui --skill ui-sdk 一行装进 agent 技能库。
• 仓库 topics 里带 mcp / webmcp，说明路线里包含了「让 agent 在浏览器里直接操作 UI 能力」这一层。
• 仍在 beta：官方 beta 条款写明框架、API、文档与行为在 GA 前都可能变。

它要绕开的那个坑

让 AI 写界面，现在的通行做法是「让模型直接生成整段组件代码」。在 React 生态里这套很顺，因为模型见过太多 React 代码。但只要换框架、换设计系统、换可访问性要求，同一条 prompt 的产出质量就会断崖式下跌——模型写得出「看起来对」的 div 组合，写不出「Tab 键能正确循环、Esc 能关弹层且焦点回到原处」。

UI SDK 的解法是把界面拆成两层：

一个 primitive 的写法大致是：声明一个 state、一个给外部调用的 api、以及若干 slot，每个 slot 描述它的属性怎么来、事件怎么接、什么时候出现。上面那段官方示例里的 searchField 就包含三个 slot：input（绑值）、clear（值为空时隐藏、按下清空、绑定焦点回收）。

写完之后 createParts(searchField, { input: "input", clear: "button" })，在 React 里得到 parts.Root / parts.Input / parts.Clear，在 Vue 里是同一套名字，只是模板写法不同。agent 需要记的规范因此收敛成一份，而不是五份。

为什么这件事对「AI 编程」有分量

过去两年 AI 编程的竞争点一直在「模型能写多复杂的代码」。但真正拖慢交付的不是逻辑，是界面细节：一个下拉框要能键盘选、能 Esc 关、点到外面关、关闭后焦点回到触发器——这些每家都写过，每家都写错过，模型每次生成都要重新赌一次。

把这类「已知正确的行为」沉淀成库，等于把模型的不确定性从「行为是否正确」挪到「布局是否好看」。前者是可验证的，后者是可改的。

这也解释了它为什么强调 skill：npx skills add vercel-labs/ui --skill ui-sdk 这条命令把「这个库怎么用」写进 agent 的上下文，而不是让模型去猜 API。给 agent 一份可执行的规范，比给它一百个示例更有用——这条思路跟站内 Agent Skills 讨论的是同一件事。

三个现实约束

① 它不解决设计问题。 行为对了、ARIA 对了，出来的界面可能依然难看。它把「可访问性」这件事从「每次都要想」变成「默认就对」，但不负责审美。

② beta 意味着 API 会变。 0.1.0-beta.2 这个版本号本身就说明了成熟度。官方 beta 条款写得很直白：框架、API、文档、行为在 GA 前都可能改。拿它做内部工具或原型没问题，做要维护三年的产品要么做好迁移准备，要么等 GA。

③ 学习成本从「写代码」变成了「读懂 primitive」。 README 里那句话挺诚实：「你不需要学会怎么写这些，你的 agent 会」。但前提是你得能审——代码要 review，primitive 的 state 与 slot 边界如果设计错了，行为层的正确性就白给了。这跟 Antigravity 的 workflow 脚本 是同一个模式：模型生成、人来审，审的能力没被替代。

对开发者的影响

• 做内部设计系统的团队值得先试。 你们最痛的一定是「每个新组件都要重新实现一遍键盘与焦点」，这正是它要吃掉的部分。做法上可以先拿一个高频组件（Combobox 或 Dialog）做对照，比一比接入前后的代码量与 a11y 缺陷数。
• 跨框架产品线会直接受益。 同一套 primitive 在 React 与 Vue 里生成同名 parts，意味着行为 bug 只需修一次。做「Web 端 + 嵌入式 SDK + 小程序 WebView」三条线的团队，这是实打实的减法。
• AI 生成 UI 的评估标准要改。 以前测「模型能不能生成一个可用的表单」，现在该测「模型能不能按 skill 规范组装出行为正确的表单」。后者可自动化验证（键盘可达、焦点顺序、ARIA 角色），前者只能靠人看。
• 别急着替换现有组件库。 它跟 shadcn/ui、Radix 是不同层的东西：那些给你组件与样式，它给你行为原语。真要组合，把它的行为塞进你现有的样式体系里，比推倒重来划算。

AI 之家 观点

这条东西的重要性不在「Vercel 又开源了一个库」，而在它给出了AI 生成界面的一个可行分工：模型负责组合与布局，库负责正确性。

过去一年所有的「AI 生成 UI」demo 都有同一个隐疾——demo 好看，上线就露馅，因为行为细节是长尾。UI SDK 等于把这个长尾收进库里，让模型只做它擅长的那部分。这个思路比「让模型更强」更可复制，也更容易被别的团队学走。

但它的赌注也很明确：赌 agent 会成为写界面的主要作者。如果两年后人们还是手写组件，这个库就只是一个 API 设计得比较讲究的行为层；如果 agent 真的接管了大部分 CRUD 界面，它就是那个「标准化接口层」。

值得留意的一个信号是仓库 topics 里的 webmcp——如果浏览器的 UI 能力未来能被 agent 直接调用，那么这个「行为原语」层就会变成 agent 与界面之间的通用语。那时它就不再是个 UI 库了。

相关阅读

• 编程工具：v0 · Cursor · Claude Code · Google Antigravity
• 概念：AI 编程 · Vibe Coding · Agent Skills · MCP 协议
• 同期动态：Antigravity Dynamic Workflows · ChatGPT Wallet 与 Agent 付款 · Codex rust-v0.167.0

来源

• { title: "vercel-labs/ui 仓库（Apache 2.0，4,506 stars，创建于 2026-10-26，最近推送 2026-11-14；topics 含 mcp / webmcp）", url: "https://github.com/vercel-labs/ui" }
• { title: "UI SDK README（实取：behaviors 层与五框架 createParts 用法、beta 条款、npx skills add 命令）", url: "https://raw.githubusercontent.com/vercel-labs/ui/main/README.md" }
• { title: "npm 发布记录：@ui-sdk/react / vue / svelte / solid / web 0.1.0-beta.2（2026-11-13）", url: "https://github.com/vercel-labs/ui/releases" }
• { title: "UI SDK 官方文档（ui-sdk.dev，实取可达）", url: "https://ui-sdk.dev/docs" }