逆向工程
什么是逆向工程?
逆向工程是 Kaiju Hub AI 的边界框定向图像转代码和图像转线框图工具。上传任何图片——截图、设计稿或 UI 照片——并使用边界框识别和引导图像上每个元素应执行的操作。将结果转换为可运行代码或线框图布局。
创建逆向工程项目
点击+ 新建逆向工程项目按钮创建新项目。为其命名和描述以保持逆向工程工作的有序。
工作原理
1
上传图片
将截图、设计稿或任何 UI 图片上传到逆向工程工具中。
2
绘制或自动检测边界框
手动在 UI 元素周围绘制边界框,或使用 AI 自动框选来自动检测元素。每个框高亮显示图片上的一个独立组件。
3
引导元素行为
为每个边界框定义应发生的操作——例如,点击按钮打开模态框,导航链接转到另一个部分,或卡片显示特定内容。
4
生成代码或线框图
将标注的图片转换为目标框架中的可运行组件代码,或将其导出为线框图布局以在线框图工具中进一步编辑。
关键功能
图片上传
拖放或浏览以上传任何图片——截图、设计稿、手绘草图照片或现有应用 UI。
边界框标注
在各个 UI 元素周围绘制精确的边界框,将它们隔离以进行代码生成或行为分配。
AI 自动框选
让 AI 自动检测并框选图片中的 UI 元素,节省包含多个组件的复杂布局的时间。
行为引导
为框选的元素分配行为——定义在生成的代码中点击、悬停或与每个元素交互时应执行的操作。
双重输出
生成可运行代码(使用目标框架)或线框图布局,以便在线框图工具中进一步完善。
