Using AI to Generate and Modify Components

If the platform is configured with AI (for specific configuration methods, see documentation), you can use AI to generate and modify components in the component designer. Based on the capabilities of large language models, it helps us quickly build the basic structure of components.

Generate Components

Generating components will overwrite the entire component content and completely replace the component template. Next, we will demonstrate how to generate components.

Create a group and click the AI button

You can paste a design image into the dialog box here or specify the generated content through text. Here we first demonstrate AI generating a login page.

AI has generated a login page based on our prompt, but sometimes we need to use some basic UI component libraries to design pages. We can add ElementUI components in Settings and enable Use Component Library.

With the same prompt, click the OK button to regenerate a login page.

Modify Components

The components we generated or existing designed components may not fully meet our design requirements, requiring modification of some content. In this case, you can use AI to modify components by having AI make changes based on our prompts.

Next, we will continue to modify the generated login page. For example, we want the login card to be placed on the right side of the page.

First, select the element to be modified, switch to the AI Modify Component tab, and enter the prompt "Move the login box to the right side of the page".

The background is pure white, and we want a suitable background image. At this time, we can let AI help us generate a background image.

Select the element where you want to set the background image, switch to the Style tab in the element settings popup, select Background, and enter the keyword "Help me generate a business minimalist style background image".

This way, we can complete the basic template structure generation and modification through AI.