在做 AI 应用时，我发现一个很常见的情况：模型能够生成一大段看起来很完整的文字，但用户真正需要的可能是一张卡片、一个表格，或者几个可以点击的操作按钮。

比如用户问：“帮我比较这三款耳机的价格和续航。”如果应用只返回一段长文本，用户仍然需要自己提取信息。

所以，我更感兴趣的是，能不能让 AI 负责生成结构化的数据，再由 ArkUI 把数据呈现为真正可交互的界面。

不要让模型直接生成任意 UI 代码

一种更容易控制的思路，是先定义有限的展示类型。模型只负责返回标题、字段和数据，应用根据预先设计好的组件进行渲染。

interface CompareItem {

name: string;

price: number;

batteryHours: number;

}

interface CompareViewModel {

title: string;

items: CompareItem[];

}

例如，AI 服务返回的结果经过校验后，可以转换为 CompareViewModel。这里的接口是应用自己的数据模型，并不是 HarmonyOS 官方 AI 返回类型。

使用 ArkUI 展示结构化结果

下面用一个简单的列表演示数据到界面的映射：

@Entry

@Component

struct ComparePage {

@State title: string = '耳机对比';

@State items: CompareItem[] = [

{ name: '耳机 A', price: 599, batteryHours: 8 },

{ name: '耳机 B', price: 799, batteryHours: 10 },

{ name: '耳机 C', price: 399, batteryHours: 6 }

];

build() {

Column({ space: 12 }) {

Text(this.title)

.fontSize(24)

.fontWeight(FontWeight.Bold)

ForEach(

this.items,

(item: CompareItem) => {

Row() {

Column({ space: 4 }) {

Text(item.name)

Text(`续航：${item.batteryHours} 小时`)

}

Blank()

Text(`¥${item.price}`)

.fontWeight(FontWeight.Bold)

}

.padding(12)

.width('100%')

},

(item: CompareItem) => item.name

)

}

.padding(16)

.width('100%')

}

}

这段代码展示的是普通 ArkUI 数据驱动界面。接入 AI 后，需要把静态示例数据替换为经过校验的模型输出。

动态界面必须有边界

我不建议让模型返回任意 ArkTS 代码，然后直接执行。这样不仅增加安全风险，也会让界面布局、类型检查和错误处理变得复杂。

更稳妥的方式是定义有限的组件类型，例如文本、列表、比较卡片和确认按钮。模型只能从这些组件中选择，再提供符合约束的数据。

应用还需要检查必填字段、数值范围和数据条数。如果模型返回了错误的价格或缺少必要字段，就应该提示重新生成或回退到普通页面。

另外，涉及购买、付款和删除等操作时，界面必须连接经过授权的真实业务接口，而不是因为 AI 生成了一个按钮，就认为相应操作已经具备执行条件。

AI 生成界面的重点是数据契约

我认为，生成式界面不一定意味着让 AI 取代传统 UI 开发。更实际的方向，是让 AI 根据用户需求选择合适的展示形式，而开发者负责组件、交互、数据校验和安全边界。

这样既能利用 AI 的灵活性，也能保留传统应用的可控性。