Generate a new component using AI

​AI Design Generation in Design Studio lets you create new components using natural language. You can generate both the presentation and the content model, or use a content model and generate only the presentation. This lets teams move from idea to a usable component in minutes, reducing the need for manual modeling and front-end setup.

You can generate a new component by describing what you want. AI creates both the presentation and the content structure at the same time. This is useful when you want to quickly test a new idea or create a component from scratch without predefining fields.

To create a component from a prompt:

1. Open the Studio tab of Design Studio, then click > Create new component.

2. Using natural language prompts in AI chat, generate a new variant. Provide a description of the component in natural language, for example: "Create a promotional banner with a headline, supporting text, and a primary CTA button."

   We recommend using the following template for a prompt:

   [Action] + [Element] + [Key attributes or style changes] + [Context or audience] + [Tone or visual intent]

   You can use /​​ to benefit from a list of predefined quick actions.

   You can enter up to 5 prompts in the chat queue.

3. You can upload up to three images in .jpeg, .jpg, or .png format, each no larger than 20 MB, to serve as visual references for creating the variant. Refer to this file in your prompt to ensure it is considered. For example, write your prompt as such: "Create a new component that looks like the attached image."

4. You can also upload a JSON file, such as one exported from a Figma design, to guide variant generation. Make sure to reference this file in your prompt using the exact design token names so it is applied correctly. For example, write your prompt as such: "Create a component using the ​primary color and border radius​​ from the attached file."

5. Submit the prompt to generate the component presentation (layout and structure), and a content model with fields that match the described use case.

6. Optionally, you can use AI to generate only the presentation for a component based on a predefined ​content model​. This is useful when your data structure is already defined and you want to quickly create a matching visual layout. In ​Configuration mode, add ​fields or content models​​ to the component.

7. Keep using prompts until you obtain the component needed. You can at any point click ​Restore​ to return to a specific version of the generated variant.

8. Review the generated component:

   • In Code mode, review the code or edit it to adjust layout, colors, and content as needed.
   • In ​Inspect​​ mode Design tab, you can check the layout and responsiveness.
   • In ​Content​​ mode Content tab, you can review the generated fields and play with different values for each of these fields by selecting new data source for example.
   • In Configuration mode Content tab, visualize the different fields that compose your component.

9. In Configuration mode Content tab, assign availability settings of the component for sites, templates, and placeholders.

10. Once you are satisfied with your new draft component, click activate​​.

11. Install the code of the variant to make it available for use in Page builder.

​You can now use the component in Page builder by dragging it onto a page and creating content for it.