为智能体时代而生的界面行为
界面行为，
而非样式。
ui-sdk 是一套无样式界面行为库：键盘导航、焦点管理、选择、弹出层、拖放与完整 ARIA 语义。同一套行为运行在 React、Vue、Svelte、Solid 与 Web Components 中，视觉呈现完全交给你的设计系统。
- 55 个无样式组件
- 完整 ARIA 与键盘模型
- 5 大框架通用
- React · Vue · Svelte · Solid · Web
- WebMCP 原生桥接
- createAgent + registerTools
- 正在读取组件状态…
试着调节左侧控件，或交由右侧智能体执行。
01 · 分层架构
行为层与视觉层彻底解耦
@ui-sdk/core 掌管状态机、键盘循环与无障碍语义，框架包仅做轻量绑定，组件自身零预设样式。点按层级切换架构视图，或直接开关右侧控件样式。
// @ui-sdk/core — 行为与状态输出（不依赖样式或框架）
<Toggle aria-pressed="true" data-pressed="" />
<Select value="sin" label="新加坡 · sin1" />02 · 跨框架
一次编写，五个框架通用
行为与框架无关。每个组件都从独立入口导入，组合方式在各框架间保持一致。切换技术栈时，交互逻辑、键盘模型与无障碍语义原样保留。
import { Toggle } from "@ui-sdk/react/toggle"
export function Bookmark() {
return <Toggle>书签</Toggle>
}import { Toggle } from "@ui-sdk/solid/toggle"
export function Bookmark() {
return <Toggle>书签</Toggle>
}<script setup>
import { Toggle } from "@ui-sdk/vue/toggle"
</script>
<template>
<Toggle>书签</Toggle>
</template><script>
import { Toggle } from "@ui-sdk/svelte/toggle"
</script>
<Toggle>书签</Toggle><script type="module" src="https://ui-sdk.dev/web.js"></script>
<link rel="stylesheet" href="https://ui-sdk.dev/web.css" />
<ui-toggle><button>书签</button></ui-toggle>03 · 智能体桥
智能体直接驱动界面
每个组件都暴露语义化的动作与状态快照。智能体不必截图、点击坐标或解析 DOM，而是调用 setChecked、setValue 这样的动作，一次 act 完成多步操作。
同一个界面，人类用键盘和指针操作，智能体用 API 操作。两者读写的是同一份状态，并通过 allow 守卫敏感动作。
import { createAgent } from "@ui-sdk/react/agent"
const agent = createAgent()
// 一次 act 调用，驱动多个组件
await agent.act({
steps: [
{ ref: "启用通知", action: "setChecked", args: [true] },
{ ref: "通知渠道", action: "setValue", args: ["email"] },
],
})import { createAgent } from "@ui-sdk/react/agent"
const agent = createAgent({
// 重要操作触发 data-agent-confirm 人工确认
allow: ({ component, action, confirm }) => {
if (confirm) return window.confirm(confirm)
return component === "select" || action === "setChecked"
},
})
// 组件回调也可检查来源并在应用前拦截：
// onValueChange={(v, details) => details.source === "agent" && details.cancel()}同一任务下，智能体桥与截图点击方案的基准对比：
工具调用
−69%165
文本 token
−83%39.8k6.8k
耗时
−61%41s16s
成本
−56%$0.073$0.032
来源可追溯。每次变更事件均携带 details.source（"human" 或 "agent"），界面与审计日志能清晰区分人的直接操作与智能体调用。
设计哲学
外观完全交还给你的设计系统，行为、无障碍与智能体接口由 ui-sdk 守住。
04 · 核心行为
每个细节都已就位
弹出层进入浏览器顶层、焦点锁定、Esc 关闭、方向键导航、工具栏切换与屏幕阅读器播报。下面都是真实组件，试着操作它们。
支持方向键导航、键入检索与 Esc 关闭。
基于锚点定位，点击外部或按 Esc 轻关闭。
堆叠队列管理，支持悬停展开、滑动清除与撤销。
进入浏览器顶层渲染，打开锁定焦点、关闭自动还原。
高风险操作显式确认，禁用外部点击误关闭。
ui-sdk 与常见带预设样式的组件库有什么本质区别？
ui-sdk 专注交付无样式的交互原语与状态机（键盘导航、焦点管理、顶层弹出层、WAI-ARIA 语义与表单状态），不注入预设 CSS，也不绑定 Tailwind 或特定 CSS-in-JS 方案。视觉层完全留给你的设计系统与 CSS Token。
为什么同一套行为可以跨 React、Vue、Svelte、Solid 与 Web Components 运行？
所有组件的状态模型、ARIA 属性计算与事件规约都写在零依赖的 @ui-sdk/core 中；各框架适配器只负责把这些核心部件装配为对应框架的响应式原语，因此交互习惯、快捷键与回调签名在技术栈之间保持一致。
让智能体直接驱动界面，会不会越权操作或读取敏感输入？
不会。bridge 提供 allow 权限回调、组件级 data-agent-confirm 二次确认、data-agent-hidden 区域屏蔽以及 data-agent-secret 脱敏（密码、银行卡号、一次性验证码默认输出为 "[redacted]"）。所有变更回调中的 details.source 都会标识 "agent"，随时可调用 details.cancel() 拦截。
能直接接入大模型 Tool Calling 或浏览器 WebMCP 吗？
可以。createAgent 暴露了 snapshot()、act() 与 query() 等结构化方法，可直接按 JSON Schema 接入模型工具链；在支持 document.modelContext 的环境中，使用 registerTools(agent, { allow }) 即可注册原生 WebMCP 工具并逐条审批动作。
旧项目需要一次性重构吗，还是可以按组件渐进接入？
完全支持按需渐进引入。每个组件都有独立子路径入口（如 @ui-sdk/react/select、@ui-sdk/react/dialog），未引用的组件与智能体模块不会被打包。建议优先替换组合框、弹出菜单或模态框等高交互复杂度控件。
文档中的智能体基准对比数据是如何得出的？
在同一多步界面任务下，将传统的「截图识别 + 坐标点击」路径与 ui-sdk 的结构化动作执行（agent.act）对比测得：工具调用从 16 次降至 5 次（−69%），文本 token 从 39.8k 降至 6.8k（−83%），耗时从 41s 降至 16s（−61%），成本从 $0.073 降至 $0.032（−56%）。