Natural language driven front-end and back-end application automatic development method and system

Abstract

The invention discloses a natural language driven front-end and back-end application automatic development method and system, and belongs to the technical field of computer software, and the method comprises the following steps: S1, receiving an original request input by a user; s2, performing semantic analysis and intention recognition on the original request based on a large language model, and converting the original request into structured intermediate structure modeling information; s3, after the structured intermediate structure modeling information is optimized through an artificial intelligence model and interacts with a user to confirm a demand, a Figma UI design drawing is generated; s4, metadata of the Figma UI design drawing is analyzed, and a front-end code is automatically generated; s5, synchronously generating back-end interface design and implementation logic; s6, performing automatic joint debugging binding on the front-end code and the rear-end interface; and S7, outputting a complete project file structure and a document. Full-link automation of processes of design, development, joint debugging and the like is realized, and particularly, closed-loop automatic generation from language to interface and then to code is realized through a linkage mechanism of'text-to-graph 'and'graph-to-code'.

Description

Technical Field

[0001] The present invention relates to the technical field of computer software, and particularly relates to a natural language-driven automatic development method and system for front-end and back-end applications. Background Art

[0002] When developing software, developers usually need to have strong programming capabilities, especially for complex tasks such as front-end page construction, back-end interface design, and database modeling. Although some low-code / no-code platforms can assist in development, there are still problems such as high technical thresholds and poor flexibility. In recent years, the development of large language models has provided powerful capabilities for natural language understanding and generation, providing a technical basis for "generating code with natural language". However, there is currently no automated method and system on the market that can directly convert natural language descriptions into deployable complete front-end and back-end projects. Summary of the Invention

[0003] The purpose of the present invention is to overcome the deficiency in the prior art that there is no automated method and system that can directly convert natural language descriptions into deployable complete front-end and back-end projects, and provide a natural language-driven automatic development method and system for front-end and back-end applications.

[0004] To solve the above technical problems, the present invention provides the following technical solutions: A natural language-driven automatic development method for front-end and back-end applications, comprising the following steps: S1: Receive the original request input by the user, where the original request includes: natural language requirements, attachments, and context metadata; S2: Based on a large language model, perform semantic parsing and intent recognition on the original request, and convert it into structured intermediate structure modeling information; S3: After the structured intermediate structure modeling information is optimized by an artificial intelligence model and the requirements are interactively confirmed with the user, generate a Figma UI design diagram; S4: Parse the metadata of the Figma UI design diagram and automatically generate front-end code; S5: Synchronously generate back-end interface design and implementation logic; S6: Automatically perform joint debugging and binding on the front-end code and the back-end interface; S7: Output the complete project file structure and documentation.

[0005] As a preferred solution of the present invention, the large language model described in step S2 is based on the open source DeepSeek model and introduces several software engineering corpora through instruction fine-tuning, and introduces function call specifications, so that the large language model calls subsequent generation modules according to JSON-Schema, and at the same time combines RAG technology to retrieve the industry's Best Practice library.

[0006] As a preferred solution of the present invention, the structured intermediate structure modeling information described in step S3 is optimized through an artificial intelligence model, including: using a lightweight BERT-Score evaluator in conjunction with a rule engine to perform consistency checking, semantic disambiguation and completion on the structured intermediate structure modeling information, and completing default fields based on the knowledge graph.

[0007] As a preferred solution of the present invention, the interactive confirmation of requirements with the user in step S3 includes: listing pending issues one by one in the form of a chat, and the user can choose to accept / modify / delete, and preview the Figma UI design sketch and data structure in time, until the requirement status is confirmed, and then enter the next stage.

[0008] As a preferred solution of the present invention, the generating of Figma UI design drawing described in step S3 includes: the Figma UI design drawing is automatically drawn based on the natural language requirement document, has the capability of text drawing, and the metadata of the Figma UI design drawing is used to generate a component-level code structure that conforms to the design specifications.

[0009] As a preferred solution of the present invention, the step S4 of parsing the metadata of the Figma UI design drawing and automatically generating the front-end code includes: obtaining the node tree, layout attributes and styles through the Figma REST API and converting them into an internal abstract syntax tree, and then mapping them into React components, and outputting Tailwind / AntD theme files at the same time.

[0010] As a preferred solution of the present invention, the synchronous generation of the backend interface design and implementation logic described in step S5 includes: deriving three artifacts, openapi.yaml, backend_repo and db_schema.sql, from the final confirmation verification report to ensure that the fields and data types are consistent.

[0011] As a preferred solution of the present invention, the automatic joint debugging and binding of the front-end code and the back-end interface described in step S6 includes: parsing the interface specification to generate a TypeScript API Client and automatically injecting it into the front end; injecting two middleware, CORS and Auth, into the back end, and generating integration test cases based on Jest + SuperTest; after running the synthesis test, outputting a joint debugging report, and only after all interfaces pass in full can it enter the deployment stage.

[0012] On the other hand, a system for implementing the natural language-driven front-end and back-end application automatic development method described in any one of the above includes: User natural language input module: used to receive the user's original request, and clean, detect the language, and perform security filtering on the input original request; LLM semantic analysis and requirement reconstruction module: used to perform semantic parsing, intention recognition, and term standardization and structuring on the original request processed by the user natural language input module, and generate an initial verification report; Auxiliary intelligent optimization module: used to call lightweight BERT-Score and a rule engine to perform semantic disambiguation, field completion, and business consistency check on the initialization report, and output an optimized verification report; Multi-round interaction confirmation module: used to visually display the optimized verification report and collect user feedback through chat, and generate a final confirmation verification report; Figma UI automatic generation module: used to call a text-to-image model or a design system according to the final confirmation verification report, output a.fig file, and write node metadata; Metadata parsing and front-end code generation module: used to convert the node metadata into a UI abstract syntax tree, map it to React / AntD components, and generate TSX, SCSS, and theme files, and output a code repository branch; Back-end interface design and generation module: used to deduce a data model and business use cases from the final confirmation verification report, and output openapi.yaml, backend_repo, and db_schema.sql; Front-end and back-end joint debugging module: used to read the code repository branch and openapi.yaml, generate an API-Client and integration test Jest+SuperTest, execute end-to-end tests, and generate a report; Project Packaging and Output Module: Triggered after receiving the qualified report output by the Back-end Interface Design and Generation Module, it is used to generate Dockerfile, docker-compose.yml, CI / CD pipeline, package the front-end and back-end images and publish them to the private Registry, and output the complete project compressed package.

[0013] As a preferred solution of the present invention, the LLM Semantic Analysis and Requirement Reconstruction Module is also used to send the initial verification report back to the Multi-round Interaction Confirmation Module for the user to preview; The Multi-round Interaction Confirmation Module is also used to synchronously push the final confirmation verification report to the Figma UI Automatic Generation Module and the Back-end Interface Design and Generation Module.

[0014] Compared with the prior art, the beneficial effects of the present application are: A natural language-driven automatic development method and system for front-end and back-end applications that greatly reduce the development threshold are provided, enabling non-professional developers to generate complex full-stack projects through natural language, improving development efficiency, having a flexible multi-round optimization mechanism, having good scalability and maintainability, realizing the full-link automation of processes such as design, development, and joint debugging, and especially through the linkage mechanism of "text-to-image" + "image-to-code", realizing the closed-loop automatic generation from language to interface and then to code. Brief Description of the Drawings

[0015] By reading the following detailed description of the preferred embodiments, various other advantages and benefits will become clear to those of ordinary skill in the art. The drawings are only for the purpose of showing the preferred embodiments and are not considered to be a limitation of the present invention. Throughout the drawings, the same reference numerals are used to represent the same components. In the drawings: Figure 1 It is a flowchart of a natural language-driven automatic development method for front-end and back-end applications according to Embodiment 1 of the present invention; Figure 2 It is a natural language-driven automatic development system for front-end and back-end applications according to Embodiment 2 of the present invention. Detailed Embodiments

[0016] The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. The components of the embodiments of the present invention described and illustrated herein can be arranged and designed in various different configurations. Therefore, the detailed description of the embodiments of the present invention provided in the accompanying drawings is not intended to limit the scope of the present invention claimed, but merely represents selected embodiments of the present invention. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative efforts belong to the scope of protection of the present invention.

[0017] It should be noted that: similar reference numerals and letters denote similar items in the following drawings. Therefore, once an item is defined in one drawing, it does not need to be further defined and explained in subsequent drawings. At the same time, in the description of the present invention, the terms "first", "second", etc. are only used for distinguishing descriptions and cannot be understood as indicating or implying relative importance, or implying any such actual relationship or order between these entities or operations. In addition, the terms "connected", "coupled", etc. can be directly connected between components or indirectly connected via other components.

[0018] Embodiment 1 A method for automatically developing front-end and back-end applications driven by natural language, as Figure 1 shown, includes the following steps: S1: Receive the original request input by the user, where the original request includes: natural language requirements, attachments, and context metadata; S2: Perform semantic parsing and intent recognition on the original request based on a large language model and convert it into structured intermediate structure modeling information; Specifically, the large language model in step S2 is domain fine-tuned + enhanced with plug-in tool call capabilities based on the open-source DeepSeek model, including: introducing 2 million software engineering corpora through instruction fine-tuning (SFT); introducing function call specifications so that the model can call subsequent generation modules according to JSON-Schema; retrieving the industry Best Practice library in combination with the RAG technology during deployment to ensure the reliability of answers.

[0019] S3: After the structured intermediate structure modeling information is optimized by an artificial intelligence model and the requirements are interactively confirmed with the user, a Figma UI design drawing is generated; Specifically, the optimization of the structured intermediate structure modeling information described in step S3 by the artificial intelligence model includes: using a lightweight BERT-Score evaluator combined with a rule engine to perform consistency checking, semantic disambiguation, and complementation on the structured intermediate structure modeling information, and at the same time filling in default fields (such as data types and interaction processes) based on the knowledge graph.

[0020] The interaction with the user to confirm requirements described in step S3 includes: listing the outstanding issues (function scope, permission model, performance indicators, etc.) item by item in the form of a chat. The user can choose "Accept / Modify / Delete" and instantaneously preview the Figma UI design sketch & data structure until "Requirement Status = Confirmed" before proceeding to the next stage.

[0021] The generation of the Figma UI design drawing described in step S3 includes: the Figma UI design drawing is automatically drawn based on the natural language requirement document, has the ability to generate images from text, and the metadata of the Figma UI design drawing is used to generate a component-level code structure that complies with the design specifications.

[0022] S4: Parse the metadata of the Figma UI design drawing and automatically generate front-end code; Specifically, the parsing of the metadata of the Figma UI design drawing and the automatic generation of front-end code described in step S4 include: obtaining the node tree + layout attributes + style tokens from the Figma REST API and converting them into an internal AST, and then mapping them to React (JSX) components; at the same time, outputting Tailwind / AntD theme files to ensure pixel-level restoration.

[0023] S5: Synchronously generate the back-end interface design and implementation logic, and at the same time generate the PostgreSQL database model and migration scripts; Specifically, the synchronous generation of the back-end interface design and implementation logic described in step S5 includes: deriving three artifacts, namely openapi.yaml, backend_repo, and db_schema.sql, from the final confirmation verification report to ensure the consistency of fields and data types.

[0024] S6: Automatically perform joint debugging and binding on the front-end code and the back-end interface; Specifically, the automatic joint debugging and binding of the front-end code and the back-end interface described in step S6 includes: parsing the interface specification (OpenAPI) to generate a TypeScript API Client and automatically injecting it into the front-end; injecting two middleware, CORS and Auth, into the back-end, and generating integration test cases based on Jest + SuperTest; after running the synthesis test, outputting a joint debugging report, and only after all interfaces pass in full can it enter the deployment stage.

[0025] S7: Output the complete project file structure and documentation, including: outputting the complete project directory structure, Docker-Compose / K8s deployment scripts, and development documentation.

[0026] Embodiment 2 A system for implementing the natural language-driven front-end and back-end application automatic development method described in Embodiment 1, as Figure 2 shown, includes: User natural language input module: used to receive the user's original request, and clean, detect the language, and perform security filtering on the input original request; Specifically, the user natural language input module inputs the user's natural language requirements, attachments, and context metadata, and outputs a raw request data packet (raw_request), and sends the raw_request to the LLM semantic analysis and polishing module; LLM semantic analysis and requirement reconstruction module: used to perform semantic parsing, intention recognition, and term standardization and structuring on the original request processed by the user natural language input module, and generate an initial verification report (domain_schema_v0); Specifically, the LLM semantic analysis and requirement reconstruction module passes the initial verification report to the auxiliary intelligent optimization module (AI-Refiner), and sends it back to the multi-round interaction confirmation module for the user to preview; Auxiliary intelligent optimization module: used to call the lightweight BERT-Score and rule engine to perform semantic disambiguation, field completion, and business consistency check on the initialization report, and output an optimized verification report (domain_schema_v1); Specifically, the auxiliary intelligent optimization module hands over the optimized verification report to the multi-round interaction confirmation module, and uses the optimized verification report as the confirmation baseline.

[0027] Multi-round interaction confirmation module: used to visually display the optimized verification report and collect user feedback through chat, and generate a final confirmation verification report; Specifically, v_final is synchronously pushed to the Figma UI automatic generation module and the backend interface design and generation module (maintaining a single true source). Figma UI automatic generation module: Used to call the text-to-image model or design system according to the final confirmation verification report, output a.fig file (ui_figma_file + figma_meta (node tree JSON)), and write node metadata. Specifically, figma_meta is used by the metadata parsing and front-end code generation module. Among them, the "Figma UI automatic generation module" is one of the key technologies of this system. Based on the structured requirement information generated by natural language, it automatically generates the corresponding Figma UI design image content, and converts the interface layout and component information in the image into parsable metadata, thereby driving the generation of the front-end code structure. This module has the "text-to-image" ability, that is, it directly maps language to a visual interface, significantly improving the automation level and restoration degree of interface design. Metadata parsing and front-end code generation module: Used to convert the node metadata into a UI abstract syntax tree, map it to React / AntD components, and generate TSX, SCSS, and theme files, and output a code repository branch (frontend_repo). Specifically, read the OpenAPI Spec (produced by the backend module), automatically inject the API Client, and generate a commit to push to the Mono-Repo. Backend interface design and generation module: Used to derive data models and business use cases from the final confirmation verification report, and output openapi.yaml, backend_repo, and db_schema.sql. Specifically, provide openapi.yaml to the front-end and back-end joint debugging module, and write it into the Mono-Repo at the same time. Front-end and back-end joint debugging module: Used to read the code repository branch and openapi.yaml, generate API-Client and integration test Jest+SuperTest, execute end-to-end tests, and generate reports. Project packaging and output module: Triggered after receiving the qualified report output by the backend interface design and generation module, used to generate Dockerfile, docker-compose.yml, CI / CD pipeline, package the front-end and back-end images and publish them to the private Registry, and output a complete project compressed package. Specifically, after the report is qualified, the project packaging and output module is triggered, and the project packaging and output module outputs deploy_bundle.zip, image address, and CI / CD configuration for direct deployment by the end user or operation and maintenance.

[0028] In addition, it should be noted that, for each of the specific technical features described in the above specific embodiments, without conflict, they can be combined in any appropriate manner. To avoid unnecessary repetition, the present disclosure will not separately describe various possible combination methods.

[0029] In addition, any combination can be made between various different embodiments of the present disclosure, as long as it does not violate the idea of the present disclosure, and it should also be regarded as the content disclosed by the present disclosure.

Claims

1. A method for automatically developing front-end and back-end applications driven by natural language, characterized in that, It includes the following steps: S1: Receive the original request input by the user, where the original request includes: natural language requirements, attachments, and context metadata; S2: Based on a large language model, perform semantic parsing and intent recognition on the original request, and convert it into structured intermediate structure modeling information; S3: After the structured intermediate structure modeling information is optimized by an artificial intelligence model and interacted with the user to confirm the requirements, generate a Figma UI design diagram; S4: Parse the metadata of the Figma UI design diagram and automatically generate front-end code; S5: Synchronously generate the back-end interface design and implementation logic; S6: Automatically perform joint debugging and binding on the front-end code and the back-end interface; S7: Output the complete project file structure and documentation.

2. The automatic development method for front-end and back-end applications driven by natural language according to claim 1, wherein The large language model described in step S2 is based on the open-source DeepSeek model. Through instruction fine-tuning, a number of software engineering corpora are introduced, and a function call specification is introduced, so that the large language model calls subsequent generation modules according to JSON-Schema. At the same time, the RAG technology is combined to retrieve the Best Practice library in the industry.

3. A natural language-driven automatic development method for front-end and back-end applications according to claim 1, characterized in that The optimization of the structured intermediate structure modeling information described in step S3 by the artificial intelligence model includes: using a lightweight BERT-Score evaluator combined with a rule engine to perform consistency checking, semantic disambiguation, and completion on the structured intermediate structure modeling information. At the same time, default fields are filled in based on the knowledge graph.

4. A natural language-driven automatic development method for front-end and back-end applications according to claim 1, characterized in that The interaction with the user to confirm the requirements described in step S3 includes: listing the outstanding issues one by one in the form of a chat. The user can choose to accept / modify / delete, and preview the Figma UI design sketch and data structure in a timely manner. Only after the requirement status is confirmed can the next stage be entered.

5. A natural language-driven automatic development method for front-end and back-end applications according to claim 1, characterized in that The generation of the Figma UI design diagram described in step S3 includes: The Figma UI design diagram is automatically drawn based on the natural language requirement document, has the ability to generate images from text, and the metadata of the Figma UI design diagram is used to generate a component-level code structure that conforms to the design specifications.

6. A natural language-driven front-end and back-end application automatic development method according to claim 1, characterized in that The parsing of the metadata of the Figma UI design diagram and the automatic generation of front-end code described in step S4 include: Obtain the node tree, layout attributes, and styles through the Figma REST API and convert them into an internal abstract syntax tree, then map them to React components, and output Tailwind / AntD theme files at the same time.

7. A natural language-driven automatic development method for front-end and back-end applications according to claim 1, characterized in that The synchronous generation of the back-end interface design and implementation logic described in step S5 includes: Derive three artifacts, openapi.yaml, backend_repo, and db_schema.sql, on the final confirmation verification report to ensure that the fields and data types are consistent.

8. A natural language-driven automatic development method for front-end and back-end applications according to claim 1, characterized in that The automatic joint debugging and binding of the front-end code and the back-end interface described in step S6 includes: parsing the interface specification to generate a TypeScript API Client and automatically injecting it into the front end; injecting two middleware, CORS and Auth, into the back end, and generating integration test cases based on Jest + SuperTest; running the synthesis test and outputting a joint debugging report. Only after all interfaces pass the full volume can it enter the deployment stage.

9. A system for implementing the natural language-driven front-end and back-end application automatic development method according to any one of claims 1-8, characterized in that, including: User natural language input module: used to receive the user's original request, and clean, detect the language, and perform security filtering on the input original request; LLM semantic analysis and requirement reconstruction module: used to perform semantic parsing, intent recognition, and term standardization and structuring on the original request processed by the user natural language input module, and generate an initial verification report; Auxiliary intelligent optimization module: used to call lightweight BERT-Score and the rule engine to perform semantic disambiguation, field completion, and business consistency check on the initialization report, and output an optimized verification report; Multi-round interaction confirmation module: used to visually display the optimized verification report and collect user feedback through chat, and generate a final confirmation verification report; Figma UI automatic generation module: used to call the text-to-image model or design system according to the final confirmation verification report, output a.fig file, and write node metadata; Metadata parsing and front-end code generation module: used to convert the node metadata into a UI abstract syntax tree, map it to React / AntD components, and generate TSX, SCSS, and theme files, and output the code repository branch; Back-end interface design and generation module: used to derive the data model and business use cases from the final confirmation verification report, and output openapi.yaml, backend_repo, and db_schema.sql; Front-back end joint debugging module: used to read the code repository branch and openapi.yaml, generate API-Client and integration test Jest+SuperTest, execute end-to-end tests, and generate reports; Project packaging and output module: triggered after receiving the qualified report output by the back-end interface design and generation module, used to generate Dockerfile, docker-compose.yml, CI / CD pipeline, package the front-end and back-end images and publish them to the private Registry, and output the complete project compressed package.

10. The system according to claim 9, wherein The LLM semantic analysis and requirement reconstruction module is also used to pass the initial verification report back to the multi-round interaction confirmation module for the user to preview; The multi-round interaction confirmation module is also used to synchronously push the final confirmation verification report to the Figma UI automatic generation module and the back-end interface design and generation module.

Images