Data processing method and system

By determining the layer data of design elements and querying the knowledge base in UI/UX design, and using the information to generate models to update design elements, the problem of insufficient realism in design drafts is solved, and design efficiency and realism are improved.

CN122240068APending Publication Date: 2026-06-19ZHEJIANG TMALL TECH CO LTD

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
ZHEJIANG TMALL TECH CO LTD
Filing Date
2026-01-29
Publication Date
2026-06-19

AI Technical Summary

Technical Problem

In traditional UI/UX design, design drafts lack realism. Designers rely on placeholder images and text, making it difficult for design drafts to accurately reflect the user experience during product reviews and user testing, and resulting in low design efficiency.

Method used

By determining the element layer data of design elements in the interface design draft, querying the design draft knowledge base to obtain constraint information, and using the information generation model to update the elements, element update information matching the interface design draft is generated.

Benefits of technology

It improves the efficiency and usability of updating design elements, reduces the time spent searching for materials, and enhances the realism of design drafts and their matching with the scene.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN122240068A_ABST
    Figure CN122240068A_ABST
Patent Text Reader

Abstract

This specification provides a data processing method and system. The data processing method includes: determining design elements in an interface design draft and determining element layer data of the design elements; determining the element type of the design elements based on the element layer data, and querying a design draft knowledge base based on the design draft type of the interface design draft to obtain constraint information of the interface design draft; inputting the element layer data, the element type, and the constraint information into an information generation model to obtain element update information, and updating the design elements in the interface design draft based on the element update information.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The embodiments in this specification relate to the field of data processing technology, and in particular to data processing methods and systems. Background Technology

[0002] In traditional UI / UX design processes, designers typically rely on placeholder text and images (such as generic text and images) to fill in interface elements to complete layouts and visual expression. However, such content lacks contextual relevance, making it difficult for design drafts to accurately reflect the final user experience during critical stages such as product review and usability testing. Existing technologies often offer basic random content filling functions, but the generated results are frequently severely disconnected from the application scenario, failing to reflect real interaction logic and data relationships, resulting in designs lacking realism. Manually finding and filling interface elements with materials is time-consuming, leading to low design completion efficiency. Therefore, a more effective data processing method is urgently needed to address these issues. Summary of the Invention

[0003] In view of the above, embodiments of this specification provide a data processing method. One or more embodiments of this specification also relate to a data processing system, a data processing apparatus, a computing device, a computer-readable storage medium, and a computer program product, to address the technical deficiencies existing in the prior art.

[0004] According to a first aspect of the embodiments of this specification, a data processing method is provided, comprising: In the interface design draft, determine the design elements and the element layer data of the design elements; The element type of the design element is determined based on the element layer data, and the design draft knowledge base is queried based on the design draft type of the interface design draft to obtain the constraint information of the interface design draft. The element layer data, the element type, and the constraint information are input into the information generation model to obtain element update information, and the design elements in the interface design draft are updated based on the element update information.

[0005] According to a second aspect of the embodiments of this specification, a data processing system is provided, including a client and a server, comprising: The client is used to submit update requests to the server based on the interface design draft; The server is configured to respond to the update request by identifying design elements in the interface design draft and determining the element layer data of the design elements; determining the element type of the design elements based on the element layer data, and querying the design draft knowledge base based on the design draft type of the interface design draft to obtain the constraint information of the interface design draft; inputting the element layer data, the element type, and the constraint information into the information generation model to obtain element update information, and updating the design elements in the interface design draft based on the element update information to obtain the target interface design draft, and sending the target interface design draft to the client.

[0006] According to a third aspect of the embodiments of this specification, a data processing apparatus is provided, comprising: The determination module is configured to determine design elements in the interface design draft and determine the element layer data of the design elements; The query module is configured to determine the element type of the design element based on the element layer data, and query the design draft knowledge base based on the design draft type of the interface design draft to obtain the constraint information of the interface design draft. The update module is configured to input the element layer data, the element type, and the constraint information into the information generation model to obtain element update information, and update the design elements in the interface design draft based on the element update information.

[0007] According to a fourth aspect of the embodiments of this specification, a computing device is provided, comprising: Memory and processor; The memory is used to store computer-executable instructions, and the processor is used to execute the computer-executable instructions, which, when executed by the processor, implement the steps of the above-described data processing method.

[0008] According to a fifth aspect of the embodiments of this specification, a computer-readable storage medium is provided that stores computer-executable instructions, which, when executed by a processor, implement the steps of the data processing method described above.

[0009] According to a sixth aspect of the embodiments of this specification, a computer program product is provided, including a computer program or instructions that, when executed by a processor, implement the steps of the data processing method described above.

[0010] This specification provides a data processing method in one embodiment, which involves determining design elements and their element layer data in an interface design draft. Based on the element layer data, the element type of the design element is determined, and the design draft knowledge base is queried based on the design draft type to obtain constraint information for the interface design draft. The element layer data, element type, and constraint information are input into an information generation model to obtain element update information, improving the generation efficiency and usability of element update information and reducing the time spent searching for design element materials. The design elements in the interface design draft are updated based on the element update information, enhancing the realism of the design elements in the interface design draft. Attached Figure Description

[0011] Figure 1 This is a flowchart illustrating a data processing method provided in one embodiment of this specification; Figure 2 This is a schematic diagram illustrating the content filling of a data processing method provided in one embodiment of this specification; Figure 3 This is a flowchart illustrating the processing procedure of a data processing method provided in one embodiment of this specification. Figure 4 This is a schematic diagram of the structure of a data processing system provided in one embodiment of this specification; Figure 5 This is a schematic diagram of the structure of a data processing apparatus provided in one embodiment of this specification; Figure 6 This is a structural block diagram of a computing device provided in one embodiment of this specification. Detailed Implementation

[0012] Many specific details are set forth in the following description to provide a full understanding of this specification. However, this specification can be implemented in many other ways than those described herein, and those skilled in the art can make similar extensions without departing from the spirit of this specification. Therefore, this specification is not limited to the specific implementations disclosed below.

[0013] The terminology used in one or more embodiments of this specification is for the purpose of describing particular embodiments only and is not intended to be limiting of the one or more embodiments of this specification. The singular forms “a,” “described,” and “the” as used in one or more embodiments of this specification and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used in one or more embodiments of this specification refers to and includes any or all possible combinations of one or more associated listed items.

[0014] It should be understood that although the terms first, second, etc., may be used to describe various information in one or more embodiments of this specification, such information should not be limited to these terms. These terms are only used to distinguish information of the same type from one another. For example, first may also be referred to as second without departing from the scope of one or more embodiments of this specification, and similarly, second may also be referred to as first. Depending on the context, the word "if" as used herein may be interpreted as "when," "when," or "in response to a determination."

[0015] Furthermore, it should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in one or more embodiments of this specification are all information and data authorized by the user or fully authorized by all parties. Moreover, the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation entry points are provided for users to choose to authorize or refuse.

[0016] The technical solutions provided in this application can employ deep learning models with relatively large parameter scales. However, this large model is merely an example; this application does not limit the number of model parameters supported by the deep learning model used, aiming to meet actual needs. The deep learning models involved in this application can be artificial intelligence-based language models (LM) or multimodal models (MM).

[0017] First, the terms and concepts used in one or more embodiments of this specification will be explained.

[0018] Triggered actions refer to actions or responses that are automatically executed when specific conditions or events occur. Triggered actions for controls mainly refer to events and behaviors triggered after a user interacts with UI controls (such as buttons, text boxes, drop-down menus, etc.). These triggered actions can include the following types: 1. Click event: The user clicks a button, link, or icon. 2. Mouse Over / Mouse Enter event: The mouse pointer moves over the control and hovers. 3. Input event: The user enters or modifies text in a text box. 4. Change event: The user changes the options in a drop-down menu or selection box. 5. Focus event: The control gains or loses input focus, etc.

[0019] Controls: In a computer user interface, a "control" is any element that a user can directly interact with. These elements allow users to input data, select options, or trigger certain actions. Controls can be graphical (such as buttons, text boxes, checkboxes, etc.) or more abstract (such as voice commands). Buttons are typically used to perform an action or open a new interface; text boxes allow users to input or edit text information; checkboxes represent a Boolean value (yes / no), which users can select or deselect; dropdown lists provide a list of options for users to choose from, usually displaying only one selected value; list boxes display multiple options, allowing users to select one or more items; labels display static text, usually used to explain the function of other controls, and can also be used as buttons; scrollbars allow users to navigate large datasets, such as browsing long documents or lists; images display static pictures and can sometimes be used as buttons; combo boxes combine the functionality of text boxes and dropdown lists, allowing users to both input text and select from a list. These controls are typically provided with standard styles by the operating system or development kit. Developers can customize their appearance and behavior as needed. Different operating systems and programming languages ​​(such as Java, C#, Python, etc.) have their own set of controls and provide corresponding APIs to create and manage these controls.

[0020] Placeholders: Elements used in UI design to temporarily represent content, such as "image placeholders" and "Lorem ipsum". They are often used in the early stages of design to fill in non-real content.

[0021] Context awareness: Based on information such as the current layer structure, parent container name, page tags, and module, the context of the placeholder is automatically inferred (e.g., whether it belongs to "order details page" or "live product card"), which guides the content generation logic.

[0022] To address the aforementioned technical problems, this specification provides a data processing method. This specification also relates to a data processing system, a data processing apparatus, a computing device, a computer-readable storage medium, and a computer program product, which will be described in detail in the following embodiments.

[0023] In traditional UI / UX design processes, designers often use test images and text as placeholders, resulting in excessive repetition of information and a lack of realism in the design drafts. This makes it difficult to accurately convey the user experience during product reviews and user testing. One embodiment of this specification provides a data processing method that identifies design elements in the interface design draft and determines their element layer data. Based on the element layer data, the element type of the design element is determined, and the design draft knowledge base is queried based on the design draft type to obtain constraint information. The element layer data, element type, and constraint information are input into an information generation model to obtain element update information, improving the efficiency and usability of element update information generation and reducing the time spent searching for design element materials. Based on the element update information, the design elements in the interface design draft are updated, enhancing the realism of the design elements and ensuring that the updated design elements match the scenario of the interface design draft.

[0024] See Figure 1 , Figure 1 A flowchart of a data processing method according to an embodiment of this specification is shown, which specifically includes the following steps.

[0025] Step 102: Determine the design elements in the interface design draft and determine the element layer data of the design elements.

[0026] Specifically, an interface design draft can be a design draft completed through a UI or UX design process. An interface design draft refers to a structured data set used to represent the visual presentation scheme of a target object. It includes, but is not limited to, layout information, graphic elements, color schemes, text content, and spatial relationships and hierarchical constraints between elements, used to guide subsequent image rendering, interface generation, or physical product production. In computer-implemented technical solutions, the interface design draft can be represented as a vector graphics file, a markup language document (such as a UI description in XML or JSON format), a template data structure, or composite image data composed of multiple layers, serving as input for image generation models, rendering engines, or automated production systems. In product image generation scenarios, the interface design draft includes, but is not limited to, outline templates, the position coordinates of preset pattern areas, image type identifiers that allow filling, and size constraint parameters. Design elements can be placeholder images or text boxes. Placeholder images can be image placeholders, elements used in UI design to temporarily represent content, while text boxes have a text display area. Design elements can be touch-sensitive components or design draft elements with information display functions. The element layer data of a design element can be the layer metadata of the design element in the interface design draft. It refers to the layer metadata of the layer where the design element is located in the interface design draft. The element layer data can represent the visual attributes and layer attributes of the design element.

[0027] Therefore, after finalizing the interface design draft, any element in the draft can be used as a design element to populate content. Once the design elements are determined, their element layer data can be obtained from the interface design draft. Element layer data represents the context of the design element within the interface design draft. This data includes, but is not limited to, the layer path, container name, and page tag corresponding to the design element.

[0028] In practical applications, interface design drafts can be edited visually using design draft editing programs, such as... Figure 2 As shown, the interface design draft is displayed on the program page of the design draft editing program. The app's interface design draft contains at least one editable element (e.g., homepage, all elements), and any editable element can be used as a design element to populate content. After selecting a design element (all), you can trigger an action on the design element to bring up the toolbar. By triggering the "Fill with Real Content" control in the toolbar, you can obtain the element's layer data.

[0029] Furthermore, considering that the interface design draft is designed and edited in a visual format, the element layer data can also be retrieved visually for design elements, thereby improving the editing efficiency and reducing the editing difficulty of the interface design draft. The specific implementation is as follows: In response to a trigger operation on the design element, the corresponding processing control is displayed, and in response to a trigger operation on the processing control, the design draft layer associated with the design element is determined; the layer metadata and layer attribute data of the design draft layer are determined, and the layer metadata and layer attribute data are used as the element layer data.

[0030] Specifically, triggering operations on design elements include, but are not limited to, clicking, dragging, and hovering operations. Processing controls are used to manipulate design elements, including but not limited to reading design element attributes and performing text processing, image processing, text search, and image search on the design elements. Design draft layers refer to the layers associated with design elements in the interface design draft. The layer metadata of design draft layers includes, but is not limited to, the parent container name, page label, and the name of the project to which it belongs. Layer attribute data includes, but is not limited to, layer name, style attributes (font, color, rounded corners, size), layout position and nesting structure (located within list items / at the top of pop-ups), and whether it is bound to a Design Token or a standard component.

[0031] Based on this, in response to a trigger operation on a design element, the corresponding processing control for that design element is displayed. This processing control can be displayed via a pop-up window; that is, the processing control is shown in the pop-up window. The pop-up window includes at least one control, each corresponding to a different processing method for the design element. In response to a trigger operation on the processing control, the design draft layer associated with the design element is determined, including layer metadata such as the parent container name, page label, and project name, as well as layer attribute data such as the layer name and style properties. The layer metadata and layer attribute data are then used as the element's layer data.

[0032] For example, the program page of the design draft editing program displays the interface design draft, which contains multiple editable elements. For any one of these editable elements (a placeholder image or a text box), a pop-up window can be triggered by right-clicking. The pop-up window contains multiple controls. For controls with content-filling functionality, triggering the control will activate the design draft layer recognition and read the layer metadata and attribute data. The read layer metadata can be: "System reads current layer metadata: Parent container name: 'Order Item Card'; Page tag: 'Category:B2B OrderManagement'; Belonging project: 'XX Merchant Backend'." The read layer attribute data can be: "Layer name (e.g., 'Avatar', 'Price'); Style attributes (font, color, rounded corners, size); Layout position and nesting structure (within list items / top of pop-up); Whether bound to a Design Token or standard component."

[0033] In summary, responding to the trigger operation of a design element displays the corresponding processing control. By triggering the processing control, element layer data is obtained, which improves the editing efficiency of the interface design draft, reduces the editing difficulty of the interface design draft, improves the efficiency of obtaining element layer data, and simplifies the method of obtaining element layer data.

[0034] Step 104: Determine the element type of the design element based on the element layer data, and query the design draft knowledge base based on the design draft type of the interface design draft to obtain the constraint information of the interface design draft.

[0035] Specifically, after determining the design elements and their element layer data in the interface design draft, the element type of the design element can be determined based on the element layer data. Then, the design draft knowledge base is queried based on the design draft type to obtain the constraint information of the interface design draft. The element type of the design element can be a placeholder type, including but not limited to status prompt text, order information fields, and icon placeholders. The design draft knowledge base stores element knowledge such as language style, copywriting templates, and scene images corresponding to the task scenario. The design draft type of the interface design draft represents the theme information of the interface design draft. Theme information refers to the set of core attributes used to define the overall visual and semantic expression characteristics of the interface design draft, including but not limited to at least two dimensions such as the design draft theme and design draft style. The design draft theme represents the business area or application scenario served by the interface (e.g., technology, finance, maternal and infant care, education, etc.), while the design draft style describes the visual expression and content expression method that matches the theme, covering elements such as color system (e.g., cool colors, warm colors), graphic language, layout structure, and copywriting tone.

[0036] Based on this, after determining the design elements and their element layer data in the interface design draft, the element type of the design element is determined according to the element layer data. The element type can be determined by analyzing the element layer data. The interface design draft's constraint information is obtained by querying the design draft knowledge base based on the design draft type. The design draft knowledge base can store a set of constraint information corresponding to at least two types of interface design drafts. Querying the design draft knowledge base based on the interface design draft determines the constraint information used to constrain the generation of element content, such as content style, image style, and copywriting template, which match the design draft type. A set of constraint information is a structured data package; this information is not a single value but a collection containing constraints of multiple dimensions and uses. Determining the constraint information means identifying the precise constraint entries (content style, image style, copywriting template) corresponding to the design draft type from this collection.

[0037] Furthermore, considering that most of the design elements in the interface design draft are general elements, in order to improve the efficiency of determining the element type, the element layer data can be matched with the element type using type matching rules. The specific implementation is as follows: The element layer data and type matching rules are matched to determine the element type of the design element based on the matching results.

[0038] Specifically, a type matching rule can contain at least one matching sub-rule. Each sub-rule contains layer data and layer element types, which can exist as key-value pairs. Layer data can be a small rectangle, and the corresponding layer element type is an icon placeholder. When the element layer data is a small rectangle, the determined element type is an icon placeholder. The matching result can be the matching relationship between the element layer data and the layer data contained in the matching sub-rules of the type matching rule.

[0039] Based on this, type matching is performed on the element layer data and the matching sub-rules in the type matching rules. The matching sub-rules that match the design elements are determined according to the matching results, and the layer element type in the matching sub-rules is used as the element type of the design elements.

[0040] Continuing with the previous example, type matching rules are deterministic judgment logic built upon common naming habits and structural patterns in design scenarios. They are lightweight, efficient, and can be executed without calling large models. Type matching rules include layer naming keyword matching. For example, if the name of a design element in the element layer data contains avatar / img / icon / status / price, then the element type is directly mapped to the corresponding semantic type. Type matching rules can also be based on proximity analysis. If the element layer data determines that there is a ¥ symbol near the design element, then the corresponding numeric field for the element type is price; if there are times such as "year / month / day", then the element type is a time field.

[0041] In summary, by performing type matching on element layer data and type matching rules, the element type of design elements can be determined, improving the efficiency and accuracy of element type determination.

[0042] Furthermore, considering that design elements in the interface design draft may be newly added special design elements, and the type matching rules cannot find an element type that matches the design element, a type recognition model can be used to identify the element layer data to obtain the element type of the design element. The specific implementation is as follows: If the initial element type corresponding to the design element is determined based on the matching result, the initial element type is used as the element type; if the matching type corresponding to the design element is not determined based on the matching result, the element layer data is input into the type recognition model to obtain the element type of the design element.

[0043] Specifically, the type recognition model is a lightweight machine learning model. It is a customized machine learning model with a small parameter size and fast inference speed, specifically designed for UI semantic understanding tasks. It is typically deployed on the client or edge nodes to handle ambiguous scenarios that cannot be covered by type matching rules. The initial element type is the element type that matches the element layer data, as determined by the element type rules.

[0044] Based on this, if the initial element type corresponding to the design element is determined according to the matching results, it means that the element type of the design element can be accurately determined directly through the type matching rules, and the initial element type can be directly used as the element type. If the matching results do not determine the matching type corresponding to the design element, it means that the element type of the design element cannot be accurately determined according to the type matching rules. In this case, the element layer data is input into the type recognition model to obtain the element type of the design element. The type recognition model can predict the element type of the design element by recognizing and analyzing the element layer data.

[0045] Continuing with the previous example, when the element type of a design element cannot be directly determined based on type matching rules, the element layer data can be input into a type recognition model to obtain the element type. The type recognition model can predict the element type of a design element by identifying and analyzing element layer data. For instance, a designer selects a blank rectangle in an interface design draft as a design element. This element has no explicit name, but its style is: size: 80×80px, rounded corners: 50%, background color: light gray, container name: UserCard, and an adjacent text label "Username: Zhang San". This data, along with the question: Is this an avatar or a decorative graphic?, can be input into the type recognition model as element layer data. The type recognition model can then predict the element type of the design element. Alternatively, the type recognition model can perform feature encoding on the element layer data. The original data is converted into a numerical vector, and then context-weighted: The parent container contains "User," and there is adjacent text "Username"—the weight of the "Avatar" category is increased. Further multimodal fusion is performed: 50% rounded corners, medium size, gray background, "user-avatar" (element type)—and the final judgment result is output. Final conclusion: This placeholder is highly likely to be a "user avatar," and it is recommended to generate a real human face image.

[0046] In summary, when the matching type of a design element cannot be determined based on the matching results, the element layer data is input into the type recognition model to obtain the element type of the design element. This ensures that even if the element type of a design element cannot be determined based on the type matching rules, the type recognition model can still be used to determine the element type of the design element, thus ensuring that the accurate element type can be obtained.

[0047] Furthermore, considering that interface design drafts correspond to different scenarios and domains, each domain or scenario can correspond to a candidate knowledge base. The candidate knowledge base stores knowledge such as language styles, copywriting templates, and component usage specifications that match the domain or scenario. Therefore, for interface design drafts, a design draft knowledge base that matches the domain or scenario of the interface design draft can be selected from the candidate knowledge base. The specific implementation is as follows: In at least one candidate knowledge base, determine the design draft knowledge base that matches the design draft type of the interface design draft; query the design draft knowledge base based on the design draft type to obtain the constraint information of the interface design draft.

[0048] Specifically, in at least one candidate knowledge base, each candidate knowledge base can correspond to a task scenario or domain. The candidate knowledge base stores content knowledge such as language style, copywriting templates, image tones, image styles, and component usage specifications that match the scenario or domain. Constraint information can be information used to constrain the updates of design drafts, matching the design draft type. Constraint information includes, but is not limited to, multiple dimensions of design draft update / editing constraints such as content expression constraints, copywriting structure constraints, visual presentation constraints, and interactive component application constraints. The design draft type can be determined based on the project identifier, task scenario, and platform type to which the interface design draft belongs. After determining the design draft knowledge base based on the design draft type, the design draft knowledge base matching the project identifier of the interface design draft can be determined from at least one candidate knowledge base. The design draft type can also include fine-grained interface classifications, such as: product detail page, order list page, marketing pop-up, etc.

[0049] Based on this, a design draft knowledge base matching the interface design draft's design draft type is determined from at least one candidate knowledge base, based on the interface classification dimension, scenario dimension, and / or domain dimension. The project identifier, task scenario, and platform type to which the interface design draft belongs are determined based on its design draft type. The design draft knowledge base is then queried based on the project identifier, task scenario, and / or platform type to obtain constraint information corresponding to the interface design draft, covering at least one constraint dimension among content expression constraints, copywriting structure constraints, visual presentation constraints, and interactive component application constraints.

[0050] Following the previous example, multiple scenario or domain content knowledge bases are pre-configured, i.e., candidate knowledge bases. Each knowledge base contains typical language styles, commonly used copywriting templates, recommended image tones, and component usage specifications that match the scenario and / or domain. When the interface design draft in the current canvas is determined to belong to different environments such as "B-end," "C-end," or "live streaming" based on the design draft type, the corresponding knowledge base and content configuration are dynamically loaded to determine the appropriate templates and content style constraints for the interface design draft. After determining the design draft type, a composite query condition can be constructed based on at least one of the following: interface category, project identifier, task scenario, and platform type. The design draft knowledge base is then queried based on this composite query condition. When the composite query condition includes product detail page and shopping scenario, querying the design draft knowledge base based on the composite query condition yields the following constraint information: Content expression constraint: {"style": "concise, efficient, high information density"}; Copywriting structure constraint: two specific templates and their fillable variables; Visual presentation constraint: icon style and background tone requirements; Interactive component application constraint: specific parameters and display logic for the main button and inventory indicator components.

[0051] In summary, a design draft knowledge base matching the design draft type of the interface design draft is determined from at least one candidate knowledge base. The design draft knowledge base is then queried based on the design draft type to obtain the constraint information of the interface design draft, ensuring that the constraint information matches the interface design draft.

[0052] Step 106: Input the element layer data, the element type, and the constraint information into the information generation model to obtain element update information, and update the design elements in the interface design draft based on the element update information.

[0053] Specifically, after determining the element type of the design element based on the element layer data, and querying the design draft knowledge base based on the element layer data and element type to obtain the constraint information of the interface design draft, the element layer data, element type, and constraint information can be input into the information generation model to obtain element update information. Based on this update information, the design elements in the interface design draft are then updated. The information generation model can be a multimodal machine learning model, specifically a customized machine learning model with small parameter size, fast inference speed, and dedicated to UI semantic understanding tasks. The information generation model is used to determine the element update information of the design elements, which is used to update the design elements in terms of element content. Element update information includes, but is not limited to, text and images.

[0054] Based on this, after determining the element type of the design element according to the element layer data, and querying the design draft knowledge base based on the element layer data and element type to obtain the constraint information of the interface design draft, the element layer data, element type, and constraint information are input into the information generation model. The information generation model is then used to generate element update information for content filling of the design elements, resulting in element update information that realistically matches the interface design draft. Based on the element update information, the design elements in the interface design draft are updated to achieve content filling, ensuring content style adaptation between the design elements and the element update information. The language style and image color tone of the element update information are consistent with the overall design theme of the interface design draft; for example, a tech-themed design corresponds to cool-toned text, while a mother-and-baby-related design corresponds to a warm tone and soft visual atmosphere.

[0055] Furthermore, the information generation model, as a multimodal model, possesses the ability to generate multimodal content, including text and image generation. To improve the matching degree between element update information and design elements and interface design drafts, more accurate prompts can be constructed based on the element layer data, element type, and constraint information before inputting them into the information generation model. These prompts are then input into the information generation model to predict more realistic element update information. The specific implementation is as follows: Based on the element layer data, the element type, and the constraint information, a prompt message is constructed, and the prompt message is input into the information generation model to obtain the element update information.

[0056] Based on this, prompts are constructed using element layer data, element type, and constraint information. These prompts, model-based prompts, aid in information prediction by the information generation model. The prompts are then input into the information generation model to obtain updated element information.

[0057] Following the previous example, based on element layer data, element type, and constraint information, we can determine data such as contextual information, placeholder semantic type, style strategy configuration, and visual and layout cues. Integrating this data generates a prompt message. Contextual information includes the project (e.g., "XX Merchant Backend"), page type (e.g., "B2B Order Management"), and parent container name, used to determine the content generation scenario. Placeholder semantic type is the result jointly determined by the rule engine and the lightweight model (e.g., "status prompt text" or "price field"), clarifying the purpose of the content at that location. Style strategy configuration is based on the language style, recommended templates, and image preferences loaded according to the matched multi-scenario context (e.g., "XX terminal"). Visual and layout cues include non-content features such as size, rounded corners, font, color transparency, and container proportions, assisting in determining the content presentation format. This information is integrated into a natural language prompt or structured request (prompt message), input into a locally deployed lightweight multimodal generation model, ensuring that the output content both meets the needs of the real-world scenario and maintains consistency with the overall design style. The prompt message could be: "Generate a 'Out of Stock Alert' status image suitable for the Qianniu system, including a yellow exclamation mark icon, a 'Insufficient Inventory' title, and a 'Replenish Stock Recommendation' button."

[0058] In summary, based on element layer data, element type, and constraint information, prompt information is constructed and input into the information generation model to obtain element update information. As a multimodal model, the information generation model possesses the ability to generate multimodal content, including text and image generation. Using this model, element update information that highly matches the design elements can be generated, resulting in a more realistic correspondence between the updated information and the design elements.

[0059] Furthermore, considering that the design elements in the interface design draft lack text or images, while the design elements themselves have element style attributes, the element update information can be added to the design elements by replacement. The specific implementation is as follows: Determine the information to be updated and the element style attributes of the design element; replace the information to be updated based on the element update information to generate a target design element containing the element style attributes.

[0060] Specifically, the information to be updated in a design element refers to the information within that element that needs to be replaced. This information can be meaningless text or generic image content. Element style attributes can be style properties unrelated to the element's content, such as rounded corners, shadows, and layout. The target design element is the design element obtained after filling it with the updated information.

[0061] Based on this, the information to be updated and the element style attributes of the design element are determined. The information to be updated is replaced with the element update information, while the element style attributes of the design element are preserved, generating a target design element that contains the element style attributes.

[0062] Continuing with the previous example, such as Figure 2 As shown, after determining the update information for elements such as industry, data, product name, price, address, and time, the information to be updated can be determined in the design elements of the interface design draft. Keeping the element style attributes of the design elements unchanged, the update information of the element is used to replace the information to be updated in the design elements to obtain the target design element.

[0063] In summary, by replacing the information to be updated with the element update information, a target design element containing element style attributes is generated, thereby enabling the content filling of the design element. This eliminates the need for users (interface designers) to manually search for and draw (edit) content, allowing realistic element update information to be filled into the design element.

[0064] Furthermore, after determining the element update information, one-click content filling can be achieved for the design element and its associated design elements by triggering the fill control. The specific implementation is as follows: Based on the element update information, a design draft fill item associated with the interface design draft is generated; in response to the trigger operation of the fill control in the design draft fill item, information is filled into the design element and the associated design element associated with the design element.

[0065] Specifically, the fill item in the design draft can be a card or pop-up containing a fill control. The fill item is displayed in the interface design draft and / or the area associated with the design element. The fill control is a triggerable control, associated with the design element and its update information. By triggering the fill control, the update information can be filled into the design element. The fill control can also be used to fill the update information into the design element, and simultaneously fill the associated design elements, which can be elements of the same type as the design element in the interface design draft.

[0066] Based on this, a design draft fill item is generated based on element update information and associated with the interface design draft. Each design draft fill item contains at least one fill control, which is associated with both the element update information and the design element. The fill control can also be associated with the element update information, the design element, and related design elements. In response to a trigger operation on the fill control in the design draft fill item, information is filled into the design element and related design elements, thus filling all related design elements of the same type as the design element in the interface design draft with the element update information.

[0067] Continuing with the previous example, after determining the element update information corresponding to the design element, you can populate the design element with content in one click, or populate the design element and its associated design elements with content in one click, applying the element update information to all similar components of the same type as the design element. After determining the element update information, you can regenerate the element update information using the element update information update control.

[0068] In summary, in response to the trigger operation of the fill control in the fill item of the design draft, information is filled into the design element and the associated design elements of the related design elements, realizing one-click content filling of the design element and the associated design elements, and improving the content filling efficiency of the same type of design elements in the interface design draft.

[0069] Furthermore, considering that the element update information is a content-filling suggestion provided to the designer of the interface design draft, the designer can subjectively decide whether to adopt the content-filling suggestion or not. Based on the designer's adoption behavior, update behavior data for design elements can be determined. This update behavior data can be used to optimize the information generation model, as specifically implemented below: Determine the update behavior data associated with the design element, and update the information generation model based on the update behavior data.

[0070] Based on this, update behavior data associated with design elements is determined. This update behavior data includes, but is not limited to, user (interface designer) actions on element update information, including but not limited to whether to retain, modify, or delete; whether to generate multiple times; and whether to apply to other components in batches. The information generation model and the content recommendation strategy corresponding to the element update information are then updated based on this update behavior data.

[0071] Continuing with the previous example, after providing designers with element update information, they can subjectively decide whether to adopt the content filling suggestion or not. Based on the designer's adoption behavior, update behavior data for design elements can be determined; that is, user (designer) adoption behavior is recorded to facilitate subsequent optimization of content generation and recommendation strategies. This recording of user actions on generated content (element update information) includes: whether to retain, modify, or delete; whether to generate multiple times; and whether to apply it in batches to other components. Based on this feedback, recommendation strategies are dynamically adjusted, and the information generation model is optimized to ensure that subsequently generated content better aligns with designers' language habits and design preferences.

[0072] In summary, updating the information generation model based on updated behavioral data enables iterative optimization of the information generation model, thereby improving its information generation capability.

[0073] This specification provides a data processing method in one embodiment, which involves determining design elements and their element layer data in an interface design draft. Based on the element layer data, the element type of the design element is determined, and the design draft knowledge base is queried based on the design draft type to obtain constraint information for the interface design draft. The element layer data, element type, and constraint information are input into an information generation model to obtain element update information, improving the generation efficiency and usability of element update information and reducing the time spent searching for design element materials. The design elements in the interface design draft are updated based on the element update information, enhancing the realism of the design elements in the interface design draft.

[0074] The following is in conjunction with the appendix Figure 3 Taking the application of the data processing method provided in this specification to the content filling of design elements in an interface design draft as an example, the data processing method will be further explained. Figure 3 A flowchart illustrating the processing procedure of a data processing method according to an embodiment of this specification is shown, specifically including the following steps.

[0075] Step 302: Determine the design elements in the interface design draft and determine the element layer data of the design elements.

[0076] In traditional UI / UX design processes, designers often use test images and text as placeholders, resulting in excessive repetition of information and a lack of realism in the design drafts. This makes it difficult to accurately convey the user experience during product reviews and user testing. One embodiment of this specification provides a data processing method for interface design drafts that can automatically identify design intent and generate high-fidelity image and text content by combining page context.

[0077] In practical applications, design elements can be components or placeholders in the interface design draft. Responding to trigger operations on a design element, the corresponding processing controls are displayed. That is, users can click, touch, or perform other operations on the design element to invoke or display the content-filling toolbar, which contains at least one processing control. Users can trigger operations on the processing controls to read the element layer data of the design element and generate actual content. The processing controls in the content-filling toolbar can also perform operations such as image processing and layer management. Responding to trigger operations on the processing controls determines the design draft layer associated with the design element. The layer metadata and layer attribute data of the design draft layer are determined and used as the element layer data. Layer metadata includes, but is not limited to, the parent container name, page label, and the item to which the interface design draft (design element) belongs. Layer attribute data can be the context information of the design element, including but not limited to layer name, style attributes, layout position, and nesting structure.

[0078] Step 304: Perform type matching on the element layer data and type matching rules.

[0079] Type matching rules can be deterministic judgment logic built based on the design draft and the common naming habits and structural patterns of design elements within it. This is a lightweight, efficient, and pre-reasoning mechanism that can be executed without calling large models. Examples include layer naming keyword matching and adjacent content analysis. In practical implementation, a design element name containing "status" can be identified as "status prompt text," a container containing amount + time can be identified as "order information field," and a small rectangle can correspond to an "icon placeholder."

[0080] Step 306: If the initial element type corresponding to the design element is determined based on the matching result, the initial element type shall be used as the element type.

[0081] Step 308: If the matching type of the design element is not determined based on the matching results, input the element layer data into the type recognition model to obtain the element type of the design element.

[0082] If the element type of a design element can be determined based on type matching rules, there is no need to further call the type recognition model. If the element type cannot be determined based on type matching rules, the type recognition model can be further called to identify the element layer data and obtain the element type. The type recognition model is a "lightweight model," a customized machine learning model with a small parameter size, fast inference speed, and specifically designed for UI semantic understanding tasks. It is typically deployed on the client or edge nodes to handle ambiguous scenarios that cannot be covered by the rules.

[0083] In practice, the designer selects a blank rectangle without a specific name, but its style is: size: 80×80px, corner radius: 50%, background color: light gray, container name: UserCard, and adjacent text label "Username: Zhang San". The question then arises: Is this an avatar or a decorative graphic? The type recognition model, through steps such as feature encoding, context weighting, multimodal fusion, and classification output, concludes that the placeholder is highly likely to be a "user avatar" and suggests generating a real human face image.

[0084] Step 310: Identify the design draft knowledge base that matches the interface design draft from at least one candidate knowledge base.

[0085] Step 312: Determine the data to be queried based on the element layer data and element type, and query the design draft knowledge base based on the data to be queried to obtain the constraint information of the interface design draft.

[0086] In practical applications, multiple content knowledge bases for different design scenarios can be pre-defined. Each knowledge base contains typical language styles, commonly used copywriting templates, recommended image tones, and component usage guidelines for that scenario. When the current canvas is detected to belong to different environments such as "XX platform" or "XX live stream," the corresponding knowledge base and content configuration are dynamically loaded to achieve intelligent adaptation to "one language for multiple contexts."

[0087] Step 314: Construct prompt information based on element layer data, element type, and constraint information, and input the prompt information into the information generation model to obtain element update information.

[0088] Based on element layer data, element type, and constraint information, we can determine contextual information, placeholder semantic types, style strategy configurations, and visual and layout cues. Integrating this data generates a prompt message. The prompt message could be: "Generate a 'Out of Stock Alert' status image suitable for the Qianniu system, including a yellow exclamation mark icon, a 'Insufficient Inventory' title, and a 'Replenishment Suggestion' button." Inputting the prompt message into the information generation model will generate text or image-based element update information (text or image matching the design element).

[0089] Step 316: Determine the information to be updated and the style attributes of the design element, and replace the information to be updated based on the element update information to generate the target design element containing the style attributes.

[0090] Element update information could be something like, "Current SKU inventory is below the safety threshold; please replenish stock promptly." For placeholder elements in the interface design draft, the element update information can be used to replace the placeholder while preserving element style attributes such as rounded corners, shadows, and layout.

[0091] Step 318: Generate fill items for the design draft that are associated with the interface design draft based on element update information.

[0092] The design draft fill item can contain fill controls that can replace the information to be updated for all similar controls with one click.

[0093] Step 320: In response to the trigger operation of the fill control in the design draft fill item, populate the information of the design element and the associated design element of the associated design element.

[0094] In addition, the design draft fill items can also include controls with regeneration functionality to regenerate element update information.

[0095] Step 322: Determine the update behavior data associated with the design elements, and update the information generation model based on the update behavior data.

[0096] After providing designers with element update information, they can subjectively decide whether to adopt the content filling suggestions or not. Based on the designers' adoption behavior, update behavior data for design elements can be determined; that is, user (designer) adoption behavior is recorded to facilitate subsequent optimization of content generation and recommendation strategies. User actions on generated content (element update information) are recorded, including: whether to keep, modify, or delete; whether to generate multiple times; and whether to apply it in batches to other components. Based on this feedback, recommendation strategies are dynamically adjusted, and the information generation model is optimized to ensure that subsequently generated content better aligns with designers' language habits and design preferences.

[0097] In summary, by introducing a layer path and container semantic analysis mechanism, and combining information such as parent container naming, page tags, and project categories, the system automatically infers the context in which placeholders are located. This accurately identifies the purpose of content, ensuring that the generated results are consistent with the actual usage scenario and significantly improving the accuracy of the design draft. Utilizing non-content information such as layer naming, container structure, and page tags, the system infers the true purpose of placeholders, achieving accurate type judgment. A multimodal generation model is used to uniformly process text and image requests, outputting semantically aligned text descriptions and image content with prompts. This enhances the realism of the design and user trust, avoiding misunderstandings caused by misaligned text and images. User adoption, modification, or retry behavior of the generated results is recorded, dynamically optimizing the recommendation strategy and forming a personalized fine-tuning mechanism for the generation model. The data processing method provided in this embodiment improves the realism of the design draft by 90%, significantly increasing the review pass rate; reduces the time spent manually searching for materials, saving an average of 15 minutes per page; and achieves "design as demonstration," which can be used for user testing prototypes.

[0098] Corresponding to the above method embodiments, this specification also provides data processing system embodiments. Figure 4 A schematic diagram of the structure of a data processing system according to one embodiment of this specification is shown. Figure 4 As shown, the data processing system 400 includes a client 410 and a server 420. The client 410 is used to submit an update request to the server 420 for an interface design draft. The server 420 is used to respond to the update request by determining design elements in the interface design draft and determining the element layer data of the design elements; determining the element type of the design elements according to the element layer data, and querying the design draft knowledge base based on the design draft type of the interface design draft to obtain the constraint information of the interface design draft; inputting the element layer data, the element type, and the constraint information into the information generation model to obtain element update information, and updating the design elements in the interface design draft based on the element update information to obtain the target interface design draft, and sending the target interface design draft to the client 410.

[0099] In practical applications, the data processing system includes a client and a server. The client can be a mobile phone, computer, tablet, or other user terminal used by the designer to create the interface design draft. The designer designs the interface draft on the client. When there is a need to fill content in the design elements of the interface design draft, the designer can send computer commands to the client for the design elements. The client responds to the computer commands and submits an update request to the server for the interface design draft. The server responds to the update request, identifies the design elements in the interface design draft, and determines the element layer data of the design elements. Based on the element layer data, it determines the element type of the design element and queries the design draft knowledge base based on the design draft type to obtain the constraint information of the interface design draft. The element layer data, element type, and constraint information are input into the information generation model to obtain element update information, improving the generation efficiency and usability of element update information and reducing the time spent searching for design element materials. Based on the element update information, the design elements in the interface design draft are updated, improving the realism of the design elements in the interface design draft.

[0100] Corresponding to the above method embodiments, this specification also provides data processing apparatus embodiments. Figure 5 A schematic diagram of the structure of a data processing apparatus according to one embodiment of this specification is shown. Figure 5 As shown, the device includes: The determination module 502 is configured to determine design elements in the interface design draft and determine the element layer data of the design elements; The query module 504 is configured to determine the element type of the design element based on the element layer data, and query the design draft knowledge base based on the design draft type of the interface design draft to obtain the constraint information of the interface design draft. The update module 506 is configured to input the element layer data, the element type and the constraint information into the information generation model to obtain element update information, and update the design elements in the interface design draft based on the element update information.

[0101] In an optional embodiment, the determining module 502 is further configured to: In response to a trigger operation on the design element, the processing control corresponding to the design element is displayed, and in response to a trigger operation on the processing control, the design draft layer associated with the design element is determined; Determine the layer metadata and layer attribute data of the design draft layer, and use the layer metadata and layer attribute data as the element layer data.

[0102] In an optional embodiment, the query module 504 is further configured to: The element layer data and type matching rules are matched to determine the element type of the design element based on the matching results.

[0103] In an optional embodiment, the query module 504 is further configured to: If the initial element type corresponding to the design element is determined based on the matching result, the initial element type shall be used as the element type. If the matching type of the design element cannot be determined based on the matching results, the element layer data is input into the type recognition model to obtain the element type of the design element.

[0104] In an optional embodiment, the query module 504 is further configured to: Determine the design draft knowledge base that matches the design draft type of the interface design draft from at least one candidate knowledge base; Based on the design draft type, the design draft knowledge base is queried to obtain the constraint information of the interface design draft. In an optional embodiment, the update module 506 is further configured to: Based on the element layer data, the element type, and the constraint information, a prompt message is constructed, and the prompt message is input into the information generation model to obtain the element update information.

[0105] In an optional embodiment, the update module 506 is further configured to: Determine the information to be updated and the style attributes of the design element; The element update information is used to replace the information to be updated, and a target design element containing the element style attributes is generated.

[0106] In an optional embodiment, the update module 506 is further configured to: Based on the element update information, generate a design draft fill item associated with the interface design draft; In response to a trigger operation on the fill control in the design draft fill item, information is filled into the design element and the associated design element.

[0107] In an optional embodiment, the update module 506 is further configured to: Determine the update behavior data associated with the design element, and update the information generation model based on the update behavior data.

[0108] This specification provides a data processing apparatus in one embodiment that determines design elements and their element layer data in an interface design draft. Based on the element layer data, it determines the element type of the design element and queries a design draft knowledge base to obtain constraint information. The element layer data, element type, and constraint information are input into an information generation model to obtain element update information, improving the efficiency and usability of element update information generation and reducing the time spent searching for design element materials. Based on the element update information, the design elements in the interface design draft are updated, enhancing the realism of the design elements in the interface design draft.

[0109] The above is an illustrative scheme of a data processing apparatus according to this embodiment. It should be noted that the technical solution of this data processing apparatus and the technical solution of the data processing method described above belong to the same concept. For details not described in detail in the technical solution of the data processing apparatus, please refer to the description of the technical solution of the data processing method described above.

[0110] Figure 6 A structural block diagram of a computing device 600 according to one embodiment of this specification is shown. The components of the computing device 600 include, but are not limited to, a memory 610 and a processor 620. The processor 620 is connected to the memory 610 via a bus 630, and a database 650 is used to store data.

[0111] The computing device 600 also includes an access device 640, which enables the computing device 600 to communicate via one or more networks 660. Examples of these networks include Public Switched Telephone Network (PSTN), Local Area Network (LAN), Wide Area Network (WAN), Personal Area Network (PAN), or combinations of communication networks such as the Internet. The access device 640 may include one or more of any type of wired or wireless network interface (e.g., a network interface card (NIC)), such as an IEEE 802.11 Wireless Local Area Network (WLAN) wireless interface, a Wi-MAX (Worldwide Interoperability for Microwave Access) interface, an Ethernet interface, a Universal Serial Bus (USB) interface, a cellular network interface, a Bluetooth interface, or a Near Field Communication (NFC) interface.

[0112] In one embodiment of this specification, the above-described components of the computing device 600 and Figure 6 Other components, not shown, can also be connected to each other, for example, via a bus. It should be understood that... Figure 6 The block diagram of the computing device shown is for illustrative purposes only and is not intended to limit the scope of this specification. Those skilled in the art can add or replace other components as needed.

[0113] The computing device 600 can be any type of stationary or mobile computing device, including mobile computers or mobile computing devices (e.g., tablet computers, personal digital assistants, laptop computers, notebook computers, netbooks, etc.), mobile phones (e.g., smartphones), wearable computing devices (e.g., smartwatches, smart glasses, etc.) or other types of mobile devices, or stationary computing devices such as desktop computers or personal computers (PCs). The computing device 600 can also be a mobile or stationary server.

[0114] The processor 620 is configured to execute the following computer-executable instructions, which, when executed by the processor, implement the steps of the above-described data processing method.

[0115] The above is an illustrative scheme of a computing device according to this embodiment. It should be noted that the technical solution of this computing device and the technical solution of the data processing method described above belong to the same concept. For details not described in detail in the technical solution of the computing device, please refer to the description of the technical solution of the data processing method described above.

[0116] An embodiment of this specification also provides a computer-readable storage medium storing computer-executable instructions that, when executed by a processor, implement the steps of the above-described data processing method.

[0117] The above is an illustrative scheme of a computer-readable storage medium according to this embodiment. It should be noted that the technical solution of this storage medium and the technical solution of the data processing method described above belong to the same concept. For details not described in detail in the technical solution of the storage medium, please refer to the description of the technical solution of the data processing method described above.

[0118] An embodiment of this specification also provides a computer program product, including a computer program or instructions that, when executed by a processor, implement the steps of the above-described data processing method.

[0119] The above is an illustrative scheme of a computer program product according to this embodiment. It should be noted that the technical solution of this computer program product and the technical solution of the data processing method described above belong to the same concept. For details not described in detail in the technical solution of the computer program product, please refer to the description of the technical solution of the data processing method described above.

[0120] The foregoing has described specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired result. In some embodiments, multitasking and parallel processing are possible or may be advantageous.

[0121] The computer program / instructions include computer program code, which may be in the form of source code, object code, executable file, or certain intermediate forms. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording media, USB flash drive, portable hard drive, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signals, telecommunication signals, and software distribution media, etc. It should be noted that the content included in the computer-readable medium may be appropriately added or removed according to the requirements of patent practice. For example, in some regions, according to patent practice, computer-readable media may not include electrical carrier signals and telecommunication signals.

[0122] It should be noted that, for the sake of simplicity, the foregoing method embodiments are all described as a series of actions. However, those skilled in the art should understand that the embodiments in this specification are not limited to the described order of actions, because according to the embodiments in this specification, some steps can be performed in other orders or simultaneously. Furthermore, those skilled in the art should also understand that the embodiments described in this specification are all preferred embodiments, and the actions and modules involved are not necessarily essential to the embodiments in this specification.

[0123] In the above embodiments, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0124] The preferred embodiments disclosed above are merely illustrative of this specification. The optional embodiments do not exhaustively describe all details, nor do they limit the invention to the specific implementations described. Clearly, many modifications and variations can be made based on the embodiments described herein. These embodiments are selected and specifically described in this specification to better explain the principles and practical applications of the embodiments, thereby enabling those skilled in the art to better understand and utilize this specification. This specification is limited only by the claims and their full scope and equivalents.

Claims

1. A data processing method, comprising: In the interface design draft, determine the design elements and the element layer data of the design elements; The element type of the design element is determined based on the element layer data, and the design draft knowledge base is queried based on the design draft type of the interface design draft to obtain the constraint information of the interface design draft. The element layer data, the element type, and the constraint information are input into the information generation model to obtain element update information, and the design elements in the interface design draft are updated based on the element update information.

2. The data processing method according to claim 1, wherein determining the element layer data of the design element includes: In response to a trigger operation on the design element, the processing control corresponding to the design element is displayed, and in response to a trigger operation on the processing control, the design draft layer associated with the design element is determined; Determine the layer metadata and layer attribute data of the design draft layer, and use the layer metadata and layer attribute data as the element layer data.

3. The data processing method according to claim 1, wherein determining the element type of the design element based on the element layer data includes: The element layer data and type matching rules are matched to determine the element type of the design element based on the matching results.

4. The data processing method according to claim 3, wherein determining the element type of the design element based on the matching result includes: If the initial element type corresponding to the design element is determined based on the matching result, the initial element type shall be used as the element type. If the matching type of the design element cannot be determined based on the matching results, the element layer data is input into the type recognition model to obtain the element type of the design element.

5. The data processing method according to claim 1, wherein querying the design draft knowledge base based on the design draft type of the interface design draft to obtain the constraint information of the interface design draft includes: Determine the design draft knowledge base that matches the design draft type of the interface design draft from at least one candidate knowledge base; Based on the design draft type, the design draft knowledge base is queried to obtain the constraint information of the interface design draft.

6. The data processing method according to claim 1, wherein inputting the element layer data, the element type, and the constraint information into the information generation model to obtain element update information includes: Based on the element layer data, the element type, and the constraint information, a prompt message is constructed, and the prompt message is input into the information generation model to obtain the element update information.

7. The data processing method according to claim 1, wherein updating the design elements in the interface design draft based on the element update information includes: Determine the information to be updated and the style attributes of the design element; The element update information is used to replace the information to be updated, and a target design element containing the element style attributes is generated.

8. The data processing method according to claim 1, after inputting the element layer data, the element type, and the constraint information into the information generation model to obtain element update information, further includes: Based on the element update information, generate a design draft fill item associated with the interface design draft; In response to a trigger operation on the fill control in the design draft fill item, information is filled into the design element and the associated design element.

9. The data processing method according to claim 1, further comprising, after updating the design elements in the interface design draft based on the element update information: Determine the update behavior data associated with the design element, and update the information generation model based on the update behavior data.

10. A data processing system, comprising a client and a server, including: The client is used to submit update requests to the server based on the interface design draft; The server is configured to respond to the update request by determining design elements in the interface design draft and determining the element layer data of the design elements. The element type of the design element is determined based on the element layer data, and the design draft knowledge base is queried based on the design draft type of the interface design draft to obtain the constraint information of the interface design draft. The element layer data, the element type, and the constraint information are input into the information generation model to obtain element update information. Based on the element update information, the design elements in the interface design draft are updated to obtain the target interface design draft, and the target interface design draft is sent to the client.

11. A computing device, comprising: Memory and processor; The memory is used to store computer-executable instructions, and the processor is used to execute the computer-executable instructions, which, when executed by the processor, implement the steps of the method according to any one of claims 1 to 9.

12. A computer-readable storage medium storing computer-executable instructions that, when executed by a processor, implement the steps of the method according to any one of claims 1 to 9.

13. A computer program product comprising a computer program or instructions which, when executed by a processor, implement the steps of the method according to any one of claims 1 to 9.