← 返回 2026-07-29

ReDesign:基于智能体分解从图像中恢复可编辑设计结构 ReDesign: Recovering Editable Design Structures from Images via Agentic Decomposition

Jooyeol Yun, Jintae Park, Hyesu Lim, Junha Hyung, Hyungjin Chung, Jaegul Choo 📅 2026-07-28 👍 62 2026-08-03 18:30
可编辑设计重建 图像分层分解 层次化树扩展 矢量化 视觉语言模型智能体

用VLM智能体逐步生长可编辑图层树并逐节点验证修复,从栅格图重建设计文件。

前置知识

图层层次结构(Layer Hierarchy)

Figma、Illustrator、Canva 等设计软件以树状结构组织设计:根节点下是若干 Group,每个 Group 又包含子 Group 或叶子 Layer,每个叶子携带排印、矢量路径、颜色、位置等可编辑参数。栅格化把这一结构压扁成像素,丢失了对象归属、属性和 z-order 信息。

ReDesign 的核心思想就是把重建任务建模成恢复这棵树,理解「为什么可编辑性等价于层次结构恢复」才能理解全文的方法设计。

VLM 智能体(Vision-Language Model Agent)

在语言/视觉语言模型基础上接入外部工具模块,通过动作选择与执行实现多步问题求解。ReDesign 中的控制器是一个 VLM,每一步从固定动作集中选一个动作来扩展当前节点。

论文的方法本质是一个 agentic 系统,需要理解 agent 如何循环地「选动作→执行工具→验证」来推进任务。

矢量化与 SVG 生成

把栅格图形转换为矢量路径(如 SVG 程序),从经典描摹算法到学习式生成矢量基元。矢量路径暴露几何、缩放、外观的直接控制,是重建可编辑形状的关键工具之一。

矢量化是 ReDesign 动作空间的一类核心工具,论文强调要「选择性地」应用它而非无差别使用,否则会破坏复杂纹理的可编辑性。

编辑重放(Edit Replay)评估

对同一编辑指令分别在 ground-truth 设计文件和重建输出上执行,然后比较两次渲染结果的相似度(如 SSIM)。本文还用 IoU 匹配目标元素,对文本编辑额外用 OCR 检查 recall。

这是论文提出的全新评估范式,理解它才能理解为什么「重建看起来像」不等于「可编辑」,以及作者如何量化 editability。

研究动机

设计师日常要把同一设计跨媒体平台适配、为新活动重排布局、为无障碍做调整,但现实中大量设计资产和交付物仅以栅格导出或截图形式存在,因此首要任务是从栅格图像重建出可编辑版本(如 Figma、Illustrator 文件)。今天这种重建主要靠人工、繁琐且易错,迫使设计师在开始任何有意义的编辑前就得先重新绘制。栅格化本质是从可编辑图层结构到像素的多对一映射,丢失了「哪些像素属于哪个对象、哪些属性产生了它们、元素如何分层」的全部信息,因此从图像恢复原始结构是一个不适定的逆问题。已有研究各自解决了关键子问题——文字识别[7]、图层分解[20,34,48]、形状提取[27,44]——但把组件简单串成端到端系统往往不可靠:一个工具的错误会级联,固定的工作流序列也很难适应真实设计的多样性。

本文的目标是本文目标是构建一个能自动从栅格图像恢复完整可编辑设计结构的系统,输出一个 JSON 层次结构,包含矢量形状、颜色、文本内容、字体、分组与 z-order 等可编辑元数据,使得重建结果既能匹配原图外观、又能像真正的设计文件一样被精确编辑。系统要在真实世界的复杂设计上同时取得强视觉保真度与最高的可编辑性,并降低设计师重建的周转时间。作者还希望验证:对 agent 的进展表示施加结构约束,能否同时改善可控性、准确性与效率。

与已有工作不同的是,本文的独特切入角度在于把重建任务建模为「恢复可编辑图层层次树」的逆问题,而不是端到端学习或串行工具链。它从全图作为根节点出发,由 VLM agent 反复选择节点并用固定动作集组合工具序列产生子节点,渐进地把层次细化到原子可编辑元素。更关键的是,作者在每一次节点扩展上都挂一个 graceful verifier,对「子节点是否共同解释父区域」做局部判别(接受/剪枝/重试),从而把错误限制在单个父-子提议内,避免错误累积到深层分支导致必须从头重跑的硬失败——这正是和「终末端验证的串行 agent」最本质的区别。

核心方法

直觉上,可编辑设计天然就是图层层次(Group 与 Layer 组织成树),所以重建一个栅格图最自然的表示就是恢复这棵树。ReDesign 维护一棵 partial reconstruction tree,节点元数据随扩展逐步填充;控制器是一个 VLM,每一步根据某个节点的部分渲染及其扩展历史,从固定动作集中选一个动作,产生若干子节点。整个过程从全图(根节点)开始,按「由粗到细」的顺序生长:早期决策确立高层分组与排序,后期决策把每个组细化为可编辑叶子,直到树具备足够元数据可导出为可编辑 JSON。一次扩展只依赖父节点及其直系状态(lineal memory),不依赖兄弟节点,因此多个前沿叶节点可以并行扩展。系统共定义 6 类动作,覆盖文本、对象与分层三大场景,且模块化、可随新工具扩展。

核心创新是「结构化树扩展 + graceful verification」的组合。与 ReAct 式串行工具链(一条线性轨迹调用工具、最后才验证)或单纯分层分解不同,ReDesign 把重建组织成树,使每次扩展的错误范围被天然限制在单个父-子提议内。graceful verifier 在每次扩展时依据两条简单准则评估候选子节点:(1) 子节点并集是否覆盖父区域内容、(2) 子节点是否超出父区域内容(产生幻觉)。验证给出三种结果——接受、剪枝无效或冗余的子节点、或用不同工具/超参重试同父节点。这种「在分叉点立即修复」使验证既局部又定义明确,错误在更深的分支建立之前就被纠正,避免了级联工具错误导致的硬失败与大规模重跑,同时让 agent 收到与单个父-子决策直接绑定的结构化反馈。

方法步骤详情

方法的完整流程如下:(1) 输入栅格图像作为根节点,初始化 partial reconstruction tree。(2) 控制器从 6 类动作中选择:① 文本提取——OCR[7] 定位读取文字,分割[46]切出文字像素,inpainting[33] 填补空缺区域,得到一个文本图层 + 一个剩余背景图层;② 多层分解——layered image 生成模型[48]按视觉复杂度自适应选择层数分离图层;③ 连通域标记[28]——当一层含空间不相交的多个元素时切分为不重叠子节点;④ 检测与分割——VLM[10]识别前景元素,open-set detector[21]定位,segmentation[16]提取,inpainting[33,53]填补被裁出区域,得到前景节点+背景节点;⑤ 矢量化——叶子节点按内容类型最终化为 SVG 路径[6]或带位置元数据的栅格图层,文本叶子再做字体识别[39]与排印属性拟合。每步产出子节点后,(3) graceful verifier 检查覆盖性与越界性,接受/剪枝/重试。(4) 每个 node 维护 lineal memory,记录工具输入输出、工具选择与超参、验证结果与失败原因,使下一次决策可复用有效配置、避免重复失败配置,从而支持局部修复。(5) 由于扩展仅依赖父节点与直系历史,并行扩展所有前沿叶节点,最多取得 7.1× 加速。(6) 树充分填充后导出为可编辑 JSON 层次。

技术新颖性

技术新颖性体现在四个层面:首先,问题表述上的创新——把可编辑重建建模为结构化树扩展而非串行工具调用,使 agent 的进展表示本身带有层次语义。其次,graceful verification 引入「接受/剪枝/重试」三态局部判别,针对分层生长特有的失败模式(兄弟节点重复、父区域覆盖不全、幻觉内容),把验证从「终末端硬判」变为「分叉点软引导」,这是对以往 agentic 视觉流程只做末端验证[26,30]的本质改进。第三,lineal memory 的设计——每节点只记录从根到自身的直系历史、不追踪兄弟状态——既避免指数增长又消除并行执行的并发冲突,使多叶节点并行扩展成为可能。第四,灵活性:因为重建是 agentic 的,用户可以通过 prompt 请求更细或更粗的分解,系统继续扩展树以匹配编辑意图,而不被固定训练分布的粒度束缚。

ReDesign 总览:VLM 控制器从动作集选工具生长层次,并在每次扩展做 graceful verification。
Fig. 2: ReDesign 总览:VLM 控制器从动作集选工具生长层次,并在每次扩展做 graceful verification。

实验结果

作者构建了 Figma Edit Replay Benchmark:909 个原始 Figma 设计文件(带 ground-truth 层次与属性),并据此生成 14,796 条受控编辑指令(平均每设计 15 条),覆盖 reposition、text edit、recolor、deletion、rotation、re-ordering 等类型;统计上该数据集每样本元素数是 Crello[43] 的 2.62 倍、平均层深 1.35 倍、每样本文本元素 2.45 倍,更贴近真实复杂设计。在可编辑性上(图4),ReDesign 在所有编辑类型上 SSIM 最高,尤其在 recolor、opacity 等属性编辑上明显领先(baseline 因目标元素未干净分离导致编辑渗入背景/相邻图层);文本编辑后 text recall 也最高,而 Tool Agent 因长串行链错误级联急剧退化。重建准确率方面,表1(Figma)ReDesign 全面最佳:object-level L1 $0.0431\downarrow$、PSNR $26.286\uparrow$、LPIPS $0.0883\downarrow$、layout PQ $45.37\uparrow$、F1 $0.535\uparrow$,相比次优 Tool Agent(PQ 45.33、F1 0.527、PSNR 仅 13.923)在全局保真上大幅领先。表2(Crello,无该域训练)layout 仍最强(PQ $49.57$、F1 $0.587$)。效率上,图7(a) 显示 graceful verification 比稀疏终端验证更快、更准、且工具调用次数方差更低;图7(b) 并行树扩展相对串行取得 7.1× 加速。图8 对比 Nano Banana 2 表明,即便 SOTA 图像编辑模型在精细空间调整上也会误改无关区域、改变宽高比,凸显显式可编辑表示的必要性。

Figma 数据集上的重建准确率。
Table 1: Figma 数据集上的重建准确率。
Crello 数据集上的重建准确率。
Table 2: Crello 数据集上的重建准确率。
(a) 各编辑类型的编辑重放 SSIM;(b) 文本编辑后的文本 recall。
Fig. 4: (a) 各编辑类型的编辑重放 SSIM;(b) 文本编辑后的文本 recall。
各基线产生的可编辑格式上执行编辑指令的定性示例。
Fig. 5: 各基线产生的可编辑格式上执行编辑指令的定性示例。
与基线方法的分解准确率对比。
Fig. 6: 与基线方法的分解准确率对比。
(a) 验证成本-准确率权衡;(b) 并行执行的运行时加速。
Fig. 7: (a) 验证成本-准确率权衡;(b) 并行执行的运行时加速。
查看结构化数据
任务指标本文基线提升
Figma 数据集视觉重建 object-level L1 误差 0.0431 Qwen-Image-Layered/Tool Agent 0.0493;LayerD 0.0704;VTracer 0.0977 相对次优降低约 12.6%,全面最优
Figma 数据集全局保真 PSNR / LPIPS 26.286 / 0.0883 Tool Agent 13.923 / 0.3869(全局最弱) PSNR 比 Tool Agent 高约 12.4 dB,证明结构化分解避免误差累积
Figma 数据集布局保真 PQ / F1 45.37 / 0.535 Qwen-Image-Layered 35.37 / 0.429 F1 提升 0.106,层次与排序恢复最优
Crello 数据集布局保真 PQ / F1 49.57 / 0.587 Qwen-Image-Layered 40.19 / 0.496 在无域训练下 F1 提升 0.091
推理效率 相对串行加速比 7.1×(并行树扩展) 串行工具使用 agent 1.0× 独立节点可并发调度,关键路径长度从扩展数降至树深

局限与改进

作者明确承认:单一「好的可编辑格式」难以定义,它取决于预期编辑和设计师需要的控制粒度——矢量化在布局级调整时多余,但在编辑图标/形状时却重要。由于未训练去匹配 Figma/Crello 标注的精确粒度,重建结果即便渲染外观正确,也不总能与其图层划分一一对应。我自己的观察补充几点:(1) 方法重度依赖底层 VLM controller 与一长串外部工具(OCR[7]、segmentation[16,46]、inpainting[33,53]、detector[21]、layered model[48])的质量,任一环节偏差都会影响最终层次;(2) 可编辑性评估仅用 SSIM 与文本 recall,可能遗漏语义层面的「是否真正可编辑」;(3) 仅 909 个 Figma 文件规模有限,设计风格覆盖度待验证;(4) graceful verifier 本身也依赖 VLM,其判错可能引入新的误差源;(5) 矢量化对复杂纹理/摄影内容可能失真。

独立分析的弱点

第一,强依赖 VLM backbone 与外部工具链:controller 的扩展决策质量受限于 backbone 能力,工具输出噪声会传递。改进方向是训练专用的轻量 controller、或学习自适应工具选择/超参策略,并对工具输出做置信度估计。第二,评估指标偏外观:SSIM/IoU 匹配可能错过「该层是否真正独立可编辑」的语义。改进方向是引入真实设计师的用户研究与专家评审,建立更全面的 editability 指标。第三,数据规模与多样性有限(909 Figma 文件),改进方向是扩充到更多设计类型、3D/UI/品牌物料。第四,矢量化决策较粗,对复杂纹理/摄影可能失真,改进方向是用学习式方法判断「何时该矢量化、何时该保留栅格」。第五,粒度定义主观,可改为学习用户偏好的个性化粒度。第六,实时性不足:即便 7.1× 加速,单图仍需多次 VLM 调用,对交互式场景偏慢,可考虑缓存与增量重建。

未来方向

作者提出的方向:从更广视角看,对 agent 的进展表示施加结构约束能同时提升可控性、准确性与效率,因为失败变得局部且可修复、执行可预测因而可扩展;尽管栅格式图像编辑模型能力不断增强,可编辑表示仍将必不可少,因为它通过显式对象、参数与层次提供精确实时控制。基于此成果可延伸的研究包括:(1) 扩展动作空间,接入更多新兴工具(更强的分层模型、矢量化模型、字体识别);(2) 将可编辑表示与图像编辑模型深度融合,做「先重建再编辑」的混合工作流;(3) 把框架迁移到 3D 设计、动效设计等其他创作领域;(4) 学习从用户历史编辑中推断粒度偏好;(5) 用强化学习或专家反馈直接优化 controller 的扩展策略,减少对规则式 verifier 的依赖。

复现评估

论文在图1 提到有 project page 提供交互 demo,但具体代码、模型权重与完整 benchmark 的开源情况正文未明确给出(数据集来源参考[8])。复现难度中等偏难:方法依赖一长串外部工具(OCR[7]、segmentation[16,46]、inpainting[33,53]、VLM[10]、detector[21]、layered image model[48]、vectorization[6]、font recognition[39]),需要逐一对接并保证版本一致;agent 流程涉及多次 VLM 调用与并行调度,算力与 API 成本较高;graceful verifier 与 controller 的提示工程、动作选择逻辑等实现细节需从论文推断。Figma Edit Replay Benchmark 的构建(909 文件 + 14,796 编辑指令)本身工作量巨大,若不公开则第三方难以严格复现对比。整体上,方法思想清晰可借鉴,但端到端严格复现需要相当工程投入。