Editable Visual Design

While diffusion base models such as GPT-Image-2 and Nano-Banana exhibit remarkable visual expressiveness, their end-to-end generation inherently yields flattened bitmaps with error-prone text, precluding layer-wise post-editing. Conversely, code-based visual generation via Coding Agents provides precise layout control and decoupled layers, yet remains constrained by a lack of global aesthetic intuition and the difficulty of coding complex visual assets. To address this, we propose Editable Visual Design, a new paradigm driven by a Coding Agent. We designate the VLM as the ``creative brain'' for requirement comprehension, task planning, and aesthetic judgment, while utilizing the image generation model as an on-demand ``visual world simulator'' to synthesize standalone visual assets. Operating under an ``imagine first, then act'' closed-loop workflow, the agent generates isolated assets, writes native HTML/CSS, and iteratively refines the design against visual rendering feedback. Furthermore, Agent Design Replay faithfully reproduces the creative and reasoning trajectory akin to that of professional human designers. Ultimately, the system delivers editable artifacts with decoupled layers and real text, enabling users to perform intuitive mouse dragging and layout adjustments on a graphical user interface. Validations on posters, infographics, and other scenarios show that this paradigm successfully achieves both refined aesthetics and production-grade editability.

한 줄 요약

"Editable Visual Design"은 코드 생성과 시각 생성 모델을 결합해 편집 가능한 디자인을 실현하는 새로운 패러다임이다.

핵심 기여도

VLM을 "creative brain", 이미지 생성 모델을 "visual world simulator"로 분리하여 협업 구조를 제안.
"imagine first, then act" 워크플로우를 통해 시각적 자산 생성 후 HTML/CSS로 구현하고 반복적으로 수정.
Agent Design Replay를 통해 디자인 과정을 기록·재현, 디자인 트레이스 가능성 확보.
편집 가능한 레이어와 실제 텍스트를 갖춘 아티팩트를 제공, 마우스 드래그 및 레이아웃 조정 가능.

핵심 아이디어

기존 디퓨전 모델(GPT-Image-2, Nano-Banana)은 시각 표현력은 뛰어나지만 픽셀 이미지로 생성되어 편집 불가능한 단점이 있다. 반면, 코드 기반 디자인(Coding Agents)은 정확한 레이아웃 제어가 가능하지만, 시각적 감각 부족과 복잡한 자산 생성의 어려움이 있다. 이를 해결하기 위해, Editable Visual Design은 VLM과 이미지 생성 모델을 결합한 협업 구조를 제안한다. VLM은 요구사항 이해, 작업 계획, 미학 판단을 담당하고, 이미지 생성 모델은 필요 시 호출되어 시각적 자산을 생성한다. 이는 "imagine first, then act" 방식으로, 시각적 자산을 먼저 생성한 후 HTML/CSS로 구현하고 렌더링 피드백을 기반으로 반복적으로 수정한다. 이 과정은 디자인의 창의적 흐름을 기록하고 재현하는 Agent Design Replay를 통해 투명하게 관찰 가능하다.

기술적 접근법

**VLM (Visual Language Model)**: 요구사항 이해, 작업 계획, 미학 판단을 담당.
**Image Generation Model**: "visual world simulator"로, 필요 시 호출되어 시각적 자산 생성.
**"imagine first, then act" 워크플로우**:

1. 이미지 생성 모델을 호출하여 시각적 자산 생성.
2. HTML/CSS로 구현.
3. 렌더링 후 피드백을 기반으로 반복 수정.

**Agent Design Replay**: 디자인 과정을 기록·재현, 디자인 트레이스 가능.
**결과 아티팩트**: 레이어 분리, 실제 텍스트 포함, GUI에서 마우스 드래그 및 레이아웃 조정 가능.

주요 결과

마케팅 자료, 인포그래픽, 이벤트 포스터 등 다양한 시나리오에서 테스트.
고급 미학과 편집 가능성 모두 달성.
디퓨전 모델의 픽셀 이미지 대신, HTML/CSS 기반의 편집 가능한 아티팩트 제공.
레이어가 분리된 구조로, 텍스트, 배경, 그래픽 요소를 독립적으로 수정 가능.

의의 및 한계

**의의**: 코드 생성과 시각 생성 모델의 장점을 결합해, 디자인의 창의성과 편집 가능성 모두를 달성.
**학술적 가치**: 디자인 과정의 투명성과 재현성을 확보한 Agent Design Replay 제안.
**실용적 가치**: 마케팅, 인포그래픽 등 다양한 산업에서 즉시 활용 가능.
**한계**: 복잡한 시각 자산 생성 시 코드 기반 접근의 제약이 여전히 존재.
**미비점**: 특정 유형의 디자인에서 미학 판단의 정확도 향상이 필요.

실용적 활용

마케팅 자료, 인포그래픽, 이벤트 포스터 등 디자인 작업에 즉시 적용 가능.
GUI 기반으로 마우스 드래그 및 레이아웃 조정이 용이해, 디자이너와 협업 시 유용.
편집 가능한 아티팩트 제공으로, 디자인 수정 및 재사용이 용이한 환경 구축 가능.