图生 UI

图生 UI 功能通过 AI 视觉识别技术，将设计截图或参考图片自动转换为可编辑的腾讯设计稿，让设计还原和迁移更高效。

功能简介

上传一张 UI 截图或设计参考图 → AI 自动分析视觉结构 → 生成分层可编辑的设计稿

适用场景：

将竞品截图快速还原为可编辑设计稿
将手绘草图转换为数字设计稿
快速搭建参考设计的结构框架

支持的图片格式

格式	最大尺寸	说明
PNG	10MB	推荐格式，清晰度高
JPG / JPEG	10MB	适用于照片类素材
WEBP	10MB	现代 Web 格式
BMP	5MB	位图格式

建议：上传清晰度高、无压缩失真的截图，AI 识别效果更准确。

操作步骤

方式一：工作台 AI 页

在工作台左侧导航点击「AI」
在 AI 功能页选择「图生 UI」
点击「上传图片」或将图片拖入上传区
等待 AI 分析（通常 10~30 秒）
预览生成结果，点击「导入到文件」或「新建文件」

方式二：编辑器内直接生成

打开设计文件，点击工具栏「AI」图标
在 AI 面板切换到「图生 UI」Tab
上传图片，等待生成
生成结果直接插入当前画布

生成结果说明

AI 生成的设计稿包含以下图层类型：

图层类型	说明
Frame	页面或模块容器
Group	相关元素的分组
Rectangle	矩形背景、卡片、按钮等
Text	识别到的文字内容
Media	图片、图标占位符

所有图层均可在生成后自由编辑，包括修改颜色、尺寸、文字内容等。

限制与最佳实践

限制：

复杂的交互动效无法识别
手写字体的文字识别准确率较低
过于复杂的背景可能影响前景识别

最佳实践：

上传干净的白底或纯色背景截图
避免上传带有大量渐变、噪点的图片
生成后对照原图逐层校对，调整不准确的部分
结合「文生 UI」功能补全缺失的细节