ReDesign

Recovering Editable Design Structures from Images via Agentic Decomposition

Jooyeol Yun*1 Jintae Park*1 Hyesu Lim2 Junha Hyung1
Hyungjin Chung3,4 Jaegul Choo1
* Equal contribution
1KAIST AI, Daejeon, Korea 2Helmholtz Munich, Neuherberg, Germany 3Korea University 4EverEx
KAIST AI Helmholtz Munich Korea University EverEx
ECCV 2026
Paper Code Dataset
The Problem

A flat image is a dead end.

When the design file is lost, only pixels remain.
You can't move an element, recolor a shape, fix a typo, or reflow the layout.

The Idea

ReDesign grows the design back.

A vision-language controller rebuilds the layer hierarchy as a tree, coarse to fine,
verifying every step until each element is atomic.

The Result

Every element, editable again.

Text layers, vector shapes, grouped elements with z-order
recovered from a single image, ready to re-edit.

ReDesign Recovery: Edit Playground

1Pick a design to see how the ReDesign agent recovered editable design structures.

2Click an element to select · drag to move · use the handle to rotate.3On the right, adjust the selected element’s opacity, rotation, scale, color, and z-order, or delete it.

What ReDesign Does

ReDesign recovers a fully editable design hierarchy from a single image.
A vision-language agent extracts semantic text layers, vector shapes, and grouped elements, making every element editable.

ReDesign: from flat image to editable design

The Agentic Approach: Grow the Tree

Starting from the whole image as the root, a VLM controller expands an editable layer hierarchy
by selecting and composing specialized tool actions across modalities,
checking the validity of each editable element, and repeating until every element is atomic and editable.

Five Tool-Backed Actions

Text extraction
Multi-layer decomposition
Connected Component Labeling
Detection & Segmentation
Vectorization & Typography
Agentic tree expansion with tool actions and verification

Reconstruction Accuracy

On the Figma-909 benchmark of 909 real-world designs, ReDesign wins on every metric.

Method L1 ↓ PSNR ↑ LPIPS ↓ PQ ↑ F1 ↑
VTracer 0.0977 20.487 0.1917 24.64 0.309
LayerD 0.0704 16.141 0.3381 30.09 0.350
Qwen-Image-Layered 0.0493 26.192 0.1073 35.37 0.429
Tool Agent 0.0493 13.923 0.3869 45.33 0.527
Ours 0.0431 26.286 0.0883 45.37 0.535

Per-Element Reconstruction

Per-element reconstruction across methods
The ReDesign agent reconstructs each design element (highlighted in green) more accurately than the baselines.

Editability: Structure That Survives Edits

Six atomic edits on reconstructed designs, measured against ground truth. ReDesign dominates on all axes.

Edit Types Tested

Delete
Opacity
Recolor
Rotation
Transition
Z-Order
Editability metrics across atomic edits
(a) SSIM after edit replay. ReDesign is highest on all axes. (b) Text recall after text edits.
ReDesign dominates. Results show structure survives diverse real edits.

Edit Examples: Before & After

ReDesign applies each edit cleanly to the correct element. Baselines move wrong regions or corrupt the layout.

Qualitative edit examples
Each row: ground-truth edit (left) vs. output under each method.
ReDesign's edits are precise and preserve layout integrity, while baselines fail or distort.

Why Structure Beats Pixel Regeneration

Generative editors (Nano Banana 2) edit pixel-space: instructions leak, layouts blur, precision fails.
ReDesign exposes discrete layers with explicit position and rotation, so edits execute exactly.

ReDesign vs generative editor precision
Three move/rotate instructions: ReDesign (green, top) executes each precisely on the isolated layer.
Nano Banana 2 (red, bottom) misplaces and corrupts surrounding design.

Figma-909: The Benchmark

To evaluate editability at scale, we introduce the Figma Edit Replay Benchmark.

Real-World Frames
909
Unique Authors
288
Figma Files
389
License
CC BY 4.0

All 909 frames redistributed under CC BY 4.0 with full attribution. Download on HuggingFace.

ReDesign: Recovering Editable Design Structures from Images via Agentic Decomposition

Figma-909: CC BY 4.0 · Code: MIT