Genarrative/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md

【编辑器】画板UI设计图生成入口设计

日期：2026-06-17

入口与画布状态

• 底部 AI 画布工具栏新增 生成UI设计图。
• 点击后立即在画布中新建 UI设计图生成占位图，不复用普通新建图片的空白样式。
• 占位图默认 16:9 展示，生成成功后替换为 assetKind: "ui-design" 的画布图层。
• 用户点击 assetKind: "ui-design" 图层后，图片上方浮动工具栏在 去除背景按钮 后显示 提取素材 按钮；普通图片、角色图和图标图层不显示该入口。

生成面板

• 占位图下方打开独立生成面板，标题为 生成UI设计图。
• 面板复用普通 生成图片 / 生成角色形象 / 生成视频 的生成类 shell：首行参考图区域、中央单文本输入、底部参数与生成按钮区。
• 面板第一个模块为 图标规范，并放在首行参考图区域。
• 点击图标规范卡片后，在卡片旁弹出来源菜单：
  • 从画布中选择
  • 新建图标规范
  • 上传图片
• 从画布中选择 只接受 assetKind: "icon-spec" 的图层；普通图片、其他类别图层和不携带标签的图片不绑定。
• 新建图标规范 复用现有图标规范生成表单。
• 上传图片 仅绑定到当前 UI 设计面板的图标规范参考，不自动添加为画布图层。
• 图标规范之外可继续上传普通参考图，用于约束 UI 设计图的布局风格、配色或材质；普通参考图不替代图标规范。

生成参数

• 支持自定义画面比例和大小尺寸。
• 模型固定为 gpt-image-2，模型展示对齐角色规范面板底部固定模型样式，不响应点击、不弹出模型切换菜单；历史草稿如果残留其他模型，提交时也必须强制改为 gpt-image-2。
• 默认画面比例为 16:9，默认大小为 1K。
• UI 素材提取面板不展示抠图背景色或抠图模型选择；前端用户路径固定提交 screenColor=auto 和 segModel=birefnet。后端先在 12 个候选色中自动决策具体 hex，最多重试 3 次，失败兜底 #CFEFFF；父流程请求唯一 loopback bgfilter-worker 时只把解析后的具体 hex 作为 screenColor 参数传入。后端仍识别内部保留的 anime-seg，但该选项不对用户可见。

提示词契约

后端收到 kind: "ui-design" 时固定拼接：

生成玩法UI原型图
【用户输入】<用户输入>

如果用户设置了图标规范参考图，则追加：

参考图1为图标规范，请在UI图标、按钮符号、描边、材质、圆角、阴影和状态层级上严格遵循参考图1的素材规范。

生成请求固定使用 gpt-image-2。有参考图时走图片编辑请求；无参考图时走图片生成请求。 前端提交时会把图标规范作为第一张参考图，并把用户上传的普通参考图按顺序追加到同一个 referenceImageSrcs 数组；上传参考图优先提交 objectKey。

提取素材

• 点击浮动工具栏 提取素材 后，进入 UI 设计图素材框选编辑状态，不立即提交提取接口。
• 框选状态参考微信截图工具栏布局，默认矩形框选，并支持矩形框选、椭圆框选和画笔自由框选三种工具。
• 用户可在同一张 UI 设计图上多次框选；未至少框选一个区域时，工具栏 提取 按钮不可点击。
• 可上传普通参考图辅助 UI 素材提取，用于约束被框选素材的风格、配色或材质；普通参考图会以 objectKey 随合成后的红框 UI 设计图一起提交。
• 点击 提取 后，前端把所有框选的红色轮廓绘入原 UI 设计图生成合成图；Data URL / Blob URL 只允许停留在浏览器临时态，必须先上传 OSS 并确认 asset object，再以返回的 objectKey（或项目资源 / 素材 ID）作为 sourceImageSrc 提交到 POST /api/editor/ui-designs/assets/extractions。
• 后端固定使用 gpt-image-2 图片编辑链路，并固定提示词：

仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用后端自动决策出的抠图背景色。纯色背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现与背景色相同或相近的描边、底板、投影或反光。

• 父流程收到 spritesheet 后先把带解析后纯色背景的源图 owned 上传私有 OSS（消费图片字节所有权，上传完成后释放原图缓冲，不克隆保留），写入项目资源和账号素材库；随后只持 object key，并仅向同机唯一 loopback bgfilter-worker 发起一次内部 HTTP RPC，请求中的源图只以 object key 传递，并附带 BgFilter 参数、排队预算 maxQueueWaitMs、调用预算 callBudgetMs 和有界审计关联，父流程不签发 BgFilter URL、不直连 provider，也不重试已被 worker 接收的内部 RPC（连接从未建立时按调度方案 §5.1 有界重连）。子 worker 在 Q admission 和 Semaphore(N) 约束下执行这次逻辑调用；排队只消耗 maxQueueWaitMs，取得 provider permit 后才启动 callBudgetMs。每次 provider attempt 前重新签发 600 秒 GET URL，multipart 固定传 image_url、screen_color=<screenColor>、seg_model=<segModel>、background_mode=flat 和 cross_check=off，不包含 file，并在调用预算内最多执行两次顺序 attempt，默认 segModel=birefnet。成功时，子 worker 通过内部 HTTP 二进制 body 把经过校验的图片字节直接返回父流程，不持久化中间结果；BgFilter 最终失败且父业务预算仍有效时，由父流程进入“阿里云通用抠图（按签名 URL 单独下载）→ 本地键色（再按 object key 独立下载一次原图并在产出后释放）”降级链。透明背景处理正常成功时，父流程把透明 spritesheet 写入 OSS、项目资源和账号素材库，再复用图标素材的连通域拆分能力；调用方未指定素材文件夹时落默认“项目”文件夹。BgFilter 与父侧 fallback 最终均失败、但 provider 原图已经持久化时，任务以 completed + warning 收口，只把 provider 原图作为唯一主图放入画布，generatedLayerId 指向原图，不创建透明图集，也不继续拆分。该收口只捕获透明背景处理本身的最终失败；phase 上报、provider 原图持久化、透明处理图持久化和 canvasCompletion 写回错误仍正常传播，不能被原图降级吞掉。最终透明结果及拆分切片的 OSS / 资源 / 画布持久化仍全部由父流程负责。
• UI 素材自动拆分只在透明图集成功后执行，与图标图集一致，属于 best-effort 附加动作。未知素材数量时按从上到下、从左到右自动命名为 素材 1、素材 2；识别或切片持久化失败仍返回整张透明图集和 sliceWarning，前端显示非阻断 warning toast，用户可手动重试。sliceWarning 与透明背景最终失败使用的通用 warning 互斥，前者只表示透明图集成功但自动拆分失败，sliceWarning.reason 原始契约保持不变。
• 正常透明化成功时，前端先把透明 spritesheet 作为 assetKind: "icon-spritesheet" 图集图层放在 UI 设计图右侧，再把拆分成功的独立素材作为 assetKind: "icon" 图标图层继续放到画布；透明背景处理最终失败时只消费后端快照中的 provider 原图。透明图集图层提供 拆分图集 工具栏按钮，可使用相同连通域规则重新拆分。

验收点

• 点击 生成UI设计图 后出现 UI 设计占位图和独立生成面板。
• 面板第一模块为图标规范，来源菜单包含三个动作。
• 从画布选择时只能绑定图标规范图片。
• 请求参数包含 kind: "ui-design"、model: "gpt-image-2"、比例、大小与可选参考图。
• 上传普通参考图后，请求参考图数组同时包含图标规范和普通参考图，生成图层信息面板展示 用户输入、图标规范 与普通参考图。
• 选中 UI 设计图时浮动工具栏显示 提取素材；点击后进入红框素材框选状态，至少框选一个区域后才能调用固定 gpt-image-2 提取接口，请求包含 screenColor。正常透明化和拆分成功时画布同时出现透明 spritesheet 图集和拆分后的独立素材；透明图集成功但拆分失败时只出现透明图集，透明背景处理最终失败时只出现 provider 原图并显示通用 warning。
• UI 素材提取面板上传普通参考图后，提取请求参考图数组同时包含红框 UI 设计图和普通参考图，生成图层信息面板展示 UI设计图 与普通参考图。