Generating Reusable Web Components from Mockups

The transformation of a user interface mockup designed by a graphic designer to web components in the final app built by a web developer is often laborious, involving manual and time consuming steps. We propose an approach to automate this aspect of web development by generating reusable web components from a mockup. Our approach employs visual analysis of the mockup, and unsupervised learning of visual cues to create reusable web components (e.g., React components). We evaluated our approach, implemented in a tool called VizMoD, on five real-world web mockups, and assessed the transformations and generated components through comparison with web development experts. The results show that VizMOD achieves on average 94% precision and 75% recall in terms of agreement with the developers' assessment. Furthermore, the refactorings yielded 22% code reusability, on average.

• Publication year

  2018

• Venue

  International Conference on Automated Software Engineering

• Publication date

  2018-09-01

• Fields of study

  Computer Science

• Identifiers
  DOI 10.1145/3238147.3238194
• External record

  Open on Semantic Scholar

• Source metadata

  Semantic Scholar

• No claims are published for this paper.

• No concepts are published for this paper.

• Web Canvas Testing Through Visual Inference

  2018cited by this paper
• Visual web test repair

  2018cited by this paper
• Pesto: Automated migration of DOM‐based Web tests towards the visual approach

  2018cited by this paper
• CSSDev: Refactoring Duplication in Cascading Style Sheets

  2017cited by this paper
• Mining implicit design templates for actionable code reuse

  2017cited by this paper
• A layout inference algorithm for Graphical User Interfaces

  2016cited by this paper
• Migrating cascading style sheets to preprocessors by introducing mixins

  2016cited by this paper
• Clone-based and interactive recommendation for modifying pasted code

  2015cited by this paper
• Automating the Extraction of Model-Based Software Product Lines from Model Variants (T)

  2015cited by this paper
• Explaining Visual Changes in Web Interfaces

  2015cited by this paper
• Enhancing Clone-and-Own with Systematic Reuse for Developing Software Variants

  2014cited by this paper
• Discovering refactoring opportunities in cascading style sheets

  2014cited by this paper
• Software clone detection: A systematic review

  2013cited by this paper
• Density-Based Clustering Based on Hierarchical Density Estimates

  2013cited by this paper
• Searching for better configurations: a rigorous approach to clone evaluation

  2013cited by this paper
• Compiling mockups to flexible UIs

  2013cited by this paper
• An empirical study on clone stability

  2012cited by this paper
• CrossCheck: Combining Crawling and Differencing to Better Detect Cross-browser Incompatibilities in Web Applications

  2012cited by this paper
• The NumPy Array: A Structure for Efficient Numerical Computation

  2011cited by this paper
• Automatic Histogram Threshold Using Fuzzy Measures

  2010cited by this paper
• Image retrieval based on multi-texton histogram

  2010cited by this paper
• Do code clones matter?

  2009cited by this paper
• Comparison and evaluation of code clone detection techniques and tools: A qualitative approach

  2009cited by this paper
• NICAD: Accurate Detection of Near-Miss Intentional Clones Using Flexible Pretty-Printing and Code Normalization

  2008influential reference
• Assessing the effect of clones on changeability

  2008cited by this paper
• Doing more than teaching students: opportunities for CALL in the learning sciences

  2007cited by this paper
• Using Server Pages to Unify Clones in Web Applications: A Trade-Off Analysis

  2007cited by this paper
• A Survey on Software Clone Detection Research

  2007cited by this paper
• Migrating Multi-page Web Applications to Single-page AJAX Interfaces

  2006cited by this paper
• An investigation of cloning in web applications

  2005cited by this paper
• Understanding cloned patterns in Web applications

  2005cited by this paper
• Function Clone Detection in Web Applications: A Semiautomated Approach

  2004cited by this paper
• Practical language-independent detection of near-miss clones

  2004cited by this paper
• Reengineering Web applications based on cloned pattern analysis

  2004cited by this paper
• Universal principles of design : 100 ways to enhance usability,influence perception, increase appeal, make better, designdecisions, and teach through design

  2003cited by this paper
• Finding function clones in Web applications

  2003cited by this paper
• Resolution of static clones in dynamic Web pages

  2003cited by this paper
• CCFinder: A Multilinguistic Token-Based Code Clone Detection System for Large Scale Source Code

  2002cited by this paper
• Reverse engineering to achieve maintainable WWW sites

  2001cited by this paper
• The magical number 4 in short-term memory: A reconsideration of mental storage capacity

  2001cited by this paper
• Sitemaps, storyboards, and specifications: a sketch of Web site design practice

  2000cited by this paper
• Web components

  1997cited by this paper
• Survey on user interface programming

  1992cited by this paper
• A primer of visual literacy

  1973cited by this paper

• Unsupervised Discovery of Salient Design Features of Websites

  2025cites this paper
• VISCA: Inferring Component Abstractions for Automated End-to-End Testing

  2025cites this paper
• ULMGNN: Fragmented layer grouping in GUI designs through graph learning based on multimodal information

  2025cites this paper
• From Words to Conversions: Leveraging Large Language Models for Dynamic Landing Page Generation

  2025cites this paper
• Detection of code smells in react with TypeScript applications

  2025cites this paper
• Advancing Code Generation from Visual Designs through Transformer-Based Architectures and Specialized Datasets

  2025cites this paper
• From Models to Interfaces: Leveraging the Two-Hemisphere Model for Automated UI Generation

  2024cites this paper
• A systematic literature review on automatic website generation

  2023cites this paper
• The Future of Web Development and Emerging Technologies

  2023cites this paper
• UIBee: An improved deep instance segmentation and classification of UI elements in wireframes

  2023cites this paper
• WebDraw: A machine learning-driven tool for automatic website prototyping

  2023cites this paper
• Detecting code smells in React-based Web apps

  2022cites this paper
• A Survey on the Use of Computer Vision to Improve Software Engineering Tasks

  2022cites this paper
• Psychologically-inspired, unsupervised inference of perceptual groups of GUI widgets from GUI images

  2022cites this paper
• UX-Painter: Fostering UX Improvement in an Agile Setting

  2021cites this paper
• Automatic code generation from sketches of mobile applications in end-user development using Deep Learning

  2021cites this paper
• Semantic Web Accessibility Testing via Hierarchical Visual Analysis

  2021cites this paper
• Synthesis of web layouts from examples

  2021cites this paper
• Analisis Penerapan Code Splitting Library React pada Aplikasi Penjualan Mebel Berbasis Website

  2021cites this paper
• On the (un‐)adoption of JavaScript front‐end frameworks

  2021cites this paper
• Recent Progress in Automated Code Generation from GUI Images Using Machine Learning Techniques

  2020cites this paper
• 30 Years of Software Refactoring Research: A Systematic Literature Review

  2020influential citation
• Live web prototypes from hand-drawn mockups

  2019cites this paper
• How artificial intelligence can improve web development and testing

  2019cites this paper
• Visual web test repair

  2018cites this paper
• TWO-HEMISPHERE MODEL TRANSFORMATION-BASED GENERATION OF WEB APPLICATION USER INTERFACE PROTOTYPE

  year unknowncites this paper