The Way We Notice, That's What Really Matters: Instantiating UI Components with Distinguishing Variations

2026-02-25

AI Summary

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.

Technology Category

Computer Vision: Visual Reasoning & Symbolic RepresentationsHumans and AI: Intelligent User InterfacesCognitive Modeling & Cognitive Systems: Conceptual Inference and Reasoning

Application Category

Semantics and Knowledge: Data modeling to support human-machine intelligence, including LLMs agents, intelligent system behavior, explanations, and user-friendly interactionsUser Modeling, Personalization and Recommendation: Practical large-scale studies of user experienceEconomics, Online Markets and Human Computation: Uses of LLMs and GenAI for marketplace design, bidding, and strategic interactions

Abstract

Front-end developers author UI components to be broadly reusable by parameterizing visual and behavioral properties. While flexible, this makes instantiation harder, as developers must reason about numerous property values and interactions. In practice, they must explore the component's large design space and provide realistic and natural values to properties. To address this, we introduce distinguishing variations: variations that are both mimetic and distinct. We frame distinguishing variation generation as design-space sampling, combining symbolic inference to identify visually important properties with an LLM-driven mimetic sampler to produce realistic instantiations from its world knowledge. We instantiate distinguishing variations in Celestial, a tool that helps developers explore and visualize distinguishing variations. In a study with front-end developers (n=12), participants found these variations useful for comparing and mapping component design spaces, reported that mimetic instantiations were domain-relevant, and validated that Celestial transformed component instantiation from a manual process into a structured, exploratory activity.

Problem

• UI components
• component instantiation
• design space
• property values
• front-end development

Innovation

• distinguishing variations
• design-space sampling
• symbolic inference
• LLM-driven mimetic sampling
• UI component instantiation