3天斩获 6000+ Star，Vercel Labs 团队开源 json-render

AI 生成 UI 的思路，真的有点要变天的味道了。

以前那套“让大模型现场写 React/Vue 代码”的玩法，大家或多或少都被坑过：要么生成一坨不能跑的组件，要么 className、样式乱飞，改起来比自己写还累。结果就是——想象很美好，上线全靠手搓。

Vercel Labs 最近开源的 json-render，等于直接把老规则给掀了：不再让 AI 对着代码自由发挥，而是改走一条全新链路——AI → JSON → UI。短短三天冲到 6000+ Star，这牙膏挤得有点凶。

这套东西的核心思路，其实就一句话：别再相信 AI 会写好代码，逼它只写数据。

以前的方式是： “帮我写一个仪表盘页面，有卡片、有图表、有列表”，然后模型啪啦啪啦吐一堆 JSX/TSX 出来。跑起来不是类型不对，就是 import 丢了，要不就是跟你项目的组件库完全不兼容。

json-render 的操作是反过来搞——你先把自己家的组件库定义好，比如：

• <Button />
• <Card />
• <Table />
• <Layout />

再告诉 AI：你只能用这些组件，不能乱写，所有内容都必须塞进一份 JSON 里。AI 负责拼 JSON，前端这边再用 json-render 把这份 JSON 直接渲染成 UI。

这中间最关键的就是“护栏”。

不是那种嘴上说说“加点规则”，而是用强约束的 JSON Schema，把每一个组件允许出现的字段、类型、嵌套关系都写死：

• 这个组件有哪些 props
• 哪些是必填的
• 可以嵌在谁里面
• 哪些字段只能填枚举值

AI 生成的时候，就被这个 Schema 死死拽住了。你想整点幻觉？可以，但最多也就是往 Card 里多塞俩没啥用的字段，前端一丢掉就完事了，绝对不可能给你整出个奇怪的 <div onClick={window.location='xxx'}/>。

这就跟给一堆小孩子发乐高一样——积木形状你定好，搭成啥样你随意，但至少不会搭着搭着突然变成一台燃油挖掘机。

另一个被很多人忽略的点，是流式渲染。

以前让 AI 直接生成代码，一般都是“憋一大坨出来，一次性展示”。模型要同时兼顾语法正确、组件搭配合理、风格统一，哪怕多给几秒，大部分时候还是救不了。

JSON 就不一样了：

• 模型可以边想边写，先给布局，再补细节
• 前端拿到 JSON 流，能一边接一边渲染
• 用户就能看见页面在屏幕上“长出来”，那种感觉会非常丝滑

加上 JSON 解析本身很快，你甚至可以做到毫秒级更新 UI，比让浏览器一直重排长 JSX 字符串要稳很多。

对前端同学来说，更有意思的是角色转变。

老模式是：AI 当你的实习生，你说一句需求，它帮你写点样式、撸个小组件，你再帮它收拾烂摊子。

新模式下，你更像是：

• 设计并维护一套靠谱的组件库
• 把组件 API 想清楚、约束写严
• 顺手规定好布局规则、主题系统

而真正“搭页面”的那只手，慢慢就变成了 AI。你只需要检查 JSON 是否符合预期，抽时间打磨设计系统，整体效率大概率是乘法级往上翻的。

很多人要是还把大量精力花在手搓 CRUD 后台页面上，几年之后，可能真要被迫“去换不锈钢脸盆”了……

如果你是做前端 / 设计系统的，或者正准备上马 AI 搭 UI 这个方向，json-render 这波真的值得抽个周末深挖一下：

建议第一步别上来就搞大而全，先照着官方示例：

• 换成你自己项目的 Button、Card、Layout
• 用一条真实业务流程（比如“创建订单”）做小实验
• 让 AI 改版几次，看 JSON 里到底在怎么“思考布局”

跑顺一条链路，再考虑引入到更大的工程里，心态会舒服很多。

你觉得再过三年，前端工程师会不会变成“组件图书管理员”，主要工作是给 AI 备好乐高、维护好规则？ 欢迎在评论区聊聊你的看法~