ReDesign：用 Agentic Decomposition 把设计稿图片变回可编辑文件，前端工程师该关注什么

每次拿到一张设计稿截图，第一反应是什么？——问设计师要原始文件。但现实是，设计师交付的往往就是一张图，而你需要把它转成代码。这件事，在设计工作流里也在发生：Figma 文件丢了，PSD 只有截图，甲方给的参考图只有 PNG。

KAIST AI、Helmholtz Munich 和 Korea University 的研究团队在 ECCV 2026 发了一篇论文，叫 ReDesign，提出了一个用 AI Agent 把光栅图像还原成可编辑设计文件的技术方案。

核心问题是：一张图片丢失了所有结构信息——哪些像素属于哪个图层、字体参数是什么、形状的矢量路径在哪里——但我们希望从这些像素里把完整的设计层次树重建出来，让文字可编辑、颜色可替换、布局可调整。

ReDesign 的思路是让一个视觉语言模型（VLM）当控制器，从整张图作为根节点开始，逐步向下扩展出一棵可编辑的层级树。每一层展开时，控制器从五个专用工具里选：文字识别提取、多层分解、连通分量标记、检测与分割、矢量化与字体。每个工具输出一个候选结果，然后经过一次 graceful verification 验证：接受、裁剪或重试。这样单步决策的粒度小，错误不会级联放大，避免了全量重跑。

对比几个基线方法，在 Figma-909 这个包含 909 个真实设计文件和 14796 条编辑指令的基准上，ReDesign 在所有指标上都是第一。在 PQ（感知质量）和 F1 上尤为突出，分别达到 45.37 和 0.535，而之前的 SOTA 方法 Qwen-Image-Layered 是 35.37 和 0.429。

为什么这个研究值得前端工程师注意？两件事。

第一，它的思路和前端工程化里从设计稿提取结构的目标是一致的。现在很多团队在用 Figma API 或者 design token 工具做设计到代码的转换，ReDesign 提供了一个纯视觉逆向的新路径——不依赖 API，直接从截图重建层级。这个能力成熟以后，设计交付的流程会进一步简化，AI 自动从截图生成可编辑组件的能力会大幅提升。

第二，它的 graceful verification 机制对工程化有直接参考价值。Agent 在长流程里单步验证、拒绝错误结果而不是让错误级联传播，这个模式可以用在任何多步骤的前端 AI 流程里，比如 AI 生成代码 → lint → preview → 确认 → 提交这个循环，每一次验证失败就近拦截而不是全流程重跑。

下一步可以关注两个方向：如果你的团队在做设计系统或者 AI 生成 UI 方向，可以跟进 ReDesign 的代码仓库（GitHub 有开源），看它的工具链设计是否可以被借鉴集成；如果你的工作流里有大量从图片恢复结构的需求，这个方案可能是目前最接近实用的一个，benchmark 数据比较扎实。

论文：arXiv 2607.25565，项目主页有 interactive demo 可体验。