打开网易新闻 查看精彩图片

今年1月,Vercel在GitHub扔了个新项目,三个月攒了1.3万星,200个版本迭代。这不是什么UI组件库,而是让AI直接接管界面渲染层的框架——json-render。

简单说,以后你打字描述需求,AI输出JSON,页面自己就长出来了。

前端圈子里有个老梗:产品经理和工程师之间隔着一整个太平洋。需求文档写三天,评审会吵两小时,最后实现出来还是不对味。json-render想拆掉这堵墙,但不是用低代码那种拖拖拽拽的方式,而是让大模型直接成为"界面生成器"。

Guillermo Rauch的表态很直接。这位Vercel CEO告诉The New Stack,这技术"把AI直接插进渲染层",用了个很重的词——"非常颠覆"。

它到底怎么工作的

它到底怎么工作的

传统AI生成界面,常见套路是输出HTML字符串或者JSX代码。json-render换了个思路:开发者先用Zod模式定义一套"允许使用的组件清单",比如按钮、表单、图表,甚至自定义的业务组件。大模型被约束在这个清单里,输出的是扁平JSON树,每个节点都是类型化的元素引用。

Renderer组件拿到这份JSON,实时映射成真实UI。关键是"渐进渲染"——模型一边流式输出,页面一边逐块组装,用户不用干等完整响应。

这个设计有个精妙之处。JSON比HTML/JSX对AI更友好,结构清晰、类型安全、不易出现语法错误。同时,开发者牢牢把控渲染权,AI只能在你划定的 sandbox 里玩耍,不会突然生成个不明所以的 div 嵌套十八层。

目前官方支持的渲染器已经覆盖React、Vue、Svelte、Solid、React Native。三个月200个版本,迭代速度堪比创业公司的生死冲刺。

打开网易新闻 查看精彩图片

为什么偏偏是JSON

为什么偏偏是JSON

做过AI应用开发的都知道,让大模型直接写代码是场噩梦。括号不匹配、标签没闭合、变量未定义——这些人类秒懂的错误,AI能循环修正十轮。

JSON的严格结构天然适合约束生成。Zod模式更进一步,把组件props的类型、必填项、枚举值都锁死。AI生成的每个字段都要过类型检查,通不过就当场报错重试。

这种"有限自由"的设计哲学,和Vercel自家的AI SDK一脉相承。不是让AI无所不能,而是给它清晰的边界和工具,反而能提升可靠性。

渐进渲染则是另一个体验杀器。大模型生成复杂界面可能要几秒甚至十几秒,传统做法等全部内容到位再一次性展示,用户盯着空白页面怀疑人生。json-render把JSON流切成片段,解析到一个节点就渲染一个节点,感知上的"首屏时间"被大幅压缩。

换句话说,它把AI的"思考过程"可视化成了界面的生长过程。

前端工程师的饭碗还稳吗

前端工程师的饭碗还稳吗

这个问题每次AI工具发布都会被翻出来。json-render的微妙之处在于,它没说要取代工程师,而是重新定义了分工。

组件库的设计者、Zod模式的编写者、渲染器的实现者——这些角色反而更重要了。AI能拼乐高,但乐高积木长什么样、怎么拼才稳固,还是人类说了算。

打开网易新闻 查看精彩图片

一个可能的场景:产品经理用自然语言描述需求,AI生成初版界面,工程师Review JSON结构、调整模式定义、优化渲染性能。迭代周期从周级压缩到小时级,但工程师的介入点从"写代码"前移到了"设计系统"。

Rauch说的"颠覆",大概指的是这个生产关系的重构。

当然,现实总有摩擦。复杂业务逻辑的交互、精细的动画过渡、无障碍访问支持——这些JSON-render目前还啃不动的硬骨头,短期内仍是人类工程师的护城河。

开源背后的算盘

开源背后的算盘

Apache 2.0协议,GitHub公开托管,没有商业版功能阉割。Vercel这波操作很"基础设施公司":把赛道做宽,比把围墙砌高更有长期价值。

json-render的生态位很有意思。它不做模型训练,不做云托管,专注在"AI生成"和"前端渲染"的接缝处。这个定位让它能和任何大模型提供商合作,也能嵌入任何现有的技术栈。

1.3万星里有多少是"先Star再说"的观望者,有多少已经跑通生产环境,暂时没数据。但200个版本说明社区反馈被快速消化,至少不是扔出来就不管的KPI项目。

React Native的支持值得注意。跨端生成界面是块硬骨头,不同平台的组件差异、样式计算、原生模块调用,JSON抽象层能不能兜住,还需要更多实战检验。

一个细节:官方文档里反复强调"渐进式采用"。现有项目可以只把某个子模块交给AI生成,其他部分保持原样。这种"寄生式升级"降低了试错成本,也暗示Vercel清楚这套方案还没成熟到能全盘接管。

三个月后的json-render会是什么形态?半年后的前端开发流程还和现在一样吗?