An AI-assisted development method, system, device and product for homologous interaction prototypes

Abstract

The application discloses an AI-assisted development method, system, device and product of a homologous interaction prototype, a first AI model is used to analyze a natural language requirement, a single-file interaction prototype which is completely identical to a front-end component library and can be independently run is generated, multi-party review is completed, and a unique requirement baseline is locked; a second AI model is used to structurally decouple and reconstruct the prototype which has been locked as the requirement baseline into a multi-file front-end project in line with enterprise engineering specifications; a third AI model is used to complete front-end and back-end code development and interface docking based on the homologous engineering, and finally deliver the code; and a fourth AI model is used to complete intelligent review of four-dimensional consistency of UI, interaction, state and routing, and output a standardized difference report. The application realizes homologous traceable iteration of a whole process of "requirement-prototype-engineering-code-review", breaks the traditional development link fault, reduces repeated development, improves delivery consistency and development efficiency, and has outstanding technical progress and engineering practical value.

Description

Technical Field

[0001] This invention belongs to the field of full-stack development and artificial intelligence technology, and more specifically relates to an AI-assisted development method, system, device and product for a homologous interactive prototype. Background Technology

[0002] In the existing front-end / back-end separated software development model, the stages of requirement delivery, prototype design, code development, and quality review are independent of each other, with fragmented technical systems and information gaps in the process links. This leads to low overall software development efficiency and poor consistency of deliverables, a common technical problem in the iterative development of enterprise-level web systems. Traditional software development mainly relies on plain text requirement documents and static prototype diagrams to complete requirement delivery. However, text requirements lack unified standardized writing specifications, have vague semantic descriptions, and poor interpretability, easily causing misunderstandings of business requirements among product, design, development, and testing stakeholders. Static prototypes can only achieve basic visual display and lack interactive operation capabilities, failing to fully reproduce real business processes, user operation logic, and abnormal page states. Therefore, existing requirement reviews can only complete a superficial visual check, making it difficult to effectively verify the completeness and rationality of business logic, resulting in insufficient review effectiveness.

[0003] Currently, most mainstream AI-assisted development technologies offer fragmented, single-point empowerment, capable of independently achieving single functions such as AI prototype generation, basic code generation, and simple code-text comparison. They have not yet formed a closed-loop solution covering the entire software development process, resulting in significant technological limitations. On one hand, existing AI-generated prototype code has a loose structure and strong generality, failing to adapt to enterprise engineering development standards. It lacks standardized directory planning, routing configuration, and component decomposition logic, making it impossible to directly iterate and optimize into deployable engineering code, resulting in poor reusability and practicality. On the other hand, existing code comparison and review technologies only support basic text difference comparison, unable to conduct consistency checks on core development dimensions such as UI component structure, interaction logic, page exception handling, and routing systems. This results in a one-sided verification dimension and weak scenario adaptability. Furthermore, current software quality review work heavily relies on manual line-by-line verification and page-by-page testing, which not only has a long review cycle and high labor costs but also suffers from subjective errors, leading to a high probability of missed or incorrect reviews, making it difficult to guarantee the stability and consistency of software delivery quality.

[0004] In summary, in enterprise-level front-end and back-end separated software development, web management system development, and iterative software project development scenarios, existing technologies generally suffer from problems such as a disconnect between prototypes and engineering code, fragmented development chains, lack of a unified requirements baseline, and an imperfect quality review system. Traditional development models, relying on independent prototyping tools, fragmented AI capabilities, and manual review, are ill-suited for standardized enterprise engineering development platforms and mainstream standardized front-end engineering systems such as Vue and Ant Design Vue. During implementation, they commonly exhibit deficiencies such as non-standardized requirement descriptions, prototypes that are merely visual illustrations, low standardization of code development, and high reliance on manual quality review. Currently, the industry lacks a unified, closed-loop intelligent solution that spans the entire process from project requirement confirmation, prototype iteration, structural engineering refactoring, front-end and back-end collaborative development, to deployment quality review. This solution fails to address the core pain points in government and enterprise projects, enterprise management systems, and web business system development, such as distorted requirement transmission, redundant UI construction, inconsistencies between prototype and code delivery, inefficient manual review, and uncontrollable project iteration quality. A new, structured, closed-loop, and unified technical solution is urgently needed to overcome existing technological bottlenecks. Summary of the Invention

[0005] The purpose of this invention is to overcome the inherent technical defects of existing AI-assisted software development technologies, such as the disconnect between prototypes and code, fragmented development chains, distorted requirement transmission, repetitive UI construction, and incomplete and inefficient manual review. This invention provides an AI-assisted development method, system, device, and product for homogeneous interactive prototypes. It breaks through the limitations of traditional single-point empowerment and fragmented processes, constructing a new development system with four-level AI collaboration, consistent prototype code, and a fully controllable closed-loop process. This solves the core technical problems of existing technologies, such as the inability to achieve smooth evolution of prototype engineering, lack of delivery consistency, and low intelligence in quality review, thus achieving intelligent, standardized, homogeneous, and precise iteration throughout the entire software development process. To achieve the above objectives, this invention adopts the following technical solution: According to one aspect of the present invention, an AI-assisted development method for a homologous interactive prototype is provided, characterized in that the AI-assisted software development method includes the following steps: Requirements Analysis and Prototype Generation: The system uses a pre-defined first AI model to obtain the user's input natural language requirement description. It then intelligently extracts the page list, interface components, interaction logic, and business rules from the natural language requirement description and automatically generates a single-file interactive prototype. The single-file interactive prototype is built using a component library that is exactly the same as the front-end component library of the target development framework. It has built-in simulated business data and simulated route switching logic. The single-file interactive prototype can be run, displayed, and interacted with independently in a browser. Requirements review and baseline locking: Grant users online access to the single-file interactive prototype, allowing multiple parties to conduct requirements review and experience testing. Receive user modification and optimization instructions in real time and iteratively update the content of the single-file interactive prototype until the interface display, interaction logic, and business rules of the single-file interactive prototype fully meet the requirements. Establish the final single-file interactive prototype as the requirements baseline. Prototype isomorphic evolution: The single-file interactive prototype of the requirement baseline is restructured in a structured manner through a preset second AI model to generate a multi-file front-end project that is completely isomorphic to the front-end project of the target development framework. The multi-file front-end project and the target front-end project adopt the same build tools, directory structure, routing management rules and component-based development specifications, and fully retain all the interactive logic, UI structure, page style and status display rules of the prototype. Code generation: Based on the multi-file front-end project generated by refactoring, the pre-set third AI model is used to generate back-end service code that matches the business logic requirements. At the same time, the original static simulation data in the multi-file front-end project is replaced with real data calling logic that interfaces with the back-end service, optimizing data interaction and exception handling, and finally generating a full-stack source code that can be deployed online, including the front-end and back-end. Automated review: Using a pre-set fourth AI model, the single-file interactive prototype of the requirements baseline is compared with the full-stack source code that can be deployed online. The system performs full-dimensional structural comparison and interaction coverage verification, automatically identifies the differences between the two and generates a standardized difference review report, thus completing the automated verification of software development quality.

[0006] In a further preferred embodiment of the above scheme, the target development framework is a front-end and back-end separation development framework based on the Vue framework and the Ant Design Vue component library; the single-file interactive prototype is an independent hypertext markup language file, which is globally imported into the Vue framework and the Ant Design Vue component library through a content delivery network, and multi-page switching and page state simulation are realized by relying on the framework's conditional rendering syntax.

[0007] In a further preferred embodiment of the above scheme, in the requirement analysis and prototype generation step, the natural language requirement description includes conventional business requirements or business pain points. The first AI model performs full-dimensional analysis of the content of the natural language requirement description, intelligently generates a page list, interface components, interaction logic and business rules, and automatically constructs a complete interactive prototype that includes normal business processes, empty data states, page loading states, and operation result feedback states, covering conventional business scenarios and abnormal fallback scenarios.

[0008] In a further preferred embodiment of the above scheme, the prototype isomorphic evolution step, in which the second AI model performs a structured reconstruction of the single-file interactive prototype of the requirements baseline, includes the following steps: The second AI model reads the single-file interactive prototype of the requirement baseline, and analyzes the page structure, component nesting hierarchy, interactive trigger event binding, conditional rendering logic, page state logic and simulated routing rules inside the single-file interactive prototype. Automatically initialize a standardized engineering skeleton for multi-file front-end projects that conforms to the front-end engineering specifications of the target development framework; The page fragments within the single-file interactive prototype are split and decoupled. Independent business pages are extracted as view components and stored in the src / views business directory of the project. Reusable interface components are extracted as general common components and stored in the src / components general directory of the project. A standardized routing table is built based on vue-router. This standardized routing table replaces the built-in simulated route switching logic in the single-file interactive prototype. At the same time, all built-in simulated business data is uniformly migrated to an independent src / mock data module, thereby decoupling data from the view.

[0009] In a further preferred embodiment of the above scheme, in the code generation step, the full-stack source code that the third AI model finally generates and can be deployed online completely retains all UI component instances, component hierarchical nesting relationships, interactive response logic and page state rules of the multi-file front-end project, and only replaces the data acquisition method, replacing the original static simulated data acquisition logic with the backend API interface dynamic call logic based on axios.

[0010] In a further preferred embodiment of the above scheme, the fourth AI model performs a full-dimensional structural comparison and interaction coverage verification between the single-file interactive prototype of the requirement baseline and the full-stack source code that can be deployed online, including the following steps: UI structure comparison: Extract the component tree structure of the single-file and multi-file interaction prototype and the final full-stack source code respectively, and compare the component types, component attributes, component nesting hierarchy, components with missing precise annotations, redundancies or inconsistent parameters one by one. Interaction coverage check: Analyze all interaction trigger points and corresponding interface response logic from the single-file interaction prototype, and verify whether the corresponding interaction trigger operation method and interaction feedback effect are completely replicated in the final full-stack source code. State handling check: Identify the page states corresponding to all conditions rendered in the single-file interactive prototype, and check whether the final full-stack source code is complete and retains empty data prompts, loading indicators, operation error feedback and pop-up prompts as fallback state components; Route consistency check: Bidirectionally compare the standardized routing table of the single-file interactive prototype with the routing definition rules of the final full-stack source code, accurately mark missing pages, route path inconsistencies, and abnormal issues that occur in the route parameter missing.

[0011] According to another aspect of the present invention, the present invention provides an AI-assisted software development system for a homologous interactive prototype, used to implement an AI-assisted development method for a homologous interactive prototype of the present invention. The AI-assisted software development system includes: a prototype generation module, a prototype evolution module, a code generation assistance module, and an automatic review module. The prototype generation module, the prototype evolution module, and the automatic review module are uniformly deployed on an AI service platform, and they interact with each other through standardized API interfaces, integrated development environment, and project management tools to achieve data interaction and functional linkage. The prototype generation module is used to receive users' natural language requirement input, parse the content of the natural language requirement description based on the preset first AI model, and generate a single-file interactive prototype that is completely identical to the front-end component library of the target development framework and can run independently. The prototype evolution module is used to structurally reconstruct a single-file interactive prototype that has completed the requirement baseline locking into a multi-file front-end project that is isomorphic to the front-end engineering specifications of the target development framework through a preset second AI model. The code generation assistance module is used to generate backend service code that matches business logic requirements based on a multi-file frontend project as the sole benchmark. It also uses a preset third AI model to modify the target frontend project, replacing the static simulation data in the project with the data calling logic that connects to the backend interface, improving data interaction and exception handling, and finally outputting a full-stack source code that can be deployed online. The automatic review module takes full-stack source code and requirements baseline as input, uses a preset fourth AI model to perform automated consistency checks, identifies deviations from the baseline in code structure, interaction, state and routing, and finally outputs a standardized difference review report.

[0012] In a further preferred embodiment of the above scheme, the first AI model is a dedicated multimodal large model for understanding software development requirements and generating visual prototypes. The first AI model includes a natural language understanding encoding module, a business scenario parsing module, a front-end component matching and reasoning module, a code structuring generation module, and an exception state completion module. The natural language understanding encoding module is responsible for segmenting, extracting semantics, recognizing intent, and parsing business structures for user natural language requirements. The business scenario parsing module is used to distinguish between regular business processes, empty data scenarios, loading scenarios, operation feedback, and exception error scenarios. The front-end component matching and reasoning module completes the accurate mapping between business functions and standard UI components based on the semantic features of the enterprise-level front-end component library. The code structuring generation module is responsible for outputting standardized and executable front-end code snippets. The exception state completion module automatically completes the necessary fallback interaction and status display logic for engineering development. The second AI model is a dedicated AI model for decoupling and structured refactoring of front-end code engineering. Specifically, it includes a prototype code semantic parsing submodule, an engineering specification adaptation submodule, a component intelligent decomposition and classification submodule, a routing system refactoring submodule, and a structured project output submodule. The prototype code semantic parsing submodule deeply analyzes the overall code structure, component nesting topology, Vue directive logic, interactive event binding, conditional rendering states, and simulated routing rules of a single-file prototype, fully restoring the prototype's business logic and UI rendering logic. The engineering specification adaptation submodule incorporates mainstream enterprise front-end engineering specification templates to automatically match Vite+Vue3 project directory specifications, component naming specifications, routing writing specifications, and modular development principles. The component intelligent decomposition and classification submodule distinguishes between business-specific page components and globally reusable public components, enabling automatic splitting of views and general components. The routing system refactoring submodule deconstructs the prototype's simplified simulated routes, generating standardized routing tables, route paths, and page mapping relationships that conform to the vue-router specification. The structured project output submodule automatically generates a complete project skeleton, directory files, and configuration files, ensuring that the output project is completely isomorphic to the enterprise's official development project. The third AI model is a dedicated large model for full-stack code generation and interface integration. Specifically, it includes a backend logic reasoning submodule, a data model mapping submodule, an interface contract generation submodule, a frontend data source replacement submodule, and an exception link completion submodule. The backend logic reasoning submodule derives backend service interfaces, data processing rules, and database table structures based on frontend business logic. The data model mapping submodule establishes field mapping relationships between frontend Vue3 component interaction data and backend persistent data. The interface contract generation submodule outputs standardized backend service code and interface documentation. The frontend data source replacement submodule replaces static simulated data in the frontend Vue3 project with asynchronous call logic that connects to real backend interfaces. The exception link completion submodule improves timeout handling, error capture, and degraded display logic during frontend-backend data interaction. The fourth AI model is a dedicated review model for verifying code and requirement consistency. Specifically, it includes a baseline semantic parsing submodule, a code structure scanning submodule, an interaction behavior comparison submodule, a state transition verification submodule, and a difference report generation submodule. The baseline semantic parsing submodule transforms the requirement baseline into machine-verifiable structured assertion rules. The code structure scanning submodule extracts Vue Router routing configurations, Vue3 component hierarchies, and API call relationships from the full-stack source code. The interaction behavior comparison submodule verifies whether page navigation, form submissions, and operation feedback in the code are consistent with the baseline definition. The state transition verification submodule detects whether the state change paths based on the Vue3 reactive system in the code fully cover the business scenarios required by the baseline. The difference report generation submodule summarizes the verification results from the above dimensions and outputs a standardized difference review report containing deviation location, severity level, and remediation suggestions.

[0013] The present invention also provides an AI-assisted development device, including a machine-readable storage medium, a processor, and a computer program stored on the machine-readable storage medium and executable on the processor, characterized in that the processor is configured to implement the steps of an AI-assisted development method for a homologous interactive prototype of the present invention by executing the computer program.

[0014] The present invention also provides a computer-readable program product, characterized in that the computer-readable program product includes processor-executable instructions, the processor-executable instructions are stored in a machine-readable storage medium, and the processor reads the processor-executable instructions from the machine-readable storage medium, causing the processor to execute the steps of implementing an AI-assisted development method for a homologous interactive prototype of the present invention.

[0015] In summary, because the present invention adopts the above-described technical solution, the present invention has the following technical effects: (1) Constructing a unique requirement baseline closed loop to solve the industry pain point of distorted requirement transmission. This invention uses an interactive, homogeneous prototype as the sole requirement carrier, replacing the traditional vague text requirements and static prototypes. It supports multi-party visualized and operational review iterations. The prototype, after iteration and solidification, serves as a requirement baseline that cannot be arbitrarily changed and runs through the entire development process. Compared with the existing requirement management model without a baseline and fragmented structure, this invention technically eliminates problems such as misunderstandings among multiple parties, requirement tampering during implementation, and missing functions, achieving zero distortion in requirement transmission and traceable development implementation.

[0016] (2) A pioneering four-level AI division of labor and collaboration architecture enables intelligent closed-loop empowerment throughout the entire process. Unlike existing single-point, isolated AI-assisted development technologies, this invention designs a four-level layered AI architecture: first, AI prototype generation; second, AI engineering isomorphic evolution; third, AI code generation; and fourth, AI full-dimensional review. Each module performs its own function, with interconnected links and logical linkages, forming a complete closed loop of "requirements analysis - prototype iteration - engineering refactoring - code generation - intelligent review." This is not a simple functional superposition of existing technologies, but a completely new systematic technical architecture that breaks through the fragmented and phased empowerment limitations of traditional AI-assisted development.

[0017] (3) This invention features a unique four-dimensional integrated automated review system, achieving precise and controllable delivery quality. Addressing the shortcomings of existing technologies, which rely solely on simple text comparison, lack of review dimensions, and dependence on manual verification, this invention employs a unique four-dimensional intelligent review mechanism that comprehensively covers UI structure, interaction coverage, page status, and routing rules. This mechanism accurately identifies various discrepancies between the prototype and the final code. It completely replaces the inefficient manual review model, solving problems such as missed reviews, incorrect reviews, and inconsistent standards in manual review. This significantly improves review efficiency and verification accuracy, ensuring a high degree of consistency between the software delivery and the original requirement prototype. It possesses strong engineering practicality and technological advancement. Attached Figure Description Figure 1 This is a flowchart illustrating an AI-assisted development method for a homologous interactive prototype according to the present invention. Detailed Implementation

[0018] To make the objectives, technical solutions, and advantages of this invention clearer, preferred embodiments will be listed below with reference to the accompanying drawings to provide a clear and complete description of the invention. However, it should be noted that the examples in the specification are preferred examples, not all examples. Furthermore, many details listed in the specification are merely to provide the reader with a deep understanding of the key issues of this invention; the invention can be implemented even without these specific details.

[0019] like Figure 1As shown, this invention provides an AI-assisted development method for homogeneous interactive prototypes. This embodiment uses the Vue3 + Ant Design Vue component library front-end and back-end separation enterprise-level development framework as the target development framework for illustrative purposes. However, the scope of protection of this invention is not limited to this specific development framework and can be adapted to various mainstream front-end development frameworks and component libraries such as React and Element UI. The AI-assisted application of this invention to software development method includes five core steps: requirement analysis and prototype generation, requirement review and baseline locking, prototype isomorphic evolution, code generation and integration, and automatic quality review. Each step is progressive and iterative, forming a complete intelligent development closed loop. In this embodiment of the invention, the AI-assisted software development method includes the following steps: Step S1, Requirements Analysis and Prototype Generation: Obtain the user's input natural language requirement description, and intelligently extract the page list, interface components, interaction logic, and business rules from the natural language requirement description using a preset first AI model, automatically generating a single-file interactive prototype; the single-file interactive prototype is built using a component library that is exactly the same as the front-end component library of the target development framework, with built-in simulated business data and simulated route switching logic, and can be directly run, displayed, and interacted with independently in a browser. A single file refers to a complete front-end interactive carrier consisting of only a single index.html file, with multiple business pages integrated into this file through conditional rendering. The interactive prototype is a web-accessible HTML page prototype, which relevant personnel can access and operate through a browser; The natural language requirement description includes, but is not limited to, page display description, interaction operation description, and abnormal scenario state description. The page display description, abnormal scenario state description, and interaction operation description are analyzed from all dimensions. Then, a preset first AI model is used to perform full-dimensional analysis and intelligent extraction of the content of the natural language requirement description to obtain a page list, interface components, interaction logic, and business rules. Based on the extracted content, a complete interactive prototype is automatically constructed, including normal business processes, empty data states, page loading states, and operation result feedback states, covering both regular business scenarios and exception fallback scenarios. The target development framework is a front-end and back-end separation development framework based on the Vue framework and the Ant Design Vue component library. The single-file interactive prototype is an independent hypertext markup language file, globally imported into the Vue framework and the Ant Design Vue component library via a content distribution network. It utilizes the Vue framework's conditional rendering syntax to achieve multi-page switching and page state simulation. With front-end and back-end separation, the interactive prototype only contains the front-end, while the final generated code includes a full-stack project encompassing both the front-end and back-end.

[0020] In this embodiment of the invention, the user inputs natural language business requirements through the system dialogue interface. The specific requirement given in the embodiment is "develop a user management page", which displays the user list in a table, supports fuzzy search by name, pops up a user editing pop-up when clicking on a table row, displays an empty status prompt when there is no user data, displays a loading animation during the page loading process, and pops up corresponding feedback prompts after the operation is successful / failed. The first AI model is a dedicated multimodal large-scale model for understanding software development requirements and generating visual prototypes. The first AI model includes a natural language understanding encoding module, a business scenario parsing module, a front-end component matching and reasoning module, a code structuring generation module, and an exception state completion module. The natural language understanding encoding module is responsible for segmenting, extracting semantics, recognizing intent, and structuring the business logic of user natural language requirements. The business scenario parsing module distinguishes between regular business processes, empty data scenarios, loading scenarios, operation feedback scenarios, and exception error scenarios. The front-end component matching and reasoning module accurately maps business functions to standard UI components based on the semantic features of an enterprise-level front-end component library. The code structuring generation module outputs standardized and executable front-end code snippets. The exception state completion module automatically completes the necessary fallback interaction and status display logic for engineering development. After the first AI model completes the structured analysis of requirements, it automatically integrates the Vue3 framework and Ant Design Vue component library using a CDN global import method. The entire process requires no local project dependency installation or npm package configuration; the framework mounting and global component registration can be completed directly in a single-file HTML environment. The specific import content and steps include the following: Step S11, CDN global import principle: Using a public and stable Internet content distribution network resource address, the core runtime of the Vue3 framework, the reactive system, the virtual DOM rendering engine and the component lifecycle mechanism are globally loaded in the HTML head through the script tag. This enables the Vue3 framework to be globally mounted to the window global object, so that the entire single-file page has the complete running capabilities of Vue component rendering, conditional rendering, two-way binding and event-driven operation. Step S12, the specific structural models introduced by the Vue3 framework include: global reactive data model (ref / reactive), virtual DOM rendering model, component lifecycle scheduling model, event listening and dispatching model, conditional rendering directives (v-if / v-show), list rendering directives (v-for), and two-way data binding model, providing underlying framework support for page interaction, state switching, and data rendering; Step S13, the Ant Design Vue component library CDN globally imports the following content: globally registers enterprise-level general business components, specifically including table component (a-table), search input component (a-input-search), pop-up component (a-modal), empty state component (a-empty), loading state component (a-loading), message feedback component (a-message), button interaction component (a-button), and other frequently used business components. At the same time, it globally loads the component default styles, theme specifications, interactive animations, and state style system.

[0021] Step S14: The page state switching is implemented through the built-in conditional rendering syntax of the Vue framework. The embedded page state statically simulates user data, and simulates interactive logic such as search filtering, row click pop-up, and local data modification. It can be opened and run directly in the browser, fully restoring the normal business process and various abnormal fallback scenarios. Step S2, Requirements Review and Baseline Locking: Grant users online access to the single-file interactive prototype, allowing multiple parties to conduct requirements reviews and experience tests. Receive user feedback on modifications and optimizations in real time and iteratively update the content of the single-file interactive prototype until its interface display, interaction logic, and business rules fully meet the requirements. The final confirmed single-file interactive prototype is then determined as the interaction prototype requirements baseline; serving as the sole standard for subsequent engineering development and quality verification, completely avoiding problems such as confusion caused by requirement changes and misunderstandings. Step S3, Prototype Isomorphic Evolution Step: The single-file interactive prototype of the baseline interactive prototype requirements is restructured using a preset second AI model to generate a multi-file front-end project that is completely isomorphic to the front-end project of the target development framework; the multi-file front-end project and the front-end of the target development framework adopt the same build tools, directory structure, routing management rules and component-based development specifications, and fully retain all the interactive logic, UI structure, page style and status display rules of the prototype. The second AI model specifically includes a prototype code semantic parsing submodule, an engineering specification adaptation submodule, a component intelligent decomposition and classification submodule, a routing system reconstruction submodule, and a project structured output submodule. The prototype code semantic parsing submodule is used to deeply analyze the overall code structure, component nesting topology, Vue directive logic, interactive event binding, conditional rendering state, and simulated routing rules of a single-file prototype, completely restoring the prototype's business logic and UI rendering logic. The engineering specification adaptation submodule incorporates mainstream enterprise front-end engineering specification templates to automatically match Vite+Vue3 project directory specifications, component naming specifications, route writing specifications, and modular development principles. The component intelligent decomposition and classification submodule distinguishes between business-specific page components and globally reusable public components, enabling automatic splitting of views and general components. The routing system reconstruction submodule deconstructs the prototype's simplified simulated route, generating a standardized routing table, route paths, and page mapping relationships conforming to the vue-router specification. The project structured output submodule automatically generates a complete project skeleton, directory files, and configuration files, ensuring that the output project is completely isomorphic to the enterprise's official development project. The second AI model specifically performs the structured reconstruction process as follows: Step S31: The second AI model reads the single-file interactive prototype of the interactive prototype requirements baseline and deeply analyzes the page structure, component nesting level, interactive trigger event binding, page state logic, conditional rendering logic and simulated routing rules inside the single-file interactive prototype. Step S32: Subsequently, the Vue initialization command automatically initializes a standardized front-end project skeleton based on Vite+Vue3, including project directory structure, build configuration, and compilation rules, which are completely consistent with the enterprise's formal development project. Step S33: The second AI model decouples and splits the page fragments of the single-file interactive prototype, extracts the independent user management page as a whole into a view component, and stores it in the src / views business directory of the project; and extracts reusable search components, pop-up components and other common interface components into common components and stores them in the src / components common directory. Step S34: Build a standardized routing table based on vue-router, replace the simple simulated routing logic built into the single-file interactive prototype, and migrate all embedded static simulated data to the independent data module src / mock to achieve decoupling between view and data; the reconstructed multi-file front-end project can be compiled and run independently, fully retaining all UI structure styles, component properties, interaction logic and page states of the prototype, achieving the evolution effect of "prototype structure and project structure are from the same source and interaction logic is completely consistent"; Step S4, Code Generation Step: Using a pre-defined third AI model as the development benchmark for the reconstructed multi-file front-end project, on the one hand, back-end service code matching business logic requirements is generated; on the other hand, the front-end project is modified, replacing the static simulation data within the project with data call logic that connects to the back-end interface, improving data interaction and exception handling, and finally outputting complete front-end and back-end delivery code that can be deployed online. The full-stack source code that can be deployed online and finally generated by the third AI model completely retains all UI component instances, component hierarchical nesting relationships, interactive response logic, and page state rules of the multi-file front-end project, only changing the data acquisition method, replacing the original static simulation data acquisition logic with back-end API interface dynamic call logic based on axios; the modified front-end code completely retains all original UI component instances, component hierarchy, interactive response logic, and page state rules, only changing the data acquisition link, replacing the static simulation data reading logic with back-end API dynamic call logic.

[0022] In this embodiment of the invention, developers use a homogeneously evolved multi-file front-end project as a unified development benchmark for code implementation: the back-end exemplarily adopts the Spring Boot framework, developing supporting business interfaces such as add, query, edit, and delete based on the prototype business logic; the front-end transformation relies on axios to encapsulate the back-end API interface's dynamic calling capability, replacing the original static simulated data definition logic, while supplementing supporting interactive processing logic such as interface loading status, exception handling, and error prompts. The entire transformation process does not make any changes to the page interface or interactive behavior, only completing the integration of real business data; finally, the supporting back-end service code and standardized front-end delivery code are output synchronously, forming a complete front-end and back-end full-stack code asset that can be directly deployed online.

[0023] Step S5, Automatic Review Step: The pre-defined fourth AI model is invoked to perform multi-dimensional consistency comparison and full-interaction scenario verification between the interactive prototype requirement baseline and the complete, deployable front-end and back-end code. Verification covers page component hierarchy, routing structure, business fields, and interface business logic, automatically identifying inconsistencies between the prototype and code and outputting a standardized difference review report, achieving automated verification of software development quality. This step relies on a dedicated fourth AI model to complete the entire automated quality inspection process. This model is specifically designed for verifying the consistency between the prototype baseline and the delivered code, unlike general code text comparison tools. It possesses capabilities for structured engineering analysis, multi-level comparison, interactive logic restoration, routing status verification, and hierarchical problem output, adapting to the same-source development closed-loop quality inspection requirements of this invention. This fourth AI model abandons traditional shallow text comparison, adopting a deep verification mechanism of "structural analysis + logic restoration + scenario reproduction," which can identify problems where the text is identical but there are hidden defects in interaction, status, and routing, making up for the shortcomings of existing tools in comprehensive verification. Based on the prototype project and the front-end delivered code, the fourth AI model completes comprehensive verification from four dimensions: UI structure comparison: Analyze the component trees of both sides, check the component types, nesting relationships, and attribute configurations layer by layer, and mark missing, redundant, and parameter mismatch issues; Analyze the prototype project and the front-end delivered code, reconstruct the component tree, interaction events, page states, and route mappings, output standardized structured comparison data, and then verify the component nesting, type, attributes, and style bindings layer by layer on the standardized structured comparison data to complete the structural and detailed component consistency check; Interaction Coverage Check: Extract all interaction points and response logic from the prototype, verify that the code completely replicates the interaction behavior and page feedback to avoid missing functions; restore the entire user operation chain, and check whether the triggering logic and page feedback of interactions such as clicks, inputs, filtering, pop-ups, and submissions are consistent with the prototype (baseline definition). Status handling check: Compare the prototype with various conditional rendering fallback states to confirm that the code fully implements the display logic such as loading, empty data, success / failure prompts, etc.; verify the fallback rendering logic such as loading, empty data, and exception prompts, and synchronously compare the routing rules, page jumps, and parameter passing configurations. Route consistency check: A two-way comparison between the prototype routing table and the code routing definition, marking anomalies such as missing pages, incorrect paths, and missing parameters. Upon completion of the verification, a structured difference review report is automatically generated, categorizing and classifying issues such as missing functionality, logical deviations, and redundant code, marking code locations, and outputting a structured review report that accurately identifies various defects. Developers can then focus on targeted fixes, significantly reducing manual verification costs and improving quality inspection efficiency and accuracy.

[0024] According to another aspect of the present invention, the present invention provides an AI-assisted development system for a homologous interactive prototype, used to implement an AI-assisted development method for a homologous interactive prototype according to the present invention. The AI-assisted software development system includes: a prototype generation module, a prototype evolution module, a code generation assistance module, and an automatic review module. The prototype generation module, the prototype evolution module, and the automatic review module are all uniformly deployed on an AI service platform, and they interact with each other through standardized API interfaces, integrated development environments, and project management tools to achieve data interaction and functional linkage. The prototype generation module is used to receive users' natural language input requirements, analyze the requirements based on the preset first AI model, and generate a single-file interactive prototype that is completely identical to the front-end component library of the target development framework and can run independently. The prototype evolution module is used to structurally reconstruct a single-file interactive prototype that has completed the requirement baseline locking into a multi-file front-end project that is isomorphic to the front-end engineering specifications of the target development framework through a preset second AI model. The code generation assistance module uses a multi-file front-end project as the sole benchmark. Through a preset third AI model, it generates backend service code that matches the business logic requirements. On the other hand, it modifies the target front-end project, replacing the static simulated data within the project with data call logic that connects to the backend interface, improving data interaction and exception handling, and finally outputting complete front-end and back-end full-stack source code that can be deployed online. The preset third AI model guides developers to complete the development of backend service code and the data connection between the simulated data of the front-end project and the real backend interface, generating the final front-end delivery code. The automatic review module takes full-stack source code and requirement baseline as input, uses a preset fourth AI model to perform automated consistency verification, identifies deviations between the code and the baseline in terms of structure, interaction, state, and routing, and finally outputs a standardized difference review report. It completes the full-dimensional automated comparison and verification of multi-file front-end projects and the final front-end delivery code, identifies differences in structure, interaction, state, and routing, and outputs a standardized difference review report.

[0025] In this invention, the first, second, third, and fourth AI models are all task-specific AI models based on a general large model foundation, customized with exclusive business capabilities and dedicated sub-module architectures for different stages of the software development process. The four models have independent functions and do not reuse each other. The first AI model is a dedicated multimodal large model for understanding software development requirements and generating visual prototypes. It includes a natural language understanding encoding module, a business scenario analysis module, a front-end component matching and reasoning module, a code structuring generation module, and an exception state completion module. The natural language understanding encoding module is responsible for segmenting, extracting semantics, recognizing intent, and structuring business requirements from the user's natural language needs. The business scenario analysis module distinguishes between regular business processes, empty data scenarios, loading scenarios, operation feedback scenarios, and exception error scenarios. The front-end component matching and reasoning module accurately maps business functions to standard UI components based on the semantic features of an enterprise-level front-end component library. The code structuring generation module outputs standardized and executable front-end code snippets. The exception state completion module automatically completes the necessary fallback interaction and status display logic for engineering development. The second AI model is a dedicated AI model for decoupling and structured refactoring of front-end code engineering. Specifically, the second AI model includes a prototype code semantic parsing submodule, an engineering specification adaptation submodule, a component intelligent decomposition and classification submodule, a routing system refactoring submodule, and an engineering structured output submodule. The prototype code semantic parsing submodule is used to deeply parse the overall code structure, component nesting topology, Vue directive logic, interactive event binding, conditional rendering state, and simulated routing rules of the single-file prototype, completely restoring the prototype's business logic and UI rendering logic; the project specification adaptation submodule has built-in mainstream enterprise front-end project specification templates, used to automatically match Vite+Vue3 project directory specifications, component naming specifications, route writing specifications, and modular development principles; the component intelligent decomposition and classification submodule is used to distinguish between business-unique page components and globally reusable public components, realizing the automatic decomposition of views and general components; the route system reconstruction submodule is used to deconstruct the prototype's simple simulated route, generating a standardized route table, route path, and page mapping relationship that conforms to the vue-router specification; the project structured output submodule is used to automatically generate a complete project skeleton, directory files, and configuration files, ensuring that the output project is completely isomorphic to the enterprise's formal development project; The third AI model is a dedicated large model for full-stack code generation and interface integration. Specifically, it includes a backend logic reasoning submodule, a data model mapping submodule, an interface contract generation submodule, a frontend data source replacement submodule, and an exception link completion submodule. The backend logic reasoning submodule derives backend service interfaces, data processing rules, and database table structures based on frontend business logic. The data model mapping submodule establishes field mapping relationships between frontend Vue3 component interaction data and backend persistent data. The interface contract generation submodule outputs standardized backend service code and interface documentation. The frontend data source replacement submodule replaces static simulated data in the frontend Vue3 project with asynchronous call logic that connects to real backend interfaces. The exception link completion submodule improves timeout handling, error capture, and degraded display logic during frontend-backend data interaction. The fourth AI model is a dedicated review model for verifying code and requirement consistency. Specifically, it includes a baseline semantic parsing submodule, a code structure scanning submodule, an interaction behavior comparison submodule, a state transition verification submodule, and a difference report generation submodule. The baseline semantic parsing submodule transforms the requirement baseline into machine-verifiable structured assertion rules. The code structure scanning submodule extracts Vue Router routing configurations, Vue3 component hierarchies, and API call relationships from the full-stack source code. The interaction behavior comparison submodule verifies whether page navigation, form submissions, and operation feedback in the code are consistent with the baseline definition. The state transition verification submodule detects whether the state change paths based on the Vue3 reactive system in the code fully cover the business scenarios required by the baseline. The difference report generation submodule summarizes the verification results from the above dimensions and outputs a standardized difference review report containing deviation location, severity level, and remediation suggestions. According to another aspect of the present invention, an AI-assisted development apparatus is provided, comprising a machine-readable storage medium, a processor, and a computer program stored on the machine-readable storage medium and executable on the processor, the processor being configured to implement, by executing the computer program, the steps of an AI-assisted development method for a homologous interactive prototype according to the present invention.

[0026] The present invention also provides a computer-readable program product, which includes processor-executable instructions stored in a machine-readable storage medium. The processor reads the processor-executable instructions from the machine-readable storage medium, causing the processor to execute steps to implement an AI-assisted development method for a homologous interactive prototype of the present invention.

[0027] In this invention, the machine-readable storage medium may include random access memory (RAM) or non-volatile memory (Non-volatile memory). Volatile Memory (NVM) or Flash memory, such as at least one disk storage device. In this invention, the processor can be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), a Graphics Processing Unit (GPU), etc.; the processor can also be a Digital Signal Processor (DSP), an Application-Specific Integrated Circuit (ASIC), or a Field-Programmable Gate Array (FPGA). Programmable Gate Array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc.

[0028] The above description is only a preferred embodiment of the present invention. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. An AI-assisted development method for a homologous interactive prototype, characterized in that: The AI-assisted software development method includes the following steps: Requirements Analysis and Prototype Generation: The system uses a pre-defined first AI model to obtain the user's input natural language requirement description. It then intelligently extracts the page list, interface components, interaction logic, and business rules from the natural language requirement description and automatically generates a single-file interactive prototype. The single-file interactive prototype is built using a component library that is exactly the same as the front-end component library of the target development framework. It has built-in simulated business data and simulated route switching logic. The single-file interactive prototype can be run, displayed, and interacted with independently in a browser. Requirements review and baseline locking: Grant users online access to the single-file interactive prototype, allowing multiple parties to conduct requirements review and experience testing. Receive user modification and optimization instructions in real time and iteratively update the content of the single-file interactive prototype until the interface display, interaction logic, and business rules of the single-file interactive prototype fully meet the requirements. Establish the final single-file interactive prototype as the requirements baseline. Prototype isomorphic evolution: The single-file interactive prototype of the requirement baseline is restructured in a structured manner through a preset second AI model to generate a multi-file front-end project that is completely isomorphic to the front-end project of the target development framework. The multi-file front-end project and the target front-end project adopt the same build tools, directory structure, routing management rules and component-based development specifications, and fully retain all the interactive logic, UI structure, page style and status display rules of the prototype. Code generation: Based on the multi-file front-end project generated by refactoring, the pre-set third AI model is used to generate back-end service code that matches the business logic requirements. At the same time, the original static simulation data in the multi-file front-end project is replaced with real data calling logic that interfaces with the back-end service, optimizing data interaction and exception handling, and finally generating a full-stack source code that can be deployed online, including the front-end and back-end. Automated review: Using a pre-set fourth AI model, the single-file interactive prototype of the requirements baseline is compared with the full-stack source code that can be deployed online. The system performs full-dimensional structural comparison and interaction coverage verification, automatically identifies the differences between the two and generates a standardized difference review report, thus completing the automated verification of software development quality.

2. The AI-assisted development method for a homologous interactive prototype according to claim 1, characterized in that: The target development framework is a front-end and back-end separation development framework based on the Vue framework and the Ant Design Vue component library; the single-file interactive prototype is an independent hypertext markup language file, which is globally imported into the Vue framework and the Ant Design Vue component library through a content delivery network, and uses the framework's conditional rendering syntax to achieve multi-page switching and page state simulation.

3. The AI-assisted development method for a homologous interactive prototype according to claim 1, characterized in that, In the requirement analysis and prototype generation steps, the natural language requirement description includes conventional business requirements or business pain points. The first AI model performs full-dimensional analysis of the content of the natural language requirement description, intelligently generates a page list, interface components, interaction logic and business rules, and automatically constructs a complete interactive prototype that includes normal business processes, empty data states, page loading states, and operation result feedback states, covering conventional business scenarios and abnormal fallback scenarios.

4. The AI-assisted development method for a homologous interactive prototype according to claim 1, characterized in that, In the prototype isomorphic evolution step, the second AI model performs a structured reconstruction of the single-file interactive prototype of the requirements baseline, including the following steps: The second AI model reads the single-file interactive prototype of the requirement baseline, and analyzes the page structure, component nesting hierarchy, interactive trigger event binding, conditional rendering logic, page state logic and simulated routing rules inside the single-file interactive prototype. Automatically initialize a standardized engineering skeleton for multi-file front-end projects that conforms to the front-end engineering specifications of the target development framework; The page fragments within the single-file interactive prototype are split and decoupled. Independent business pages are extracted as view components and stored in the src / views business directory of the project. Reusable interface components are extracted as general common components and stored in the src / components general directory of the project. A standardized routing table is built based on vue-router. This standardized routing table replaces the built-in simulated route switching logic in the single-file interactive prototype. At the same time, all built-in simulated business data is uniformly migrated to an independent src / mock data module, thereby decoupling data from the view.

5. The AI-assisted development method for a homologous interactive prototype according to claim 1, characterized in that, In the code generation step, the full-stack source code that the third AI model finally generates and can be deployed online completely retains all UI component instances, component hierarchical nesting relationships, interactive response logic and page state rules of the multi-file front-end project. Only the data acquisition method is replaced, and the original static simulated data acquisition logic is replaced with dynamic call logic of backend API interface based on axios.

6. The AI-assisted development method for a homologous interactive prototype according to claim 1, characterized in that, The fourth AI model performs a full-dimensional structural comparison and interaction coverage verification between the single-file interactive prototype of the requirements baseline and the full-stack source code that can be deployed online, including the following steps: UI structure comparison: Extract the component tree structure of the single-file and multi-file interaction prototype and the final full-stack source code respectively, and compare the component types, component attributes, component nesting hierarchy, components with missing precise annotations, redundancies or inconsistent parameters one by one. Interaction coverage check: Analyze all interaction trigger points and corresponding interface response logic from the single-file interaction prototype, and verify whether the corresponding interaction trigger operation method and interaction feedback effect are completely replicated in the final full-stack source code. State handling check: Identify the page states corresponding to all conditions rendered in the single-file interactive prototype, and check whether the final full-stack source code is complete and retains empty data prompts, loading indicators, operation error feedback and pop-up prompts as fallback state components; Route consistency check: Bidirectionally compare the standardized routing table of the single-file interactive prototype with the routing definition rules of the final full-stack source code, accurately mark missing pages, route path inconsistencies, and abnormal issues that occur in the route parameter missing.

7. An AI-assisted development system for a homologous interactive prototype, characterized in that, The AI-assisted development method for implementing the same-source interactive prototype as described in any one of claims 1-6, the AI-assisted software development system includes: a prototype generation module, a prototype evolution module, a code generation assistance module and an automatic review module, wherein the prototype generation module, the prototype evolution module and the automatic review module are uniformly deployed on the AI ​​service platform, and achieve data interaction and functional linkage between them through standardized API interfaces and integrated development environment and project management tools. The prototype generation module is used to receive users' natural language requirement input, parse the content of the natural language requirement description based on the preset first AI model, and generate a single-file interactive prototype that is completely identical to the front-end component library of the target development framework and can run independently. The prototype evolution module is used to structurally reconstruct a single-file interactive prototype that has completed the requirement baseline locking into a multi-file front-end project that is isomorphic to the front-end engineering specifications of the target development framework through a preset second AI model. The code generation assistance module is used to generate backend service code that matches business logic requirements based on a multi-file frontend project as the sole benchmark. It also uses a preset third AI model to modify the target frontend project, replacing the static simulation data in the project with the data calling logic that connects to the backend interface, improving data interaction and exception handling, and finally outputting a full-stack source code that can be deployed online. The automatic review module takes full-stack source code and requirements baseline as input, uses a preset fourth AI model to perform automated consistency checks, identifies deviations from the baseline in code structure, interaction, state and routing, and finally outputs a standardized difference review report.

8. The AI-assisted development system for a homologous interactive prototype according to claim 7, characterized in that, The first AI model is a dedicated multimodal large model for understanding software development requirements and generating visual prototypes. The first AI model includes a natural language understanding encoding module, a business scenario parsing module, a front-end component matching and reasoning module, a code structuring generation module, and an abnormal state completion module. The natural language understanding and encoding module is responsible for word segmentation, semantic extraction, intent recognition, and business structure parsing of user natural language requirements; the business scenario parsing module is used to distinguish between regular business processes, empty data scenarios, loading scenarios, operation feedback, and abnormal error scenarios; the front-end component matching and reasoning module completes the accurate mapping between business functions and standard UI components based on the semantic features of the enterprise-level front-end component library; the code structure generation module is responsible for outputting standardized and executable front-end code snippets; and the abnormal state completion module automatically completes the necessary fallback interaction and status display logic for engineering development. The second AI model is a dedicated AI model for decoupling and structured refactoring of front-end code engineering. Specifically, the second AI model includes a prototype code semantic parsing submodule, an engineering specification adaptation submodule, a component intelligent decomposition and classification submodule, a routing system refactoring submodule, and an engineering structured output submodule. The prototype code semantic parsing submodule is used to deeply analyze the overall code structure of a single-file prototype, the nested topology of components, Vue directive logic, interactive event binding, conditional rendering states, and simulated routing rules, fully restoring the prototype's business logic and UI rendering logic. The engineering specification adaptation submodule incorporates mainstream enterprise front-end engineering specification templates, used to automatically match Vite+Vue3 project directory specifications, component naming specifications, routing writing specifications, and modular development principles. The component intelligent decomposition and classification submodule is used to distinguish between business-specific page components and globally reusable public components, realizing the automatic decomposition of views and general components; the routing system reconstruction submodule is used to deconstruct the prototype simple simulated route and generate a standardized routing table, route path and page mapping relationship that conforms to the vue-router specification. The project structured output submodule is used to automatically generate a complete project skeleton, directory files and configuration files, ensuring that the output project is completely isomorphic to the enterprise's formal development project; The third AI model is a dedicated large model for full-stack code generation and interface integration. Specifically, it includes a backend logic reasoning submodule, a data model mapping submodule, an interface contract generation submodule, a frontend data source replacement submodule, and an exception link completion submodule. The backend logic reasoning submodule derives backend service interfaces, data processing rules, and database table structures based on frontend business logic. The data model mapping submodule establishes field mapping relationships between frontend Vue3 component interaction data and backend persistent data. The interface contract generation submodule outputs standardized backend service code and interface documentation. The frontend data source replacement submodule replaces static simulated data in the frontend Vue3 project with asynchronous call logic that connects to real backend interfaces. The exception link completion submodule improves timeout handling, error capture, and degraded display logic during frontend-backend data interaction. The fourth AI model is a dedicated review model for verifying the consistency between code and requirements. Specifically, it includes a baseline semantic parsing submodule, a code structure scanning submodule, an interaction behavior comparison submodule, a state transition verification submodule, and a difference report generation submodule. The baseline semantic parsing submodule is responsible for converting the requirement baseline into machine-verifiable structured assertion rules. The code structure scanning submodule extracts Vue Router routing configurations, Vue3 component hierarchies, and API call relationships from the full-stack source code. The interaction behavior comparison submodule verifies whether page navigation, form submissions, and operation feedback in the code are consistent with the baseline definition. The state transition verification submodule is used to detect whether the state change path based on the Vue3 reactive system in the code fully covers the business scenarios required by the baseline; the difference report generation submodule is responsible for summarizing the verification results of the above dimensions and outputting a standardized difference review report containing deviation location, severity level and remediation suggestions.

9. An AI-assisted development device, comprising a machine-readable storage medium, a processor, and a computer program stored on the machine-readable storage medium and executable on the processor, characterized in that, The processor is configured to implement the steps of the AI-assisted development method for a homologous interactive prototype as described in any one of claims 1-6 when executing the computer program.

10. A computer-readable program product, characterized in that, The computer-readable program product includes processor-executable instructions stored in a machine-readable storage medium, wherein the processor reads the processor-executable instructions from the machine-readable storage medium, causing the processor to perform the steps of implementing the AI-assisted development method for a homologous interactive prototype as described in any one of claims 1-6.

Images