---
pdfexport: true
alias: tutorials-ai-ui-page-generation
timetoread: true
tutorial: full
description: "Generate an initial Cookie Factory operations UI Page with AI and refine the result in the Page Builder"
---

# Generate and Refine a UI Page

This tutorial shows how to use **AI** to create a first version of a **UI Page** for Cookie Factory line supervisors. The generated page is a starting point that you refine in the **Page Builder** before saving it.

## Before You Start

Make sure that the environment meets the prerequisites described in [[user-guide-uipages-generate-uipages-with-ai|Generate UI Pages with AI]].

## Scenario

!!! info "Cookie Factory Scenario"
    The Cookie Factory scenario is an example only. Create a page for any suitable business scenario in your environment. Adapt the page name, entities, and prompt to your own scenario.

## Prepare the Scenario

Prepare the following items before generating the page:

| Item | Example configuration | Reference |
| --- | --- | --- |
| **UI Page** access | Make sure that you can create, edit, and save a **UI Page**. The tutorial creates `Cookie Factory Operations`. | [[user-guide-uipages-create-uipage|Create UI Page]] |
| **AI** generation | Verify that **AI** page generation is available in the environment. | [[user-guide-uipages-generate-uipages-with-ai|Generate UI Pages with AI]] |
| Workspace goal | Identify the information and actions that the page must provide. This scenario uses **Material** and **Resource** information. | [[user-guide-uipages-design|Design UI Page]] |

Table: UI Page generation scenario setup

Cookie Factory line supervisors need a workspace to review the **Materials** and **Resources** involved in the cookie production process. The first version of the workspace should provide a clear starting point for the following tasks:

* Review **Materials** currently in production.
* Identify **Resources** that require attention.
* Open the most relevant actions for the production team.

Use `Cookie Factory Operations` as the name of the **UI Page** created in this tutorial.

## Generate the Initial Page

1. Create a new **UI Page** named `Cookie Factory Operations`.
2. Open the **Design View**.
3. Open the **AI** generation panel in the **Page Builder**.
4. Enter the following prompt:

    `Create a workspace for Cookie Factory line supervisors. Include a grid for Materials in production, a section for Resource status, and actions to open the relevant Material and Resource details.`

    ![UI Page Builder AI Editor Option](../../images/ai_ui_page_tutorial_01.png)

5. Start the generation.
6. Review the generated **UI Page** in the **Page Builder**.

<!-- TODO:![UI Page Builder AI Editor Option - Result](../../images/ai_ui_page_tutorial_02.png) -->

The generated page should provide an initial layout that reflects the requested workspace. Continue with the next section if the layout needs further adjustment.

## Refine the Generated Page

Review the generated page against the Cookie Factory scenario. Confirm that the page includes the information and interactions that supervisors need.

1. Adjust the generated layout to make the **Material** and **Resource** information easier to review.
2. Add, remove, or replace widgets as needed.
3. Configure the available actions and links to open the relevant **Material** and **Resource** pages.
4. If the first result does not meet the intended layout, refine the prompt and generate another initial result.
5. Preview the **UI Page**.
6. Select **Save**.

<!-- TODO: ![UI Page Builder Manual Edition of elements](../../images/ai_ui_page_tutorial_03.png) -->

The saved page behaves as a regular **UI Page**. You can continue editing it after generation.

## Next Steps

For more information about manual page design, see [[user-guide-uipages-design|Design UI Page]]. For additional AI usage scenarios, return to [[tutorials-ai-index|AI Tutorials]].