json-render
一个通过AI提示生成动态UI的框架，确保输出安全可控。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：json-render。 它的用途是：一个通过AI提示生成动态UI的框架，确保输出安全可控。 完整的 Skill 内容见：https://321skill.com/skills/json-render/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“根据用户最近的浏览数据，生成一个包含关键指标卡片和‘查看详情’按钮的个性化仪表盘预览。”，它会调用json-render，在你定义的组件目录（如Metric、Card、Button）约束下，生成一份安全的JSON界面描述。你的应用接收到这份JSON后，使用json-render的渲染器即可立即展示出这个动态生成的UI，并且按钮的点击事件也能安全触发你预定义的操作。
介绍
json-render 是一个生成式UI框架，旨在解决开发者在利用AI生成用户界面时面临的不可控和不可靠问题。它允许开发者预先定义一套组件和操作目录，AI只能在这个“护栏”内生成JSON格式的界面描述，从而确保输出的UI既符合设计规范，又能安全地响应用户交互。
使用json-render，开发者首先需要定义一个组件目录，明确每个组件的属性、描述和可执行的操作。然后，为这些组件编写具体的渲染实现。最后，将AI生成的JSON规范传递给框架的渲染器，即可安全地渲染出动态、个性化的界面。整个过程将AI的创造力约束在可控范围内。
这个框架非常适合那些希望在应用中集成AI生成界面能力，但又担心AI输出不稳定、不安全或不符合设计系统的开发团队。无论是构建AI助手、动态仪表盘还是个性化内容生成器，都能从中受益。
使用建议是，先从预构建的组件库（如@json-render/shadcn）开始，快速搭建原型。在定义目录时，务必使用Zod等工具严格定义组件属性，这是保证输出可预测性的关键。同时，注意它生成的是界面结构，复杂的业务逻辑仍需开发者自行处理。
核心特点
与同类AI生成UI工具相比，json-render的核心区别在于其严格的“护栏”机制：开发者预先定义组件目录和操作，AI只能在此目录内生成JSON，从根本上杜绝了AI输出不可用或危险组件的问题。同时，它提供了跨平台（Web、移动端、终端、视频等）的统一解决方案，并内置了丰富的预构建组件库，开箱即用。
注意事项
不适合需要AI自由发挥创意、生成全新未知组件或复杂动态逻辑的场景。
常见问题
json-render支持哪些前端框架？
支持React、Vue、Svelte、SolidJS等主流Web框架，以及React Native、终端（Ink）、视频（Remotion）、PDF、邮件等多种渲染目标。
如何保证AI生成的UI符合我的设计系统？
通过定义你自己的组件目录，并为其编写具体的渲染实现，AI只能使用你定义的组件，从而确保UI风格和交互的一致性。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/json-render/raw/index.md 读取 json-render 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/json-render/raw/index.md（查看排版版本）