Intelligent page code generation method and system based on figma analysis and visual screenshot

Abstract

The application discloses a UI development technical field based on Figma analysis and visual screenshot intelligent page code generation method and system, including the following steps, step 1, system starts, receives the parameter input by the user;Step 2, the user inputs the unique identifier file_key of Figma design file and target node number node_id, and the optional output directory path output_dir, export scale scales and export format format;Step 3, initialize FigmaClient client instance, configure API authentication token X-Figma-Token, establish HTTP session, set the base URL as https: / / api.figma.com / v1;Design tree complete acquisition, zero information loss: through the strategy of combining BFS layer-by-layer traversal with on-demand depth expansion, the API depth limit is broken through, the Figma design tree of any depth and complexity can be completely acquired, and any key UI node is ensured not to be missed.

Description

Technical Field

[0001] This invention relates to an intelligent page code generation method and system based on Figma parsing and visual screenshots in the field of UI development technology. Background Technology

[0002] In the current UI development field, the conversion from design drafts to page code mainly relies on the following methods: 1. Manual Coding Method: Developers manually write Android XML layouts, Web HTML / CSS, or other front-end code based on the design drafts provided by the designer using Figma. This method relies on developers extracting attribute information such as size, color, and font from the design drafts one by one, and determining the layout structure (such as linear layout, grid layout, list control, etc.) by manual judgment. This method is time-consuming, labor-intensive, and prone to errors.

[0003] 2. Semi-automatic export method based on design tool plugins: Some tools (such as Figma's built-in developer mode, Zeplin, etc.) can export CSS fragments or attribute annotations of individual controls, but they can only provide scattered attribute information and cannot automatically identify the overall layout structure and semantic relationships of the page (such as which controls constitute a list, which are arranged in a grid, and which are slider controls). Developers still need to intervene a lot of time to organize the code structure.

[0004] 3. AI code generation based on screenshot recognition: Some solutions use visual recognition of UI screenshots to generate code, but relying solely on screenshots lacks structured data from the design draft (node ​​hierarchy, precise coordinates, component type labels, text content, etc.), resulting in low accuracy of generated code, inaccurate layout structure, and inability to correctly extract image resources such as icons / backgrounds. The main drawbacks of the above method include: (1) It cannot automatically perform a complete depth traversal and node expansion of the Figma design tree. When the depth of the design draft exceeds the API limit (such as Figma API default depth=4), key nodes such as deeply nested list items and component instances cannot be obtained, resulting in information loss. (2) Lacks intelligent semantic recognition capability for UI components, and cannot automatically determine whether the nodes in the design draft are complex control types such as list (RecyclerView), grid layout (GridLayout), alphabetical index bar (AlphabetIndexBar), slider (SeekBar) or divider (Divider); (3) The functional areas of the page (such as status bar, content area, bottom navigation bar, dial pad, etc.) cannot be automatically inferred. Developers need to manually judge and organize the layout hierarchy. (4) The export of image resources (icons, background images) is separated from the code generation process, and the correct resource name and path cannot be automatically associated when generating code; (5) The generated intermediate description information has a low degree of structure and is not suitable as direct input to AI large models to generate high-quality page code. Summary of the Invention

[0005] The purpose of this invention is to provide an intelligent page code generation method and system based on Figma parsing and visual screenshots, which eliminates the need for additional MCU and DSP, resulting in a simpler structure and lower cost.

[0006] To achieve the above objectives, this invention provides an intelligent page code generation method based on Figma parsing and visual screenshots, comprising the following steps: Step 1: The system starts up and receives parameters input by the user; Step 2: The user inputs the unique identifier of the Figma design file, file_key, and the target node number, node_id, as well as the optional output directory path, output_dir, export scaling scales, and export format; Step 3: Initialize the FigmaClient client instance, configure the API authentication token X-Figma-Token, establish an HTTP session, and set the base URL to https: / / api.figma.com / v1; Step 4: Call the design tree BFS traversal engine, take the target node node_id as the root node, and traverse the design tree layer by layer through the breadth-first search strategy. For each child node that needs to be expanded, make an API request to obtain its complete subtree. Step 5: After the BFS traversal is completed, perform a special subtree expansion operation, and perform multiple rounds of supplementary expansion for unexpanded nodes and specific named nodes in the list context; Step 6: Traverse the complete design tree and collect the attribute information of all UI controls, including node ID, name, type, depth, absolute coordinates, size, visibility, text content, text color, font size, and fill / stroke color. Step 7: Identify candidate nodes for exportable resources in the design tree; Step 8: Determine if it is in extract-only mode; if so, skip the image export step. Step S9: Request the image URL and download assets in batches; Step 10: Perform intelligent layout area inference. Based on the position coordinates and size of the top-level control with a depth of 1, automatically divide the page functional areas and automatically detect and classify various complex UI component types. Step 11: Perform advanced component type detection for each control node, including vertical list detection, grid layout detection, alphabetical index bar detection, and slider control detection; Step 12: Based on the control information, layout analysis results, and resource mapping, generate a structured AI prompt Markdown document containing 10 semantic chapters; Step 13: Save the space JSON and color XML, and export the list; Step 14: Feed the code to the AI ​​code generation engine; Step 15: Output the complete page code and associated resources; Step 16, End.

[0007] As a further improvement to the present invention, the specific content of step 4 is as follows. Step 4.1, Obtain the root node: First, a request is made through the Figma API's / v1 / files / {file_key} / nodes endpoint with the target node_id as the parameter and depth=4 to obtain the root node and its child nodes within 4 levels. The root node ID is then added to the visited set. Step 4.2, unfold layer by layer: Add the root node to the BFS queue and perform the following operations in a loop: Take a node from the head of the queue, traverse all its child nodes (children), and for each child node, first check if its node ID is already in the visited set to prevent duplicate processing, then check if its type belongs to the expandable type set {COMPONENT, INSTANCE, FRAME, GROUP, COMPONENT_SET, SECTION} and is missing the children attribute; if the conditions are met, call the API again with the child node's ID as the parameter to get its complete subtree, depth=4, and update the current node with the returned complete node data; Step 4.3, Deduplication and caching of requests: Before each API request, a cache key is generated based on the URL and parameters, and the global cache dictionary _CACHE is checked; if the cache is hit, the cached data is returned directly to avoid duplicate requests. Step 4.4, Rate Control and Fault Tolerance: Implement a multi-layered network fault tolerance mechanism with a minimum request interval of MIN_GAP=2.0 seconds; automatic adaptation of HTTP 429 rate limiting, i.e., reading the Retry-After header and random jitter; exponential backoff retries, including an initial 5 seconds, doubling, a maximum of 60 seconds, and a maximum of 5 retries; and fast failure for 4xx client errors.

[0008] As a further improvement to the present invention, the specific content of step 5 is as follows. After the BFS traversal is completed, the special subtree expansion operation `expand_special_subtrees` is performed: (1) List context node: Traverse the complete design tree again to identify nodes whose names contain _list or / list and all their descendant nodes; For the child nodes of these nodes, collect their IDs in batches if the type belongs to the expandable type set and lacks the children attribute, and then call the / v1 / files / {file_key} / nodes endpoint with MAX_BATCH=50 IDs per batch, using comma-separated multi-ID parameters, to obtain and update the complete subtree of multiple nodes at once; (2) Specific named nodes: Icon placeholder container nodes named "night / icon / seize" may contain unexpanded icon resource child nodes, which are also included in the batch expansion scope; (3) Multiple iterations: The expansion of special subtrees can be performed up to max_passes=4 times. After each expansion, the system will rescan to see if any new unexpanded nodes appear. The maximum number of expansions is max_expand=200 nodes.

[0009] As a further improvement to the present invention, the specific content of step 6 is as follows. Perform a depth-first traversal (DFS) on the complete design tree after BFS traversal, use the walk function of the stack structure to visit each node one by one, and extract the following attribute information to form a control record: node ID, name, type, depth, absolute coordinates and size, visibility, parent node ID, resource name hint, text content, text color, font size, fill / stroke color; Specifically, the size is extracted from absoluteBoundingBox; the resource name hint is converted to 'to_snake'; the text content is only of type TEXT; the text color is extracted from fills using SOLID fill color; the font size is extracted from style.fontSize; the color extraction process comprehensively considers the node opacity, fill layer opacity, and color alpha channel multiplication to calculate the final transparency; when alpha < 255, the color format is #AARRGGBB, and when alpha = 255, it is simplified to #RRGGBB; The resource name generation process using the `to_snake` function: replaces forward slashes, spaces, and hyphens in node names with underscores → Unicode NFKD normalization decomposes and removes non-ASCII characters → converts to lowercase → removes illegal characters → merges consecutive underscores → uses MD5 hashing as a fallback for empty names → adds the prefix "img_" to the first character of a number.

[0010] As a further improvement to the present invention, the specific filtering rules in step 7 are as follows. (1) Candidate filtering: Traverse the design tree to filter renderable non-TEXT nodes whose names conform to the suffixes of icon / button+px, _bg, / bg / , or _dot, with a maximum of 1200; (2) Resource name mapping: The to_snake function generates normalized names; The specific details of step 9 are as follows: Call the Figma Images API to request the URLs of rendered images from resource nodes in batches, and then save the images to the local machine using a multi-threaded concurrent downloader; The process includes: batch requesting URLs: each batch of 50 nodes calls the / v1 / images / {file_key} endpoint to obtain the URLs of the rendered images; concurrent downloading: ThreadPoolExecutor 2 threads concurrently download to the images / drawable-hdpi / directory; and generating an export manifest JSON file, including three sets of lookup indexes.

[0011] As a further improvement of the present invention, the region inference rule in step 10 includes the following: (1) StatusBar: h≤100 and ry≤10; (2) BottomBar: h≤130 and ry≥root_h-160; (3) LeftNav: w≤300 and rx≤10; (4) DialPad: The name contains "dial" or "button_group"; (5) ContactsPanel: The name contains "contact" / "call" / "title"; (6) General Zones: The zone name is the first 18 characters of the name; Where rx: relative to the horizontal coordinate, the horizontal offset of the top-left corner of the control relative to the left boundary of the page root node; ry: relative to the vertical coordinate, the vertical offset of the top-left corner of the control relative to the top boundary of the page root node; w: control width; h: control height.

[0012] As a further improvement to the present invention, the automatic detection and classification of various complex UI component types in step 10 specifically includes the following: (1) Explicit list detection: Names containing "_list" → RecyclerView + LinearLayoutManager, child nodes are list items, all are forced to expand for output; (2) Implicit vertical list detection: If the number of child nodes is ≥3, all of which are of type INSTANCE / COMPONENT / FRAME / GROUP, the x-coordinate dispersion is ≤8, the width dispersion is ≤12, and the y-coordinate has 3+ different values, it is determined to be a vertical list. (3) Grid layout detection: If the number of child nodes is ≥6, and the list is not vertical, with 2+ possible x-coordinates and 2+ possible y-coordinates, then GridLayout will have the number of columns equal to the number of different x-coordinates. (4) Alphabetical index bar detection: 20+ single-character text child nodes in a container → AlphabetIndexBar, WaveSideBar custom View; (5) Slider control detection: Names containing " / slider" → SeekBar, child components breakdown: *_dot → Thumb image, *_filling → progressTint color, *_bg → BackgroundTint color; (6) Dividing line detection: For View controls whose names contain "divider", extract the fill / stroke colors of descendant nodes; (7) Icon placeholder container detection: The name is "night / icon / seize" → icon_container or placeholder, where icon_container has child resources and placeholder has no resources; (8) Noise node filtering: Nodes of type {VECTOR, BOOLEAN_OPERATION, STAR, POLYGON, LINE} that have no resource associations are considered noise and are not output in the layout skeleton. (9) Dial keyboard semantic optimization: For "ABC" style TEXT nodes, verify the correctness of the letter labels according to the standard telephone keypad mapping table.

[0013] As a further improvement to the present invention, the structured Markdown document in step 12 specifically includes the following 10 sections. (1) Meta section: file identifier, node ID, screen size, and generation timestamp; (2) ScreenLayout section: Function area table; (3) LayoutSkeleton section: Indented tree layout skeleton, with semantic annotations; (4) RecyclerViewSemantics section: Semantic information of list controls; (5) SpecialRenderHints section: Special rendering node information; (6) SeekBarSemantics section: Slider control parameters; (7) AssetMapping section: Resource mapping table; (8) TextColors section: Text color table; (9) TextStyles section: Text style sheets; (10) GenerationRules section: 12 code generation rules.

[0014] As a further improvement to the present invention, the 12 code generation rules in step 12 specifically include the following: The root layout uses ConstraintLayout; _list nodes → RecyclerView; grid → GridLayoutManager(N); AlphabetIndexBar → custom View; icons → ImageView src=@drawable / {res_name}; icon placeholder containers prioritize using child resources; dividers generate Views without image slices; sliders generate SeekBars containing thumb / progress / track; colors provide both RGB and transparency; text colors reference @color resources; list item internal nodes are fully generated; coordinate unit is dp.

[0015] To achieve the above objectives, the present invention also provides an intelligent page code generation system based on Figma parsing and visual screenshots, including a Figma design file, the Figma design file being connected to a Figma API interface module, the Figma API interface module being connected to a design tree BFS traversal engine, the design tree BFS traversal engine being connected to a UI control extraction module and a resource export and download module, the UI control extraction module being connected to an intelligent layout analysis module and a structured AI prompt word generation module, the intelligent layout analysis module being connected to a structured AI prompt word generation module, the structured AI prompt word generation module being connected to an output assembly module, and the output assembly module being connected to a resource export and download module and an AI code generation engine. The Figma design files are stored on the Figma cloud server and contain complete UI design information; The Figma API interface module is responsible for communicating with the Figma REST API to implement authentication and authorization and data requests; The design tree BFS traversal engine uses a breadth-first search strategy to fully traverse the design tree and expands deeper nodes as needed; The UI control extraction module extracts the property information of all controls from the traversed complete design tree; The intelligent layout analysis module performs semantic recognition and region division of controls based on multi-dimensional features; The resource export and download module is responsible for identifying, requesting, and batch downloading image slice resources; The structured AI prompt generation module assembles control information and layout analysis results into a structured Markdown document; The output assembly module integrates all output files; The AI ​​code generation engine automatically generates page code based on the generated prompts. Compared with the prior art, the beneficial effects of the present invention are as follows: 1. Complete design tree acquisition with zero information loss: By combining BFS level-by-level traversal with on-demand depth expansion, the API depth limit is broken, and Figma design trees of any depth and complexity can be completely acquired, ensuring that no key UI nodes are missed.

[0016] 2. Intelligent semantic recognition, greatly reducing manual judgment: Based on multi-dimensional feature analysis, it realizes automatic recognition of more than 7 complex UI component types, freeing developers from the tedious task of component type judgment.

[0017] 3. Automated area division accelerates layout construction: Through intelligent inference algorithms based on position coordinates and size thresholds, the page is automatically divided into functional areas such as status bar, content area, bottom navigation bar, and side navigation, and corresponding layout type suggestions are provided.

[0018] 4. Integrated resources and code, eliminating manual mapping: The identification, naming standardization, batch export and download, and code reference mapping of image resources are completed simultaneously in a unified processing flow.

[0019] 5. High-quality AI prompts significantly improve code generation accuracy: The generated structured Markdown prompts include 10 semantic chapters and 12 clear code generation rules. More rules can be added later based on the actual situation of the project, enabling the AI ​​model to accurately understand the page structure.

[0020] 6. Robust network fault tolerance mechanism, adapted to production environment: built-in mechanisms such as exponential backoff retries, automatic rate limiting adaptation, request caching deduplication, and concurrent download control. Attached Figure Description

[0021] Figure 1 This is a flowchart of the present invention.

[0022] Figure 2 This is a schematic diagram illustrating the tree BFS traversal and node expansion for this invention.

[0023] Figure 3 This is a schematic diagram illustrating the intelligent inference of page functional areas according to the present invention.

[0024] Figure 4 This is a schematic diagram illustrating the intelligent identification and classification of UI components in this invention.

[0025] Figure 5 This is a schematic diagram of the structured AI prompt word document structure of the present invention.

[0026] Figure 6 This is a system diagram of the present invention. Detailed Implementation

[0027] The present invention will be further described below with reference to the accompanying drawings: like Figure 1-5 The intelligent page code generation method based on Figma parsing and visual screenshots, as shown, includes the following steps: Step 1: The system starts up and receives parameters input by the user.

[0028] Step 2: The user inputs the unique identifier of the Figma design file, file_key, and the target node number, node_id, as well as the optional output directory path, output_dir, export scaling scales, and export format.

[0029] Step 3: Initialize the FigmaClient client instance, configure the API authentication token X-Figma-Token, establish an HTTP session, and set the base URL to https: / / api.figma.com / v1.

[0030] Step 4: Call the design tree BFS traversal engine, take the target node node_id as the root node, and traverse the design tree layer by layer using the breadth-first search strategy. For each child node that needs to be expanded, make an API request to obtain its complete subtree.

[0031] Step 4.1, Obtain the root node: First, a request is made through the Figma API's / v1 / files / {file_key} / nodes endpoint with the target node_id as the parameter and depth=4 to obtain the root node and its child nodes within 4 levels. The root node ID is then added to the visited set. Step 4.2, unfold layer by layer: Add the root node to the BFS queue and perform the following operations in a loop: Take a node from the head of the queue, traverse all its child nodes (children), and for each child node, first check if its node ID is already in the visited set to prevent duplicate processing, then check if its type belongs to the expandable type set {COMPONENT, INSTANCE, FRAME, GROUP, COMPONENT_SET, SECTION} and is missing the children attribute; if the conditions are met, call the API again with the child node's ID as the parameter to get its complete subtree, depth=4, and update the current node with the returned complete node data; Step 4.3, Deduplication and caching of requests: Before each API request, a cache key is generated based on the URL and parameters, and the global cache dictionary _CACHE is checked; if the cache is hit, the cached data is returned directly to avoid duplicate requests. Step 4.4, Rate Control and Fault Tolerance: Implement a multi-layered network fault tolerance mechanism with a minimum request interval of MIN_GAP=2.0 seconds; automatic adaptation of HTTP 429 rate limiting, i.e., reading the Retry-After header + random jitter; exponential backoff retries, including an initial 5 seconds, doubling, a maximum of 60 seconds, and a maximum of 5 retries; and fast failure for 4xx client errors.

[0032] Step 5: After the BFS traversal is completed, perform a special subtree expansion operation, and perform multiple rounds of supplementary expansion for unexpanded nodes and specific named nodes in the list context.

[0033] After the BFS traversal is completed, the special subtree expansion operation `expand_special_subtrees` is performed: (1) List context node: Traverse the complete design tree again to identify nodes whose names contain _list or / list and all their descendant nodes; For the child nodes of these nodes, collect their IDs in batches if the type belongs to the expandable type set and lacks the children attribute, and then call the / v1 / files / {file_key} / nodes endpoint with MAX_BATCH=50 IDs per batch, using comma-separated multi-ID parameters, to obtain and update the complete subtree of multiple nodes at once; (2) Specific named nodes: Icon placeholder container nodes named "night / icon / seize" may contain unexpanded icon resource child nodes, which are also included in the batch expansion scope; (3) Multiple iterations: The expansion of special subtrees can be performed up to max_passes=4 times. After each expansion, the system will rescan to see if any new unexpanded nodes appear. The maximum number of expansions is max_expand=200 nodes.

[0034] Step 6: Traverse the complete design tree and collect the attribute information of all UI controls, including node ID, name, type, depth, absolute coordinates, size, visibility, text content, text color, font size, and fill / stroke color.

[0035] Perform a depth-first traversal (DFS) on the complete design tree after BFS traversal, use the walk function of the stack structure to visit each node one by one, and extract the following attribute information to form a control record: node ID, name, type, depth, absolute coordinates and size, visibility, parent node ID, resource name hint, text content, text color, font size, fill / stroke color; Specifically, the size is extracted from absoluteBoundingBox; the resource name hint is converted to 'to_snake'; the text content is only of type TEXT; the text color is extracted from fills using SOLID fill color; the font size is extracted from style.fontSize; the color extraction process comprehensively considers the node opacity, fill layer opacity, and color alpha channel multiplication to calculate the final transparency; when alpha < 255, the color format is #AARRGGBB, and when alpha = 255, it is simplified to #RRGGBB; The resource name generation process using the `to_snake` function: replaces forward slashes, spaces, and hyphens in node names with underscores → Unicode NFKD normalization decomposes and removes non-ASCII characters → converts to lowercase → removes illegal characters → merges consecutive underscores → uses MD5 hashing as a fallback for empty names → adds the prefix "img_" to the first character of a number.

[0036] Step 7: Identify candidate nodes for exportable resources in the design tree.

[0037] The specific filtering rules are as follows: (1) Candidate filtering: Traverse the design tree to filter renderable non-TEXT nodes whose names conform to the suffixes of icon / button+px, suffix of _bg, path of / bg / or identifier of _dot, with a maximum of 1200 nodes; (2) Resource name mapping: The to_snake function generates normalized names.

[0038] Step 8: Determine if it is in extract-only mode; if so, skip the image export step. Step S9: Request the image URL and download the assets in batches.

[0039] Call the Figma Images API to request the URLs of rendered images from resource nodes in batches, and then save the images to the local machine using a multi-threaded concurrent downloader; The process includes: batch requesting URLs: each batch of 50 nodes calls the / v1 / images / {file_key} endpoint to obtain the URLs of the rendered images; concurrent downloading: ThreadPoolExecutor 2 threads concurrently download to the images / drawable-hdpi / directory; and generating an export manifest JSON file, including three sets of lookup indexes.

[0040] Step 10: Perform intelligent layout area inference. Based on the position coordinates and size of the top-level control with a depth of 1, automatically divide the page functional areas and automatically detect and classify various complex UI component types. The region inference rules include the following: (1) StatusBar: h≤100 and ry≤10; LinearLayout horizontal is recommended; (2) BottomBar: h≤130 and ry≥root_h-160; LinearLayout horizontal is recommended; (3) LeftNav: w≤300 and rx≤10; it is recommended to use LinearLayout vertical; (4) DialPad: Name containing "dial" or "button_group"; ConstraintLayout is recommended; (5) ContactsPanel: Names containing "contact" / "call" / "title"; ConstraintLayout is recommended; (6) General area: Use the first 18 characters of the name as the area name; ConstraintLayout is recommended.

[0041] Where rx: relative to the horizontal coordinate, the horizontal offset of the top left corner of the control relative to the left boundary of the page root node; ry: relative to the vertical coordinate, the vertical offset of the top left corner of the control relative to the top boundary of the page root node; w: control width; h: control height.

[0042] Automatically detecting and classifying various complex UI component types specifically includes the following: (1) Explicit list detection: Names containing "_list" → RecyclerView + LinearLayoutManager, child nodes are list items, all are forced to expand for output; (2) Implicit vertical list detection: If the number of child nodes is ≥3, all of which are of type INSTANCE / COMPONENT / FRAME / GROUP, the x-coordinate dispersion is ≤8, the width dispersion is ≤12, and the y-coordinate has 3+ different values, it is determined to be a vertical list. (3) Grid layout detection: If the number of child nodes is ≥6, and the list is not vertical, with 2+ possible x-coordinates and 2+ possible y-coordinates, then GridLayout will have the number of columns equal to the number of different x-coordinates. (4) Alphabetical index bar detection: 20+ single-character text child nodes in a container → AlphabetIndexBar, WaveSideBar custom View; (5) Slider control detection: Names containing " / slider" → SeekBar, child components breakdown: *_dot → Thumb image, *_filling → progressTint color, *_bg → BackgroundTint color; (6) Dividing line detection: For View controls whose names contain "divider", extract the fill / stroke colors of descendant nodes; (7) Icon placeholder container detection: The name is "night / icon / seize" → icon_container or placeholder, where icon_container has child resources and placeholder has no resources; (8) Noise node filtering: Nodes of type {VECTOR, BOOLEAN_OPERATION, STAR, POLYGON, LINE} that have no resource associations are considered noise and are not output in the layout skeleton. (9) Dial keyboard semantic optimization: For "ABC" style TEXT nodes, verify the correctness of the letter labels according to the standard telephone keypad mapping table.

[0043] Step 11: Perform advanced component type detection for each control node, including vertical list detection, grid layout detection, alphabetical index bar detection, and slider control detection.

[0044] Step 12: Based on the control information, layout analysis results, and resource mapping, generate a structured AI prompt Markdown document containing 10 semantic chapters.

[0045] A structured Markdown document specifically comprises the following 10 sections. (1) Meta section: file identifier, node ID, screen size, and generation timestamp; (2) ScreenLayout section: Function area table; (3) LayoutSkeleton section: Indented tree layout skeleton, with semantic annotations; (4) RecyclerViewSemantics section: Semantic information of list controls; (5) SpecialRenderHints section: Special rendering node information; (6) SeekBarSemantics section: Slider control parameters; (7) AssetMapping section: Resource mapping table; (8) TextColors section: Text color table; (9) TextStyles section: Text style sheets; (10) GenerationRules section: 12 code generation rules.

[0046] The 12 code generation rules specifically include the following: The root layout uses ConstraintLayout; _list nodes → RecyclerView; grid → GridLayoutManager(N); AlphabetIndexBar → custom View; icons → ImageView src=@drawable / {res_name}; icon placeholder containers prioritize using child resources; dividers generate Views without image slices; sliders generate SeekBars containing thumb / progress / track; colors provide both RGB and transparency; text colors reference @color resources; list item internal nodes are fully generated; coordinate unit is dp.

[0047] Step 13: Save the space JSON and color XML and export the list.

[0048] Step 14: Feed the code to the AI ​​code generation engine.

[0049] Step 15: Output the complete page code and associated resources.

[0050] Step 16, End.

[0051] like Figure 6The intelligent page code generation system based on Figma parsing and visual screenshots shown includes a Figma design file, which is connected to the Figma API interface module. The Figma API interface module is connected to the design tree BFS traversal engine. The design tree BFS traversal engine is connected to the UI control extraction module and the resource export and download module. The UI control extraction module is connected to the intelligent layout analysis module and the structured AI prompt generation module. The intelligent layout analysis module is connected to the structured AI prompt generation module. The structured AI prompt generation module is connected to the output assembly module. The output assembly module is connected to the resource export and download module and the AI ​​code generation engine.

[0052] The Figma design files are stored on the Figma cloud server and contain complete UI design information; The Figma API interface module is responsible for communicating with the Figma REST API to implement authentication and authorization and data requests; the design tree BFS traversal engine uses a breadth-first search strategy to fully traverse the design tree and expands deeper nodes as needed; The UI control extraction module extracts the property information of all controls from the traversed complete design tree; The intelligent layout analysis module performs semantic recognition and region division of controls based on multi-dimensional features; The resource export and download module is responsible for identifying, requesting, and batch downloading image slice resources; The structured AI prompt generation module assembles control information and layout analysis results into a structured Markdown document; The output assembly module integrates all output files; The AI ​​code generation engine automatically generates page code based on the generated prompts.

[0053] In this invention, such as Figure 4 As shown, the intelligent layout analysis module automatically infers the division of functional areas on the page based on the position and size characteristics of the top-level control with a depth of 1.

[0054] The specific rules are as follows: (1) Status Bar Area: When the height h≤100 and the vertical offset ry relative to the root node≤10, it is determined to be the status bar area. The recommended layout type is LinearLayout horizontal.

[0055] (2) Bottom navigation bar area: When the height h≤130 and the vertical offset ry relative to the root node is ≥root_h-160 (i.e., within 160dp of the bottom of the screen), it is determined to be the bottom navigation bar area. The recommended layout type is LinearLayout horizontal.

[0056] (3) Left navigation area: When the width of the control w≤300 and the horizontal offset rx relative to the root node≤10, it is determined to be the left navigation area. It is recommended that the layout type be LinearLayout vertical.

[0057] (4) DialPad area: When the control name contains the keywords "dial" or "button_group", it is determined to be a dial pad area. It is recommended that the layout type be ConstraintLayout.

[0058] (5) ContactsPanel: When the control name contains the keywords "contact", "call" or "title", it is determined to be a contact or call panel area. It is recommended to use ConstraintLayout for the layout.

[0059] (6) General area: For controls that do not meet the above conditions, use the first 18 characters of their name as the area name, and it is recommended that the layout type be ConstraintLayout.

[0060] The inference results for each region include: region name, relative coordinates (rx, ry), size (w, h), layout type suggestion, and associated control ID.

[0061] like Figure 5 As shown, the intelligent layout analysis module can automatically detect and classify various complex UI component types.

[0062] (1) Explicit List Detection: When a node's name contains the string "_list", the system determines that the node is an explicit list container, corresponding to Android's RecyclerView + LinearLayoutManager. The system iterates through the node's direct child nodes, selecting child nodes of type INSTANCE, COMPONENT, FRAME, or GROUP as list items, and counts the number of list items. In the generated layout skeleton, this node is marked as...<!-- RecyclerView / List xNitems --> The comment forces all its child nodes to be expanded in the output to preserve the complete list item structure.

[0063] (2) Implicit Vertical List Detection: When a node is not explicitly named as a list, but its child nodes meet the following spatial distribution characteristics, the system automatically determines it to be a vertical list: the number of child nodes is ≥3; all are of INSTANCE / COMPONENT / FRAME / GROUP type; x-coordinate dispersion ≤8, width dispersion ≤12dp, and y-coordinate has more than 3 different values ​​(_detect_vertical_list function). Alternatively, when all child node names are exactly the same, x-coordinate dispersion ≤20dp, and y-coordinates differ, it is also determined to be a vertical list.

[0064] (3) Grid layout detection: When the number of non-noise child nodes of a node is ≥6 and they do not form a vertical list, the system performs grid layout detection (_detect_grid function): All child nodes' x and y coordinates are deduplicated and sorted; if the number of different x coordinates is ≥2 and the number of different y coordinates is ≥2, it is determined to be a grid layout, with the number of columns being the number of different x coordinates; if all child nodes are of type INSTANCE or COMPONENT and have the same name, then 3-column, 4-column, and 2-column divisibility schemes are tried according to priority. Nodes with detected grid layouts are marked in the layout skeleton as...<!-- GridLayout spanCount=N xMitems --> .

[0065] (4) Alphabet Index Bar Detection: When a container node has more than 20 child nodes of type TEXT with text content consisting of only a single character (_is_alphabet_container function), the system determines that the container is an Alphabet Index Bar, which corresponds to the custom side letter index control in Android (such as WaveSideBar), and merges all letter child nodes into a single AlphabetIndexBar label.

[0066] (5) Slider control detection: When a node name contains / slider, ends with _slider, or ends with / slider, the system determines it to be a slider control (SeekBar / Slider). The system further traverses the descendant nodes of this node and identifies the following sub-components: Slider thumb (Thumb): descendant nodes whose names contain _dot, and extracts the name of its associated image resource as thumb_res; Progress bar (Progress): descendant nodes whose names contain _filling or _fill, and extracts its fill / stroke color as progressTint color; Track (Track): descendant nodes whose names contain _bg, and extracts its fill / stroke color as progressBackgroundTint color.

[0067] (6) Divider detection: When a node name contains the keyword "divider", the system determines it to be a divider control. The system traverses the descendant nodes of the node, finds the first node with a valid fill / stroke color, extracts its color value as the divider color, and splits the color into two parts: the basic RGB color value and the transparency.

[0068] (7) Icon placeholder container detection: When the node name is night / icon / seize, the system determines it to be an icon placeholder container. The system checks whether there are identified image resources in the descendant nodes of this container: if there are, the list of child resource names is used as additional information for render_hint=icon_container; if there are no resources, it is marked as render_hint=placeholder (empty placeholder).

[0069] (8) Noise Node Filtering: The system uses the `_is_noise` function to filter noise nodes that do not need to be output in the layout skeleton. Nodes that meet the following conditions are identified as noise: their type belongs to the noise type set {VECTOR, BOOLEAN_OPERATION, STAR, POLYGON, LINE} and are not associated with any exported resources; their names begin with a noise prefix (e.g., "Frame 152", "Vector", "Rectangle", "Ellipse", "Group 152"), and they are not associated with any resources and have no text content. In addition, for nodes with a depth > 7 that are not associated with any resources and have no text content, the system will not expand their child nodes in the layout skeleton to control the output scale.

[0070] (9) Dial Keyboard Semantic Optimization: The system performs special processing for the dial keyboard scenario. For a TEXT node named "ABC", the system searches for the primary numeric key text (such as "2") in its sibling nodes, and then performs verification according to the standard telephone keypad mapping table _DIAL_SUB_LABEL ("1"→"", "2"→"ABC", "3"→"DEF", etc.). If the letter label corresponding to the primary numeric key is an empty string (such as "1" corresponding to no letter), the letter label node is filtered out and not output; otherwise, the text value is replaced with the correct letter label.

[0071] like Figure 6 As shown, the structured AI prompt word generation module is one of the core innovations of this invention, responsible for assembling all analysis results into a structured Markdown document optimized for large AI models.

[0072] This Markdown document (generated by the build_ai_md function) contains the following 10 sections: (1) Meta section (601): Records the design file identifier file_key, target node node_id, screen size (width × height), root node offset coordinates and generation timestamp.

[0073] (2) ScreenLayout section (602): List all inferred page functional areas in tabular form, with each row containing the area name (zone), relative boundary coordinates (x,y,w,h) and layout type suggestion (layout_hint).

[0074] (3) LayoutSkeleton section (603): Displays the complete page layout skeleton in an indented tree structure. Each node outputs one line, formatted as indentation-node type name="name" bounds=(x,y,w,h), along with information such as resource name res, text content text, font size textSize, and text color textColor. List and grid nodes include semantic annotations (e.g.,<!-- RecyclerView xN items --> The skeleton is generated by the recursive function emit, starting from the root node (depth=0) and recursively outputting all non-noise child nodes layer by layer.

[0075] (4) RecyclerViewSemantics section (604): Lists the semantic information of all detected list controls in tabular form, including list node ID, list name, number of list items, list item node name, list item tooltip, and sample text (including text name, content and font size) of all TEXT descendant nodes in the first list item.

[0076] (5) SpecialRenderHints section (605): Lists all nodes that require special rendering processing in a table format, including icon placeholders (icon_container / placeholder) and dividers (divider_view), with detailed rendering parameters (such as child resource names, divider colors and transparency).

[0077] (6) SeekBarSemantics section (606): Lists detailed parameters of all detected slider controls in tabular form, including node ID, name, boundary coordinates, thumb image resource name (thumb_res), progress bar color and opacity (progress_color / opacity), and track color and opacity (track_color / opacity).

[0078] (7) AssetMapping section (607): List all the mapping relationships of exported resources in tabular form, including node ID, original name in the design draft and normalized Android resource name (res_name), sorted by name and deduplicated.

[0079] (8) TextColors section (608): Lists all non-repeating text colors used in the design in tabular form, including Android format hexadecimal values ​​(android_hex), basic RGB color values ​​(rgb_hex), opacity (opacity), and Android color resource names (android_color_name).

[0080] (9) TextStyles section (609): Lists the complete style information of each TEXT node in tabular form, including node ID, name, text content, font size (sp), text color, transparency, Android color resource name and boundary coordinates.

[0081] (10) GenerationRules section (610): Lists 12 explicit code generation rules to guide the AI ​​large model on how to convert the above structured information into page code for the target platform. The specific rules include: The root layout uses ConstraintLayout, and each zone is implemented according to the layout type specified by layout_hint; Nodes whose names contain _list are mapped to RecyclerView + LinearLayoutManager, and their direct child nodes are list items; GridLayout spanCount=N is mapped to RecyclerView + GridLayoutManager(N); AlphabetIndexBar is mapped to a custom View (such as WaveSideBar). Icon / image nodes are mapped to ImageView, and the src attribute references @drawable / {res_name}; The night / icon / seize node is a placeholder container for icons, and it prioritizes using child image resources in SpecialRenderHints. The divider node generates a View control instead of a sliced ​​image, and the color is taken from the divider line color in SpecialRenderHints; The / slider node generates a SeekBar / Slider control, where *_dot is a thumb image, *_filling is a progressTint, and *_bg is a progressBackgroundTint. All color fields provide both RGB hexadecimal values ​​and transparency, which are synthesized into AARRGGBB format on demand in Android XML. The text color references @color / {android_color_name}, which corresponds to the definition in colors.xml; The text, image, and icon child nodes within a RecyclerView list item must be fully generated into the item layout. The coordinate unit is dp, and the baseline width of the design draft is determined by the width of the root node.

[0082] The resource export and download module is responsible for automatically exporting the sliced ​​image resources in the design draft as image files. Its operation process is as follows: (1) Candidate node filtering: The collect_export_candidates function traverses the design tree and filters nodes that meet the following conditions as export candidates: The node must have a valid ID; its `visible` property must not be `False`; its type must not be `TEXT`; both its width and height must be greater than 0; and its name must conform to the image cutting naming rules (using the `is_cut_image_name` function: ending with "px" and containing the keywords "icon" or "button" in the path), or the background image naming rules (using the `is_bg_name` function: ending with "_bg" or containing " / bg / " in the path), or the slider thumb naming rules (using the `is_slider_thumb_name` function: containing "_dot"). The maximum number of exported candidate nodes is MAX_EXPORT = 1200.

[0083] (2) Resource name mapping: The build_res_map function generates a normalized resource name for each candidate node (through the to_snake function) and constructs a mapping dictionary from node ID to resource name.

[0084] (3) Batch request image URLs: The request_image_urls method divides the candidate node IDs into batches of MAX_BATCH=50, and calls the / v1 / images / {file_key} endpoint of the Figma API. The parameters include a list of node IDs (comma-separated), the export format (png), and the scaling ratio (default 1.5 times corresponding to the hdpi density of Android). The API returns the rendered image URL for each node.

[0085] (4) Concurrent download: The batch_download function uses a thread pool (ThreadPoolExecutor, maximum concurrency MAX_DL_WORKERS=2) to download images concurrently. Each image is saved in a directory categorized by density (e.g., images / drawable-hdpi / {res_name}.png), with 1.5x scaling corresponding to the drawable-hdpi directory in Android.

[0086] (5) Export manifest generation: The save_manifest function generates an export manifest file in JSON format, which includes timestamps, file identifiers, total number of nodes, total number of files, and detailed export status of each node (whether it was successful, file path, reason for failure, etc.) and three sets of search indexes (id_to_res_name, raw_id_to_res_name, res_name_to_ids).

[0087] The following specific embodiments will provide further explanation.

[0088] Example 1: Telephone Module Page Taking the Figma design page of an Android phone's contacts application as an example, the page includes a top status bar, a middle contact list area (including an alphabetical index bar), a bottom dial pad area, and a bottom navigation bar.

[0089] Execute the command: python figma_export_fixed.py --file-keyCMg6XsP9pCpV6qiE2lI9z4 --node-id 3-928 --output-dir figma_output --scales1.5.

[0090] Processing steps: 1) Use node_id="3:928" as the root node and perform a BFS traversal to expand all deep child nodes; 2) Expand the "_list" contact list node multiple times to ensure the integrity of the internal structure of the list items; 3) The control extraction module collects hundreds of control attributes; 4) Resource filtering identifies icon and background image nodes and standardizes their naming; 5) Layout analysis automatically infers areas such as StatusBar, BottomBar, ContactsPanel, and DialPad; 6) Component identification detects the contact list → RecyclerView, letter container → AlphabetIndexBar, and slider → SeekBar; 7) Generate a complete structured AI prompt word Markdown document; 8) The AI ​​large model generates complete Android XML layout code containing ConstraintLayout, RecyclerView, WaveSideBar, SeekBar, and GridLayout based on the prompt words.

[0091] This embodiment fully demonstrates the intelligent analysis and code generation capabilities of the system of the present invention in handling eight complex component recognition scenarios, including contact list (RecyclerView + LinearLayoutManager with complete item layout), alphabetical index bar (AlphabetIndexBar custom View, merging and detecting 20+ single-character texts), dial pad grid (GridLayout spanCount=3, 3 columns × 4 rows spatial distribution detection of 12 buttons), semantic optimization of dial letter labels (_DIAL_SUB_LABEL mapping table verification and filtering), slider control (seekBar's thumb / progress / track three-component decomposition), automatic color extraction of dividing lines (divider_view with transparency splitting), icon placeholder container (child resource association of night / icon / seize), and large-scale noise node filtering (VECTOR / BOOLEAN_OPERATION and other decorative node cleanup).

[0092] Example 2: Bluetooth music player page Taking the Figma design page of the Android Bluetooth music player as an example, the page includes a top status bar, a middle album cover and playback control area, a bottom song list area, and a bottom navigation bar.

[0093] Execute command: python figma_export_fixed.py --file-key CMg6XsP9pCpV6qiE2lI9z4 --node-id 1-728 --output-dir figma_output --scales 1.5.

[0094] Processing procedure: 1) Perform a BFS traversal with node_id="1:728" as the root node and automatically expand deep nodes such as COMPONENT and INSTANCE to build a design tree; 2) Perform multiple rounds of expansion on "_list" nodes such as the song list to ensure the integrity of the structure of song names, artists, durations, and icons within the list items; 3) The control extraction module collects the attributes of various UI controls on the page, including text, images, colors, sizes, and layout information; 4) The resource filtering module identifies playback control icons, function icons, album cover backgrounds, and slider resources, and automatically completes the standardized naming of resources and image export; 5) The layout analysis module automatically infers functional areas such as StatusBar, playback control area, song list area, and BottomBar, and generates corresponding layout suggestions; 6) The component recognition module automatically detects components such as playback progress bar, volume slider, song list, divider, and icon placeholder containers, and identifies them as Android components such as SeekBar and RecyclerView, and extracts corresponding semantic information; 7) Generate a complete structured AI prompt word Markdown document; 8) The AI ​​large model automatically generates Android based on the prompt words. The XML layout code generates a complete page structure including a ConstraintLayout root layout, a playback control area, a RecyclerView song list, a SeekBar for playback progress and volume control, an ImageView for playback control buttons, a TextView for song information, and a bottom navigation bar.

[0095] This embodiment fully demonstrates the intelligent analysis and code generation capabilities of the system of the present invention in handling complex scenarios such as multiple slider controls (playback progress bar + volume control), icon placeholder containers (night / icon / seize), semantic song list (RecyclerView with complete item layout), automatic color extraction of dividing lines, and filtering of a large number of noise nodes, further verifying the versatility and accuracy of the method of the present invention.

[0096] To address the issue of the inability to retrieve deep nodes due to the depth limitation of the Figma REST API, this invention employs a three-level retrieval strategy: "BFS layer-by-layer traversal + on-demand dynamic expansion + multi-round supplementary expansion of special subtrees," achieving complete retrieval of design trees of any depth with zero information loss.

[0097] To address the lack of advanced semantic annotations for nodes in design drafts, a multi-dimensional intelligent recognition method was adopted, combining naming rule matching, analysis of child node spatial distribution characteristics (threshold determination of x-coordinate dispersion, y-coordinate dispersion, and width dispersion), and statistics on the number / type of child nodes, to automatically identify more than 7 types of complex UI components.

[0098] To address the issue of the lack of explicit labeling of functional areas in the design drafts, an automatic inference algorithm was adopted, which combines the relative coordinates and size features of the top-level control with a depth of 1 with position threshold rules and name keyword matching.

[0099] To address the issue that raw design data is unsuitable for direct consumption by large AI models, a structured Markdown prompt generation method with 10 semantic chapters and 12 code generation rules was adopted to achieve end-to-end automated conversion from design drafts to code.

[0100] To address the disconnect between the export of image resources and the code writing process, an integrated approach was adopted that simultaneously performs resource filtering, name normalization (Unicode→ASCII→snake_case), batch API export, multi-threaded download, and automatic construction of code reference mapping within a unified processing flow.

[0101] To address the issues of API rate limiting and network instability in the production environment, a multi-layered robust communication mechanism was adopted, which integrates request caching for deduplication, minimum request interval control, HTTP 429 auto-adaptation, exponential backoff retries, and 4xx fail-fast.

[0102] This invention is not limited to the above embodiments. Based on the technical solutions disclosed herein, those skilled in the art can make some substitutions and modifications to some of the technical features without creative effort, and all such substitutions and modifications are within the protection scope of this invention.

Claims

1. An intelligent page code generation method based on Figma parsing and visual screenshots, characterized by: Includes the following steps, Step 1: The system starts up and receives parameters input by the user; Step 2: The user inputs the unique identifier of the Figma design file, file_key, and the target node number, node_id, as well as the optional output directory path, output_dir, export scaling scales, and export format; Step 3: Initialize the FigmaClient client instance, configure the API authentication token X-Figma-Token, establish an HTTP session, and set the base URL to https: / / api.figma.com / v1; Step 4: Call the design tree BFS traversal engine, take the target node node_id as the root node, and traverse the design tree layer by layer through the breadth-first search strategy. For each child node that needs to be expanded, make an API request to obtain its complete subtree. Step 5: After the BFS traversal is completed, perform a special subtree expansion operation, and perform multiple rounds of supplementary expansion for unexpanded nodes and specific named nodes in the list context; Step 6: Traverse the complete design tree and collect the attribute information of all UI controls, including node ID, name, type, depth, absolute coordinates, size, visibility, text content, text color, font size, and fill / stroke color. Step 7: Identify candidate nodes for exportable resources in the design tree; Step 8: Determine if it is in extract-only mode; if so, skip the image export step. Step S9: Request the image URL and download assets in batches; Step 10: Perform intelligent layout area inference. Based on the position coordinates and size of the top-level control with a depth of 1, automatically divide the page functional areas and automatically detect and classify various complex UI component types. Step 11: Perform advanced component type detection for each control node, including vertical list detection, grid layout detection, alphabetical index bar detection, and slider control detection; Step 12: Based on the control information, layout analysis results, and resource mapping, generate a structured AI prompt Markdown document containing 10 semantic chapters; Step 13: Save the space JSON and color XML, and export the list; Step 14: Feed the code to the AI ​​code generation engine; Step 15: Output the complete page code and associated resources; Step 16, End.

2. The intelligent page code generation method based on Figma parsing and visual screenshot as described in claim 1, characterized in that: The specific details of step 4 are as follows: Step 4.1, Obtain the root node: First, a request is made through the Figma API's / v1 / files / {file_key} / nodes endpoint with the target node_id as the parameter and depth=4 to obtain the root node and its child nodes within 4 levels. The root node ID is then added to the visited set. Step 4.2, unfold layer by layer: Add the root node to the BFS queue and perform the following operations in a loop: Take a node from the head of the queue, traverse all its child nodes (children), and for each child node, first check if its node ID is already in the visited set to prevent duplicate processing, then check if its type belongs to the expandable type set {COMPONENT, INSTANCE, FRAME, GROUP, COMPONENT_SET, SECTION} and is missing the children attribute; if the conditions are met, call the API again with the child node's ID as the parameter to get its complete subtree, depth=4, and update the current node with the returned complete node data; Step 4.3, Deduplication and caching of requests: Before each API request, a cache key is generated based on the URL and parameters, and the global cache dictionary _CACHE is checked; if the cache is hit, the cached data is returned directly to avoid duplicate requests. Step 4.4, Rate Control and Fault Tolerance: Implement a multi-layered network fault tolerance mechanism with a minimum request interval of MIN_GAP=2.0 seconds; automatic adaptation of HTTP 429 rate limiting, i.e., reading the Retry-After header and random jitter; exponential backoff retries, including an initial 5 seconds, doubling, a maximum of 60 seconds, and a maximum of 5 retries; and fast failure for 4xx client errors.

3. The intelligent page code generation method and system based on Figma parsing and visual screenshot as described in claim 2, characterized in that: The specific details of step 5 are as follows: After the BFS traversal is completed, the special subtree expansion operation `expand_special_subtrees` is performed: (1) List context node: Traverse the complete design tree again to identify nodes whose names contain _list or / list and all their descendant nodes; For the child nodes of these nodes, collect their IDs in batches if the type belongs to the expandable type set and lacks the children attribute, and then call the / v1 / files / {file_key} / nodes endpoint with MAX_BATCH=50 IDs per batch, using comma-separated multi-ID parameters, to obtain and update the complete subtree of multiple nodes at once; (2) Specific named nodes: Icon placeholder container nodes named "night / icon / seize" may contain unexpanded icon resource child nodes, which are also included in the batch expansion scope; (3) Multiple iterations: The expansion of special subtrees can be performed up to max_passes=4 times. After each expansion, the system will rescan to see if any new unexpanded nodes appear. The maximum number of expansions is max_expand=200 nodes.

4. The intelligent page code generation method and system based on Figma parsing and visual screenshot as described in claim 3, characterized in that, The specific details of step 6 are as follows: Perform a depth-first traversal (DFS) on the complete design tree after BFS traversal, use the walk function of the stack structure to visit each node one by one, and extract the following attribute information to form a control record: node ID, name, type, depth, absolute coordinates and size, visibility, parent node ID, resource name hint, text content, text color, font size, fill / stroke color; Specifically, the size is extracted from absoluteBoundingBox; the resource name hint is converted to 'to_snake'; the text content is only of type TEXT; the text color is extracted from fills using SOLID fill color; the font size is extracted from style.fontSize; the color extraction process comprehensively considers the node opacity, fill layer opacity, and color alpha channel multiplication to calculate the final transparency; when alpha < 255, the color format is #AARRGGBB, and when alpha = 255, it is simplified to #RRGGBB; The resource name generation process using the `to_snake` function: replaces forward slashes, spaces, and hyphens in node names with underscores → Unicode NFKD normalization decomposes and removes non-ASCII characters → converts to lowercase → removes illegal characters → merges consecutive underscores → uses MD5 hashing as a fallback for empty names → adds the prefix "img_" to the first character of a number.

5. The intelligent page code generation method based on Figma parsing and visual screenshot as described in claim 4, characterized in that: The specific filtering rules in step 7 are as follows: (1) Candidate filtering: Traverse the design tree to filter renderable non-TEXT nodes whose names conform to the suffixes of icon / button+px, _bg, / bg / , or _dot, with a maximum of 1200; (2) Resource name mapping: The to_snake function generates normalized names; The specific details of step 9 are as follows: Call the Figma Images API to request the URLs of rendered images from resource nodes in batches, and then save the images to the local machine using a multi-threaded concurrent downloader; The process includes: batch requesting URLs: each batch of 50 nodes calls the / v1 / images / {file_key} endpoint to obtain the URLs of the rendered images; concurrent downloading: ThreadPoolExecutor 2 threads concurrently download to the images / drawable-hdpi / directory; and generating an export manifest JSON file, including three sets of lookup indexes.

6. The intelligent page code generation method based on Figma parsing and visual screenshot as described in claim 5, characterized in that: The region inference rules in step 10 include the following: (1) StatusBar: h≤100 and ry≤10; (2) BottomBar: h≤130 and ry≥root_h-160; (3) LeftNav: w≤300 and rx≤10; (4) DialPad: The name contains "dial" or "button_group"; (5) ContactsPanel: The name contains "contact" / "call" / "title"; (6) General Zones: The zone name is the first 18 characters of the name; Where rx: relative to the horizontal coordinate, the horizontal offset of the top-left corner of the control relative to the left boundary of the page root node; ry: relative to the vertical coordinate, the vertical offset of the top-left corner of the control relative to the top boundary of the page root node; w: control width; h: control height.

7. The intelligent page code generation method based on Figma parsing and visual screenshot as described in claim 6, characterized in that: Step 10, which involves automatically detecting and classifying various complex UI component types, specifically includes the following: (1) Explicit list detection: Names containing "_list" → RecyclerView + LinearLayoutManager, child nodes are list items, all are forced to expand for output; (2) Implicit vertical list detection: If the number of child nodes is ≥3, all of which are of type INSTANCE / COMPONENT / FRAME / GROUP, the x-coordinate dispersion is ≤8, the width dispersion is ≤12, and the y-coordinate has 3+ different values, it is determined to be a vertical list. (3) Grid layout detection: If the number of child nodes is ≥6, and the list is not vertical, with 2+ possible x-coordinates and 2+ possible y-coordinates, then GridLayout will have the number of columns equal to the number of different x-coordinates. (4) Alphabetical index bar detection: 20+ single-character text child nodes in a container → AlphabetIndexBar, WaveSideBar custom View; (5) Slider control detection: Names containing " / slider" → SeekBar, child components breakdown: *_dot → Thumb image, *_filling → progressTint color, *_bg → BackgroundTint color; (6) Dividing line detection: For View controls whose names contain "divider", extract the fill / stroke colors of descendant nodes; (7) Icon placeholder container detection: The name is "night / icon / seize" → icon_container or placeholder, where icon_container has child resources and placeholder has no resources; (8) Noise node filtering: Nodes of type {VECTOR, BOOLEAN_OPERATION, STAR, POLYGON, LINE} that have no resource associations are considered noise and are not output in the layout skeleton. (9) Dial keyboard semantic optimization: For "ABC" style TEXT nodes, verify the correctness of the letter labels according to the standard telephone keypad mapping table.

8. The intelligent page code generation method based on Figma parsing and visual screenshot as described in claim 7, characterized in that: Step 12, the structured Markdown document, specifically includes the following 10 sections: (1) Meta section: file identifier, node ID, screen size, and generation timestamp; (2) ScreenLayout section: Function area table; (3) LayoutSkeleton section: Indented tree layout skeleton, with semantic annotations; (4) RecyclerViewSemantics section: Semantic information of list controls; (5) SpecialRenderHints section: Special rendering node information; (6) SeekBarSemantics section: Slider control parameters; (7) AssetMapping section: Resource mapping table; (8) TextColors section: Text color table; (9) TextStyles section: Text style sheets; (10) GenerationRules section: 12 code generation rules.

9. The intelligent page code generation method based on Figma parsing and visual screenshot as described in claim 8, characterized in that: The 12 code generation rules in step 12 specifically include the following: The root layout uses ConstraintLayout; _list nodes → RecyclerView; grid → GridLayoutManager(N); AlphabetIndexBar → custom View; icons → ImageView src=@drawable / {res_name}; icon placeholder containers prioritize using child resources; dividers generate Views without image slices; sliders generate SeekBars containing thumb / progress / track; colors provide both RGB and transparency; text colors reference @color resources; all nodes within list items are fully generated. The coordinate unit is dp.

10. An intelligent page code generation system based on Figma parsing and visual screenshots, characterized in that: The method for generating intelligent page code based on Figma parsing and visual screenshots, applicable to any one of claims 1-9, includes a Figma design file, a Figma design file connected to a Figma API interface module, a Figma API interface module connected to a design tree BFS traversal engine, a design tree BFS traversal engine connected to a UI control extraction module and a resource export and download module, a UI control extraction module connected to an intelligent layout analysis module and a structured AI prompt word generation module, an intelligent layout analysis module connected to a structured AI prompt word generation module, a structured AI prompt word generation module connected to an output assembly module, and an output assembly module connected to a resource export and download module and an AI code generation engine. The Figma design files are stored on the Figma cloud server and contain complete UI design information; The Figma API interface module is responsible for communicating with the Figma REST API to implement authentication and authorization and data requests; The design tree BFS traversal engine uses a breadth-first search strategy to fully traverse the design tree and expands deeper nodes as needed; The UI control extraction module extracts the property information of all controls from the traversed complete design tree; The intelligent layout analysis module performs semantic recognition and region division of controls based on multi-dimensional features; The resource export and download module is responsible for identifying, requesting, and batch downloading image slice resources; The structured AI prompt generation module assembles control information and layout analysis results into a structured Markdown document; The output assembly module integrates all output files; The AI ​​code generation engine automatically generates page code based on the generated prompts.

Images