AI 画 UI 的乐高范式：Vercel json-render 如何用一份 catalog 把生成式 UI 关进笼子

2026 年 9 月，Vercel Labs 开源了一个叫 json-render 的框架。332 颗星一天涨上来，不是因为它能让 AI 画更炫的界面，而是因为它反其道而行——不让 AI 自由画，只让它从预定义的组件目录里选。

一个场景：让 AI 做仪表盘的两种命运

假设你让 AI 做一个销售仪表盘。里面要有 KPI 卡片、趋势图、操作按钮，还要能导出 PDF。

路径 A：让 AI 直接生成 HTML/CSS/JS。它会给你一个能跑的东西，但你不知道里面用了什么库、什么样式系统、按钮点击后触发什么。你得到的是一坨代码，能看，但不能维护。

路径 B：你先定义好一个组件目录——Card、Metric、Button、Chart——每个组件的 props 用 Zod schema 严格约束。然后让 AI 输出一个 JSON，里面指定用哪些组件、传什么 props。你拿到 JSON 后用自己的渲染器画出来。

json-render 选的是路径 B。它的口号是 "Generative UI framework"，但真正做的事不是"生成"，而是"约束"。

核心机制：catalog + schema + SpecStream

json-render 的三件套：

1. Catalog（组件目录）——你预先定义好所有可用组件和 action。每个组件有 Zod schema 描述 props，有 description 告诉 AI 这个组件是干嘛的。AI 只能从目录里选，不能自己发明新组件。

const catalog = defineCatalog(schema, {
  components: {
    Card: { props: z.object({ title: z.string() }), description: "A card container" },
    Metric: { props: z.object({ 
      label: z.string(), 
      value: z.string(), 
      format: z.enum(["currency", "percent", "number"]).nullable() 
    }), description: "Display a metric value" },
    Button: { props: z.object({ label: z.string(), action: z.string() }), description: "Clickable button" },
  },
  actions: {
    export_report: { description: "Export dashboard to PDF" },
    refresh_data: { description: "Refresh all metrics" },
  },
});

2. Schema 验证——AI 输出的 JSON 必须匹配 catalog 里定义的 schema。Zod 在运行时验证，不匹配就报错。AI 不能给你一个 format: "emoji" 的 Metric，因为 schema 里只允许 currency | percent | number。

3. SpecStream（流式渲染）——AI 的 JSON 输出不是等全部生成完再渲染，而是一边生成一边渲染。用户看到的是界面逐步"长出来"，而不是等 10 秒后突然出现。这背后是一个叫 SpecStream 的协议，处理 JSON 的部分解析和增量渲染。

乐高积木 vs 粘土

路径 A 让 AI 用粘土自由塑形——结果可能很美，也可能很丑，而且每次都不一样。路径 B 给 AI 一盒乐高积木——积木的形状是固定的，AI 只能决定怎么拼。

乐高范式的好处：

• 可预测：输出永远在 schema 范围内，不会出格
• 可维护：组件是你自己写的，AI 只是"拼装工"，不是"建筑师"
• 跨平台：同一套 catalog 可以渲染到 React、Vue、Svelte、Solid、React Native、PDF、Email、3D 场景、终端 UI

最后一点值得展开。json-render 的渲染层是可插拔的：

# React
npm install @json-render/core @json-render/react

# React Native
npm install @json-render/core @json-render/react-native

# PDF 文档
npm install @json-render/core @json-render/react-pdf

# HTML 邮件
npm install @json-render/core @json-render/react-email

# 3D 场景（含高斯泼溅）
npm install @json-render/core @json-render/react-three-fiber

# 终端 UI
npm install @json-render/core @json-render/ink

同一份 AI 生成的 JSON spec，在网页上是交互式仪表盘，在手机上是原生界面，在邮件里是静态排版，在终端里是字符画。组件实现变了，但 AI 生成的"意图"不变。

这就像同一份乐高图纸，用不同颜色的积木拼出来效果不同，但结构是一样的。

36 个预置组件 + shadcn/ui

json-render 不是只有空目录让你自己填。它内置了 36 个 shadcn/ui 组件——Card、Button、Metric、Chart、Table、Form 等——开箱即用。你可以在 5 分钟内搭起一个能用的 Generative UI 原型。

但真正的价值不是这 36 个组件，而是"catalog"这个抽象。你可以定义自己的组件目录：金融仪表盘组件、医疗记录组件、工业监控组件。AI 只能从你定义的领域组件里选，不会跑偏。

和其他 Generative UI 方案的对比

搜索 "Generative UI" 会找到 CopilotKit 的 AG-UI 协议、Vercel 的 AI SDK 自带的 RSC（React Server Components）流式渲染。json-render 和它们的区别：

json-render 的独特之处是把"AI 能做什么"和"AI 的输出怎么渲染"彻底解耦。AI 只负责生成 JSON spec，渲染器只负责消费 JSON spec。中间的"合同"是 schema，不是 React 组件树，不是事件流。

这个解耦的好处是：渲染器可以是任何东西——React、Vue、PDF、3D、终端。AI 不需要知道最终渲染到哪，只需要输出符合 schema 的 JSON。

为什么这个思路重要

过去两年，"AI 生成 UI"的探索主要沿着两条路：

1. 让 AI 生成代码（HTML/CSS/JS）——灵活但不可控，每次输出都不一样，难以维护 2. 让 AI 生成设计稿（图片/Figma）——好看但不能直接用，需要人工翻译成代码

json-render 选了第三条路：让 AI 生成结构化数据（JSON），数据被 schema 约束，渲染器消费数据。这条路牺牲了灵活性（AI 不能发明新组件），换来了可预测性（输出永远在 schema 范围内）和可维护性（组件是你自己写的）。

这背后的哲学是：生成式 UI 的未来不是让 AI 自由创作，而是给 AI 设定边界。就像自动驾驶汽车不能随便开上人行道一样，AI 生成的 UI 也不能随便突破设计系统的约束。

乐高积木比粘土更适合工程实践。粘土适合艺术，乐高适合量产。

什么时候该用，什么时候不该

该用 json-render 的场景：

• 内部工具/仪表盘——组件类型固定，AI 只负责"拼装"
• 跨平台输出——同一份 spec 要渲染到网页、手机、PDF
• 受监管行业——金融、医疗，UI 必须可预测、可审计

不该用的场景：

• 创意设计——AI 需要自由发挥，不能被 catalog 限制
• 营销页面——每次都要不一样，不能重复使用固定组件
• 原型探索——还在摸索 UI 形态，不适合固化 catalog

数据与生态

• 开源协议：Apache-2.0
• 语言：TypeScript
• 今日增长：332 stars
• npm 包：@json-render/core + 渲染层包（react/vue/svelte/solid/react-native/react-pdf/react-email/ink/react-three-fiber/next）
• 预置组件：36 个 shadcn/ui 组件
• Vercel Labs 出品：和 Next.js、AI SDK 同门

Vercel Labs 是 Vercel 的实验性产品线，json-render 和 AI SDK、v0 等产品同源。这意味着 json-render 不是独立项目，而是 Vercel 整个 AI 战略的一环——v0 负责"AI 生成代码"，json-render 负责"AI 生成结构化 UI spec"，AI SDK 负责"AI 调用基础设施"。

收尾：约束即自由

json-render 的核心洞察是：在工程场景下，约束不是限制，而是保障。AI 被关进 catalog 的笼子里，反而能更安全地被部署到生产环境。

这和编程语言的发展轨迹一样——从汇编（自由但危险）到 C（有约束但高效）到 Rust（强约束但内存安全）。每一次"加约束"都换来了一次"可部署性"的跃升。

生成式 UI 正在经历同样的转折。json-render 可能不是最炫的方案，但它可能是最容易被企业采用的方案。毕竟，企业不需要 AI 画出毕加索，只需要 AI 拼出正确的乐高。

项目地址：https://github.com/vercel-labs/json-render