Front-end UI design support method and device based on generative artificial intelligence

Abstract

The invention discloses a front-end UI design support method based on generative artificial intelligence. The method comprises the steps of obtaining a design scheme and a reference UI design code library; performing region-level analysis on the reference interface screenshot through a pre-trained target detection model, and dividing the whole interface into a plurality of function-related blocks; inputting the images corresponding to all the blocks into a pre-trained multi-modal large language model to identify design elements and UI components in each block; constructing a corresponding global specification based on the design elements so as to construct a corresponding page structure tree; performing keyword extraction on the front-end UI design requirement of the user through the multi-modal large language model, and optimizing the content based on keywords to output a code generation prompt; and generating a corresponding UI code based on the code generation prompt. The invention further provides a front-end UI design supporting device. The method provided by the invention can assist a designer in generating the front-end UI interface meeting design requirements.

Description

Technical Field

[0001] This invention belongs to the field of artificial intelligence-assisted design, and particularly relates to a front-end UI design support method and device based on generative artificial intelligence. Background Technology

[0002] With the rapid development of digital products, UI design plays an increasingly crucial role in front-end development and internet product construction, and intelligent front-end interface design tools have gained widespread attention in the design industry. Current commercial systems (such as Stitch) can generate preliminary interface drafts based on designers' natural language descriptions, significantly lowering the threshold for visual design and interface conception. However, this type of automated design method has obvious limitations in practical use. On the one hand, a large amount of visual information during the design process, such as the hierarchical relationships, spatial proportions, and layout logic between interface elements, is difficult to describe, and the model is prone to semantic bias, resulting in inconsistencies between the output and the user's intent. On the other hand, user interface design is a highly iterative process; designers usually only want to modify the style of a specific element or component, but existing tools often rely on re-entering prompts for overall generation, leading to unrelated areas being accidentally altered, disrupting existing visual consistency and interaction logic.

[0003] Patent document CN116991406A discloses a method, apparatus and storage medium for generating user interface (UI) design drafts. It uses a large language model to identify natural language commands input by the user to extract creative intent, and iteratively introduces subsequent natural language command updates. Based on the intent, it selects a pre-built design system and page template to generate pseudocode, and then converts it into a vector design draft, thereby improving the consistency between the generated result and the user's intent under the constraints of structured templates.

[0004] Patent document CN112256263A discloses a UI interface intelligent production system and method based on natural language, including a voice recognition module, a basic element construction module, an element generation module, and a system flow scheduling module. The voice command includes at least the control of the specified basic element and the assignment of the basic element attribute. The element generation module adds the specified basic element to the UI interface or sets the attribute of the basic element. The system flow scheduling module obtains historical UI interface construction data of the same type, and provides the voice recognition module with priority guessing and matching voice commands based on the historical construction order and the voice command recognized by the current voice recognition module, and provides the basic element construction module with preferred basic element sorting.

[0005] These existing technologies have several limitations. First, their ability to express visual semantics and design details is limited, still relying on linear natural language, which makes it difficult to cover the real needs of professional designers. Existing solutions generally rely on natural language to describe the interface visuals (such as control types, styles, and attributes), and use this description to drive template selection and pseudocode generation. Second, their iterative editing capabilities are weak. The method of multiple rounds of description and updating using natural language lacks fine-grained control at the region and component levels, ultimately making it difficult for designers to perform professional-level iterative design in existing systems. The generation process is uncontrollable and unpredictable, affecting design efficiency and quality. In addition, the effectiveness of UI element recognition and generation is limited. Existing solutions mostly rely on template selection based on knowledge base methods and machine learning methods to identify corresponding templates. The final generated UI code needs to replace content in the template, making it difficult to migrate to different design scenarios and accurately reflect the design intent. Summary of the Invention

[0006] The purpose of this invention is to provide a front-end UI design support method and device based on generative artificial intelligence, which can assist designers in generating front-end UI interfaces that meet design requirements.

[0007] To achieve the first objective of this invention, the following technical solution is provided: a front-end UI design support method based on generative artificial intelligence, comprising the following steps: Obtain design schemes and reference UI design code libraries, including reference interface screenshots and user front-end UI design requirements; The reference interface screenshot is analyzed at the region level by using a pre-trained object detection model, and the entire interface is divided into multiple functionally related blocks. The images corresponding to all blocks are input into a pre-trained multimodal large language model to identify the design elements and UI components in each block; Based on design elements, construct corresponding global specifications, and use reference interface screenshots, blocks and corresponding UI components as nodes, and use relationships as connecting edges to construct the corresponding page structure tree; The multimodal large language model is used to extract keywords from the user's front-end UI design requirements, and the content in the global specification and page structure tree is optimized based on the keywords to output code generation prompts containing the optimized global specification and page structure tree. Based on the UI components under each block in the code generation prompts, the reference UI design code library is matched for similarity to obtain the reference UI code with the highest similarity. Then, the design elements are integrated with the obtained reference UI code and the code generation prompts to obtain the corresponding UI code. Based on all UI code and an optimized page structure tree, a front-end UI interface that meets the requirements of front-end UI design is generated.

[0008] This invention conveys the functional goals, layout style, and visual preferences of a target page through natural language descriptions from designers, reference interface screenshots, and a small amount of structured parameter input. Based on this, the system constructs a global design specification for the page and a page partition-component hierarchy, explicitly mapping design intent into an actionable structured representation (SPEC). Subsequently, the system generates corresponding front-end UI code and a visual interface based on the SPEC, and automatically compiles and renders it in a browser environment. Designers can fine-tune the global style, regional layout, and individual components based on the generated results. The system translates the designer's editing intent into local updates to the specification tree, and then regenerates only the affected parts through the code generation and debugging module, thus achieving consistent iteration without disrupting the overall structure. This loop can be repeated multiple times, gradually converging the interface into a front-end implementation that meets the designer's needs and can be directly implemented.

[0009] Specifically, the target detection model is constructed using a Co-DETR network structure.

[0010] Specifically, the global specifications include layout structure, color system, morphological language, and usage scenarios.

[0011] Specifically, the design elements include grid layout, spacing, rounded corners, shadows, and color scheme.

[0012] Specifically, the optimization involves using keywords to assess the confidence level of the content in the global specification and page structure tree. If the confidence level of a keyword is higher than that of the content in the global specification or page structure tree, the corresponding content is replaced with the keyword. Otherwise, a fusion decision is made based on the large language model to integrate the keyword with the content in the global specification and page structure tree, thereby generating the corresponding fusion decision content.

[0013] Specifically, data verification is also required during the optimization process. The objectives of this data verification include verifying the operation type, path validity, and target range.

[0014] Specifically, the design element integration uses a common code snippet from the reference UI code as a few-shot example injected into the code generation prompt, and fills the common code snippet with the design elements of the block in the code generation prompt to obtain the corresponding UI code.

[0015] To achieve the second objective of this invention, the following technical solution is provided: a front-end UI design support device for executing the steps of the above-described front-end UI design support method based on generative artificial intelligence.

[0016] Compared with the prior art, the beneficial effects of the present invention are as follows: Through specific global specifications and page structure trees, the computer is provided with multi-dimensional parametric expressions of layout, style and functional semantics, thereby providing more accurate data support for the subsequent generation of front-end UI interfaces. Attached Figure Description

[0017] Figure 1 A flowchart illustrating a front-end UI design support method based on generative artificial intelligence provided in this embodiment; Figure 2 This is a schematic diagram of the global specification and page structure tree provided in this embodiment. Detailed Implementation

[0018] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without inventive effort are within the scope of protection of the present invention.

[0019] like Figure 1 As shown in the figure, this embodiment provides a front-end UI design support method based on generative artificial intelligence, and its steps are as follows: Obtain design schemes and reference UI design code libraries, including reference interface screenshots and user front-end UI design requirements; The reference interface screenshot is analyzed at the region level by using a pre-trained object detection model, and the entire interface is divided into multiple functionally related blocks. The images corresponding to all blocks are input into a pre-trained multimodal large language model to identify the design elements and UI components in each block; Based on design elements, construct corresponding global specifications, and use reference interface screenshots, blocks and corresponding UI components as nodes, and use relationships as connecting edges to construct the corresponding page structure tree; The multimodal large language model is used to extract keywords from the user's front-end UI design requirements, and the content in the global specification and page structure tree is optimized based on the keywords to output code generation prompts containing the optimized global specification and page structure tree. Based on the UI components under each block in the code generation prompts, the reference UI design code library is matched for similarity to obtain the reference UI code with the highest similarity. Then, the design elements are integrated with the obtained reference UI code and the code generation prompts to obtain the corresponding UI code. Based on all UI code and an optimized page structure tree, a front-end UI interface that meets the requirements of front-end UI design is generated.

[0020] More specifically, the system first accepts natural language descriptions, reference screenshots, and a small amount of structured parameter input from designers, conveying the functional goals, layout style, and visual preferences of the target page. Based on this, the system constructs a global design specification for the page and a page partition-component hierarchy, explicitly mapping the design intent into an actionable structured representation (SPEC). Then, the system generates corresponding front-end UI code and a visual interface based on the SPEC, and automatically compiles and renders it in the browser environment. Designers can fine-tune the global style, regional layout, and individual components based on the generated results. The system translates the designer's editing intent into local updates to the specification tree, and then regenerates only the affected parts through the code generation and debugging modules, thus achieving consistent iteration without disrupting the overall structure. This loop can be repeated multiple times, gradually converging the interface into a front-end implementation that meets the designer's needs and can be directly implemented.

[0021] After a user uploads a reference screenshot, the page is first analyzed at the region level using an object detection model trained for UI scenarios, dividing the complete interface into several functionally related regions. This detection model is trained on large-scale UI screenshot data, and the annotation phase only constrains "the union of all boxes must cover the entire page," thus avoiding the limitations imposed by predefined categories. A post-processing algorithm then merges small regions that are close in location, ultimately resulting in a set of candidate blocks that cover the entire page.

[0022] After completing the region segmentation, the cropped image of each region, along with the designer's natural language description, is input into the multimodal large language model to generate the corresponding blocks.

[0023] For each block, the model analyzes it by first identifying the overall function, then decomposing the structure, and finally parametrically encoding. First, the functional role of the block is classified (such as "top navigation bar", "side filter panel", etc.), then the component types and their hierarchical relationships are enumerated, and finally the layout, spacing, color and morphology are converted into structured fields to form block-level or component-level records that conform to the SPEC definition.

[0024] Based on this, the information of each block and the global style description are merged into a unified SPEC representation. Specifically, the system prioritizes the statistical analysis of highly consistent layout parameters and color schemes from each block as the benchmark for the layout structure and color system in the global specification, and attaches local deviations to the corresponding components; for components that are functionally similar, the system automatically summarizes their common attributes to form component prototype definitions, reducing the storage and editing costs of duplicate specifications.

[0025] like Figure 2 As shown, users input design solutions in their actual work in the following ways: 1. Upload one or more screenshots of the reference interface; 2. Describe page design guidelines and other information in natural language; 3. Adjust global style preferences through the initialized structured parameter panel.

[0026] Then, UI element detection and segmentation are performed on the uploaded screenshots, semantic parsing is performed on the natural language descriptions, and the initial global specification G and page structure tree P are generated by combining structured parameters. Subsequently, designers can select any level node (such as a block or component) in the SPEC panel to view its layout, color, and function labels, and modify local fields of the SPEC through drop-down options, numerical input, or brief natural language editing. Each modification is instantly converted into a structured update of the SPEC tree, and then the corresponding front-end interface is partially refreshed in the preview area through the generation module.

[0027] More specifically, after a user uploads a reference screenshot, the page is first analyzed at the region level using an object detection model trained for UI scenarios, dividing the complete interface into several functionally related regions. This detection model is trained on large-scale UI screenshot data, and the annotation stage only constrains "the union of all boxes must cover the entire page," thus avoiding the limitations imposed by predefined categories. A post-processing algorithm then merges small regions that are close in location, ultimately resulting in a set of candidate blocks that cover the entire page.

[0028] At the system level, the UI specifications are formalized into a global specification consisting of layout structure (L), color system (C), morphological language (S), and usage scenarios (U). This is used to describe the overall style and design principles of the interface.

[0029] Under the global specification, the page is further decomposed into several blocks and components, forming a hierarchical page structure tree. This allows the page to be disassembled and controlled hierarchically within the structure of pages, blocks, and components. Each block consists of several related components, including its unique identifier, relative position and proportion on the page, local layout parameters, inherited or specialized color schemes, and internal components. Each component consists of component type, functional semantics (such as "navigation," "filtering," "statistical overview," etc.), local layout constraints, and color parameters, and maintains a constraint relationship with the parent block and global specifications, thereby ensuring a consistent overall style while allowing for flexible local expression.

[0030] After completing the region segmentation, the cropped image of each region, along with the designer's natural language description, is input into the multimodal large language model to generate the corresponding blocks.

[0031] For each block, the model analyzes it by first identifying the overall function, then decomposing the structure, and finally parametrically encoding. First, the functional role of the block is classified (such as "top navigation bar", "side filter panel", etc.), then the component types and their hierarchical relationships are enumerated, and finally the layout, spacing, color and morphology are converted into structured fields to form block-level or component-level records that conform to the SPEC definition.

[0032] Based on this, the information of each block and the global style description are merged into a unified SPEC representation. Specifically, the system prioritizes the statistical analysis of highly consistent layout parameters and color schemes from each block as the benchmark for the layout structure and color system in the global specification, and attaches local deviations to the corresponding components; for components that are functionally similar, the system automatically summarizes their common attributes to form component prototype definitions, reducing the storage and editing costs of duplicate specifications.

[0033] The final generated SPEC is encoded in a lightweight JSON structure, where numerical fields are represented by pixel values ​​and color codes, while semantic fields are stored in the form of phrases or tags, which facilitates subsequent parsing and allows designers to edit directly in the interface.

[0034] The above SPEC is generated based on user commands, and code generation hints are used to generate the initial global specification G and page structure tree P in combination with structured parameters.

[0035] Specifically, LLM and keywords are used to match the user's natural language instructions with their requirements for the global specification and structure tree, and then translate these into more specific instructions, mapping them to corresponding fields while providing confidence levels. For example, "I need a bar chart to display data" will be mapped to "the middle section of the page - a bar chart component," and "I need the component to look softer" will be parsed by LLM as "the user may need to adjust the component's rounded corners and shadows," and then mapped to the morphological language field in the global specification, increasing its rounded corner parameter.

[0036] When user-generated fields conflict with fields generated from reference graphs, a confidence level assessment method is used to determine the winner. When the user's instruction is more direct, such as "I need a bar chart to display data," the confidence level is high, and the component in the original SPEC component tree will be directly replaced. When the instruction is more ambiguous, such as "I need the component to look softer," after LLM parsing and mapping, the confidence level is low, and the current SPEC global specification and user requirements will be submitted to the LLM for integration and decision-making. For example, if the current global specification SPEC has a corner radius parameter of 2, and the user requirement, after being parsed by the LLM, suggests that corner radius adjustment may be necessary, these two facts will be used as prompts for the LLM to make a decision, ultimately adjusting it to 3 as appropriate.

[0037] When both fields are empty, they will be set to empty, and the default value of the component library will be used during subsequent rendering.

[0038] Ultimately, we obtained code generation hints for the fusion reference diagram and user commands.

[0039] Finally, after the code generation prompts are generated, they are presented in the form of a directory tree on the interactive interface, with each node bound to a visual element in the canvas.

[0040] When a designer selects any node in the tree, the corresponding area on the canvas will be highlighted; conversely, clicking on a component directly on the canvas will also locate the corresponding node in the tree.

[0041] Designers can edit the UI in two ways: Edit directly through the graphical interface (e.g., modify values ​​in the properties panel, select drop-down options, drag and drop component order); Input natural language commands. Designers can select a block or component in the interface and input statements such as "Change this block to a three-column card layout" or "Change this group of buttons to a blue style," and the system will call the large language model for parsing.

[0042] The system supports designer modifications through structured SPEC editing. Designer editing operations are uniformly abstracted into specification update instructions in the form of triplets: <operation type, path, target value>. The operation type includes replacement, insertion, and deletion; the path uses a hierarchical positioning method similar to JSON Pointers to precisely point to a specific field in the SPEC tree (such as the primary color in the global color system); and the target value is the new parameter or semantic description.

[0043] Before executing the editing command, the operation type, path validity, and target value range are verified to ensure that the update does not break the structural integrity of the SPEC or violate global constraints.

[0044] If a path is found to be non-existent, a value type mismatch is found, or a constraint conflict is found (e.g., a block references a color that does not exist in the global specification), the system will return diagnostic information and request the large language model to generate a corrected instruction, completing automatic error correction within a limited number of retries.

[0045] After the command passes verification, the system only updates the SPEC portion: for changes involving global specifications (such as a complete change to the color system), the system uniformly replaces the global style while keeping the layout structure unchanged; for adjustments to local layouts or component styles, the system only regenerates and renders the front-end code snippets corresponding to the relevant Section or Component, thereby avoiding the problem of unrelated areas being accidentally modified in the traditional "overall regeneration" method.

[0046] Based on a previously modified SPEC that integrates reference diagrams and user commands, an enhanced search library is used. This library stores a large amount of React UI component code and corresponding manually validated SPECs as examples. During initial generation, the system semantically embeds the use case field for each UI component in the current SPEC and retrieves the most similar example from the library.

[0047] After retrieving the sample, the fields in the SPEC (global specifications, rounded corners, shadows, etc.) are mapped to the corresponding fields in the sample through keyword matching. The complete SPEC structure, sample, and field correspondence are packaged together with the code generation task into a code generation hint, which requires the LLM (component generation agent) to modify.

[0048] After all UI components have been modified, the modified component code and page structure tree are combined with the LLM (Page Builder), which reuses the layout rules of the page structure tree to form the final complete React front-end component code of the page.

[0049] More specifically, after the SPEC is finalized, SpecifyUI uses a multi-agent collaborative code generation and debugging module to generate runnable front-end code from the SPEC for designers to view and debug. The code generation agent is based on an embedded large code language model, which targets React and combines the Ant Design component library and chart library to generate high-fidelity UI code.

[0050] SpecifyUI first packages the complete SPEC structure along with the task description into code generation hints. These hints include the global layout structure, color system, morphological language, and the functional semantics and hierarchical relationships of each block and component. In the generation hints, the system explicitly requires the model to configure the grid layout, spacing, rounded corners, shadows, and color scheme according to the parameterized fields in the SPEC, and to select appropriate UI component combinations and attribute settings based on component type and functional labels, thereby ensuring structural and visual consistency between the generated code and the SPEC.

[0051] Enhance the experience with a SPEC-code aligned search library. This library stores a large number of manually verified SPECs and their corresponding React implementations as examples.

[0052] Initial generation involves semantic embedding of the current SPEC and retrieving several most similar examples from the library. These examples, along with their specification and code snippets, are injected as few-shot examples into the code generation hints, enabling the model to align with existing layout patterns and component composition strategies when generating new code. For partial updates, only the affected SPEC subtree is searched, and the scope of modification is limited during generation. This method does not strictly require large models to directly input parameters; instead, it uses examples as references for code generation, reducing the illusion effect during the generation process.

[0053] After code generation, the system injects the generated front-end code into a sandbox environment for execution and rendering. If syntax errors, missing dependencies, or inconsistent component references occur during compilation or execution, the repair intelligence collects the error stack, failed code snippets, and corresponding SPEC node information, generates a structured error report, and feeds it back to the code model along with the original code, requesting it to repair the issue without disrupting the valid structure. The system controls this "compile-feedback-repair" cycle within a limited number of rounds, ensuring that a front-end implementation that can be successfully compiled and rendered correctly is obtained within a reasonable timeframe.

[0054] Ultimately, designers can directly preview the rendering results in the system interface, check their consistency with the SPEC and the original design intent, and initiate a new round of local modifications and code regeneration if necessary.

[0055] This embodiment also provides a front-end UI design support device for executing the steps of the front-end UI design support method based on generative artificial intelligence provided in the above embodiment.

[0056] To demonstrate the technical superiority of the solution provided in this embodiment, the following experimental content is provided: Sixteen participants with UI design experience were invited to complete two typical web interface tasks. The experiment adopted a "reference-driven design" task format, allowing participants to generate and iteratively edit UIs based on multiple reference interfaces. The system supports extracting layouts, styles, and component structures from references and allows participants to edit at three levels: global, block, and component, thereby comprehensively testing the system's controllable editing capabilities.

[0057] The evaluation was conducted by three independent UI design experts using a 7-point scale, scoring the final output across four dimensions: style consistency, layout structure reproduction, component correctness, and task relevance. SpecifyUI significantly outperformed Stitch across all dimensions: style consistency 5.52 vs 4.18, layout consistency 4.99 vs 3.73, component correctness 5.69 vs 4.20, and task relevance 5.58 vs 4.92, with all differences being highly significant (p < .001). These results indicate that SPEC is better able to maintain key reference features that designers focus on, such as page tone, structural rhythm, visual hierarchy, and component semantic functionality.

[0058] We also conducted a subjective experience scale test on participants. Participants unanimously agreed that SpecifyUI provided greater controllability, especially in its ability to perform "hierarchical, side-effect-free local editing" (5.88 vs 3.94). Regarding intent compliance, SpecifyUI scored 6.06, significantly higher than Stitch's 4.25. Participants generally felt that SPEC's visual structure tree better matched the actual workflow of designers, reducing context loss caused by repeatedly writing prompts. Although the initial setup based on SPEC took slightly longer than with Stitch, it significantly reduced invalid modifications and regenerations in subsequent iterations, resulting in higher overall task completion efficiency.

[0059] In summary, the user experiment results fully demonstrate that the present invention is superior to existing front-end automated design support tools (such as Stitch) in terms of "intent expression accuracy", "multi-granularity controllability", "visual structure consistency" and "design workflow matching degree", and can more effectively support professional designers' iterative UI creation and decision-making.

[0060] Furthermore, the terms "upper," "lower," "inner," "outer," "front," and "rear" are used for descriptive purposes only and should not be construed as indicating or implying relative importance. Unless otherwise specifically stated, the relative steps, numerical expressions, and values ​​of the components and steps set forth in these embodiments do not limit the scope of the invention.

[0061] Of course, the above description is only a specific embodiment of the present invention and is not intended to limit the scope of the present invention. All equivalent changes or modifications made to the structure, features and principles described in the claims of the present invention should be included in the scope of the claims of the present invention.

[0062] Finally, it should be noted that the above-described embodiments are merely specific implementations of the present invention, used to illustrate the technical solutions of the present invention, and not to limit it. The scope of protection of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments within the technical scope disclosed in the present invention, or make equivalent substitutions for some of the technical features; and these modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be covered within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A front-end UI design support method based on generative artificial intelligence, characterized in that, Includes the following steps: Obtain design schemes and reference UI design code libraries, including reference interface screenshots and user front-end UI design requirements; The reference interface screenshot is analyzed at the region level by using a pre-trained object detection model, and the entire interface is divided into multiple functionally related blocks. The images corresponding to all blocks are input into a pre-trained multimodal large language model to identify the design elements and UI components in each block; Based on design elements, construct corresponding global specifications, and use reference interface screenshots, blocks and corresponding UI components as nodes, and use relationships as connecting edges to construct the corresponding page structure tree; The multimodal large language model is used to extract keywords from the user's front-end UI design requirements, and the content in the global specification and page structure tree is optimized based on the keywords to output code generation prompts containing the optimized global specification and page structure tree. Based on the UI components under each block in the code generation prompts, the reference UI design code library is matched for similarity to obtain the reference UI code with the highest similarity. Then, the design elements are integrated with the obtained reference UI code and the code generation prompts to obtain the corresponding UI code. Based on all UI code and an optimized page structure tree, a front-end UI interface that meets the requirements of front-end UI design is generated.

2. The front-end UI design support method based on generative artificial intelligence according to claim 1, characterized in that, The target detection model is constructed using a Co-DETR network structure.

3. The front-end UI design support method based on generative artificial intelligence according to claim 1, characterized in that, The global specifications include layout structure, color system, morphological language, and usage scenarios.

4. The front-end UI design support method based on generative artificial intelligence according to claim 1, characterized in that, The design elements include grid layout, spacing, rounded corners, shadows, and color scheme.

5. The front-end UI design support method based on generative artificial intelligence according to claim 1, characterized in that, The optimization involves using keywords to assess the confidence level of the content in the global specification and page structure tree. If the confidence level of a keyword is higher than that of the content in the global specification or page structure tree, the corresponding content is replaced with the keyword. Otherwise, a fusion decision is made based on the large language model to integrate the keyword with the content in the global specification and page structure tree, thereby generating the corresponding fusion decision content.

6. The front-end UI design support method based on generative artificial intelligence according to claim 5, characterized in that, The optimization process also requires data verification, which aims to verify the operation type, path validity, and target range.

7. The front-end UI design support method based on generative artificial intelligence according to claim 1, characterized in that, The design elements are integrated by using a common code snippet from the reference UI code as a few-shot example injected into the code generation prompt, and then filling the common code snippet with the design elements of the block in the code generation prompt to obtain the corresponding UI code.

8. A front-end UI design support device, characterized in that, The steps are for performing the front-end UI design support method based on generative artificial intelligence as described in any one of claims 1 to 7.

Images