UI interface automatic generation method, device, and storage medium

Abstract

The application discloses a UI interface automatic generation method and device and a storage medium, relates to the technical field of game engines, and comprises the following steps: creating a corresponding UI node container for each UI design element in a UI design draft; matching corresponding target visual resources for each UI node container from a preset resource file, and generating a temporary prefab corresponding to the UI design draft according to the attribute information of the target visual resources, the UI node container and the UI design element; copying each UI node object in the temporary prefab to a formal prefab, binding a corresponding association identifier to each copied UI node object in the formal prefab, and obtaining the formal prefab storing a first mapping relationship; and merging the UI node objects to obtain a production environment prefab, wherein the production environment prefab stores a second mapping relationship, thereby solving the technical problem of inaccurate UI interface automatic generation in the prior art, and achieving the accuracy and consistency of UI interface automatic generation.

Description

Technical Field

[0001] This application relates to the field of game engine technology, and in particular to a method, device and storage medium for automatically generating a UI interface. Background Technology

[0002] In existing UI development workflows, designers often output UI design drafts containing multiple states and variations in Photoshop Document (PSD) format. Developers then need to convert these drafts into prefabs usable on the Unity platform to implement the interface. Existing PSD→Unity export tools mostly rely on layer naming conventions or surface features to establish a mapping between design elements and development nodes, lacking a stable and traceable dedicated mapping system. Furthermore, when artists use non-standard naming conventions, PSD→Unity export tools are prone to misidentification, failing to accurately associate the same UI design elements in different states and variations of the interface. This results in a chaotic UI node structure generated by the development team, requiring significant manual intervention for subsequent component replacements and structural optimizations, severely impacting the efficiency and consistency of UI interface generation.

[0003] The above content is only used to help understand the technical solution of this application and does not represent an admission that the above content is prior art. Summary of the Invention

[0004] The main purpose of this application is to provide a method, device and storage medium for automatically generating UI interfaces, which aims to solve the technical problem of inaccurate automatic generation of UI interfaces caused by the lack of a traceable mapping relationship between UI design elements and UI nodes on the development side in the prior art.

[0005] To achieve the above objectives, this application proposes a method for automatically generating a UI interface, applied to the development side of a UI automation generation system. The method includes: Receive the structured data file corresponding to the User Interface (UI) design draft, parse the association identifiers and attribute information of the UI design elements in the structured data file, and create a corresponding UI node container for each UI design element. The association identifiers are used to identify UI design elements with different semantics. Based on the attribute information, a corresponding target visual resource is matched for each UI node container from the preset resource file, and a previewable temporary prefab corresponding to the UI design draft is generated according to the target visual resource, the UI node container and the attribute information. Each UI node object in the temporary prefab is copied to the formal prefab, and a corresponding association identifier is bound to each copied UI node object in the formal prefab, to obtain a formal prefab that stores a first mapping relationship. The first mapping relationship is the mapping relationship between the UI node in the formal prefab and the corresponding association identifier. In response to a UI node merge command, the associated UI node objects associated with the UI node merge command are merged to obtain a production environment prefab containing formal UI node objects. The production environment prefab stores a second mapping relationship that describes the mapping relationship between the formal UI node objects and their corresponding associated identifiers.

[0006] In one embodiment, after the step of obtaining the production environment prefab containing the formal UI node objects, the method further includes: After receiving the updated structured data file corresponding to the updated UI design draft, read the second mapping relationship in the production environment prefab and the second attribute information of the formal UI node object; The association identifiers and attribute information of UI design elements in the updated structured data file are parsed to obtain a third mapping relationship that describes the mapping relationship between UI design elements and their corresponding association identifiers in the updated structured data file, as well as the third attribute information of UI design elements in the updated structured data file. By comparing the second mapping relationship and the third mapping relationship, as well as the second attribute information and the third attribute information, the correction node object and the correction category are determined; Based on the correction category and the correction node object, a partial update operation is performed on the production environment prefab, and the updated production environment prefab is output.

[0007] In one embodiment, the correction categories include node addition, node obsolescence, and attribute modification. The step of performing a partial update operation on the production environment prefab based on the correction categories and the correction node objects, and outputting the updated production environment prefab, includes: If the correction category is node addition, a new formal UI node object is created in the production environment prefab based on the third attribute information of the correction node object, and the association identifier of the correction node object is bound to the new formal UI node object; If the correction category is node obsolete, delete the corrected node object and its associated identifier; If the correction category is attribute modification, the RectTransform property of the correction node object is corrected based on the third attribute information of the correction node object; After completing the partial update operation, the mapping relationship between the formal UI node objects and their corresponding associated identifiers stored in the production environment prefab is updated to generate the updated production environment prefab.

[0008] In one embodiment, the step of matching corresponding target visual resources for each UI node container from a preset resource file based on the attribute information includes: Extract the resource reference name contained in the attribute information corresponding to the UI node container, wherein the resource reference name includes the texture name and / or font identifier; Based on the resource reference name, a resource matching operation is performed in the preset resource file to find the target visual resource corresponding to the texture name and / or the target visual resource corresponding to the font identifier; Bind the matched target visualization resource to the corresponding UI node container.

[0009] In one embodiment, the step of generating a previewable temporary prefab corresponding to the UI design draft based on the target visualization resource, the UI node container, and the attribute information includes: The target visualization resource is mounted to the corresponding UI node container to generate the corresponding initial UI node object; Extract the position coordinates, size parameters, and anchor point reference values ​​from the attribute information corresponding to the initial UI node object, and configure the RectTransform property of the initial UI node object based on the position coordinates, size parameters, and anchor point reference values ​​to obtain the corresponding UI node object; Integrate all configured UI node objects to form a complete interface structure and generate the previewable temporary prefab.

[0010] In one embodiment, the step of merging the associated UI node objects associated with the UI node merge instruction in response to the UI node merge instruction to obtain a production environment prefab containing formal UI node objects includes: In response to a user's selection of at least one target UI node object in the formal prefab, the UI node merge instruction is generated; Based on the UI node merging instruction, the target UI node object is determined, and the target UI node object, its sibling nodes at the same level, and its direct child nodes are used as the associated UI node objects. Based on the component type, resource reference name, and spatial relationship of the associated UI node objects to be merged, predict the type of the composite node object corresponding to the associated UI node objects to be merged, and extract the fourth attribute information of the associated UI node objects. Instantiate an initial formal UI node object corresponding to the type of the composite node object from the standard UI node object template library, and configure the RectTransform property of the initial formal UI node object based on the fourth attribute information to obtain the corresponding composite node object; Assign a unique association identifier to the synthesized node object, and delete the associated UI node objects participating in the merging process, as well as the association identifiers of the associated UI node objects; The other UI node objects, excluding the associated UI node object, and the composite node object are identified as the formal UI node objects to generate the second mapping relationship and obtain the production environment prefab.

[0011] Furthermore, to achieve the above objectives, this application also proposes a method for automatically generating a UI interface, applied to the design end of a UI automation generation system. The method includes: Obtain an initial UI design draft that includes multiple first UI design elements, and assign the same association identifier to the first UI design elements with the same semantics; If at least one processing operation is detected for any of the first UI design elements, a processed UI design draft is obtained. The UI design draft includes multiple UI design elements, and the processing operation includes a copy operation, a state modification operation, and a marking operation. The attribute information of the UI design elements and the corresponding associated identifiers are encapsulated into a structured JSON file to obtain the structured data file corresponding to the UI design draft and output it.

[0012] In one embodiment, the step of obtaining a processed UI design draft, wherein the UI design draft includes multiple UI design elements, if at least one processing operation is detected for any of the first UI design elements, includes: If a copy operation is detected for any of the first UI design elements, a corresponding second UI design element is generated, and the association identifier of the first UI design element is inherited to the second UI design element; If a state modification operation is detected for any of the first UI design elements, a corresponding third UI design element is generated, and the association identifier of the first UI design element is inherited to the third UI design element. The first UI design element, the second UI design element, and the third UI design element are defined as UI design elements; If a user adds a markup instruction to any of the UI design elements, the markup instruction is embedded in the attribute information of the corresponding UI design element to obtain the UI design draft including multiple UI design elements. The markup instruction is used to instruct the development end of the UI automation generation system to perform a corresponding preset operation, which includes horizontal flipping, nine-grid setting, or creating a preset control.

[0013] Furthermore, to achieve the above objectives, this application also proposes a UI interface automatic generation device, which includes: The data parsing module is used to receive the structured data file corresponding to the UI design draft, parse the association identifier and attribute information of the UI design elements in the structured data file, and create a corresponding UI node container for each UI design element. The association identifier is used to identify UI design elements with different semantics. The first generation module is used to match the corresponding target visual resources for each UI node container from the preset resource file based on the attribute information, and generate a previewable temporary prefab corresponding to the UI design draft according to the target visual resources, UI node containers and the attribute information; The second generation module is used to copy each UI node object in the temporary prefab to the formal prefab, bind a corresponding association identifier to each copied UI node object in the formal prefab, and obtain a formal prefab that stores a first mapping relationship. The first mapping relationship is the mapping relationship between the UI node and the corresponding association identifier in the formal prefab. The node merging module is used to respond to a UI node merging command, merge the associated UI node objects associated with the UI node merging command, and obtain a production environment prefab containing formal UI node objects. The production environment prefab stores a second mapping relationship that describes the mapping relationship between the formal UI node objects and the corresponding associated identifiers.

[0014] In addition, to achieve the above objectives, this application also proposes a UI interface automatic generation device, the device comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the UI interface automatic generation method described above.

[0015] In addition, to achieve the above objectives, this application also proposes a storage medium, which is a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, it implements the steps of the UI interface automatic generation method described above.

[0016] In addition, to achieve the above objectives, this application also provides a computer program product, which includes a computer program that, when executed by a processor, implements the steps of the UI interface automatic generation method described above.

[0017] The proposed technical solutions (one or more) in this application have at least the following technical effects: The development end of the UI automated generation system receives the structured data file corresponding to the UI design draft, parses the association identifiers and attribute information of the UI design elements in the structured data file, and creates a corresponding UI node container for each UI design element. The association identifier is used to identify UI design elements with different semantics, establishing a preliminary association between UI design elements and development end nodes. The association identifier locks the semantically unique UI design elements, laying the foundation for subsequent accurate mapping. Based on the attribute information, the system matches the corresponding target visual resources for each UI node container from the preset resource file, and generates a previewable temporary prefab corresponding to the UI design draft based on the target visual resources, UI node containers, and attribute information. This quickly restores the visual effect of the design draft, provides a secure preview and verification environment, and avoids contaminating the formal development environment. The system copies each UI node object in the temporary prefab to the formal prefab, and binds the corresponding association identifier to each copied UI node object in the formal prefab, resulting in a formal prefab storing a first mapping relationship. The first mapping relationship is the mapping relationship between UI nodes in the formal prefab and their corresponding association identifiers, realizing accurate binding between design elements and development end nodes, and providing a traceable basis for subsequent merging and updates. In response to a UI node merging command, associated UI node objects associated with the command are merged to obtain a production environment prefab containing formal UI node objects. This prefab stores a second mapping relationship describing the mapping between formal UI node objects and their corresponding associated identifiers. This integrates scattered nodes into standardized components (i.e., formal UI node objects), and synchronously updates the mapping relationship between formal UI node objects and their corresponding associated identifiers. This ensures that while components (UI node objects) are standardized, the traceability of the mapping relationship is maintained. This application establishes a stable and traceable mapping relationship between design elements and development-side nodes (formal UI node objects) using the associated identifier as the sole link. Through the continuous maintenance of the mapping relationship through the associated identifier, it solves the technical problem in existing technologies where the lack of a traceable mapping relationship between UI design elements and development-side UI nodes leads to inaccurate automatic UI generation. This ensures that each formal UI node object in the production environment prefab accurately corresponds to a UI design element, achieving accuracy and consistency in automatic UI generation.The UI interface automatic generation method provided in this application parses structured data files, extracts the association identifiers and attribute information of UI design elements, creates a corresponding UI node container for each UI design element, and retains the association identifiers. Then, it matches target visual resources for the UI node containers with attribute information to generate temporary prefabs, pre-checking visual and layout consistency. Subsequently, it copies each UI node object in the temporary prefab to the formal prefab and binds the association identifiers, solidifying the first mapping relationship and ensuring the traceability of UI node objects. Finally, when responding to the UI node merging command to merge associated UI node objects and generating the production environment prefab, it synchronously updates the second mapping relationship to ensure that the merged formal UI node objects still maintain the association with the design elements. The entire process achieves stable tracking between the design and development ends through the continuous maintenance of the mapping relationship through association identifiers, effectively solving the problem of inaccurate automatic UI interface generation. Attached Figure Description

[0018] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0019] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 A flowchart illustrating the UI automation generation method on the development side of a UI automation generation system provided in this application; Figure 2 A flowchart illustrating the UI automation generation method on the design side of a UI automation generation system provided in this application; Figure 3 This is a schematic diagram of the module structure of the UI automated generation device according to an embodiment of this application; Figure 4 This is a schematic diagram of the device structure of the hardware operating environment involved in the UI automation generation method in this application embodiment.

[0021] The purpose, features, and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0022] It should be understood that the specific embodiments described herein are merely illustrative of the technical solutions of this application and are not intended to limit this application.

[0023] To better understand the technical solution of this application, a detailed description will be provided below in conjunction with the accompanying drawings and specific implementation methods.

[0024] The main solution of this application embodiment is as follows: receiving a structured data file corresponding to a UI design draft, parsing the association identifiers and attribute information of UI design elements in the structured data file, and creating a corresponding UI node container for each UI design element. The association identifier is used to identify UI design elements with different semantics. Based on the attribute information, matching the corresponding target visual resources for each UI node container from a preset resource file, and generating a previewable temporary prefab corresponding to the UI design draft based on the target visual resources, UI node containers, and attribute information. Copying each UI node object in the temporary prefab to the formal prefab, and binding the corresponding association identifier to each copied UI node object in the formal prefab, to obtain a formal prefab storing a first mapping relationship, the first mapping relationship being the mapping relationship between UI nodes and corresponding association identifiers in the formal prefab. In response to a UI node merging instruction, merging the associated UI node objects associated with the UI node merging instruction to obtain a production environment prefab containing formal UI node objects, and the production environment prefab storing a second mapping relationship describing the mapping relationship between formal UI node objects and corresponding association identifiers.

[0025] In this embodiment, for ease of description, the UI automation generation system will be used as the execution subject for the following description.

[0026] In existing UI development workflows, designers often output UI design drafts in PSD format, containing multiple states and variations. Developers then need to convert these drafts into prefabs usable on the Unity platform to implement the interface. Current PSD-to-Unity export tools rely heavily on layer naming conventions or surface features to map design elements to nodes on the development side, lacking a stable and traceable dedicated mapping system. Furthermore, when artists use inconsistent naming conventions, PSD-to-Unity export tools are prone to errors, failing to accurately associate the same UI design elements across different states and variations. This results in a chaotic UI node structure generated on the development side, requiring significant manual intervention for subsequent component replacements and structural optimizations, severely impacting the efficiency and consistency of UI generation.

[0027] This application provides a solution where the development side of the UI automation generation system parses structured data files, extracts the association identifiers and attribute information of UI design elements, creates a corresponding UI node container for each UI design element, and retains the association identifiers. Then, it matches target visual resources to the UI node containers using attribute information to generate temporary prefabs, pre-verifying visual and layout consistency. Subsequently, it copies each UI node object in the temporary prefab to the formal prefab and binds the association identifiers, solidifying the first mapping relationship and ensuring the traceability of UI node objects. Finally, when responding to UI node merging commands to merge associated UI node objects and generating a production environment prefab, it synchronously updates the second mapping relationship, ensuring that the merged formal UI node objects still maintain their association with the design elements. The entire process, through the continuous maintenance of the mapping relationship through association identifiers, achieves stable tracking between the design and development sides, effectively solving the problem of inaccurate automatic UI interface generation.

[0028] It should be noted that the executing entity in this embodiment can be a computing service device with data processing, network communication, and program execution functions, such as a tablet computer, personal computer, or mobile phone, or a UI interface automatic generation device capable of performing the above functions. The following description uses a UI interface automatic generation system as an example to illustrate this embodiment and the subsequent embodiments.

[0029] Based on this, embodiments of this application provide a method for automatically generating a UI interface, referring to... Figure 1 and Figure 2 , Figure 1 and Figure 2 This is a flowchart illustrating the first embodiment of the UI interface automatic generation method of this application. The first embodiment is executed by the UI interface automatic generation system, which includes a development end and a design end. Figure 1 The UI interface automatic generation method process is executed by the development side of the UI automation generation system; Figure 2 The UI interface automatic generation method process is executed by the design end of the UI automation generation system.

[0030] In this embodiment, the UI interface automatic generation method applied to the development end of the UI automation generation system includes steps 101-104: Step 101: Receive the structured data file corresponding to the UI design draft, parse the association identifiers and attribute information of the UI design elements in the structured data file, and create a corresponding UI node container for each UI design element. The association identifier is used to identify UI design elements with different semantics.

[0031] Specifically, the structured data file corresponding to the UI design draft is exported by the design end of the UI automation generation system (such as a Photoshop plugin). It contains information such as the position, size, resource name, link ID (linkId), and hierarchical relationship of all UI design elements. The structured data file is in JavaScript Object Notation (JSON) format. UI design elements are units representing a logical interface component in the UI design draft, such as button backgrounds, text labels, and icons. UI design elements can be represented as layers in the PSD. The link ID (linkId) is a unique identifier assigned by the design end to UI design elements with different semantics. Elements (UI design elements) with the same semantics across states / variants (such as a button in its normal state / clicked state) share the same link ID. The link ID is the core for achieving incremental updates and semantic tracking. Attribute information describes the characteristic data of UI design elements, including position coordinates (x, y), size parameters (width, height), anchor point reference values, resource reference names (such as "btn_login.png"), and tag instructions (such as "@sliced"), which can be used to recreate visual and layout behavior. The UI node container is the basic object carrier (corresponding to GameObject) that represents a UI design element in the development side of a UI automation generation system (such as Unity). It can be used as a structural placeholder and attribute carrier unit.

[0032] In some embodiments, the development end of the UI automation generation system receives a structured data file (usually in JSON format) exported by the design end of the UI automation generation system. This structured data file contains the hierarchical structure, link IDs, and attribute information of each UI design element in the UI design draft. The system parses this structured data file, reads the data of each UI design element one by one, and creates a corresponding UI node container (e.g., an empty GameObject in Unity) for each UI design element in the game engine. At the same time, it constructs the hierarchical structure of the container nodes according to the hierarchical relationship between each UI design element. Each UI node container is associated with its corresponding link ID (linkId) upon creation. This link ID (linkId) is pre-assigned by the design end and is used to uniquely identify UI design elements with specific semantics (such as a "login button" or a "user avatar"), thereby ensuring that different UI design elements are semantically distinguishable from each other. By transforming the structured data file output by the design end into the initial structural skeleton (UI node container) of the UI interface that can be operated by the game engine, and establishing the initial mapping relationship between design semantics and runtime objects through the link IDs (linkId), a foundational support can be provided for subsequent resource binding, preview generation, incremental updates, etc.

[0033] Optionally, the steps to create a corresponding UI node container for each UI design element include: Based on the hierarchical relationship between UI design elements in the structured data file, a collection of UI node containers with hierarchical association is recursively created, with each UI node container in the collection corresponding to a UI design element.

[0034] Specifically, hierarchy can refer to the parent-child / sibling relationship between UI design elements in a UI design draft. For example, in a PSD, the button background layer is the parent layer and the button text layer is the child layer. Hierarchical relationship is a core feature of UI interface structure.

[0035] For example, the structured data file is parsed to extract the hierarchical relationship of each UI design element. Starting with the top-level UI design element, all UI design elements are traversed recursively, creating an independent UI node container for each element. During creation, the UI node containers corresponding to child design elements are attached to the node containers corresponding to their parent design elements, forming a hierarchical relationship consistent with the design draft. After the recursive traversal is completed, all UI node containers are integrated into a set of UI node containers according to their hierarchical relationship. Each container uniquely corresponds to one UI design element, completely restoring the hierarchical structure of the UI design draft and providing a matching structural foundation for subsequent target visualization resource mounting and prefab generation.

[0036] Step 102: Based on the attribute information, match the corresponding target visual resources for each UI node container from the preset resource file, and generate a previewable temporary prefab corresponding to the UI design draft based on the target visual resources, UI node containers and attribute information.

[0037] Specifically, preset resource files can be a collection of visual resources stored in a specified path (such as the project's art slice folder), and can include textures, fonts, materials, etc. Target visual resources are specific resources used to present UI visual effects, such as Sprites (images), Fonts, icon textures, etc. They are the visual fill content of UI node containers and are the core materials for presenting UI visual effects. Temporary prefabs are UI prefabs that only exist in memory or temporary paths. They do not directly participate in game execution, are only used for previewing and verification in the editor, are not written to the official project directory, and have no business logic binding.

[0038] In some embodiments, each UI node container is traversed, and matching target visual resources are retrieved from preset resource files based on the attribute information of the UI node container. Successfully matched target visual resources are mounted to the corresponding UI node container, and parameters such as the node's position, size, and layer are configured based on the attribute information. All configured nodes are organized into a complete prefab object, generated only in the editor's memory and loaded into the preview panel, forming a previewable temporary prefab that is visually consistent with the original UI design draft. This prefab is then confirmed by the developer before deciding whether to import it into the formal project. Simultaneously, a resource matching result log is generated, allowing developers to troubleshoot issues. By locking UI design elements with associated identifiers, matching target visual resources for development-side nodes, and generating temporary prefabs, the visual effects of the design draft are accurately reproduced. A secure preview and verification environment is also provided, allowing for early detection of resource deficiencies, layout deviations, and other issues, preventing errors from entering the formal development process and providing a safe and accurate basic template for subsequent formal prefab generation.

[0039] Optionally, the step of matching the corresponding target visual resource for each UI node container from the preset resource file based on attribute information includes: Extract the resource reference name contained in the attribute information corresponding to the UI node container. The resource reference name includes the texture name and / or font identifier. Based on the resource reference name, perform a resource matching operation in the preset resource file to find the target visual resource corresponding to the texture name and / or the target visual resource corresponding to the font identifier; Bind the matched target visual resource to the corresponding UI node container.

[0040] Specifically, the resource reference name is an identifier stored in the attribute information that points to a specific target visual resource. The resource reference name can include a texture name (e.g., "btn_normal.png") and a font identifier (e.g., "Font_Main_14"). The resource reference name is the core retrieval basis for resource matching. The texture name is a unique name for the image / texture resource associated with the corresponding UI design element, and it corresponds one-to-one with the texture file name in the preset resource file, determining the visual presentation of the node's image. The font identifier can be a unique code / name (e.g., font type + font size) used to identify a specific font style, corresponding to the font resource in the preset resource file, and determining the font presentation effect of text-type nodes. The target visual resource is the actual resource object successfully matched for the UI node container in the preset resource file, which can be used to render the UI node container, such as an image (Sprite) or a font (Font), and is the final target of the resource matching operation.

[0041] For example, the system extracts resource reference names from the attribute information associated with each UI node container. These resource reference names are written by the design team when exporting structured data files and are typically represented as texture names and / or font identifiers. Subsequently, based on these resource reference names, the system performs a resource matching operation in a preset resource file. This allows for precise name comparison to find the corresponding Sprite or Font resource for each UI node container, and successfully matched resources are used as target visual resources. Next, corresponding rendering components are dynamically added to the UI node container, such as Image components for image elements and Text components for text elements, and the matched target visual resources are bound to the corresponding attribute fields of these rendering components. If no matching resource is found, the system can log the missing resource and allocate a default placeholder resource to ensure uninterrupted workflow. By using standardized resource matching logic, visual resources such as textures and fonts defined on the design side are precisely bound to UI node containers on the development side, so that each UI node in the prefab has a visual presentation foundation consistent with the design draft; at the same time, it realizes automated mapping from design semantics to engine-renderable content, avoiding manual drag and drop and configuration, improving the accuracy, efficiency and consistency of UI generation, and laying a visual foundation for subsequent preview and formal import.

[0042] Optionally, the steps for generating a previewable temporary prefab corresponding to the UI design draft based on the target visualization resource, UI node container, and attribute information include: Mount the target visualization resource to the corresponding UI node container to generate the corresponding initial UI node object; Extract the position coordinates, size parameters, and anchor point reference values ​​from the attribute information corresponding to the initial UI node object, and configure the RectTransform property of the initial UI node object based on the position coordinates, size parameters, and anchor point reference values ​​to obtain the corresponding UI node object; Integrate all configured UI node objects to form a complete interface structure and generate a previewable temporary prefab.

[0043] Specifically, the initial UI node object is a UI node container that only has the target visual resource mounted but no layout properties configured. It has visual basics but lacks precise layout features. Position coordinates are the two-dimensional coordinates of the UI design element in the design draft, and also the image coordinates of the UI node object in the UI interface. For example, the X / Y axis offset relative to the canvas determines the position of the UI node object in the UI interface. Size parameters are the width and height values ​​of the UI design element, which determine the display size of the UI node object. Anchor point reference values ​​are reference data used to determine the anchor point position of the UI node (such as the percentage / pixel value of the anchor point relative to the parent node), ensuring that the UI node object adapts to different screen resolutions. The RectTransform property is a core component property in Unity that controls the layout of UI elements, and can include anchoredPosition, sizeDelta, anchors, etc., and is a core configuration item for UI layout. The UI node object is a UI node with complete target visual resource mounting and RectTransform property configuration, possessing complete visual and layout features. The complete interface structure is the overall interface tree structure formed by integrating all UI node objects according to the hierarchical relationship of the design draft, restoring the complete interface form of the design draft.

[0044] For example, it iterates through all UI node containers that have matched the target visual resources, and attaches the target visual resources such as textures, fonts, and materials to the corresponding Image and Text / TextMeshPro components of the UI node containers, transforming the originally blank UI node containers into initial UI node objects with basic visual presentation capabilities. Next, it extracts the position coordinates, size parameters, and anchor point reference values ​​from the attribute information of each initial UI node object. Based on this data (position coordinates, size parameters, and anchor point reference values), it precisely configures the RectTransform property of the initial UI node object. Specifically, it assigns the size parameter to the sizeDelta property to determine the size of the UI node object, assigns the position coordinates to the anchoredPosition property to determine the offset position of the UI node object within its parent node, and assigns the anchor point reference values ​​to the anchorMin / anchorMax properties to determine the anchor point reference of the UI node object. After configuration, it obtains a UI node object with accurate layout and visual completeness. Through the above configuration, it ensures that UI design elements can maintain the layout behavior of the UI design draft under different screen resolutions. Subsequently, following the hierarchical relationship of UI design elements recorded in the structured data file, child nodes are attached layer by layer from the top-level UI node object as the root node. All configured UI node objects are integrated into a complete interface structure consistent with the design draft, and this structure is encapsulated as an independent prefab object and stored in a temporary directory (not written to the final project directory). This allows for direct previewing of the interface visual effects and multi-state comparisons in the Unity editor. Simultaneously, layout validation logs are generated to mark position / size deviation nodes, allowing developers to troubleshoot issues in advance. Through this dual restoration of visuals and layout, a risk-free, complete template is provided for subsequent generation of the final prefab, preventing errors from entering the formal development stage.

[0045] Step 103: Copy each UI node object in the temporary prefab to the formal prefab, and bind a corresponding association identifier to each copied UI node object in the formal prefab to obtain a formal prefab that stores the first mapping relationship. The first mapping relationship is the mapping relationship between UI nodes and corresponding association identifiers in the formal prefab.

[0046] Specifically, UI node objects are Unity GameObject objects that have completed visual resource mounting and RectTransform property configuration, possessing complete visual and layout features. Production prefabs are UI prefabs stored in the game project's production directory, used for subsequent development and packaging; they are production-grade resources. The first mapping relationship is a data structure (such as a dictionary or serialization list) maintained internally within the production prefab, recording the correspondence between each UI node and its corresponding linkId, used for subsequent identification and updates.

[0047] In some embodiments, after the user confirms that the visuals and layout of the TempPrefab are correct in the editor, the user can import the temporary structure into the production prefab. The system first iterates through all UI node objects in the TempPrefab, copying the complete content of each UI node object (including hierarchical structure, component configuration, RectTransform parameters, and visual resource references) to the target production prefab, achieving a safe migration from preview to production. During the copying process, the system can attach a lightweight metadata component, such as LinkIDBinder, to each created UI node object and write the corresponding link ID (linkId) from the UI design draft into this component. This establishes a semantic binding between the UI node object and its link ID, creating a first mapping relationship that describes the mapping between UI node objects in the production prefab and their corresponding link IDs, ensuring that each UI node object is precisely bound to a semantically unique UI design element. Subsequently, this initial mapping relationship can be stored in the root node of the official prefab or a dedicated management component, ensuring that any UI node object can be accurately located using the linkId. Then, the official prefab is generated and saved in the project's Assets directory, ready for use in various scenarios. Furthermore, users can perform minor manual optimizations at this stage: such as adjusting node names, modifying anchor points to adapt to different resolutions, optimizing the hierarchical structure, or replacing some nodes with existing standard controls (such as Button, InputField, etc.), and none of these manual optimizations will disrupt the established initial mapping relationship. By transforming the validated temporary template (i.e., the temporary prefab) into a usable official development carrier (i.e., the official prefab), and establishing a semantic connection between the design and development ends through LinkId mapping, accurate UI structure restoration is ensured, and a traceable and unique identifier is provided for subsequent node merging and updates.

[0048] Step 104: In response to the UI node merge instruction, merge the associated UI node objects associated with the UI node merge instruction to obtain a production environment prefab containing the formal UI node objects. The production environment prefab stores a second mapping relationship that describes the mapping relationship between the formal UI node objects and the corresponding associated identifiers.

[0049] Specifically, the UI node merging command is an operation command triggered by the user or automatically generated to merge specified UI node objects. It may include information such as the association identifier of the nodes to be merged. The associated UI node objects refer to the multiple scattered UI node objects specified in the UI node merging command that need to be merged. The official UI node object is a standardized node object generated after merging, conforming to the project's UI component specifications, possessing a complete component structure (e.g., buttons include backgrounds and text child nodes) and preset functional interfaces. The production environment prefab is the final UI prefab that has been merged and optimized and can be directly used for project development and packaging. It can be stored in the production environment directory and contains a standardized component structure and a second mapping relationship. The second mapping relationship is a data structure that records the correspondence between "official UI node objects in the production environment prefab - association identifiers," replacing the first mapping relationship to ensure the semantic traceability of the merged component (official UI node object) and the UI design elements on the design side.

[0050] In some embodiments, when a developer selects multiple UI node objects in a production prefab and triggers a UI node merge instruction, the developer receives the instruction and parses out the associated UI node objects to be merged. Next, a standard component template can be called from the project's UI component library to create production UI node objects, copying the visual and attribute information of the associated UI node objects. Simultaneously, the original associated nodes are removed, and a second mapping relationship of "production UI node object - associated identifier" is constructed, replacing the original mapping (first mapping relationship). Finally, the production environment prefab is integrated and saved, ensuring that it contains standardized components and traceable mapping relationships. This achieves both engineering optimization of the UI structure and preserves the semantic traceability of UI design elements, providing a precise positioning basis for subsequent incremental updates.

[0051] Optionally, in response to a UI node merge command, the steps of merging the associated UI node objects associated with the UI node merge command to obtain a production environment prefab containing the actual UI node objects include: In response to a user's selection of at least one target UI node object in a formal prefab, a UI node merge instruction is generated. Based on the UI node merging instruction, the target UI node object is determined, and the target UI node object, its sibling nodes at the same level, and its direct child nodes are treated as associated UI node objects. Based on the component type, resource reference name, and spatial relationship of the associated UI node objects to be merged, predict the type of the composite node object corresponding to the associated UI node objects to be merged, and extract the fourth attribute information of the associated UI node objects. Instantiate an initial formal UI node object corresponding to the type of the composite node object from the standard UI node object template library, and configure the RectTransform property of the initial formal UI node object based on the fourth attribute information to obtain the corresponding composite node object; Assign a unique association identifier to the composite node object, and delete the associated UI node objects that participated in the merging, as well as the association identifiers of the associated UI node objects; Other UI node objects, excluding the associated UI node objects, and composite node objects are identified as formal UI node objects to generate a second mapping relationship, resulting in a production environment prefab.

[0052] Specifically, the UI node merge command is an operation command triggered by the user selecting a target node in the editor, used to initiate the merge process. The target UI node object is at least one UI node object selected by the user in the official prefab as the starting point for the merge; the target UI node object is the core triggering basis for the merge command. Associated UI node objects can refer to all UI node objects participating in the merge, including the target UI node object, its sibling nodes at the same level, and its direct child nodes. The composite node object type can refer to the standard component type predicted based on the characteristics of the associated UI node objects, such as Button or InputField. The fourth attribute information is the key attribute extracted from the associated UI node objects used to configure the composite node object, which may include position coordinates, size parameters, anchor point reference values, resource reference names, etc. The standard UI node object template library is a resource library storing all standard UI component templates (such as Button template and Slider template) for the project. Standard UI component templates contain preset node structures and component configurations. The initial official UI node object is a standard component instance instantiated from the standard UI node object template library without specific attribute configuration; it has a basic structure but no personalized configuration. Composite node objects are the final UI node objects with complete visual and layout features after attribute configuration, representing the final component form after merging. Assigning a unique association identifier can refer to migrating the linkId with primary semantics from the associated UI node objects to be merged to the root node of the new control, maintaining semantic continuity. The final UI node object is the UI node object ultimately retained in the production environment prefab, which may include composite node objects and other UI node objects not involved in the merging. The production environment prefab is the final UI prefab that has been merged and optimized, ready for direct use in project development and packaging, containing a standardized component structure and secondary mapping relationships.

[0053] For example, on the development side of the UI automation generation system, users can select at least one target UI node object, such as the background node of a button, in the editing interface of the formal prefab by clicking or selecting with a mouse. The development side of the UI automation generation system responds to this selection operation and automatically generates a UI node merging instruction containing the target node identifier. Based on this UI node merging instruction, the target UI node object is first located, and then all sibling nodes of the target UI node object at the same level (such as text nodes at the same level as the background node) and direct child nodes (such as icon nodes under the background node) are included to form a set of related UI node objects to be merged, ensuring that semantically related nodes are completely covered. Subsequently, feature analysis is performed on the related UI node objects: based on the component type of the related UI node objects (such as whether they contain Image or Text components), resource reference names (such as names containing the keywords "btn" or "input"), and spatial position relationships (such as whether the nodes overlap or whether the arrangement conforms to the component layout), the type of the synthesized node object is predicted by a preset rule matching algorithm, such as determining it to be a Button component. At the same time, the fourth attribute information of the related UI node objects is extracted, including the position coordinates, size parameters, anchor point reference values, and resource attributes such as resource reference names of the related UI node objects. Next, a template matching the type of the composite node object is called from the standard UI node object template library, such as the Button template, to instantiate an initial formal UI node object containing a preset child node structure (such as Background and Text child nodes). Then, the fourth attribute information is configured to the RectTransform property of this initial formal UI node object to complete the setting of position, size, and anchor point, and the resource attributes are assigned to the components of the corresponding child nodes, such as attaching a background texture to the Background child node, resulting in a composite node object whose visual appearance and layout conform to the design draft. Crucially, the system migrates and binds the association identifier (linkId) with the main semantics in the original associated nodes to the root node of the composite node object as its exclusive identifier, and simultaneously deletes all associated UI node objects participating in the merging and their original association identifiers from the formal prefab, cleaning up redundant nodes and old mapping information. Finally, the composite node object is attached to the parent node of the original associated node, and together with other UI node objects that did not participate in the merging, it constitutes the formal UI node object; at the same time, a second mapping relationship of "formal UI node object - associated identifier" is constructed (the composite node corresponds to the new identifier, and other nodes retain the original identifier), replacing the original first mapping relationship. Finally, the integrated structure is saved as a production environment prefab and stored in the project production directory.

[0054] By intelligently identifying the user-selected UI node and its associated UI node objects, the system automatically aggregates and replaces the associated UI node objects with standard controls that conform to project specifications. Simultaneously, the original semantic identifier (linkId) is migrated to the root node of the new control. This achieves both engineering optimization and reuse of the UI structure while fully preserving the traceability of the design semantics. The resulting production environment prefab combines high code quality with automated update capabilities, effectively solving the technical problems of semantic chain breaks and the inability to incrementally synchronize subsequent code caused by traditional manual refactoring.

[0055] Based on the UI interface automatic generation method provided in this application, the development end of the UI automated generation system receives the structured data file corresponding to the UI design draft, parses the association identifiers and attribute information of the UI design elements in the structured data file, and creates a corresponding UI node container for each UI design element. The association identifier is used to identify UI design elements with different semantics, establishing a preliminary association between UI design elements and development end nodes. The association identifier locks the semantically unique UI design elements, laying the foundation for subsequent accurate mapping. Based on the attribute information, the system matches the corresponding target visual resources for each UI node container from the preset resource file, and generates a previewable temporary prefab corresponding to the UI design draft based on the target visual resources, UI node containers, and attribute information. This quickly restores the visual effect of the design draft, provides a secure preview and verification environment, and avoids contaminating the formal development environment. The system copies each UI node object in the temporary prefab to the formal prefab, and binds the corresponding association identifier to each copied UI node object in the formal prefab, resulting in a formal prefab storing the first mapping relationship. The first mapping relationship is the mapping relationship between UI nodes in the formal prefab and their corresponding association identifiers, realizing the accurate binding of design elements and development end nodes, and providing a traceable basis for subsequent merging and updates. In response to the UI node merge command, the associated UI node objects associated with the UI node merge command are merged to obtain a production environment prefab containing the formal UI node objects. The production environment prefab stores a second mapping relationship that describes the mapping relationship between the formal UI node objects and their corresponding associated identifiers. The scattered nodes are integrated into standardized components (i.e., formal UI node objects). The mapping relationship between the formal UI node objects and their corresponding associated identifiers is updated synchronously to ensure that the components (UI node objects) are standardized while maintaining the traceability of the mapping relationship.

[0056] In this embodiment, the UI interface automatic generation method applied to the design end of the UI automation generation system includes steps 201-203: Step 201: Obtain an initial UI design draft that includes multiple first UI design elements, and assign the same association identifier to first UI design elements with the same semantics.

[0057] Specifically, the initial UI design draft is the original interface file completed by art designers using design tools (such as Photoshop and Figma). It can contain multiple first UI design elements (layers or components), each of which can represent one or more interface states (such as the normal / pressed state of the login page). The first UI design element refers to the basic building block in the initial UI design draft, usually corresponding to a layer or component (such as button background, text label, icon). The first UI design element is the basic object for subsequent semantic identification. Semantic similarity refers to different manifestations of the same UI control in terms of logical function. For example, the three layers of the "login button" in the normal, pressed, and disabled states may look different, but they have the same semantic meaning. The link identifier (linkId) is a unique string ID assigned by the design team, such as "login_btn," used to identify a group of semantically similar UI design elements. The link identifier is the core anchor point for cross-artboard and cross-state tracking.

[0058] In some embodiments, the UI automation generation system loads the initial UI design draft created by the designer in tools such as Photoshop and Figma, parses the initial UI design draft, and breaks it down into multiple first UI design elements (single layers or basic components). Then, based on preset naming rules, visual similarity, and group affiliation, it identifies semantically similar first UI design elements (such as different state layers of a button), assigns a unique association identifier to each group of semantically similar first UI design elements, and binds them. Simultaneously, it can visually mark or highlight semantically similar elements on the design interface, and synchronously store the attribute information and association identifier data of the first UI design elements, providing a foundation for subsequent processes. By injecting structured semantic information (i.e., association identifiers) into the initial UI design draft, it provides key tracking basis for the automatic generation and updating of subsequent UI interfaces.

[0059] Step 202: If at least one processing operation is detected for any first UI design element, a processed UI design draft is obtained. The UI design draft includes multiple UI design elements, and the processing operations include copy operation, state modification operation, and marking operation.

[0060] Specifically, processing operations refer to the editing operations performed by art designers on the first UI design element in the initial UI design draft on the design side. These include copying, state modification, and marking operations, used for iterative optimization of the design draft. Copying can refer to copying an existing first UI design element to generate a new UI element, such as copying a button background layer to create a clickable layer; the new UI element shares basic attributes with the original UI element. State modification operations can refer to modifying the visual state of the first UI design element, such as changing a button from "normal" to "disabled," adjusting the UI element's color, transparency, and other attributes while maintaining semantic consistency. Marking operations can refer to embedding layout or component type instructions through naming conventions (such as adding tags like @sliced ​​and #btn). The processed UI design draft can refer to the complete design file containing multiple states or instances formed after the above processing operations, still maintaining semantic consistency.

[0061] In some embodiments, when the design plugin detects that a user performs a processing operation on any first UI design element with an assigned associated identifier, the system automatically responds and updates the design draft structure. If the user performs a copy operation (such as copying a button layer to create a new state), the system automatically inherits the linkId of the original UI design element to the new UI design element; if a state modification operation is performed (such as adjusting the color to indicate a pressed state), only the attribute information of the UI design element is updated while the linkId remains unchanged; if a marking operation is performed (such as adding "@sliced" to the end of the layer name), the mark is parsed and recorded as a layout instruction. After all processing operations are completed, a processed UI design draft containing multiple UI design elements is generated, where UI design elements with the same semantics still share the same associated identifier, and the newly added marks and attributes are accurately captured, providing a complete and consistent input source for subsequent export of structured data.

[0062] Optionally, if at least one processing operation is detected for any first UI design element, the process of obtaining a processed UI design draft, wherein the UI design draft includes multiple UI design elements, includes: If a copy operation is detected for any first UI design element, a corresponding second UI design element is generated, and the association identifier of the first UI design element is inherited to the second UI design element; If a state modification operation is detected for any first UI design element, a corresponding third UI design element is generated, and the association identifier of the first UI design element is inherited to the third UI design element. The first UI design element, the second UI design element, and the third UI design element are identified as UI design elements; If a user adds a tag instruction to any UI design element, the tag instruction is embedded into the attribute information of the corresponding UI design element to obtain a UI design draft that includes multiple UI design elements. The tag instruction is used to instruct the development end of the UI automation generation system to perform the corresponding preset operation, which includes horizontal flipping, nine-grid setting, or creating preset controls.

[0063] Specifically, the second UI design element is a new element generated by the copy operation, inheriting the association identifier of the original element and having the same semantics. The third UI design element is a new element generated by the state modification operation, inheriting the association identifier of the original element, and can represent different states of the same component (element). Tag instructions are special instructions that users can embed through naming conventions (such as adding @flipH, @sliced, #InputField). Preset operations are behaviors that the development team automatically executes based on tag instructions, such as horizontally flipping an image, setting a nine-grid stretch, replacing with a standard control, creating a preset control, etc. Preset controls can be buttons, input boxes, etc.

[0064] For example, when a user is detected performing a copy operation on any first UI design element with an assigned linkId (e.g., copying a layer to create a new instance, or copying an entire canvas for a multi-state interface), a corresponding second UI design element is automatically generated, and its linkId is automatically inherited from the source UI design element. This ensures that the second UI design element is logically still considered a different manifestation or position of the same control (UI design element). Similarly, when a user is detected performing a state modification operation on a first UI design element (e.g., adjusting the color to indicate a "pressed" state, moving the position to simulate click feedback, changing the transparency to express a disabled effect), the modified UI design element is identified as a third UI design element. While retaining its visual changes, it inherits the original linkId, thereby maintaining semantic continuity across states. Through the inheritance mechanism of the linkId, the semantic association of elements is ensured not to be lost during the design draft iteration process (copying, state modification), solving the problem that multi-state components in traditional design drafts are difficult for the development side to recognize. Subsequently, the original first UI design element, the copied second UI design element, and the state-modified third UI design element are uniformly included in the UI design element set. Building upon this foundation, if a user performs a marking operation on any UI design element—for example, adding special symbols like @flipH, @sliced, or #InputField to the end of the element's name—the system will parse these naming conventions, extract the marking instructions, and embed them as metadata into the UI design element's attribute information. These marking instructions have clear engineering meanings. For instance, @flipH instructs the developer to perform a horizontal flip on the corresponding UI node object, @sliced ​​instructs to perform a 3x3 grid slicing, and #InputField instructs the developer to create a pre-defined control. This embedding of marking instructions provides clear automated operation guidance to the developer, avoiding information gaps between design and development, improving the accuracy and efficiency of automated UI generation, and ensuring that the design intent of the draft is transmitted to the development stage seamlessly and efficiently. Ultimately, all UI design elements that have undergone copying, state modification, and marking processes constitute a complete processed UI design draft. This UI design not only retains all the visual details of the art design, but also transforms the design intent into structured and executable engineering instructions through the linkId inheritance mechanism and markup instruction injection. This provides a precise and reliable data foundation for the development side to automatically generate high-fidelity, interactive, and project-compliant UI prefabs, effectively bridging the semantic gap between design and development.

[0065] Step 203: Encapsulate the attribute information of the UI design elements and their corresponding associated identifiers into a structured JSON file to obtain the structured data file corresponding to the UI design draft and output it.

[0066] In some embodiments, after the UI design draft in PSD format is completed, JSON export and LinkId completion operations are performed: First, all UI design elements (layers) in the UI design draft are traversed, and unique linkIds are automatically generated for UI design elements (layers) that have not been assigned linkIds, ensuring that each UI design element has a linkId. Then, following the original layer order in the PSD, the attribute information (such as position, size, and resource reference name) of each UI design element is extracted and bound to the corresponding linkId as a data object. Next, all UI design element data objects are integrated into a JSON file with a preset structure according to the layer order, completing format validation and cleaning up redundant information. Finally, this structured JSON file (i.e., structured data file) is output to a specified path, supporting direct upload to SVN for version control. This structured data file serves as the sole input source for automatically generating the UI on the development side, ensuring that design semantics, visual representation, and layout logic can be accurately reproduced, achieving efficient collaboration between design and development.

[0067] Based on the UI interface automatic generation method provided in this application, the design end of the UI automated generation system obtains an initial UI design draft including multiple first UI design elements, and assigns the same association identifier to first UI design elements with the same semantics. This establishes the semantic uniqueness of UI design elements from the design source, replacing the unstable matching method that relies on layer naming or visual features in the traditional way. This provides a unique and reliable basis for the subsequent development end to accurately identify "which nodes belong to the same logical component". If at least one processing operation is detected on any first UI design element, a processed UI design draft is obtained. The UI design draft includes multiple UI design elements, and the processing operations include copying, state modification, and marking. When a copying, state modification, or marking operation is detected on a first UI design element, the newly generated or modified UI design element is automatically included in the management and its original association identifier is retained, thereby ensuring that the core semantic relationship of the UI design draft is not lost during the iteration process. The attribute information of UI design elements and their corresponding associated identifiers are encapsulated into a structured JSON file, resulting in a structured data file corresponding to the UI design draft and outputting it. Unstructured design drafts (such as PSD files) are transformed into standardized data that the development end can directly and accurately parse. This eliminates the need for the development end to parse complex design file formats during the automatic generation of UI interfaces. Instead, it only needs to read the JSON file of the design draft, thus solving data quality and non-standard issues from the source. This lays the data foundation for accurate parsing, node mapping, and traceable updates on the development end.

[0068] In some embodiments, after obtaining the production environment prefab containing the formal UI node objects, the method further includes: After receiving the updated structured data file corresponding to the updated UI design draft, read the second mapping relationship in the production environment prefab and the second attribute information of the formal UI node object; The association identifiers and attribute information of UI design elements in the updated structured data file are parsed to obtain the third mapping relationship that describes the mapping relationship between UI design elements and their corresponding association identifiers in the updated structured data file, as well as the third attribute information of UI design elements in the updated structured data file. By comparing the second and third mapping relationships, as well as the second and third attribute information, the correction node object and correction category are determined. Based on the correction category and correction node object, a partial update operation is performed on the production environment prefab, and the updated production environment prefab is output.

[0069] Specifically, the updated structured data file is a JSON file generated from the updated UI design draft, containing the latest attribute information and association identifiers of all UI design elements. The second attribute information is the current attribute information of the formal UI node objects in the pre-built production environment. The third mapping relationship is a data structure parsed from the updated structured data file, recording the correspondence between "updated UI design elements and association identifiers." The third attribute information is the latest attribute information of the UI design elements in the updated structured data file. Correcting node objects involves identifying formal UI node objects that need to be modified, added, or deleted by comparing the second and third mapping relationships and attribute information. The correction category is the update type determined based on the comparison results, such as node addition, node obsolescence, and attribute modification.

[0070] Optionally, UI design elements corresponding to association identifiers that exist in the third mapping relationship but not in the second mapping relationship are identified as nodes to be added, i.e., modified node objects, and the modification category is determined as node addition; formal UI node objects corresponding to association identifiers that exist in the second mapping relationship but not in the third mapping relationship are identified as nodes to be discarded, i.e., modified node objects, and the modification category is determined as node discard; for association identifiers that exist in both the second and third mapping relationships, their corresponding second attribute information and third attribute information are compared: if the information is inconsistent, their corresponding formal UI node objects are identified as nodes to be modified, i.e., modified node objects, and the modification category is determined as attribute modification.

[0071] As an example, after the UI design draft is iterated and updated, the development team receives the updated structured data file (JSON format) uploaded by the art designer and then initiates the automated update process. First, it loads the prefab already generated in the current project for the production environment, reads the second mapping relationship (the correspondence between "formal UI node objects and associated identifiers") and the second attribute information (current position, size, resource references, etc.) of all formal UI node objects stored within the prefab, and establishes local baseline data. Next, it parses the updated structured data file, extracts the associated identifiers and latest attribute information of all UI design elements, constructs the third mapping relationship (the correspondence between "updated UI design elements and associated identifiers") and the third attribute information (the latest visual and layout parameters of the design draft), forming the updated data baseline. Subsequently, using the association identifier as the unique matching key, a dual comparison is performed: on the one hand, the second and third mapping relationships are compared to identify newly added association identifiers (corresponding to newly added nodes) that exist only in the third mapping, redundant association identifiers (corresponding to nodes to be discarded) that exist only in the second mapping, and association identifiers that exist in both mappings (corresponding to attribute nodes to be verified); on the other hand, for the second and third attribute information corresponding to association identifiers that exist in both the second and third mapping relationships, key parameters such as position, size, and resource reference name are verified item by item to determine whether there are any changes. Based on the attribute comparison results, the corrected node objects (new, discarded, and attribute-changed nodes) and correction categories (node ​​addition, node discarding, and attribute modification) are identified. Finally, partial update operations are performed for different correction categories: for correction node objects whose correction category is attribute modification, their second attribute information can be overwritten with third attribute information to maintain the node structure; for correction node objects whose correction category is node addition, a new formal UI node object is created based on the third mapping relationship and third attribute information, mounted to the corresponding level of the prefab, and the mapping relationship is updated; for correction node objects whose correction category is node deletion, the corresponding formal UI node object and mapping relationship entry are removed from the prefab. After the update is completed, an updated production environment prefab consistent with the latest UI design draft is output, without any manual intervention. After the UI design draft is changed, accurate, safe, and localized incremental updates to the production environment prefab are achieved based on the link identifier (linkId), realizing accurate synchronization from design changes to project implementation. While ensuring high-fidelity UI restoration, this avoids the loss of logic caused by full reconstruction.

[0072] In some embodiments, the correction categories include node addition, node obsolescence, and attribute modification. The steps of performing a partial update operation on the production environment prefab based on the correction category and the correction node object, and outputting the updated production environment prefab, include: If the correction category is node addition, based on the third attribute information of the correction node object, a new official UI node object is created in the production environment prefab, and the association identifier of the correction node object is bound to the new official UI node object; If the correction category is node obsolete, delete the corrected node object and its associated identifier; If the correction category is attribute modification, the RectTransform property of the correction node object is modified based on the third attribute information of the correction node object. After completing the partial update operation, update the mapping relationship between the formal UI node objects stored in the production environment prefab and their corresponding associated identifiers, and generate the updated production environment prefab.

[0073] As an example, if the correction category is node addition, based on the third attribute information (such as position coordinates, size parameters, anchor reference values, resource reference names, and tag instructions) of the corrected node object in the updated structured data file, a new formal UI node object conforming to engineering specifications is instantiated from the standard control template library. Its visual components and layout parameters are configured, and the corresponding association identifier is bound to its root node through the metadata component. Then, the newly generated formal UI node object is mounted to the correct level of the production environment prefab. If the correction category is node obsolescence, the UI node object that no longer exists in the production environment is located and removed, and its association identifier is deleted from the second mapping relationship to avoid residual data interfering with subsequent updates. If the correction category is attribute modification, the node is not rebuilt. Instead, the new values ​​in the third attribute information (such as anchoredPosition, sizeDelta, anchor points, etc.) are directly read, and the RectTransform property of the corrected node object is precisely updated, thus preserving the scripts, event listeners, and other runtime logic already bound to it. After all local operations are completed, the updated UI structure is traversed, a complete mapping relationship between formal UI node objects and their associated identifiers is reconstructed and serialized, replacing the original mapping data, and finally generating the updated production environment prefab. By decomposing update operations into three categories—node addition, node obsolescence, and attribute modification—and using associated identifiers for precise positioning, fine-grained local update operations are performed on the current production environment prefab based on the identified correction category, efficient and secure UI iteration is achieved, improving the iteration efficiency and accuracy of UI development and ensuring a high degree of synchronization between design and development.

[0074] In some embodiments, after obtaining the formal prefab storing the first mapping relationship, the method further includes: After receiving the updated structured data file corresponding to the updated UI design draft, read the first mapping relationship and the attribute information of the UI node object in the formal prefab; The association identifiers and attribute information of UI design elements in the updated structured data file are parsed to obtain the third mapping relationship that describes the mapping relationship between UI design elements and their corresponding association identifiers in the updated structured data file, as well as the third attribute information of UI design elements in the updated structured data file. By comparing the first mapping relationship and the third mapping relationship, as well as the attribute information and the third attribute information, the second correction node object and the second correction category are determined. Based on the second correction category and the second correction node object, perform a partial update operation on the formal prefab and output the updated formal prefab.

[0075] It should be noted that the above examples are only for understanding this application and do not constitute a limitation on the automatic UI interface generation method of this application. Any simple modifications based on this technical concept are within the protection scope of this application.

[0076] This application also provides a UI interface automatic generation device, please refer to... Figure 3 The UI interface automatic generation device includes: The data parsing module 301 is used to receive the structured data file corresponding to the UI design draft, parse the association identifiers and attribute information of the UI design elements in the structured data file, and create a corresponding UI node container for each UI design element. The association identifier is used to identify UI design elements with different semantics. The first generation module 302 is used to match the corresponding target visual resources for each UI node container from the preset resource file based on the attribute information, and generate a previewable temporary prefab corresponding to the UI design draft based on the target visual resources, UI node containers and attribute information. The second generation module 303 is used to copy each UI node object in the temporary prefab to the formal prefab, bind a corresponding association identifier to each copied UI node object in the formal prefab, and obtain a formal prefab that stores a first mapping relationship. The first mapping relationship is the mapping relationship between UI nodes and corresponding association identifiers in the formal prefab. The node merging module 304 is used to respond to the UI node merging instruction, merge the associated UI node objects associated with the UI node merging instruction, and obtain a production environment prefab containing the formal UI node objects. The production environment prefab stores a second mapping relationship that describes the mapping relationship between the formal UI node objects and the corresponding associated identifiers.

[0077] The UI interface automatic generation device provided in this application, employing the UI interface automatic generation method in the above embodiments, can solve the technical problem in the prior art where the lack of a traceable mapping relationship between UI design elements and UI nodes on the development side leads to inaccurate automatic UI interface generation. Compared with the prior art, the beneficial effects of the UI interface automatic generation device provided in this application are the same as those of the UI interface automatic generation method provided in the above embodiments, and other technical features in the UI interface automatic generation device are the same as those disclosed in the methods of the above embodiments, and will not be repeated here.

[0078] This application provides a UI interface automatic generation device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the UI interface automatic generation method in the above embodiment 1.

[0079] The following is for reference. Figure 4 The diagram illustrates a structural schematic suitable for implementing the UI interface automatic generation device of the embodiments of this application. The UI interface automatic generation device in the embodiments of this application may include, but is not limited to, mobile terminals such as laptops, tablets (Portable Application Description, PAD), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs and desktop computers. Figure 4 The UI interface automatically generated device shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.

[0080] like Figure 4As shown, the UI interface automatic generation device may include a processing unit 1001 (e.g., a central processing unit, a graphics processing unit, etc.), which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 1002 or a program loaded from storage device 1003 into random access memory (RAM) 1004. The random access memory 1004 also stores various programs and data required for the operation of the UI interface automatic generation device. The processing unit 1001, ROM 1002, and RAM 1004 are interconnected via a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Typically, the following systems can be connected to the input / output interface 1006: input devices 1007 including, for example, touchscreens, touchpads, keyboards, mice, image sensors, microphones, accelerometers, gyroscopes, etc.; output devices 1008 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 1003 including, for example, magnetic tapes, hard disks, etc.; and communication devices 1009. Communication device 1009 allows the UI interface automatic generation device to communicate wirelessly or wiredly with other devices to exchange data. Although UI interface automatic generation devices with various systems are shown in the figures, it should be understood that it is not required to implement or possess all the systems shown. More or fewer systems can be implemented alternatively.

[0081] Specifically, according to the embodiments disclosed in this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device, or installed from storage device 1003, or installed from read-only memory 1002. When the computer program is executed by processing device 1001, it performs the functions defined in the methods of the embodiments disclosed in this application.

[0082] The UI interface automatic generation device provided in this application, employing the UI interface automatic generation method in the above embodiments, can solve the technical problem in the prior art where the lack of a traceable mapping relationship between UI design elements and UI nodes on the development side leads to inaccurate automatic UI interface generation. Compared with the prior art, the beneficial effects of the UI interface automatic generation device provided in this application are the same as those of the UI interface automatic generation method provided in the above embodiments, and other technical features in this UI interface automatic generation device are the same as those disclosed in the previous embodiment method, and will not be repeated here.

[0083] It should be understood that the various parts disclosed in this application can be implemented using hardware, software, firmware, or a combination thereof. In the description of the above embodiments, specific features, structures, materials, or characteristics can be combined in any suitable manner in one or more embodiments or examples.

[0084] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

[0085] This application provides a computer-readable storage medium having computer-readable program instructions (i.e., a computer program) stored thereon, the computer-readable program instructions being used to execute the UI interface automatic generation method in the above embodiments.

[0086] The computer-readable storage medium provided in this application may be, for example, a USB flash drive, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to: electrical connections with one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, system, or device. The program code contained on the computer-readable storage medium may be transmitted using any suitable medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination thereof.

[0087] The aforementioned computer-readable storage medium may be included in the UI interface automatic generation device; or it may exist independently and not assembled into the UI interface automatic generation device.

[0088] The aforementioned computer-readable storage medium carries one or more programs. When these programs are executed by the UI interface automatic generation device, the UI interface automatic generation device: receives a structured data file corresponding to the UI design draft; parses the association identifiers and attribute information of UI design elements in the structured data file; and creates a corresponding UI node container for each UI design element. The association identifier is used to identify UI design elements with different semantics. Based on the attribute information, it matches corresponding target visual resources for each UI node container from a preset resource file, and generates a previewable temporary prefab corresponding to the UI design draft based on the target visual resources, UI node containers, and attribute information. It copies each UI node object in the temporary prefab to the formal prefab, and binds a corresponding association identifier to each copied UI node object in the formal prefab, thereby obtaining a formal prefab storing a first mapping relationship, which is the mapping relationship between UI nodes and corresponding association identifiers in the formal prefab. In response to a UI node merging instruction, it merges the associated UI node objects associated with the UI node merging instruction to obtain a production environment prefab containing formal UI node objects. The production environment prefab stores a second mapping relationship describing the mapping relationship between formal UI node objects and corresponding association identifiers.

[0089] Computer program code for performing the operations of this application can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++, and conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a Local Area Network (LAN) or a Wide Area Network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0090] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0091] The modules described in the embodiments of this application can be implemented in software or hardware. The names of the modules do not necessarily limit the functionality of the unit itself.

[0092] The readable storage medium provided in this application is a computer-readable storage medium that stores computer-readable program instructions (i.e., a computer program) for executing the above-described automatic UI interface generation method. This solves the technical problem in the prior art where the lack of a traceable mapping relationship between UI design elements and UI nodes on the development side leads to inaccurate automatic UI interface generation. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as those of the automatic UI interface generation method provided in the above embodiments, and will not be repeated here.

[0093] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the UI interface automatic generation method described above.

[0094] The computer program product provided in this application can solve the technical problem in the prior art where the lack of a traceable mapping relationship between UI design elements and UI nodes on the development side leads to inaccurate automatic generation of UI interfaces. Compared with the prior art, the beneficial effects of the computer program product provided in this application are the same as those of the automatic UI interface generation method provided in the above embodiments, and will not be repeated here.

[0095] The above description is only a part of the embodiments of this application and does not limit the patent scope of this application. All equivalent structural transformations made under the technical concept of this application and using the contents of the specification and drawings of this application, or direct / indirect applications in other related technical fields, are included in the patent protection scope of this application.

Claims

1. A method for automatically generating a UI interface, characterized by, The UI interface automatic generation method, applied to the development side of a UI automation generation system, includes: Receive the structured data file corresponding to the UI design draft, parse the association identifier and attribute information of the UI design elements in the structured data file, and create a corresponding UI node container for each UI design element. The association identifier is used to identify UI design elements with different semantics. Based on the attribute information, a corresponding target visual resource is matched for each UI node container from a preset resource file, and a previewable temporary prefab corresponding to the UI design draft is generated according to the target visual resource, the UI node container and the attribute information. Each UI node object in the temporary prefab is copied to the formal prefab, and a corresponding association identifier is bound to each copied UI node object in the formal prefab, to obtain a formal prefab that stores a first mapping relationship. The first mapping relationship is the mapping relationship between the UI node in the formal prefab and the corresponding association identifier. In response to a UI node merge command, the associated UI node objects associated with the UI node merge command are merged to obtain a production environment prefab containing formal UI node objects, and the production environment prefab stores a second mapping relationship that describes the mapping relationship between the formal UI node objects and the corresponding associated identifiers. The step of obtaining the production environment prefab containing the formal UI node objects further includes: After receiving the updated structured data file corresponding to the updated UI design draft, read the second mapping relationship in the production environment prefab and the second attribute information of the formal UI node object; The association identifiers and attribute information of UI design elements in the updated structured data file are parsed to obtain a third mapping relationship that describes the mapping relationship between UI design elements and their corresponding association identifiers in the updated structured data file, as well as the third attribute information of UI design elements in the updated structured data file. By comparing the second mapping relationship and the third mapping relationship, as well as the second attribute information and the third attribute information, the correction node object and the correction category are determined; Based on the correction category and the correction node object, a partial update operation is performed on the production environment prefab, and the updated production environment prefab is output.

2. The method of claim 1, wherein, The correction categories include node addition, node obsolescence, and attribute modification. The step of performing a partial update operation on the production environment prefab based on the correction categories and the correction node objects, and outputting the updated production environment prefab, includes: If the correction category is node addition, a new formal UI node object is created in the production environment prefab based on the third attribute information of the correction node object, and the association identifier of the correction node object is bound to the new formal UI node object; If the correction category is node obsolete, delete the corrected node object and its associated identifier; If the correction category is attribute modification, the RectTransform attribute of the correction node object is corrected based on the third attribute information of the correction node object; After completing the partial update operation, the mapping relationship between the formal UI node objects and their corresponding associated identifiers stored in the production environment prefab is updated to generate the updated production environment prefab.

3. The method of claim 1, wherein, The step of matching corresponding target visual resources for each UI node container from a preset resource file based on the attribute information includes: Extract the resource reference name contained in the attribute information corresponding to the UI node container, wherein the resource reference name includes the texture name and / or font identifier; Based on the resource reference name, a resource matching operation is performed in the preset resource file to find the target visual resource corresponding to the texture name and / or the target visual resource corresponding to the font identifier; Bind the matched target visualization resource to the corresponding UI node container.

4. The method of claim 1, wherein the UI interface is automatically generated based on the UI interface definition file. The step of generating a previewable temporary prefab corresponding to the UI design draft based on the target visualization resource, UI node container, and attribute information includes: The target visualization resource is mounted to the corresponding UI node container to generate the corresponding initial UI node object; Extract the position coordinates, size parameters, and anchor point reference values ​​from the attribute information corresponding to the initial UI node object, and configure the RectTransform property of the initial UI node object based on the position coordinates, size parameters, and anchor point reference values ​​to obtain the corresponding UI node object; Integrate all configured UI node objects to form a complete interface structure and generate the previewable temporary prefab.

5. The method of claim 1, wherein, The step of merging the associated UI node objects associated with the UI node merge command in response to the UI node merge command to obtain a production environment prefab containing the actual UI node objects includes: In response to a user's selection of at least one target UI node object in the formal prefab, the UI node merge instruction is generated; Based on the UI node merging instruction, the target UI node object is determined, and the target UI node object, its sibling nodes at the same level, and its direct child nodes are used as the associated UI node objects. Based on the component type, resource reference name, and spatial relationship of the associated UI node objects to be merged, predict the type of the composite node object corresponding to the associated UI node objects to be merged, and extract the fourth attribute information of the associated UI node objects. Instantiate an initial formal UI node object corresponding to the type of the composite node object from the standard UI node object template library, and configure the RectTransform property of the initial formal UI node object based on the fourth attribute information to obtain the corresponding composite node object; Assign a unique association identifier to the synthesized node object, and delete the associated UI node objects participating in the merging process, as well as the association identifiers of the associated UI node objects; The other UI node objects, excluding the associated UI node object, and the composite node object are identified as the formal UI node objects to generate the second mapping relationship and obtain the production environment prefab.

6. A device for automatically generating a UI interface, characterized by, The device includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the UI interface automatic generation method as described in any one of claims 1 to 5.

7. A storage medium, characterized by The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, it implements the steps of the UI interface automatic generation method as described in any one of claims 1 to 5.

Images