代码与线框图生成
概述
使用边界框标注图片并分配行为后，您可以生成可运行的组件代码或线框图布局。AI 使用边界框位置、元素类型和行为引导来生成准确的输出。
AI 助手侧边栏
AI 助手面板是右侧边栏，用于配置和触发代码或线框图生成。它包含以下控件：
视觉模型选择器
选择用于分析图片和生成输出的 AI 视觉模型。不同的模型可能产生不同级别的细节和准确性。
框架选择器
选择代码生成的目标框架（例如 React、Vue、Svelte）。生成的代码将使用所选框架的语法和模式。
组件/线框图标签页
在从标注的图片生成组件代码（组件标签页）或线框图布局（线框图标签页）之间切换。
图片分组
列出当前逆向工程项目的所有图片分组。选择一个分组以预览其图片并配置生成。每个分组显示其图片数量。
生成区块
点击开始 AI 生成过程。AI 分析所选分组的图片以及所有边界框标注和行为以生成输出。
输出模式
生成代码
将标注的图片转换为目标框架（React、Vue、Svelte 等）的可运行组件代码。生成的代码包括布局、样式以及您在边界框上定义的所有行为。
生成线框图
将标注的图片导出为在线框图工具中打开的线框图布局。每个边界框成为一个线框图元素，您可以进一步完善、重新排列并连接到其他屏幕。
代码生成功能
框架选择
在生成前选择目标框架。支持的框架包括 React、Vue、Svelte、SolidJS、Angular 等。
行为映射
分配给边界框的行为被转换为输出中的事件处理程序、导航逻辑、模态框和其他交互代码。
布局准确性
AI 使用图片中的边界框位置和大小来生成与原始视觉设计紧密匹配的布局。
保存到区块
生成的组件可以直接保存到区块库中，以便在项目间重用。
添加到项目
将生成的代码作为新组件文件直接插入到当前项目中。
提示
为获得最佳效果，请使用清晰 UI 元素的高分辨率图片。紧密绘制每个元素周围的边界框以获得更准确的代码生成。分配具体的行为而不是模糊的描述——"打开注册模态框"比"做某事"效果更好。AI 在标准 Web 布局和常见 UI 模式下效果最好。