WebVIA: 대화형 및 검증 가능한 UI-to-Code 생성을 위한 웹 기반 비전-언어 에이전트 프레임워크
WebVIA: A Web-based Vision-Language Agentic Framework for Interactive and Verifiable UI-to-Code Generation
November 9, 2025
저자: Mingde Xu, Zhen Yang, Wenyi Hong, Lihang Pan, Xinyue Fan, Yan Wang, Xiaotao Gu, Bin Xu, Jie Tang
cs.AI
초록
사용자 인터페이스(UI) 개발은 디자인 목업을 기능적 코드로 변환하는 과정을 필요로 하며, 이 과정은 여전히 반복적이고 노동 집약적으로 남아 있습니다. 최근 Vision-Language Models(VLMs)이 UI-to-Code 생성을 자동화하고 있지만, 이들은 상호작용성이 부족한 정적 HTML/CSS/JavaScript 레이아웃만 생성합니다. 이를 해결하기 위해 우리는 상호작용형 UI-to-Code 생성 및 검증을 위한 최초의 에이전트 기반 프레임워크인 WebVIA를 제안합니다. 이 프레임워크는 세 가지 구성 요소로 이루어집니다: 1) 다중 상태 UI 스크린샷을 캡처하는 탐색 에이전트, 2) 실행 가능한 상호작용 코드를 생성하는 UI2Code 모델, 3) 상호작용성을 검증하는 검증 모듈. 실험 결과, WebVIA-Agent는 범용 에이전트(예: Gemini-2.5-Pro)보다 더 안정적이고 정확한 UI 탐색을 달성함을 보여줍니다. 또한, 미세 조정된 WebVIA-UI2Code 모델은 실행 가능하고 상호작용적인 HTML/CSS/JavaScript 코드 생성에서 상당한 향상을 보이며, 상호작용형 및 정적 UI2Code 벤치마크 모두에서 기본 모델을 능가합니다. 우리의 코드와 모델은 https://zheny2751-dotcom.github.io/webvia.github.io/{https://webvia.github.io}에서 이용 가능합니다.
English
User interface (UI) development requires translating design mockups into functional code, a process that remains repetitive and labor-intensive. While recent Vision-Language Models (VLMs) automate UI-to-Code generation, they generate only static HTML/CSS/JavaScript layouts lacking interactivity. To address this, we propose WebVIA, the first agentic framework for interactive UI-to-Code generation and validation. The framework comprises three components: 1) an exploration agent to capture multi-state UI screenshots; 2) a UI2Code model that generates executable interactive code; 3) a validation module that verifies the interactivity. Experiments demonstrate that WebVIA-Agent achieves more stable and accurate UI exploration than general-purpose agents (e.g., Gemini-2.5-Pro). In addition, our fine-tuned WebVIA-UI2Code models exhibit substantial improvements in generating executable and interactive HTML/CSS/JavaScript code, outperforming their base counterparts across both interactive and static UI2Code benchmarks. Our code and models are available at https://zheny2751-dotcom.github.io/webvia.github.io/{https://webvia.github.io}.