Skip to content
View as markdown Ask ChatGPT Ask Claude

Generate and Refine a UI Page#

Estimated time to read: 3 minutes

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 Generate UI Pages with AI.

Scenario#

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. Create UI Page
AI generation Verify that AI page generation is available in the environment. Generate UI Pages with AI
Workspace goal Identify the information and actions that the page must provide. This scenario uses Material and Resource information. 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

  5. Start the generation.

  6. Review the generated UI Page in the Page Builder.

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.

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 Design UI Page. For additional AI usage scenarios, return to AI Tutorials.