你对 AI 说“做一张销售看板，要有收入数字、刷新按钮和导出功能”，它可以当场拼出页面。问题是，如果让模型直接写程序，结果可能忽好忽坏，也可能越过产品原有的设计和功能边界。Vercel Labs 发布的 json-render，试图把这件事变成一套可复用、可约束的前端工程流程，而不只是一段演示代码。
这里先说明信源边界：功能信息主要来自 json-render 官方仓库，尚无独立材料交叉验证；现有材料也不能证明“单日 585 星”或具体走红程度。
先给 AI 一盒限定积木
json-render 的核心思路并不复杂。开发者先准备一个 catalog，也就是允许使用的组件和动作目录。组件是按钮、表格、卡片等可复用的界面“积木”；动作则规定按钮可以触发什么，例如刷新数据或导出报告。AI 只能在这个目录里选择和组合，不能随意发明新组件或新动作。
模型输出的也不是可直接执行的 React 代码，而是一份符合预定义 schema 的 JSON。JSON 是一种用键值和数组描述结构的通用文本格式；schema 则像表格填写规则，规定哪些字段必须出现、每个字段能填什么。json-render 再把这份结构化描述交给真正的界面组件渲染。
换句话说，AI 负责“怎么摆”，开发者决定“有什么可摆、摆出来以后能做什么”。这层分工，是 json-render 相比“让模型直接写页面”的关键变化。
页面可以边生成边出现
据官方仓库，json-render 支持流式、渐进式渲染：模型还在继续输出时，已经生成的部分便可以先显示，不必等整份界面描述全部完成。官方还提供 React、Vue、Svelte、SolidJS、React Native、Next.js、Remotion、React PDF、React Email、React Three Fiber 和 Ink 等适配包，覆盖网页、移动端、视频、PDF、邮件、3D 场景和终端界面。
同一套 catalog 可以用于 React、Vue、Svelte、Solid 等 Web 框架以及 React Native。这里的“支持”应理解为项目提供了相应适配包，并不代表各平台的功能和成熟度完全相同。对于 React 用户，@json-render/shadcn 还提供 36 个预构建的 shadcn/ui 组件；这一数量同样来自官方自述，可能随版本变化。
为什么现在值得看
生成式 UI——模型根据用户意图动态选择内容和布局——一直有个两难：自由度太低，AI 只是替人填模板；自由度太高，输出又难以预测。json-render 选择了一条中间路线：让模型负责组合，让开发者保留边界。
据 The New Stack 报道，Vercel CEO Guillermo Rauch 称，这个方向背后已有约十年的思考，早于本轮大模型热潮，并把主要工作归功于工程师 Chris Tate。旧设想如今能够落地，关键在于模型已经可以生成结构化描述。
这也解释了它为何更像“框架”而非一次漂亮演示：它不只展示 AI 能生成界面，还提供组件目录、schema、中间描述、渲染器和多种平台适配，把生成过程接进现有前端工程。
局限与未知
- 官方宣称输出“安全、可预测”且每次符合 schema，但现有材料只有仓库自述。组件白名单和 schema 能提高可控性，不等于运行安全，也不足以证明每次输出都有效。
- 材料没有提供可靠性测试、失败率、性能数据或跨平台对比，无法判断它在复杂生产环境中的实际表现。
- 趋势榜来源只能说明项目受到关注，不能据此确认具体排名、单日新增星数或持续热度。