ReDesign

Recovering Editable Design Structures from Images via Agentic Decomposition

Jooyeol Yun* Jintae Park* Hyesu Lim Junha Hyung
Hyungjin Chung Jaegul Choo
* Equal contribution
KAIST AI
Paper Code Dataset

Try the Edit Playground

Pick a design to see how the ReDesign agent parsed it.

Click an element to select · drag to move · use the handle to rotate.
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 with real fonts, vector shapes with fills, grouped elements with z-order,
recovered from a single image, ready to re-edit.

What ReDesign Does

ReDesign recovers a fully editable design hierarchy from a single image.
A vision-language controller grows a layer tree breadth-first and a verifier checks every step,
producing semantic text layers with real fonts, vector shapes with fills, grouped elements with z-order, and isolated elements that survive real edits without disturbing the rest of the design.

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

Figma-909 benchmark; 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
Each row shows design input and outputs across methods. Highlighted elements (green box):
ReDesign recovers them cleanly and completely; baselines miss, break, or distort them.

Editability: Structure That Survives Edits

Six atomic edits on predicted 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 (orange/teal line) 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; 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; 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

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