product design

In enterprise-grade GUI development, the Model-View-ViewModel (MVVM) pattern is frequently misapplied due to insufficient guidance on implementation details and architectural trade-offs. Method: This study conducts a multi-vocal literature review (MLR), systematically synthesizing academic papers, technical blogs, and monographs (i.e., white and gray literature) to comprehensively analyze MVVM practice. Contribution/Results: We identify and formalize 76 novel design constructs spanning 29 dimensions—extending beyond MVVM’s traditional monolithic definition—and explicitly characterize 16 new benefits and 15 new drawbacks. Based on this analysis, we construct an actionable MVVM design knowledge graph and a structured, context-sensitive guideline to support robust architectural decision-making. Empirical validation demonstrates that our framework significantly enhances maintainability and evolvability of complex GUI systems.

Existing UI prototyping tools provide weak support for integrating design artifacts such as screenshots and sketches, hindering component reuse, semantic integration, and cross-role collaboration. This paper proposes a novel UI prototyping paradigm grounded in Conceptual Blending Theory, the first to concretize cognitive-science-based blending mechanisms into an interactive tool. It enables semantic-level element mixing across heterogeneous design examples through example-driven component extraction and semantic alignment, lightweight vision–semantics mapping, and real-time blended preview—facilitating staged intent articulation by developers. An empirical study with 14 frontend developers demonstrates that the approach significantly reduces prototype initiation time (average improvement of 42%), stimulates highly unexpected creative combinations (68% novel composition rate), and enhances design–development collaboration efficiency.

This study addresses the challenge of enhancing UI design efficiency, diversity, and creative quality through AI augmentation. We propose a human-AI collaborative “AI-inspired” design paradigm, systematically integrating large language models (LLMs), vision-language models (VLMs), and diffusion models (DMs) fine-tuned for UI generation. Our method comprises three technical pathways: (1) LLM-driven UI specification, generation, and iterative refinement; (2) VLM-enabled cross-modal semantic retrieval over application screenshots; and (3) high-fidelity UI image synthesis via domain-adapted DMs. To our knowledge, this is the first work to achieve organic, end-to-end synergy among these three state-of-the-art AI model classes in the UI design workflow—while preserving human designers’ creative agency. Empirical evaluation demonstrates significant gains in inspiration stimulation, iteration acceleration, and solution diversification. We deliver a production-ready workflow, rigorously delineate technical boundaries, and identify critical ethical challenges—including attribution, bias, and design autonomy.

Designers lack a bidirectional mechanism to translate design requirements into large language model (LLM) behaviors—and vice versa—hindering human-centered LLM integration in UX practice. Method: We propose the “Designer-Centric Adaptation” paradigm, emphasizing dynamic, human-in-the-loop shaping and responsive refinement of LLM behavior. Based on this, we developed Canvil—a Figma plugin enabling real-time parameter tuning, feedback-driven closed loops, and collaborative iterative design. Contribution/Results: Through design probes, co-design workshops with six designer pairs, and qualitative thematic coding, we demonstrate that designers effectively optimize both LLM adaptation strategies and interface designs using Canvil. We synthesize a cross-role collaboration workflow and establish the first systematic methodology for human-centered LLM adaptation—bridging the longstanding gap between UX design and LLM engineering, and advancing practice-oriented, human-centered LLM application development.

This work proposes an interactive UI design system that addresses the challenges non-expert users face in expressing design intent and trusting retrieved examples, which often lead to design fixation or disorientation. The system uniquely integrates multimodal retrieval-augmented generation (MMRAG) with source transparency, enabling fine-grained retrieval, remixing, and adaptation of UI examples at both interface and component levels. By transparently presenting metadata such as example ratings, download counts, and developer information, the system enhances users’ confidence in their design decisions. User studies demonstrate that this approach significantly improves users’ ability to achieve their design goals, facilitates efficient iteration, and encourages diverse exploration, effectively balancing controllability with creative discovery.

This work addresses the inefficiency and lack of guidance faced by front-end developers when manually selecting plausible and natural attribute values for instantiating reusable UI components within a vast design space. To tackle this challenge, the paper introduces the concept of “discriminative variants,” which uniquely integrates symbolic reasoning with large language models (LLMs). Symbolic reasoning identifies visually salient attributes, while the LLM leverages real-world knowledge to generate component instances that balance fidelity to exemplars with meaningful differentiation. This approach shifts the paradigm from ad hoc manual configuration to structured exploration of the design space. A user study (n=12) demonstrates that the generated variants effectively aid developers in comprehending the design space, significantly improving both instantiation efficiency and user experience, while maintaining strong domain relevance.

Designers often struggle to effectively apply insights from human-computer interaction (HCI) research due to challenges in retrieval, disciplinary terminology barriers, and a lack of contextualized, actionable guidance. To address this gap, this work proposes ReFinE—the first Figma plugin that automatically synthesizes HCI research findings and integrates them directly into the UI design workflow. Leveraging natural language processing and context-aware recommendation techniques, ReFinE delivers real-time, visual, and actionable design suggestions tailored to the designer’s current task. Findings from a user study demonstrate that ReFinE significantly reduces cognitive load, enhances designers’ ability to incorporate empirical research evidence into their practice, improves design quality, and accelerates iterative prototyping cycles.

Automatically translating design mockups into high-quality, maintainable, and responsive front-end code remains challenging, as existing approaches relying solely on images struggle to recover intricate UI details. This work introduces Figma2Code, a novel task that establishes the first end-to-end automation pipeline from design to code within the realistic, multimodal environment of Figma, leveraging its rich metadata and asset information. To support this task, we construct a benchmark dataset comprising 213 high-quality, manually curated samples, processed through a combination of rule-based filtering, human annotation, multimodal large language model (MLLM) selection, and metadata refinement applied to community-collected design-code pairs. Systematic evaluation of ten state-of-the-art MLLMs reveals that while closed-source models achieve high visual fidelity, they exhibit significant shortcomings in layout responsiveness and code maintainability.

This work addresses the creative stagnation often induced by existing generative design tools that directly output complete images. To overcome this limitation, the authors propose a multi-stage, compositional AI-assisted design approach that emulates professional designers’ workflows: it first structurally interprets ambiguous design requests, then generates candidate elements—such as objects, backgrounds, typography, layout, and composition—separately, and finally enables interactive recombination. This method formalizes real-world design processes into a computable system for the first time, decoupling requirement interpretation, element generation, and composition to substantially enhance prompt diversity and alignment with user intent. User studies demonstrate that the system outperforms baseline approaches in both requirement comprehension accuracy and designer-rated quality, revealing a productive trade-off between structured workflow, creative clarity, and efficiency despite slightly longer generation times.

This work addresses the labor-intensive nature of presentation tasks—such as formatting and layout—in dashboard authoring, which currently lack support for partial reuse. Through a systematic user study, we characterize the needs and challenges associated with cross-source reuse of visual presentation elements. Building on these insights, we propose a novel paradigm that enables partial reuse of styles and layouts from multiple existing dashboards. We design and implement ReDash, a prototype system embodying this approach, and demonstrate through proof-of-concept experiments that our mechanism effectively overcomes key barriers in common reuse scenarios. The results show a significant improvement in authoring efficiency, confirming the feasibility and practical potential of partial reuse in real-world dashboard creation.