DesignAsCode: 그래픽 디자인 생성에서 구조적 편집 가능성과 시각적 충실도를 연결하는 방법

DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation

그래픽 디자인 생성은 높은 시각적 충실도와 세밀한 구조적 편집 가능성 사이의 균형을 요구합니다. 그러나 기존 접근 방식은 일반적으로 편집이 불가능한 래스터 이미지 합성 또는 시각적 콘텐츠가 없는 추상적인 레이아웃 생성으로 나뉩니다. 최근에는 이 두 가지 접근 방식을 결합하려는 시도가 있지만, 표현력이 부족하고 폐루프 시스템이 아니기 때문에 종종 경직된 구성 체계와 해결할 수 없는 시각적 불일치(예: 텍스트-배경 충돌) 문제가 발생합니다. 이러한 문제점을 해결하기 위해, 우리는 그래픽 디자인을 HTML/CSS를 사용한 프로그래밍 기반 합성 작업으로 재정의하는 새로운 프레임워크인 DesignAsCode를 제안합니다. 구체적으로, 우리는 의미론적 계획기(Semantic Planner)를 사용하여 동적이고 가변적인 깊이의 요소 계층 구조를 구성하고, 렌더링 오류를 수정하기 위해 코드를 반복적으로 최적화하는 시각 인지 반사(Visual-Aware Reflection) 메커니즘을 통합하는 계획-구현-반사(Plan-Implement-Reflect) 파이프라인을 소개합니다. 광범위한 실험 결과, DesignAsCode는 구조적 유효성과 심미적 품질 모두에서 최첨단 기준 모델보다 훨씬 뛰어난 성능을 보이는 것으로 나타났습니다. 또한, 우리의 코드 기반 표현 방식은 자동 레이아웃 재조정, 복잡한 문서 생성(예: 이력서) 및 CSS 기반 애니메이션과 같은 고급 기능을 가능하게 합니다. 프로젝트 페이지는 https://liuziyuan1109.github.io/design-as-code/ 에서 확인할 수 있습니다.

Graphic design generation demands a delicate balance between high visual fidelity and fine-grained structural editability. However, existing approaches typically bifurcate into either non-editable raster image synthesis or abstract layout generation devoid of visual content. Recent combinations of these two approaches attempt to bridge this gap but often suffer from rigid composition schemas and unresolvable visual dissonances (e.g., text-background conflicts) due to their inexpressive representation and open-loop nature. To address these challenges, we propose DesignAsCode, a novel framework that reimagines graphic design as a programmatic synthesis task using HTML/CSS. Specifically, we introduce a Plan-Implement-Reflect pipeline, incorporating a Semantic Planner to construct dynamic, variable-depth element hierarchies and a Visual-Aware Reflection mechanism that iteratively optimizes the code to rectify rendering artifacts. Extensive experiments demonstrate that DesignAsCode significantly outperforms state-of-the-art baselines in both structural validity and aesthetic quality. Furthermore, our code-native representation unlocks advanced capabilities, including automatic layout retargeting, complex document generation (e.g., resumes), and CSS-based animation. Our project page is available at https://liuziyuan1109.github.io/design-as-code/.