seedream-ui-workflow · git:20261014.324d61e · 2026-10-14 · sha256 eec9b47f1bd01216
seedream-ui-workflow git:20261014.324d61eA
Immutable. This exact content never changes and is served at /api/v1/blob/eec9b47f1bd01216.
---
name: seedream-ui-workflow
description: '用 Seedream 图层分离把游戏 UI 设计稿切成独立 PNG。适用于 Seedream UI 切图模板、按坐标拆界面,或用户要求比游戏UI制作更少重绘。产出仍是分类切图,不用于普通玩法开发。'
---
# Seedream UI 切图
这个 Skill 是「Seedream UI 切图」模板的执行引擎。它替代「游戏UI制作」里的标注图和图集重绘,因为 Seedream 图层分离会直接返回透明 PNG、归一化框、像素框和层级。
先读本 Skill,再操作画布。不要另开一套生图流程。密钥只从项目已有配置读取,不写入仓库、日志或模板。
## 和旧模板的差别
「游戏UI制作」关联 maker-ui-workflow。它先去字,再生成按钮、Icon、美术字标注图和背景准备图,然后重绘图集,最后按网格裁 PNG。编号和位置画在图上,没有结构化坐标。一张界面通常要十几次整图重绘。
本流程保留同样的产物:分类独立 PNG,可预览、可下载、可进项目。改变的是取得方式:
1. 一次去字,不占 16 层名额。
2. 固定 GPT-6.1 Sol / low 两次识图,导出标准 Bbox JSON:去字图只提 UI,原稿只提文字。这是坐标来源,不再生成标注图。
3. 底板、按钮、页签、标题按类型分批做图层分离,每批最多 9 个框。
4. 图标不交给模型重画,按框从去字图裁原像素。
5. 每个返回层用归一化框核对,交并比达到 0.5 才接受。
6. 文字不进 PNG。整屏去字图作为最底层背景,不切。
换设计稿必须重跑。模板里的装备界面示例不能当成新稿的结果。
## 接口
去字和切图是同一个图片生成接口,没有单独的去文字 API。
POST {ARK_API_URL}/images/generations
已跑通的模型是 bytedance-seed/seedream-5-pro。官方模型 ID 是 doubao-seedream-5-0-pro-260628。沿用项目配置,不要写死密钥。
- watermark 必须是 false。
- 一次只传一张图。
- size 用 2K。图层分离不接受 1920x1080,只接受 1K、1.5K、2K、auto。
- 去字:layer_decomposition=false,只返回 1 张图。
- 切图:layer_decomposition=true,返回 1 张底图加最多 16 个前景层。任一层失败则整单失败。
- 正式流程每批最多 9 个框。超过 16 时接口仍可能返回 200,但会静默丢层。
每个前景层使用:
- bounding_box.normalized:0 到 1000,左上右下,用来和请求框核对。
- bounding_box.absolute:相对本次输出底图的像素框。输出图和原图宽高比一致,像素尺寸通常不是原图尺寸。
- name、description:模型起的名字,只作参考,不能当元素 ID。
还原时把图层 PNG 缩放到返回框的宽高,再贴到框的左上角。图层文件本身的像素尺寸不等于框的大小。
## 执行
1. 在新画布添加「Seedream UI 切图」,替换「原设计稿」。不要运行旧模板的标注图或图集生图,也不要对本模板点「完成剩余流程」去调用画布图片模型。
2. 对原稿做一次去字。提示词只去掉文字、数字、百分比、数量和页签上的字,必须保留图标和符号。结果缩回原稿宽高。标题、左右面板、底栏不应再识别出文字。图标框里的亮像素不能比原图掉到 40% 以下;掉光且原框没有文字的图标改从原图裁。
3. 使用控制台已配置的 GPT-6.1 Sol / low 顺序识图两次,不能用当前对话模型或额外识图 Skill 代替:去字图只识别 UI;原稿加第一次清单只识别文字。导出 version=1、coordinateSpace=design-pixels、bboxFormat=xywh 的 Bbox JSON,保留 design/cutSource 的路径、哈希和真实尺寸。elements 的 type 作为 kind、bbox 作为 rect,类型只用 icon/frame/panel/button/tab/title,相似实例逐个编号。所有导出框是原稿像素,裁去字图时按实际宽高反向换算。texts 单独保存文本与样式用于 Label,不进切图清单。
4. 只对 frame、panel、button、tab、title 做图层分离。同一批只有一种 kind,每批最多 9 个框,都用同一次去字图。请求框换成 0 到 1000:x1 = round(x / canvasWidth \* 1000),其余同理,顺序是左、上、右、下。提示词写元素名和 bbox。按钮不要图标和文字;槽位要边框和内部底色,不要内部图标。返回框和请求框的交并比达到 0.5 才算切到。不足就整批重试,仍失败再拆小,不接受半批。
5. icon 按框从去字图裁 PNG。不要绿幕,不要让模型按组拆星。
6. 正式 PNG 按 assets/ui/界面/images/id.png 归档。坐标、父级和层级写入项目 .maker/ui-workflows/界面/layout.json。过程文件不放进正式 PNG 目录。
7. 把去字图和分类切图预览导入当前画布对应卡片,方便对照。独立 PNG 就是和旧模板资源包相同的切图结果。
8. 用户要求组装界面时,再按 maker-ui-workflow 将 Bbox JSON、PNG 记录和显式 bindings 交给 assemble-ui.mjs,生成 meta、组装 UI.json 并打开 UI 编辑器。文字直接从 texts 还原 Label,不再次猜框;整屏去字图作为底层时不得造成前景重复。不要为了组装重新生图。
## 完成标准
- 去字图仍保留图标,且已缩回原稿宽高。
- 每个要切的元素都有稳定 ID 和像素框。
- 底板来自对应批次的返回层,图标来自裁切,没有串批、没有用别的层顶替。
- PNG 数量和清单一致。失败项单独列出,不静默跳过。
- 模板示例只供查看。替换原稿后,旧切图必须标为待重跑。