mlsanityData to 14 Oct 2026

Sketch2Code: Evaluating Vision-Language Models for Interactive Web Design Prototyping

arXiv 2410.16232 ↗First posted 21 Oct 2024cs.CL cs.AIcited by 29

On the map: Multimodal LLMs / vision-language models → Chart understanding and anomaly detection

Abstract (arXiv)

Sketches are a natural and accessible medium for UI designers to conceptualize early-stage ideas. However, existing research on UI/UX automation often requires high-fidelity inputs like Figma designs or detailed screenshots, limiting accessibility and impeding efficient design iteration. To bridge this gap, we introduce Sketch2Code, a benchmark that evaluates state-of-the-art Vision Language Models (VLMs) on automating the conversion of rudimentary sketches into webpage prototypes. Beyond end-to-end benchmarking, Sketch2Code supports interactive agent evaluation that mimics real-world design workflows, where a VLM-based agent iteratively refines its generations by communicating with a simulated user, either passively receiving feedback instructions or proactively asking clarification questions. We comprehensively analyze ten commercial and open-source models, showing that Sketch2Code is challenging for existing VLMs; even the most capable models struggle to accurately interpret sketches and formulate effective questions that lead to steady improvement. Nevertheless, a user study with UI/UX experts reveals a significant preference for proactive question-asking over passive feedback reception, highlighting the need to develop more effective paradigms for multi-turn conversational agents.

Key facts. Cited by 29 papers in the map (data through 14 Oct 2026). Placed in Chart understanding and anomaly detection, one of 16 directions in Multimodal LLMs / vision-language models. Builds on 21 of its 83 references that are in the map. First posted on arXiv 21 Oct 2024.

Builds on

21 of 83 references.

Closest ancestors · 1

Same direction, newest first

  1. 2024Unlocking the conversion of Web Screenshots into HTML Code with the WebSight Dataset14 Mar

Other references · 20

  1. 2019Sentence-BERT: Sentence Embeddings using Siamese BERT-Networkscited by 9,170
  2. 2021Evaluating Large Language Models Trained on Codecited by 8,320
  3. 2021Program Synthesis with Large Language Modelscited by 3,637
  4. 2023SWE-bench: Can Language Models Resolve Real-World GitHub Issues?cited by 3,373
  5. 2024Gemini 1.5: Unlocking multimodal understanding across millions of tokens of contextcited by 3,224
  6. 2023InstructBLIP: Towards General-purpose Vision-Language Models with Instruction Tuningcited by 2,876
  7. 2023Code Llama: Open Foundation Models for Codecited by 2,139
  8. 2019Generalized Intersection over Union: A Metric and A Loss for Bounding Box Regressioncited by 1,368
  9. 2024DeepSeek-Coder: When the Large Language Model Meets Programming -- The Rise of Code Intelligencecited by 1,181
  10. 2024How Far Are We to GPT-4V? Closing the Gap to Commercial Multimodal Models with Open-Source Suitescited by 1,050
  11. 2023AlpacaFarm: A Simulation Framework for Methods that Learn from Human Feedbackcited by 748
  12. 2022InCoder: A Generative Model for Code Infilling and Synthesiscited by 498
8 more
  1. 2017pix2code: Generating Code from a Graphical User Interface Screenshotcited by 114
  2. 2023At Which Training Stage Does Code Data Help LLMs Reasoning?cited by 82
  3. 2020Deep Learning for Source Code Modeling and Generation: Models, Applications and Challengescited by 55
  4. 2024Unveiling the Impact of Coding Data Instruction Fine-Tuning on Large Language Models Reasoningcited by 31
  5. 2019Sketch2Code: Transformation of Sketches to UI in Real-time Using Deep Neural Networkcited by 23
  6. 2019Sketch2code: Generating a website from a paper mockupcited by 20
  7. 2024Frontend Diffusion: Exploring Intent-Based User Interfaces through Abstract-to-Detailed Task Transitionscited by 3
  8. 2021Automatic code generation from sketches of mobile applications in end-user development using Deep Learningcited by 2

Built on by

Cited by year (2026 to 14 Oct)

Citing papers per year: 2025: 13; 2026: 16.

29 papers.

Sort:

By area:

  1. 2025BaxBench: Can LLMs Generate Correct and Secure Backends?cited by 41
  2. 2025RECODE-H: A Benchmark for Research Code Development with Interactive Human Feedbackcited by 25
  3. 2025VinciCoder: Unifying Multimodal Code Generation via Coarse-to-fine Visual Reinforcement Learningcited by 21
  4. 2026WebCoderBench: Benchmarking Web Application Generation with Comprehensive and Interpretable Evaluation Metricscited by 18
  5. 2025P2P: Automated Paper-to-Poster Generation and Fine-Grained Benchmarkcited by 17
  6. 2025WebMMU: A Benchmark for Multimodal Multilingual Website Understanding and Code Generationcited by 16
  7. 2025From Code Foundation Models to Agents and Applications: A Comprehensive Survey and Practical Guide to Code Intelligencecited by 15
  8. 2025FronTalk: Benchmarking Front-End Development as Conversational Code Generation with Multi-Modal Feedbackcited by 14
  9. 2026WebGameBench: Requirement-to-Application Evaluation for Coding Agents via Browser-Native Gamescited by 12
  10. 2026MiniAppBench: Evaluating the Shift from Text to Interactive HTML Responses in LLM-Powered Assistantscited by 8
  11. 2025Generative Interfaces for Language Modelscited by 6
  12. 2025On the Role of Feedback in Test-Time Scaling of Agentic AI Workflowscited by 4
17 more
  1. 2026AppWorld-UL: Benchmarking Diverse Agent-User Interactions for Tool-Usecited by 4
  2. 2025WebRenderBench: Enhancing Web Interface Generation through Layout-Style Consistency and Reinforcement Learningcited by 3
  3. 2026Vision-Guided Iterative Refinement for Frontend Code Generationcited by 3
  4. 2025Paper2Web: Let's Make Your Paper Alive!cited by 1
  5. 20261D-Bench: A Benchmark for Iterative UI Code Generation with Visual Feedback in Real-Worldcited by 1
  6. 2026Generative Experiences for Digital Mental Health Interventions: Evidence from a Randomized Studycited by 1
  7. 2026Benchmarking Multimodal LLMs on Code Generation for Complex Interactive Webpagescited by 1
  8. 2026PPTBench: Can Coding Agents Reconstruct the Visual World through Structured, Editable Slidescited by 1
  9. 2025Exploring Student Choice and the Use of Multimodal Generative AI in Programming Learningcited by 0
  10. 2025Sketch-to-Layout: Sketch-Guided Multimodal Layout Generationcited by 0
  11. 2026CodeMMR: Bridging Natural Language, Code, and Image for Unified Retrievalcited by 0
  12. 2026LongWebBench: Evaluating Structural and Functional Webpage Generation in Long-Horizon Settingscited by 0
  13. 2026UI2App: Benchmarking Visual Interaction Inference in Executable Web Application Generationcited by 0
  14. 2026MV-Bench: Benchmarking Multimodal Large Language Models for Coordinated Multi-View Interface Constructioncited by 0
  15. 2026Rendering-in-the-Loop: An Execution-Driven Agent for Interactive Web Developmentcited by 0
  16. 2026Beyond Static Charts: Can Language and Vision Language Models Generate Interactive Data Visualization Interfaces?cited by 0
  17. 2026AUV-Bench: Aesthetic Understanding and Generation Evaluation for User Interfacescited by 0

Similar, not cited

Close in wording, no citation either way

  1. 2025WebVIA: A Web-based Vision-Language Agentic Framework for Interactive and Verifiable UI-to-Code Generation
  2. 2025GraphicBench: A Planning Benchmark for Graphic Design with Language Agents
  3. 2026Vision2Web: A Hierarchical Benchmark for Visual Website Development with Agent Verification
  4. 2024SketchAgent: Language-Driven Sequential Sketch Generation
  5. 2025CANVAS: A Benchmark for Vision-Language Models on Tool-Based User Interface Design
  6. 2024Design2Code: Benchmarking Multimodal Code Generation for Automated Front-End Engineering
  7. 2024Interaction2Code: Benchmarking MLLM-based Interactive Webpage Code Generation from Interactive Prototyping
  8. 2026Enabling Creative Exploration for Vibe Design Agents