【让AI生成UI，但不让它乱来：json-render的护栏哲学】当我们让AI帮用户生成界面时，最怕的是什么？不是它不够聪明，而是它太"自由"了。Vercel Labs 最近开源了 json-render，一个让AI生成UI变得可控的方案。核心思路很简单：与其让AI直接输出代码，不如让它在你划定的范围内"填空"。这个项目解决的是一个真实痛点：用户用自然语言描述想要的仪表盘、小组件或数据可视化，AI负责生成，但输出必须可预测、可信任。它的设计哲学可以用三个词概括：可预测——AI输出的JSON严格匹配你定义的schema，不会有意外结构有护栏——AI只能使用你目录里的组件，想用没定义的？不存在的快速——支持流式渲染，模型边生成边显示工作流程也很清晰：第一步，你定义一个"组件目录"，告诉AI它能用什么。比如Card、Metric、Button，每个组件有什么属性、接受什么参数，用Zod做类型约束。第二步，注册这些组件的实际渲染逻辑。JSON里的声明式描述，对应到你的React组件。第三步，用户输入提示词，AI生成符合规范的JSON树，渲染器把它变成真实界面。这里有个设计细节值得注意：动作（Action）的处理方式。AI只负责声明"意图"，比如"导出报告"或"刷新数据"，具体怎么执行由你的代码决定。这是一种很聪明的责任划分——AI管"说什么"，你管"怎么做"。它还内置了一些实用功能：条件可见性（根据数据或登录状态显示隐藏组件）、带确认对话框的动作、表单验证等。这些都是实际业务场景里绑定会用到的东西。从更大的视角看，json-render代表了一种AI应用的设计模式：不是让AI无限制地生成任意内容，而是给它一个精心设计的"词汇表"。在这个词汇表内，AI可以自由组合；超出这个范围，门都没有。这种约束不是限制，而是信任的基础。用户敢用AI生成的界面，是因为知道它不会突然冒出一个奇怪的组件或执行一个未授权的操作。对于想在产品里集成AI生成UI能力的团队来说，这是一个值得研究的参考实现。github.com/vercel-labs/json-render
