Design method of prototype page, electronic equipment and storage medium

Abstract

The invention relates to the technical field of artificial intelligence, and discloses a prototype page design method, electronic equipment and a storage medium. The method comprises the steps that a target design theme is obtained, the design theme is associated with different knowledge bases, and the knowledge bases at least comprise project source codes and prototype page design strategies; creating a target project file containing a knowledge base associated with the target design theme; sending the design requirement to an AI Agent, so that the AI Agent calls a corresponding artificial intelligence model according to the design requirement by utilizing a knowledge base in the target project file, generates a plurality of to-be-executed sub-tasks and executes each sub-task to modify a project source code in the target project file; and after the subtasks are executed, constructing a script according to a project source code in the target project file so as to display a target prototype page generated on the basis of the target HTML code on a user interaction interface. A high-interaction and high-fidelity prototype page is automatically generated by utilizing artificial intelligence.

Description

Technical Field

[0001] This application relates to the field of artificial intelligence technology, and in particular to a method for designing a prototype page, an electronic device, and a storage medium. Background Technology

[0002] Prototyping is the process of building a product model that simulates the appearance, functionality, and interaction of the final product version. With the development of Artificial Intelligence (AI) technology, solutions have emerged that utilize AI models to automatically design and generate prototype pages through Artificial Intelligence Generated Content (AIGC). This lowers the barrier to entry for prototyping and meets the needs of ordinary users (such as requirements analysts) who do not have the necessary prototyping tools.

[0003] However, existing prototype pages generated using artificial intelligence models have poor interactivity and low fidelity. Summary of the Invention

[0004] This application provides a method for designing prototype pages, an electronic device, and a storage medium that automatically generates highly interactive and high-fidelity prototype pages by utilizing artificial intelligence.

[0005] The first aspect of this application provides a method for designing a prototype page, comprising: obtaining a target design theme selected by a user from preset design themes in a user interaction interface, wherein each preset design theme is associated with a different knowledge base, and each knowledge base includes at least project source code and a prototype page design strategy; creating a target project file containing the knowledge base associated with the target design theme; obtaining design requirements input by the user in the user interaction interface; sending the design requirements to an AI Agent, wherein the AI ​​Agent, based on the design requirements, utilizes the knowledge base in the target project file to call a corresponding artificial intelligence model, generates several sub-tasks to be executed, and executes each sub-task to modify the project source code in the target project file; after all sub-tasks have been executed, constructing a script based on the project source code in the target project file to generate target HTML code, and displaying a target prototype page generated based on the target HTML code in the user interaction interface.

[0006] A second aspect of this application also provides an electronic device, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the design method of the prototype page provided in this application.

[0007] A third aspect of this application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the design method for the prototype page provided in this application.

[0008] The technical solution provided in this application has at least the following advantages: Before invoking the AI ​​model, a target project file containing a knowledge base associated with the target design theme is created. This knowledge base includes the project source code and prototype page design strategies. Therefore, the AI ​​model can modify the project source code directly to complete the prototype page design based on the design requirements. After obtaining the user's design requirements, the AI ​​Agent uses the knowledge base to invoke the corresponding AI model, generating and executing several sub-tasks. By breaking down the user's complex design requirements into several refined individual requirements and repeatedly interacting with the AI ​​model to modify the project source code, it is possible to support more complex, refined, and diverse modifications to the project source code within the AI ​​model's context window. This allows for the design of highly interactive and high-fidelity prototype pages through repeated modifications to the project source code. Attached Figure Description

[0009] One or more embodiments are illustrated by way of example with reference numerals in the accompanying drawings. These illustrations do not constitute a limitation on the embodiments. Elements with the same reference numerals in the drawings are denoted as similar elements. Unless otherwise stated, the figures in the drawings are not to be limited by scale.

[0010] Figure 1 This is a flowchart of a prototype page design method provided in one embodiment of this application; Figure 2 This is a partial interactive flowchart of a prototype page design method provided in another embodiment of this application; Figure 3 This is another flowchart of a prototype page design method provided in another embodiment of this application; Figure 4 This is a schematic diagram of a partial display of content on a user interaction page involved in the design method of the prototype page provided in another embodiment of this application; Figure 5 This is a schematic diagram of another partial display content on a user interaction page involved in the design method of the prototype page provided in another embodiment of this application; Figure 6 This is a schematic diagram of a user interaction page involved in the design method of the prototype page provided in another embodiment of this application; Figure 7 This is a schematic diagram of the structure of an electronic device provided in another embodiment of this application. Detailed Implementation

[0011] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the various embodiments of this application will be described in detail below with reference to the accompanying drawings. However, those skilled in the art will understand that many technical details have been presented in the various embodiments of this application to enable readers to better understand this application. However, the technical solutions claimed in this application can be implemented even without these technical details and various changes and modifications based on the following embodiments.

[0012] The division of the following embodiments is for ease of description and should not constitute any limitation on the specific implementation of this application. The various embodiments can be combined with and referenced by each other without contradiction.

[0013] When using AI models to generate prototype pages, the user typically interacts directly with an AI model such as a Large Language Model (LLM). The AI ​​model then responds to the user's natural language input, directly generating and outputting Hyper Text Markup Language (HTML) content. Finally, the user uses the HTML content output by the AI ​​model to create an HTML page, which is the prototype design page. In this process, both the content generated and output by the AI ​​model contains code.

[0014] However, AI models have a context window limitation, meaning there's an upper limit to the number of input and output tokens (also known as the smallest text unit or smallest semantic unit). Within this context window, the AI ​​model's output is restricted, limited to producing only simple, functional prototype pages. This results in poor interactivity and a significant gap between the prototype page and the intended product, meaning low fidelity. Even if the AI ​​model can modify the HTML content, it cannot make substantial changes, such as adding highly interactive or high-fidelity features. Otherwise, it will output content outside the context window limit, causing errors or truncated output from the AI ​​model, failing to obtain the expected HTML content.

[0015] Based on this, this application provides a prototype page design method. By constructing a knowledge base containing project source code and prototype page design strategies, and before calling the artificial intelligence model, a target project file containing the knowledge base associated with the target design theme is created. This allows the artificial intelligence model to modify the project source code directly according to design requirements, utilizing the prototype page design strategy. After obtaining the user's design requirements, the AIAgent uses the knowledge base to call the corresponding artificial intelligence model, generating several sub-tasks to be executed and performing each sub-task. By breaking down the user's complex design requirements into several refined individual requirements, and repeatedly interacting with the artificial intelligence model to modify the project source code, it is possible to support more complex, refined, and diverse modifications to the project source code within the context window limitations of the artificial intelligence model. Thus, through multiple and repeated modifications to the project source code, a highly interactive and high-fidelity prototype page design is achieved. The following will describe the prototype page design method provided by this application with reference to different embodiments.

[0016] In some embodiments, the prototype page design method is applied to electronic devices such as servers. The process of this method is as follows: Figure 1 As shown, it includes at least the following steps: Step 101: Obtain the target design theme selected by the user from the preset design themes in the user interaction interface. Each preset design theme is associated with a different knowledge base, and each knowledge base includes at least the project source code and the prototype page design strategy.

[0017] Step 102: Create a target project file containing a knowledge base associated with the target design theme.

[0018] Step 103: Obtain the design requirements input by the user in the user interaction interface.

[0019] Step 104: Send the design requirements to the AI ​​Agent. The AI ​​Agent will then use the knowledge base in the target project file to call the corresponding artificial intelligence model, generate several sub-tasks to be executed, and execute each sub-task to modify the project source code in the target project file.

[0020] Step 105: After all subtasks have been completed, build a script based on the project source code in the target project file to generate target HTML code, and display the target prototype page generated based on the target HTML code on the user interface.

[0021] Therefore, before invoking the AI ​​model, a target project file containing a knowledge base associated with the target design theme is created. This knowledge base includes the project source code and prototype page design strategies. Thus, the AI ​​model can modify the project source code directly to complete the prototype page design based on the design requirements. After obtaining the user's design requirements, the AI ​​Agent uses the knowledge base to invoke the corresponding AI model, generating and executing several sub-tasks. By breaking down the user's complex design requirements into several refined individual requirements and repeatedly interacting with the AI ​​model to modify the project source code, it is possible to support more complex, refined, and diverse modifications to the project source code within the AI ​​model's context window. This allows for the design of highly interactive and high-fidelity prototype pages through repeated modifications to the project source code.

[0022] The following will be about Figure 1 The steps shown will be explained.

[0023] In step 101, taking the server as the execution entity as an example, the server includes a front-end and a back-end. The user interface is the interface provided to the user by the front-end, which can be a page of a mobile application (APP) or a webpage of a browser. On the user interface, the display components corresponding to the preset design theme can be directly presented to the user, or presented to the user through drop-down boxes or other means. The user can select one of the display components through clicks or other operations on the user interface. The front-end determines the design theme selected by the user as the target design theme based on the selected display component and notifies the back-end. The back-end then executes subsequent steps based on the obtained target design theme.

[0024] In this application, the project source code and prototype page design strategies in the knowledge base are all pre-defined.

[0025] The project source code can be written in any programming language (such as Python, JavaScript, Ruby, PHP, or Swift). In some examples, the project source code is written using the React framework provided by Node.js and uses TypeScript as the programming language, which allows for faster and more efficient modification of the project source code and script construction using artificial intelligence models.

[0026] The prototype page design strategy is one or more pre-set strategies related to subsequent modifications to the project's source code. In some embodiments, the prototype page design strategy may include one or a combination of the following strategies: prototype basic component reference examples, prototype permission policies, prototype policies, and prototype page design styles. The prototype design includes several key components: Basic component reference examples, which are graphical and / or code representations of components used in the prototype page (e.g., forms, tables, buttons, pop-ups, charts); Prototype design permission policies, which describe permissions related to modifying the project source code (e.g., allowing only modification of page directories and menu configurations to prevent damage to the code framework during subsequent modifications, thus ensuring the security and usability of the project source code); Prototype design strategies, which describe methods for modifying the project source code, including one or a combination of the following: strategies for flexible layout on the prototype page, strategies for routing navigation, strategies for using various Model Context Protocols (MCPs), and strategies for calling third-party (other than the prototype page's users and developers) front-end components; and the design style of the prototype page, which describes the details of components and controls, including their colors, shapes, and specifications. These are just examples; the specific strategies included in the prototype page design strategy will not be listed here.

[0027] In step 102, the knowledge base associated with the target design theme is included in the created target project file. This ensures that each created target project file maintains its own project source code and prototype page design strategy. Thus, whenever the AIAgent (artificial intelligence agent) modifies the project source code in the target project file based on design requirements, it operates within a single target project file. This avoids interference between different target project files, provides physical isolation for different target project files, ensures the security of target project files, and helps maintain design consistency.

[0028] In some embodiments, to facilitate the AI ​​Agent's differentiation of different target project files, a unique identifier can be provided for each target project file. This unique identifier can be provided by the user; for example, the project name entered by the user in the user interface can be used as the unique identifier for the corresponding target project file. This ensures that the unique identifier of the target project file conforms to the user's naming habits, is easy to remember, and facilitates the user's subsequent retrieval and modification of the corresponding target project file. Alternatively, the unique identifier can be automatically generated by the server executing the prototype page design method when creating the target project file, thereby reducing user input, alleviating the user's input burden, and improving the user experience.

[0029] In step 103, the design requirements can be any content format that can represent user expectations, such as natural language, documents, images, etc., and this application does not limit them.

[0030] When design requirements include natural language, design requirements may include: a first natural language, or a second natural language, wherein the first natural language is a requirement description for an ungenerated prototype page entered in a new dialog, and the second natural language is a requirement description for modifying a completed prototype page entered in a history dialog or a reset dialog.

[0031] In other words, when creating a new conversation, users can describe their design requirements in natural language. When modifying a completed prototype page, users can also describe their modification requirements in natural language in historical conversations or by resetting the conversation.

[0032] It should be noted that in this application, a new dialogue refers to a dialogue initiated during the initial prototype page design based on the created target project file; a historical dialogue refers to a dialogue that continues input using dialogues already used in the prototype page design of the target project file; and a reset dialogue refers to a dialogue that is re-initiated without using dialogues already used in the prototype page design of the target project file. In a historical dialogue, dialogues already used in the prototype page design of the target project file can be used as context, while in a reset dialogue, dialogues already used in the prototype page design of the target project file cannot be used as context. However, regardless of whether it is a historical dialogue or a reset dialogue, it modifies the project source code at the time the corresponding dialogue is initiated in the target project file, not the project source code at the time the target project file is created.

[0033] In some embodiments, design requirements may include auxiliary data. Auxiliary data may include one or a combination of the following: images, documents, and / or files uploaded via input controls in the user interface; project source code associated with reference controls in the user interface; and historical input associated with reuse controls in the user interface. Of course, the above is merely an example of auxiliary data; other types of data may also exist, which will not be listed here.

[0034] In some embodiments, the design requirements also include presentation requirements, which describe how the designed prototype page is displayed on the user interaction page.

[0035] Of course, the above are just examples of design requirements. In some embodiments, design requirements can also be any other content related to the generation and display of prototype pages, which will not be listed here.

[0036] In step 104, the generation and execution of subtasks are both achieved by invoking the artificial intelligence model. When the AI ​​Agent receives the design requirements, it first invokes the artificial intelligence model to execute the requirement decomposition task, thereby breaking down the design requirements into several subtasks. Each subtask is a to-do item, and all subtasks can form a to-do list. Each time a subtask is executed, the to-do items and the design requirements as a whole are used as context to invoke the artificial intelligence model to execute the corresponding task. The completion of a subtask may require invoking the MCP tool. When a subtask requires invoking the MCP tool, the artificial intelligence model can determine the MCP tool to be invoked and its invocation method, returning it as a control command to the server (the execution body of the prototype page's design method), so that the server executes the corresponding operation according to the received control command.

[0037] To facilitate understanding of the implementation of step 104, the following will combine... Figure 2 The design method of the prototype page shown is illustrated by explaining the interaction flow between the implementing entity (indicated by "server" in the diagram), the AI ​​Agent, and the target project files.

[0038] Step S1: The server sends the design requirements and available MCP tools to the AI ​​Agent.

[0039] In step S2, the AI ​​Agent calls the artificial intelligence model to break down the design requirements into several sub-tasks to be executed.

[0040] In step S3, the AI ​​Agent executes subtasks sequentially, and when the current subtask requires calling the MCP tool, it returns the required MCP tool and the calling method to the server.

[0041] In step S4, the server calls the corresponding MCP tool according to the received call method to access the project source code in the target project file in order to modify the project source code.

[0042] Step S5: The server receives the tool call result.

[0043] In other words, for the AI ​​Agent, it first receives and parses the command for prototype page design (i.e., step S1); then it performs the inference stage of prototype page design, analyzes the task and decides whether to use the MCP tool (i.e., step S2); finally, when the MCP tool needs to be used, the AI ​​Agent calls the MCP tool through the server (i.e., steps S3 to S5).

[0044] certainly, Figure 2 For illustrative purposes only, in some embodiments, after the AI ​​Agent invokes the MCP tool for prototype page design, iterative reasoning can be performed to detect the effect of task execution, etc., which will not be listed here.

[0045] In some embodiments, sending design requirements to the AI ​​Agent can be achieved by sending the design requirements and the project identifier of the target project file to the AI ​​Agent, so that the AI ​​Agent can, based on the design requirements, use the knowledge base in the target project file indicated by the received project identifier to call the corresponding artificial intelligence model, generate and execute each sub-task, and modify the project source code in the target project file indicated by the received project identifier.

[0046] In other words, if the target project file has an identifier, the identifier is sent to AIAgent along with the design requirements, enabling the AI ​​Agent to efficiently and quickly identify the target based on the identifier.

[0047] Of course, the above use of identifiers is just an example. For instance, if there is only one target project file, the identifier may not need to be sent. Or, the storage path of the target project file may be sent directly to the AI ​​Agent along with the design requirements. These will not be listed here.

[0048] As described above, the prototype page design method provided in this application allows for repeated access to and modification of the project source code in the target project file by calling the MCP tool during the execution of subtasks using an artificial intelligence model. This enables repeated modification of the project source code within the context window of the artificial intelligence model, thereby adding additional structures and / or functions to the prototype page. For example, adding data query and display functions, or adding page jump functions between different prototype pages. By adding these complex and interactive components and / or functions, the interactivity and fidelity of the prototype page are improved.

[0049] It should be noted that, in this application, modifications to the project source code in the target project file include any operation that would cause changes to the project source code. For example, it could be creating a new code file in the project source code and writing the corresponding code content, or adding, deleting, or replacing the corresponding code content in the existing code file of the project source code, etc., which will not be listed here.

[0050] In step 105, after all subtasks have been completed, the project source code in the target project file becomes the code for the completed prototype page, which can be output to the user. Furthermore, considering that ordinary users may not have the ability to directly read and understand code, a script is built to directly display the target prototype page to the user, rather than showing the code. This allows users to directly test and evaluate whether further modifications to the prototype page are needed, thus improving the user experience.

[0051] In some embodiments, considering that users may need to design a single prototype page or multiple related prototype pages, design requirements may include display requirements, which may include multi-page display requirements or single-page display requirements. Correspondingly, generating target HTML code from the project source code in the target project file can be achieved as follows: If the display requirement is multi-page, a multi-page script is built from the project source code in the target project file to generate the HTML code of all prototype pages corresponding to the project source code as the target HTML code; wherein, the multi-page display requirement is triggered by the export component of the user interface. If the display requirement is single-page, a single-page script is built from the project source code in the target project file to generate the HTML code of a single prototype page as the target HTML code. Displaying the target prototype page generated based on the target HTML code in the user interface is achieved as follows: If the display requirement is single-page, the target prototype page generated based on the target HTML code is displayed as a single page in the preview area of ​​the user interface.

[0052] In other words, it provides users with the ability to display a single prototype page as well as multiple prototype pages to meet their diverse needs.

[0053] In some embodiments, considering that the prototype page that the user needs to design may be mobile, web-based, or both, the user interface may also provide modal controls to determine the type of prototype page that the user currently wants to display.

[0054] In other words, in some embodiments, the design method of the prototype page may also include the following steps: receiving a mode request initiated by the user in the user interaction interface, constructing a script based on the mode request and the corresponding project source code, and generating HTML code that is adapted to the prototype page display area corresponding to the terminal type indicated by the mode request; wherein, the terminal type includes a web terminal or a mobile terminal.

[0055] In some embodiments, considering that there may be navigation between user prototype pages, unexpected navigation may easily occur in some use cases, such as when displaying the layout design of prototype pages. Therefore, the prototype page design method can also support the generation of image data for the displayed prototype pages.

[0056] In other words, in some embodiments, the prototype page design method may further include the following steps: receiving a screenshot request initiated by the user on the user interface, generating PNG data corresponding to the prototype page currently displayed on the user interface based on the screenshot request, and returning the PNG data to the user. Of course, PNG data is only one example of image data, and it can be replaced with other image data, which will not be listed here.

[0057] In some embodiments, the design method for a prototype page may further include the following steps: receiving a source code access request initiated by a user through a user interface; and displaying the project source code in the corresponding project file on the user interface according to the source code access request, so that the user can view, modify, and / or download the displayed project source code. Thus, users with code reading and comprehension abilities can further improve the prototype page by viewing, modifying, and / or downloading the displayed project source code, combined with their human design and development capabilities.

[0058] In some embodiments, the prototype page design method may further include the following steps: receiving a rollback request initiated by a user through a user interface; and, based on the rollback request, displaying the task execution record of the AIAgent associated with the corresponding project file on the user interface. This allows users to analyze the prototype page design process by viewing the task execution record, and to provide targeted modification suggestions to initiate modifications to the completed prototype page design.

[0059] In some embodiments, the design process of a prototype page can be as follows: Figure 3 As shown, it includes the following steps: Step 301: Obtain the target design theme selected by the user from the preset design themes in the user interaction interface. Each preset design theme is associated with a different knowledge base, and each knowledge base includes at least the project source code and the prototype page design strategy.

[0060] Step 302: Create a target project file containing a knowledge base associated with the target design theme.

[0061] Step 303: Obtain the design requirements input by the user in the user interaction interface.

[0062] Step 304: Establish a communication connection with the AI ​​Agent based on the SSE protocol.

[0063] Step 305: The design requirements are sent to the AI ​​Agent via a communication connection. The AI ​​Agent then uses the knowledge base in the target project file to call the corresponding artificial intelligence model based on the design requirements, generates several sub-tasks to be executed, and executes each sub-task to modify the project source code in the target project file.

[0064] Step 306: Receive streaming text data returned by the AI ​​Agent in response to design requirements via a communication connection.

[0065] Step 307: After receiving the streaming text data, display real-time task progress information on the user interface based on the streaming text data. The real-time task progress information includes one or a combination of the following: the content of the currently executing task, the content of the next task to be executed, whether the design of the prototype page has been completed, information indicating the thought process of the artificial intelligence model, and information on the MCP tools that need to be used.

[0066] Step 308: After determining that all subtasks have been completed based on the streaming text data, disconnect the communication connection.

[0067] Step 309: Build a script based on the project source code in the target project file to generate target HTML code, and display the target prototype page generated based on the target HTML code on the user interface.

[0068] Therefore, in Figure 1Building upon the illustrated embodiment, the AI ​​Agent further utilizes the streaming text data returned during the design requirement response process to display real-time task progress information to the user. This allows users to track the design progress, understand the current task, and thus enhance the user experience. Furthermore, a new communication connection is established for each design requirement response and closed upon completion, providing a dedicated communication connection for each requirement and avoiding data transmission errors, further improving the user experience. When the real-time task progress information includes information indicating the AI ​​model's thought process and / or information on the required MCP tools, developers can also understand the design logic of the prototype page based on the real-time task progress information, facilitating real-time or subsequent modifications.

[0069] It is not hard to see that Figure 3 Steps 301-303, 305, and 309 in the illustrated embodiment are the same as... Figure 1 Steps 101 to 105 in the illustrated embodiment are largely the same, and will not be described in detail here. The following will mainly describe steps 304 and 306 to 308.

[0070] In step 304, a communication connection is established based on the SSE protocol, mainly to improve the transmission of subsequent streaming text data. In some embodiments, other connections can also be established, which will not be listed here.

[0071] In step 306, the streaming text data can be data related to any AI Agent in the process of responding to design requirements. For example, it can include the content of the currently executing task, the content of the next task to be executed, the predicted waiting time, etc.

[0072] In step 307, the real-time task progress information can be displayed in the dialog interface or in a new window created in the user interface to display the real-time task progress information.

[0073] In step 308, disconnecting the communication connection is merely an example and can be reused for communication purposes in other design requirements.

[0074] To facilitate understanding of the design method for the prototype page provided in this application, the following explanation will use the design process of a prototype page as an example.

[0075] Users access the server's front-end page (i.e., the user interface) via a web browser and click the "New Project" control. The user interface will then display something like this: Figure 4The displayed content prompts the user to create a project. At this point, the user needs to enter a project name (which will be used as the identifier for the target project file), a project description (which will be used to help the user understand the project content), and a project theme (which will be used as the target design theme). The project name and project theme are required fields.

[0076] Then, based on the target design theme selected by the front-end page, the server will create a corresponding target project file in the specified storage space. This target project file will contain the knowledge base associated with the target design theme and will be identified by the project name entered by the user.

[0077] Next, in order to design the prototype page, the user needs to input their first natural language in the dialog area of ​​the user interface. This allows the server to send the user's input as the user's requirements along with the identifier of the target project file to the AI ​​Agent. Based on the design requirements, the AI ​​Agent uses the knowledge base in the target project file indicated by the received project identifier to call the corresponding artificial intelligence model, generate and execute each sub-task, and modify the project source code in the target project file indicated by the received project identifier.

[0078] During the execution of the corresponding subtasks by the AI ​​Agent, the dialogue area of ​​the user interface will be used for tasks such as... Figure 5 The red box indicates the display of the task list and the content of the currently executing subtasks.

[0079] Finally, after confirming that all subtasks have been completed, the server will build a script based on the project source code in the target project file, generate the target HTML code, and display the target prototype page generated based on the target HTML code on the user interface. At this point, the content of the user interface will be as follows: Figure 6 The example displays the homepage of the prototype page while retaining the dialogue area. Users can then click on areas of the prototype page to navigate to other pages, or search for data in a database linked to the prototype page and view it in a table format, experiencing a realistic interactive flow.

[0080] And, as Figure 6As shown, the user interface also provides a toolbar area. This toolbar offers a "Mode" control to allow users to request a mode and select or switch the terminal type corresponding to the displayed prototype page; an "Export" control to allow users to input multi-page display requirements; a "Reload" control to allow users to input single-page display requirements, enabling the script to be rebuilt and the page displayed on the currently displayed prototype page; a "Source Code" control to allow users to send source code access requests; a "Rollback" control to allow users to send rollback requests; and a "Screenshot" control to allow users to send screenshot requests.

[0081] When a user needs to modify a prototype page that has already been designed, the user can access the server's front-end page again through the web interface and enter the corresponding second natural language in the dialog area. This second natural language describes the user's modification requirements for the prototype page that has already been designed. This second natural language will trigger a processing flow similar to that mentioned above based on the first natural language, so that the corresponding target prototype page will be displayed in the user interface. This will not be elaborated further here.

[0082] The input of the first and second natural languages ​​can be achieved through the input bar in the main area of ​​the dialogue area. In addition to the input bar, the main area may also include a dialogue display area to show the dialogue content, real-time task progress information, etc.

[0083] And, as Figure 6 As shown, in addition to the main area, the dialog area can also provide a toolbar area at the top. This toolbar area can provide "Configuration" controls for user configuration of server functions; it can also provide "Project Rules" controls for users to input design requirements such as font size, alignment, and layout dimensions, avoiding the repetition of the same content each time the design is executed; it can also provide a "History Dialogue" control for users to search for historical dialogues and display the content of the selected dialogue, allowing users to continue the dialogue by inputting a second natural language and modify the prototype page already designed for that dialogue; and it can also provide a "Reset Dialogue" control for users to create new dialogues.

[0084] In addition, such as Figure 6As shown, in addition to the main area, the dialog area can also provide a toolbar area below. The toolbar area can provide an "Attachment" control to support users to upload images, files, etc. as auxiliary data; it can also provide a "Reference" control to support users to directly reference existing source code as auxiliary data for more accurate task execution; it can also provide a "History Prompt" control to support users to reuse past input history; and it can also provide an "AI Repair" control to trigger AI to perform automatic repair operations when an error occurs.

[0085] Of course, the above are just examples. In some embodiments, other controls may be provided, which will not be listed here.

[0086] The steps of the various methods described above are only for clarity. In practice, they can be combined into one step or some steps can be split into multiple steps. As long as they include the same logical relationship, they are all within the scope of protection of this patent. Adding insignificant modifications or introducing insignificant designs to the algorithm or process, but without changing the core design of the algorithm and process, are also within the scope of protection of this patent.

[0087] This application also provides an electronic device, such as Figure 7 As shown, it includes: at least one processor 701; and a memory 702 communicatively connected to at least one processor 701; wherein the memory 702 stores instructions executable by at least one processor 701, which are executed by at least one processor 701 to enable at least one processor 701 to execute the design method of the prototype page described in any of the above method embodiments.

[0088] The memory 702 and processor 701 are connected via a bus, which can include any number of interconnecting buses and bridges. The bus connects various circuits of one or more processors 701 and memory 702 together. The bus can also connect various other circuits, such as peripheral devices, voltage regulators, and power management circuits, which are well known in the art and therefore will not be described further herein. A bus interface provides an interface between the bus and the transceiver. The transceiver can be a single element or multiple elements, such as multiple receivers and transmitters, providing a unit for communicating with various other devices over a transmission medium. Data processed by processor 701 is transmitted over a wireless medium via an antenna, which further receives data and transmits it to processor 701.

[0089] Processor 701 is responsible for managing the bus and general processing, and can also provide various functions, including timing, peripheral interfaces, voltage regulation, power management, and other control functions. Memory 702 can be used to store data used by processor 701 during operation.

[0090] This application also provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it implements the above-described method embodiments.

[0091] That is, those skilled in the art will understand that all or part of the steps in the methods of the above embodiments can be implemented by a program instructing related hardware. This program is stored in a storage medium and includes several instructions to cause a device (which may be a microcontroller, chip, etc.) or processor to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, a portable hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0092] Those skilled in the art will understand that the above embodiments are specific embodiments for implementing this application, and in practical applications, various changes can be made to them in form and detail without departing from the spirit and scope of this application.

Claims

1. A method for designing a prototype page, characterized in that, include: The target design theme selected by the user from the preset design themes in the user interaction interface is obtained. Each preset design theme is associated with a different knowledge base. Each knowledge base includes at least the project source code and the prototype page design strategy. Create a target project file containing the knowledge base associated with the target design theme; Obtain the design requirements input by the user in the user interface; The design requirements are sent to the AI ​​Agent, which, based on the design requirements, uses the knowledge base in the target project file to call the corresponding artificial intelligence model, generates several sub-tasks to be executed, and executes each sub-task to modify the project source code in the target project file. After all the subtasks have been completed, a script is built based on the project source code in the target project file to generate target HTML code, and a target prototype page generated based on the target HTML code is displayed on the user interface.

2. The method for designing a prototype page according to claim 1, characterized in that, The prototype page design strategy includes one or a combination of the following strategies: prototype design basic component reference examples, prototype design permission strategy, prototype design strategy, and prototype design page design style.

3. The method for designing a prototype page according to claim 1, characterized in that, The design requirements include: a first natural language, or a second natural language, wherein the first natural language is a requirement description for an ungenerated prototype page entered in a new dialog, and the second natural language is a requirement description for modifying a completed prototype page entered in a history dialog or a reset dialog.

4. The method for designing a prototype page according to claim 1, characterized in that, The design requirements include display requirements, which may include multi-page display requirements or single-page display requirements. The step of generating target HTML code based on the project source code in the target project file includes: When the display requirement is the multi-page display requirement, a multi-page script is constructed based on the project source code in the target project file to generate the HTML code of all prototype pages corresponding to the project source code as the target HTML code; wherein, the multi-page display requirement is triggered by the export component of the user interaction interface; When the display requirement is the single-page display requirement, a single-page script is constructed based on the project source code in the target project file to generate the HTML code of a single prototype page as the target HTML code; The step of displaying the target prototype page generated based on the target HTML code on the user interface includes: When the display requirement is the single-page display requirement, the target prototype page generated based on the target HTML code is displayed as a single page in the preview area of ​​the user interface.

5. The method for designing a prototype page according to claim 1, characterized in that, Sending the design requirements to the AI ​​Agent includes: The design requirements and the project identifier of the target project file are sent to the AI ​​Agent. The AI ​​Agent, based on the design requirements, uses the knowledge base in the target project file indicated by the received project identifier to call the corresponding artificial intelligence model, generate and execute each of the sub-tasks, so as to modify the project source code in the target project file indicated by the received project identifier.

6. The method for designing a prototype page according to claim 1, characterized in that, The design requirements also include auxiliary data; The auxiliary data includes one or a combination of the following: images, documents and / or files uploaded through the input controls of the user interface, the project source code associated with the reference controls of the user interface, and historical inputs associated with the reuse controls of the user interface.

7. The method for designing a prototype page according to any one of claims 1 to 6, characterized in that, The method further includes: Establish a communication connection with the AI ​​Agent based on the SSE protocol; Through the communication connection, the AI ​​Agent receives streaming text data returned in response to the design requirements. Upon receiving the streaming text data, real-time task progress information is displayed on the user interface based on the streaming text data. The real-time task progress information includes one or a combination of the following: the content of the currently executing task, the content of the next task to be executed, whether the design of the prototype page has been completed, information indicating the thought process of the artificial intelligence model, and information on the MCP tools that need to be used. After determining that each of the subtasks has been completed based on the streaming text data, the communication connection is disconnected.

8. The method for designing a prototype page according to any one of claims 1 to 6, characterized in that, The method further includes one or a combination of the following steps: The system receives a mode request initiated by a user on the user interaction interface, and constructs a script based on the mode request and the corresponding project source code to generate HTML code that is compatible with the prototype page display area corresponding to the terminal type indicated by the mode request; wherein, the terminal type includes web page or mobile terminal. Receive a source code access request initiated by a user on the user interaction interface, and display the project source code in the corresponding project file on the user interaction interface according to the source code access request, so that the user can view, modify and / or download the displayed project source code; Receive a rollback request initiated by the user on the user interaction interface, and display the task execution record of the AI ​​Agent associated with the corresponding project file on the user interaction interface according to the rollback request; The system receives a screenshot request from a user on the user interface, generates PNG data corresponding to the prototype page currently displayed on the user interface based on the screenshot request, and returns the PNG data to the user.

9. An electronic device, characterized in that, include: At least one processor; as well as, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the design method of the prototype page as described in any one of claims 1 to 8.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the design method for the prototype page as described in any one of claims 1 to 8.

Images