本指南涵盖在应用构建器中新引入的基于人工智能的内容生成功能。

当前，AI 功能仅以预览形式提供，尚未最终确定设计。这些 AI 功能仍在优化中，旨在收集反馈。因此，它们可能尚未完全成熟，并且可能会根据用户输入进行演变。

查看生成

App Builder 中由生成式 AI 支持的视图生成提供了传统布局选择器的强大替代方案。通过利用自由文本用户提示和多种提示模式，用户可以生成高度定制的视图，并自动转换为功能齐全的应用程序。这种方法不仅加速了 App 视图的创建，还简化了用户界面设计，使界面生成对具有不同技术熟练程度的用户来说变得更加容易。

登录屏幕

基于提示的生成

步骤 1：在 GenAI 对话中输入一个自由文本提示。

步骤 2：在预览部分查看生成的结果。

步骤 3：使用预览部分中的加号按钮应用操作：

• 添加内容 – 将内容添加到当前视图的末尾。
• 创建新视图 – 将新生成的内容添加到单独的视图页面。
• 替换内容 – 将当前视图中的选定组件替换为生成的输出。只需选择一个您希望转换为其他内容的部分/布局/组件，再次打开GenAI对话框，输入提示并点击“添加”按钮 -> “替换内容”选项。

将一个元素替换为输入类型为“search”的示例，指定占位符值和宽度为200px：

替换内容示例

用户可以使用各种上下文菜单选项反复生成和优化视图。行为取决于当前视图状态和选定的组件：

上下文	未选择任何组件	布局容器已选定	非容器组件已选中
添加内容	在视图末尾追加内容	将内容追加到选定的容器中	在第一个选定组件之前插入内容
替换内容	完全替换当前视图的内容	完全替换所选容器的内容	替换所有选定的组件
创建新视图	创建一个新的主视图	创建一个新的主视图	创建一个新的主视图

撤销/重做 功能支持 添加 和 替换 操作，但 不支持 用于创建新视图。 子视图可以在生成内容时通过视图容器创建。 用户可以逐步优化 AI生成的 和 手动创建的 视图。

示例使用案例

示例 1：登录屏幕

提示：

Create a detailed login screen
高斯

登录屏幕

AI输出 -Angular模板:

<div class="column-layout group">
    <h1 class="content">Login</h1>
    <p class="content">Enter your username and password to log in.</p>
    <form class="column-layout form">
        <igx-input-group type="box" class="input">
            <input type="text" placeholder="Enter your username" required igxInput />
            <label igxLabel>Username</label>
            <igx-hint>Username</igx-hint>
        </igx-input-group>
        <igx-input-group type="box" class="input">
            <input type="password" placeholder="Enter your password" required igxInput />
            <label igxLabel>Password</label>
            <igx-hint>Password</igx-hint>
        </igx-input-group>
        <igx-checkbox labelPosition="after" class="checkbox">Remember me</igx-checkbox>
        <button igxButton="contained" type="button" igxRipple class="button">Login</button>
        <a href="#" target="_self" class="ig-typography__body-1 hyperlink">Forgot password?</a>
        <a href="#" target="_self" class="ig-typography__body-1 hyperlink">Create an account</a>
    </form>
</div>
超文本标记语言

登录界面，使用Blazor代码

示例 2：汽车服务视图

提示：

Design a booking screen for an auto-service shop app that allows customers to schedule common car services. The screen should include sections for vehicle selection, available services, appointment scheduling, and a booking summary. Users first select their car make, model, and year from dropdown menus. Then, they choose a service from a grid of six cards, each displaying the service name, price, description, and a "Select" button. Next, they pick a date from a calendar and select an available time slot from a grid of eight buttons. Finally, the booking summary lists the selected services and provides "Confirm Booking" and "Cancel" buttons. The layout should follow a structured column and row format, ensuring a seamless flow from vehicle selection to appointment confirmation.
实时编码服务器

汽车修理店

AI输出 -Angular模板:

<div class="row-layout group">
		<h2 class="content">
			Vehicle Selection
		</h2>
		<igx-select type="border" placeholder="Select Make" required class="select">
			<igx-select-item value="Toyota">
				Toyota
			</igx-select-item>
			<igx-select-item value="Honda">
				Honda
			</igx-select-item>
			<igx-select-item value="Ford">
				Ford
			</igx-select-item>
			<label igxLabel>Make</label>
			<igx-hint>Select your car's make</igx-hint>
		</igx-select>
		<igx-select type="border" placeholder="Select Model" required class="select">
			<igx-select-item value="Corolla">
				Corolla
			</igx-select-item>
			<igx-select-item value="Civic">
				Civic
			</igx-select-item>
			<igx-select-item value="Mustang">
				Mustang
			</igx-select-item>
			<label igxLabel>Model</label>
			<igx-hint>Select your car's model</igx-hint>
		</igx-select>
超文本标记语言

以下是应用预览：

汽车服务店预览

有用的模式以获得更精确的结果

将这些模式视为建议，您可以随时使用常规提示描述方式。

模式 1：布局和组件组合提示

为了获得更结构化的输出，将布局和详细组件配置结合起来，用户可以指定一个包含多个部分的总体屏幕设计。例如：

A login screen with:
row layout
	col layout
		title: Login
		text: Please enter your email and password to sign in
		form:
			input: email
			input: password
			switch: remember me
			button: login
			row layout
				text: Dont have an account?
				link: sign up
	image
梅尔

结果：

登录屏幕

提示 2:

结构化等价提示

Generate a view with this layout:
nav bar
horizontal group
	nav drawer (isOpen=true, pin=true)
		5 items
	vertical group
		title (color=red)
		horizontal group
			4 cards with media

客户关系管理工具

结果：

复杂视图

其他 AI 功能

图像生成

步骤：

1. 打开AIGen对话框，导航到图像选项卡。
2. 输入描述图像的提示词或使用一个示例提示词。
3. 一旦对结果满意，点击添加将其保存到你的图像库中。 你现在已经可以在项目中使用它了。

图像生成

数据源生成

步骤：

1. 打开AIGen对话框，导航到数据选项卡。
2. 输入一个描述所需数据的提示。
3. 点击 示例提示 按钮获取灵感。
4. 点击添加以创建一个新的数据源或将其附加到现有的数据源。

数据源生成