生成式 UI：AI 时代体验技术生产新范式

正文

请到「今天看啥」查看全文

效果

Prompt 设计

实现自动化生产链路的核心是通过 Prompt：

• 规范 UI 生产的 工作流程 和 遵循的规则 ，
• 明确 AI 的 输出格式

图中的 Prompt 以 DSL（领域特定语言）输出格式为例，展示了 Prompt 设计的基础架构。

值得注意的是， DSL 并非唯一选择 ，您可以根据需求灵活替换为 Markdown、XML 或其他结构化格式，以满足不同场景的输出需求。

复杂任务的拆解： 面对生成 UI 这一复杂任务，我们可以采用 多 Agent 协作 的解决方案。通过将任务拆解为 数据拆分 、 界面布局 和 代码生成 等多个子任务，分别由不同的 Agent 完成。

灵活适配的模型选择 ： 得益于多 Agent 架构，我们可以根据任务的复杂度和模型的特点， 灵活选择最适合的模型 。例如，对于数据拆分这类相对简单的任务，7B 小模型即可快速输出结果，确保高效执行；而对于更复杂的任务，则可以选择更强大的模型来保证输出质量。

数据参考

在 UI 生成过程中，告诉 AIUI 需要展示什么数据是至关重要的核心。

UI 的首要目标之一就是将数据以最直观的方式呈现给用户 。

然而，在数据拼接的过程中， 过长或不规则的数据 往往会引发各种问题。

事实上， 生成 UI 时，并不需要了解所有数据的细节 ——我们只需要抓住数据的本质特征。

例如，对于一个包含数字数组数据，设计师可以通过以下规则进行可视化设计：

如果数组长度小于 10，用条形图展示；

如果数组长度大于 10，用折线图展示；

如果数据名称与股票相关，则使用红绿金融图展示。

在我们的链路中，对于需要展示的数据，我们会首先计算出一个 描述数据特征 的 JSON 字符串 。

数据特征包括数据的结构、字段名称、类型以及统计信息（如数组长度、字符串长度、数字方差等）。

通过数据参考，AI 就可以决策在 UI 界面中，组件属性需要绑定的数据字段。

设计参考

UI 生产时，设计师或产品经理通常会希望能够提供设计/风格参考。

如果生成所用的 LLM 支持多模态输入，那么可以直接将参考图片放入提示词中 。

如果所用的 LLM 不支持多模态输入，或者希望有精度更高的UI信息作为参考。

请到「今天看啥」查看全文