这篇能做出什么
给定一张现有界面截图（比如一个移动端「账户设置」页），通过 Seedream 5.5 的图像编辑能力，把它改成一份能拿去评审、能交给前端实现的 UI 稿：控件数量和顺序不变，间距、圆角、字重、配色按新规范重排，同时批量产出 3–5 个风格方案放进同一张对比表里做走查，最后导出切图和标注。
关键在于把用法从「改画面」切换到「改界面」。前者关心的是「好看、有氛围」，模型会自由发挥，给你加卡片、加插画、改文案、挪位置；后者关心的是「结构不动、只换表现层」，模型需要被当成一个会画图的排版工具来约束。这套流程解决的就是约束怎么写、细节怎么锁、方案怎么批量出。
先说清一个边界：图像生成模型做不到真正意义上的像素级精确对齐。可行目标是「结构级对齐 + 人工校正」——让模型输出的稿子在控件数量、顺序、层级、相对位置关系上完全对得上，间距误差控制在肉眼难辨的范围，然后在一轮走查里把残余偏差修掉，最终交付物是结构化稿子（Figma 图层或标注文档），而不是那张位图本身。
前置条件清单
- Seedream 5.5 的可用入口：网页端或 API，具体额度、并发、单次尺寸上限以官方页面当前版本为准。
- 一张干净的原截图：完整无遮挡、无弹窗、无水印、分辨率尽量贴近真实设备。如果只有压缩过的图，先用图片工具做无损放大，别直接喂给模型。
- 一张布局标注表：用 Figma 或任何能读像素坐标的工具，把关键尺寸量出来——画布宽高、标题栏高度、列表行高、左右内边距、图标尺寸、圆角、字号。量 10 个数，比写 100 字形容词有用。
- 本地图片处理工具：Python + Pillow（或 ImageMagick），后面叠图对比和批量裁切都要用。
- 一个变量表：CSV 或 Excel，一行一个方案，列是风格变量。
- 一块评审看板：Figma 文件或在线表格，用来放原图、生成图、叠图差异和走查结论。
- 一位能拍板的评审人：走查环节需要有人决定「这版通过还是再来一轮」，否则会陷进无限重绘。
分步骤
步骤 1：把截图翻译成结构说明书
不要一上来就写提示词。先把截图变成一份模型和自己都能读懂的清单，格式随意，但下面几项必须有：
```text
画布：1080 × 2340，纵向
层级：标题栏 / 列表区 / 底部主按钮
标题栏：高 88px，标题左对齐，左边距 32px，右侧一个图标 48px
列表区：5 行，行高 120px，行间无分割间隙，仅 1px 分割线
行内结构：左图标 48px → 间距 24px → 主文案 → 右箭头 24px，右内边距 32px
底部按钮：高 96px，圆角 48px，距底部安全区 24px，左右内边距 32px
文案：共 5 条，分别是「账户与安全」「通知设置」「隐私」「存储空间」「关于」
```
这张表有两个用途：写提示词时直接抄进去当硬约束；出图后拿它逐条打勾做走查。少了这一步，后面所有「模型不听话」的问题都无从判断到底是提示词的问题还是自己没想清楚。
步骤 2：把提示词写成布局契约
好的提示词不是在描述画面，而是在签合同：哪些能动、哪些不能动、动了算违约。用一个固定骨架，每次替换括号内容：
```text
【任务类型】UI 界面重构，仅调整视觉表现层，不改变信息结构
【输入】参考图 1 为原始界面截图，是本次唯一的布局依据
【画布】1080 × 2340，保持原始宽高比，禁止裁切、禁止加设备外框
【必须保持】
- 控件数量、类型、排列顺序、层级关系与原图完全一致
- 所有文案原样保留，不增字、不减字、不改字
- 每个控件的相对位置不变，仅允许 ±4px 级间距微调
- 图标语义不变，只允许更换线性/面性风格
【允许改变】
- 主色、辅助色、背景色
- 圆角半径、分割线样式、投影强度
- 字体字重与字号层级（在给定字号表内选取）
- 图标线条粗细
【禁止】
- 新增任何卡片、插画、人物、装饰性图形、渐变光斑
- 删除或合并列表项
- 改变控件顺序或把列表改成宫格
- 添加原图没有的标签、角标、开关
- 加透视、加 3D 效果、加玻璃拟态噪点
【风格】浅色背景，主色 #2F6BFF，卡片圆角 16px，分割线 1px #E6E8EB，
无投影，标题字重 600，正文 400
```
三个写作要点：
一是用计数代替形容词。「保持简洁」模型理解不了，「5 行列表、行高 120px、不加卡片」它能理解。
二是把禁止项写具体。模型的默认倾向是「美化」，而美化的常见手段就是加卡片、加图标、加装饰。你禁止的是行为，不是风格，所以要写「禁止新增卡片」，而不是「不要太花哨」。
三是给浮动范围。「间距允许 ±4px 微调」比「间距完全不变」更现实——模型很难做到零误差，但你给了容差，它就不会跑到 ±40px 去。
步骤 3：锁住像素细节
提示词只是第一道锁，还需要三道。
第一道：参考图权重与局部编辑。 整图重绘的漂移最大。如果你的工具支持蒙版或区域编辑，优先只框选要改的部分（比如只框列表区改卡片风格，标题栏和按钮单独处理）。分区域改三次再拼，比一次全图重绘稳定得多。具体蒙版参数名以官方文档当前版本为准。
第二道：逐轮收敛，不要一次到位。 建议节奏是：
1. 第一轮只改配色，其他全不动，选出最接近的一张；
2. 第二轮以第一轮的结果为参考图，只改圆角和分割线；
3. 第三轮再动字重和图标。
每轮只放开一个变量，出错时你能立刻定位是哪一句话导致的。一次性写 30 行约束，出问题只能重来。
第三道：叠图比对。 出图后立刻和原图做半透明叠加，偏差一眼可见。这段脚本可以直接跑：
```python
from PIL import Image, ImageChops
base = Image.open("origin.png").convert("RGB")
new = Image.open("output.png").convert("RGB").resize(base.size)
半透明叠加：原图偏红，新图偏青，错位处会出现明显重影
blend = Image.blend(base, new, alpha=0.5)
blend.save("check_overlay.png")
差异图：把两张图的差值放大，结构性改动会非常刺眼
diff = ImageChops.difference(base, new)
diff.point(lambda p: min(255, p * 3)).save("check_diff.png")
```
看 check_overlay.png 时关注三件事：列表项的横线是否还在同一高度、左右内边距是否等宽、底部按钮是否还在安全区上方。这三项对上，结构基本就稳了。看 check_diff.png 时，如果整块区域全黑说明只改了颜色，如果出现成片的白色轮廓说明位置动了，需要回退。
步骤 4：批量出多方案
多方案的价值在于对比，不在于数量。做法是把风格拆成互相独立的变量，用表格穷举，而不是让模型自由发挥五次。
```csv
方案,主色,圆角策略,分割线,投影,图标风格
A_克制,#2F6BFF,卡片 16px / 按钮 48px,1px 实线,无,线性 1.5px
B_柔和,#5B8CFF,卡片 20px / 按钮 48px,无分割线靠间距,极轻投影,线性 2px
C_高对比,#111827,卡片 8px / 按钮 12px,1px 实线加深,无,面性
D_轻拟物,#2F6BFF,卡片 16px / 按钮 48px,1px 实线,内阴影 2px,线性 1.5px
```
再写个小脚本把每一行拼成完整提示词，省掉手改错字：
```python
import csv
TEMPLATE = open("prompt_template.txt", encoding="utf-8").read()
with open("variants.csv", encoding="utf-8") as f:
for row in csv.DictReader(f):
name = row.pop("方案")
body = TEMPLATE.format(**row)
with open(f"prompts/{name}.txt", "w", encoding="utf-8") as out:
out.write(body)
print(f"已生成 {name}.txt")
```
prompt_template.txt 里用 {主色}、{圆角策略} 这样的占位符，与 CSV 列名一一对应。生成后逐条提交（手动或用接口，端点与鉴权方式以官方文档当前版本为准），把结果按 方案名_轮次.png 存好。
一个实操建议：批量不要一次跑十个。先跑 2 个方案验证提示词是否稳定，确认输出结构没跑偏，再放开剩下的。否则十个方案十个错法，返工成本更高。
步骤 5：设计走查
把原图、各方案图、叠图差异并排放在看板上，逐条打勾。检查清单按顺序过：
1. 控件数量：列表 5 行还是 4 行？有没有多出来的角标？
2. 控件顺序：第 3 项还是「隐私」吗？
3. 文案完整性：有没有被模型改写、简化、翻译？
4. 对齐基准：所有列表项的左边缘是否落在同一条竖线上？
5. 间距容差：行高、内边距是否在 ±4px 内？
6. 触控目标：按钮和可点区域是否达到平台规范的最小尺寸（移动端一般不小于 44×44pt / 48×48dp）。
7. 对比度：正文文字与背景的对比度是否达到可读标准，浅灰字要重点看。
8. 长文案：把最长那条文案临时加长 30%，看是否截断得当。
9. 深色模式：如果产品需要，单独跑一版，别指望自动适配。
10. 图标语义：「存储空间」的图标还是硬盘而不是云朵吗？
走查结论写成三档：通过 / 微调后通过 / 重做。只对「微调后通过」的项做局部重绘，别整张重来。
有一点必须提前对齐预期：文字不要指望模型渲染准确。生成图里的中文字经常糊或者错字，这是常态。正确做法是把模型输出当成「视觉参考稿」，回到设计工具里重新打字、重新排字，把文字层做成真实文本。交付物里的文字必须是可编辑的。
步骤 6：交付导出
交付的是结构，不是那张图。按这个目录整理：
```text
deliver/
├── 00_readme.md # 方案说明、变更点、已知偏差
├── 01_reference/ # 原始截图
├── 02_concept/ # 各方案生成图，按方案名_轮次命名
├── 03_final/ # 定稿位图，@1x @2x @3x
├── 04_assets/ # 切图，按 模块_控件_状态@倍率.png 命名
└── 05_review/ # 走查表、叠图差异
```
切图命名统一，例如 settings_row_icon_storage@2x.png、settings_btn_primary_normal@3x.png。位图导出用 PNG（有透明）或高质量 JPEG（纯色背景大图），图标优先导出 SVG。
00_readme.md 里写清三件事：这版改了哪些视觉变量、哪些地方是模型生成后人工重排的、还有哪些已知偏差没修（比如某个图标暂时用了近似款）。这份说明比图本身更能减少来回沟通。
常见坑与排错
模型自作主张加了卡片或分区。 说明禁止项不够硬。把「禁止新增卡片」提到提示词最前面，并且加一条「如果必须分组，只能用间距分组，不能用背景色块」。仍然出现就改用局部蒙版，只框列表区。
每轮出图位置都在漂。 多半是整图重绘 + 参考图权重不够。改成链式编辑：第二轮用第一轮通过的那张当参考图，而不是一直拿原图当参考。
文案被改写或变成乱码。 图像模型对文字的还原能力有限。策略是：提示词里明确「文案仅作占位，不要求渲染质量」，把精力放在布局上，文字后期重排。不要为了修一个字反复重绘十次。
列表行数被压缩。 长列表在缩图时容易被模型合并。解决办法是提高输入分辨率，或者分上下两段分别编辑再拼。
间距肉眼看着对，量出来差一截。 这是常态，靠叠图找出来，然后在设计工具里手动挪，不要指望下一轮生成就准。
深色模式直接反色。 反色会把品牌色一起反过来。深色模式单独写一版提示词，明确背景色值和前景色值。
批量跑完发现十个方案全跑偏。 反思提示词骨架：是不是把风格描述写在了约束前面，导致模型先看风格后看约束。把「必须保持」和「禁止」放在风格之前，权重会明显不同。
下一步建议
先把这套流程在一个页面上跑通，别一上来就改整个 App。选一个结构简单、控件类型少的页面（设置页、详情页）做样板，把提示词模板、变量表、走查清单三样东西沉淀成团队文件。
第二件事是建一份「视觉变量字典」：把主色、圆角、间距、字重这些可调项固定成枚举值，写进 CSV 的列里。这样后面任何人接手，改的都是值，不是措辞，出图稳定性会明显提升。
第三件事是明确分工边界：模型负责「快速产出可比对的视觉方向」，设计工具负责「精确对齐与文本落地」，两者之间的交接物就是那份走查表和叠图。把这条界线讲清楚，团队里就不会有人期待一次生成直接交付。
最后，把每轮失败的提示词和被否决的原因记下来。这类经验比模板本身值钱——你会慢慢摸清哪些约束是模型真的听得懂，哪些只是自己以为写清楚了。