Page Agent
This agent allows application pages to be generated in a simple, conversational way, interpreting the modeler user’s requests and proposing visual structures that are consistent with the application’s overall design.
Through the dialogue with Diana, the user can define the functionality, elements, and style of each page, without needing any design or programming knowledge.
Main Functionalities
•Conversational interaction to create pages, through a natural language dialogue with the agent, who guides the modeler user to gather the necessary information.
During the dialogue, the agent can ask questions about the purpose of the page, its relation to existing entities or objects, the type of content it should display, and the required interaction elements. The user can also attach reference files, such as mockups, images, or design files (Figma), for the agent to use as a basis during generation.
•Intelligent assistance with design and user-experience knowledge enables the agent to apply UX/UI best design practices and leverage the application's design system to generate pages that are visually consistent, functional, and accessible.
It proposes balanced structures, optimized layouts, and appropriate elements based on the nature of the page and its content, following best practices for pages modeling.
•Generation of pages based on a request that the agent translates into a functional page structure.
The agent generates pages based on the user's description, interpreting their purpose within the application and proposing the most appropriate structure according to the type of page.
•Generation of 100% responsive pages that automatically adapt to different resolutions and devices, ensuring correct display in all environments.
•Generated pages available within the platform, this enables editing, customization, and maintenance through the pages modeler.
Step-by-Step Guide to Using the Page Agent
1.Start interaction with Diana
From the applications modeler, the user can start the conversation with Diana to create a page, that automatically activates the page agent.
2.Describe the page to be generated
The modeler user begins by indicating what type of page they want to create and its purpose within the application.
The agent may request additional information to understand its functionality and the data it should show or allow editing.
3.Define the page type and elements
As the conversation progresses, the page agent helps define the type of page and the elements that compose it. The modeler user can complete the proposals made by the agent.
4.Attach references (optional)
The modeler user can attach design files, such as images or Figma files. They can also add reference documentation so that Diana uses it as a guide in generating the page.
5.Page generation
Once the necessary information has been collected, the agent automatically generates the page and presents it in the pages modeler in a new tab.
The page includes all the defined elements, organized according to design and usability best practices.
6.Preview and test
The user can preview and test the created page directly in the pages modeler, validating its behavior and visual consistency before its final publication.
Example
The modeler user requests the following from the page agent:
Generate a complete home page for a banking application, where it is possible to view new customer data, create new customer records using buttons, and see the latest money transactions, among other operations.
The agent creates a page with the requested structure, including the elements necessary to display information, perform operations, and navigate between sections.
