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

Paper Title

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

Publication Info

• Topic area: UI component design and exploration in front-end development
• Keywords: UI components, distinguishing variations, design-space exploration, mimetic sampling, Storybook.js, large language models, symbolic analysis, front-end development, component libraries, user interface design

Background and Problem

• Problem / challenge: Developers face challenges in exploring and instantiating UI components due to large design spaces, abstract documentation, and the need for realistic, domain-specific examples. Existing tools like Storybook.js require manual effort to create meaningful variations, which often results in incomplete or irrelevant examples.
• Significance: Effective exploration of UI components is critical for understanding their behavior, supporting diverse use cases, and ensuring robust integration into applications. Automating this process can save time, improve design quality, and enhance developer productivity.
• Motivation and related work: Prior research highlights the importance of examples and variations in design exploration but lacks automated tools to generate meaningful, realistic, and distinct examples. Existing approaches in Storybook.js and generative AI tools are limited by manual effort, lack of domain relevance, and inability to explore the full design space.

Solution

• Proposed approach: The paper introduces distinguishing variations, which combine mimetic (realistic) and distinct (diverse) examples to explore the design space of UI components. This is implemented in a tool called Celestial, integrated into Storybook.js.
• Novelty:
  1. A hybrid approach combining symbolic analysis and LLM-based mimetic sampling to generate distinguishing variations.
  2. Introduction of the CoverageAnalyzer to measure and guide design-space exploration.
  3. Implementation of Celestial as a Storybook.js add-on for automated variation generation and exploration.
• Procedure and key techniques:
  1. ComponentAnalyzer: Uses static analysis to identify visually impactful properties of components.
  2. MimeticSampler: Employs LLMs to generate realistic and domain-relevant property values.
  3. CoverageAnalyzer: Tracks coverage of the design space and guides sampling toward underrepresented areas.
  4. User interface: Provides a visual overview of variations, coverage analysis, and an in-place code editor for refinement.

Results

• Concrete findings:
  • ComponentAnalyzer achieved 83.1% accuracy in classifying visual impact levels across 172 properties from 10 Ant Design components.
  • In a user study with 12 developers, participants generated an average of 13.1 variations per component and rated the examples as highly natural (4.8/5), distinct (4.4/5), and comprehensive in coverage (4.3/5).
• Advantage over baselines: Celestial automates variation generation, providing broader and more meaningful exploration compared to manual workflows or static documentation. MimeticSampler ensures domain-relevant and realistic examples, addressing limitations of generic AI tools.
• Experiments / evaluation:
  • Technical evaluation: Assessed ComponentAnalyzer’s accuracy in ranking visual impact of properties.
  • User study: Participants explored two UI components using Celestial, rated variations, and provided qualitative feedback on usability and effectiveness.
• Limitations and future work:
  • Current focus is on visual differences, not behavioral variations.
  • LLM-based sampling may produce occasional errors or hallucinations.
  • Limited participant pool (12 developers from one organization) and non-production components.
  • Future work includes expanding to behavioral exploration, integrating with CI pipelines, and supporting multi-component workflows.

Summary

The paper introduces distinguishing variations and the Celestial tool to help developers explore UI component design spaces through realistic and diverse examples. By combining symbolic analysis and LLM-based mimetic sampling, Celestial automates the generation of meaningful variations, addressing challenges in manual workflows. Evaluations demonstrate its effectiveness in improving design-space coverage, fostering discovery, and supporting domain-specific use cases. Future work aims to broaden applicability to behavioral variations and multi-component interactions.