@alphabatcher: 25个渲染工具在用户提问之前就可能消耗约10,000个token，生成式UI有3种构建模式 受控 > 预…

X AI KOLs Following 工具
generative-ui controlled-pattern declarative-pattern open-ended-pattern react-components a2ui iframe-sandbox

摘要

讨论生成式UI的三种构建模式（受控、声明式、开放式），并提供了一个决策树，帮助根据用例选择正确的方法。

25个渲染工具在用户提问之前就可能消耗约10,000个token 生成式UI有3种构建模式 受控模式 > 预构建的React组件 > 使用 `useComponent` 注册每个组件 > 代理选择组件 > 最适合前3-10个流程 > 当图表/表格/卡片工具开始听起来相似时失效 声明式 > 代理返回A2UI JSON > 前端将schema节点映射到React组件 > 一个函数可以驱动多个卡片、表格、表单、小部件 > 最适合仪表盘、搜索结果、旅行卡片、报告 > 当 `CATALOG_ID` 和 `catalogId` 不匹配时失效 开放式 > 代理编写原始HTML > 应用在沙箱iframe中渲染 > 最适合一次性可视化 > 当沙箱标志阻止按钮或表单时失效 决策树： > 像素级完美原型 -> 受控模式 > 几十种卡片类型 -> 声明式 > 一次性可视化 -> 开放式 审计你的应用： > 统计渲染工具数量 > 如果超过15个，开始接入A2UI > 如果使用原始HTML，将iframe沙箱设置为仅允许脚本和表单 > 绝不允许同源
查看原文
查看缓存全文

缓存时间: 2026/06/04 01:57

25个渲染工具在用户提问前就可能消耗约10,000个token

Generative UI 有三种构建模式

受控模式

预先构建的React组件 使用 useComponent 注册每个组件 代理选择组件 最适合前3-10个流程 当图表、表格、卡片工具描述近似时容易出错

声明式模式

代理返回A2UI JSON 前端将schema节点映射到React组件 一个函数可驱动多个卡片、表格、表单、小部件 最适合仪表板、搜索结果、旅行卡片、报告 当 CATALOG_ID 和 catalogId 不匹配时失效

开放模式

代理编写原始HTML 应用在沙箱化的iframe中渲染 最适合一次性可视化 当沙箱标记阻止按钮或表单时失效

决策树：

像素级完美原型 -> 受控模式 数十种卡片类型 -> 声明式模式 一次性可视化 -> 开放模式

审计你的应用：

统计渲染工具数量 如果超过15个，开始接入A2UI 如果使用原始HTML，设置iframe沙箱仅允许脚本和表单 切勿允许same-origin

相似文章

Generative MUI

Product Hunt

Generative MUI 让您使用 LLM 构建遵循您自己的 Material UI 主题的 UI。