DynEx: Dynamic Code Synthesis with Structured Design Exploration for Accelerated Exploratory Programming

Research Background and Problem

• Identified Problems or Challenges:
  Current code generation tools based on large language models (LLMs) primarily focus on technical implementation, lacking functionalities to support users in exploring the design space. Most tools generate code through commands but overlook user experience during the design phase, such as effectively translating abstract concepts into concrete implementations and ensuring designs meet the needs of target users. Users often fall into design fixation, pursuing a single technical implementation path while neglecting potential diverse solutions.

• Importance of the Problem:
  Exploratory programming is considered critical in modern user interface (UI) design and rapid prototyping, especially when quick iterations are needed to test real-world design outcomes. Limitations of existing tools hinder creativity, making it difficult to rapidly generate user-centered and complex prototypes.

• Research Motivation and Related Work:
  This research draws inspiration from four classic categories of design space exploration (example-based exploration, reflective exploration, generative exploration, dimensional exploration) and combines them with the capabilities of LLMs to propose a workflow supporting users from ideation to functional prototype development. The project compares its approach with existing tools like Claude Artifact, aiming to address current limitations through the introduction of a structured Design Matrix and Modular Stepwise Implementation.

Solution

• Method or Solution:
  The authors propose the DynEx system, which consists of two main stages:

  1. Design Matrix - Based on user-input problems, the system guides users in exploring the design space across three dimensions (target users, methodology, interaction modes) and concretizing abstract ideas.
  2. Modular Stepwise Implementation - Converts the generated design into stepwise code implementation, with each step independently generated, tested, and refined based on user feedback.

• Innovative Aspects of the Solution:

  1. Explicitly divides the design process into three dimensions—target users (Person), methodology (Approach), and interaction (Interaction)—and further refines each dimension into two levels: "Idea" and "Grounding."
  2. Introduces self-calling multimodal LLMs, enabling prototypes to dynamically generate placeholder data, images, and recommendations to simulate real user experiences.
  3. Encapsulates LLM functionality to support modular stepwise generation, ensuring code snippets are independent and easy to debug, avoiding unnecessary residual errors.

• Implementation Steps and Techniques:

  1. Users explore the problem space using the Design Matrix, filling out the needs of "target users," the core algorithms or strategies of "methodology," and the implementation modes of "interaction."
  2. The system generates project requirements (technical requirements) and technical specifications (specifications) based on the provided information.
  3. Code is implemented in modular steps, with each step independently tested and refined, including:
     • Basic HTML structure
     • Functional modules (e.g., Flashcards component, Quiz module)
     • External API calls (e.g., OpenAI GPT-4/DALL-E) for dynamic data generation
  4. Users can debug and refine the UI in real time, exploring multiple variants after the final prototype is completed.

Research Outcomes

• Specific Outcomes:

  1. Structured design exploration: Users can systematically define target users, design methodologies, and interaction modes, significantly reducing design ambiguity and the risk of overlooking critical requirements.
  2. Development of functional prototypes: DynEx enables rapid code generation through modular methods and supports highly flexible debugging.
  3. Enhanced design diversity: User studies show that compared to Claude Artifact, applications generated by DynEx exhibit greater design complexity and functional completeness.

• Comparative Advantages over Existing Solutions:

  1. DynEx fosters broader design exploration, avoiding the design fixation commonly seen in existing solutions.
  2. Provides user-friendly modular steps and self-calling API functionality, resulting in prototypes that are closer to real-world applications.
  3. Offers a comprehensive solution starting from structured problem exploration, surpassing tools that merely generate code.

• Experimental or Evaluation Results:
  In comparative studies, participants reported higher divergent exploration scores after using DynEx (average 6.1/7, compared to Claude Artifact's 4.0/7). Additionally, DynEx received higher ratings for developing complex prototypes (average 4.9/7, compared to Claude Artifact's 3.7/7).
  In NASA-TLX evaluations, while there was no significant difference in "mental workload" and other details, DynEx scored significantly higher in task performance (p = 0.003).

• Limitations and Future Directions:

  1. The current Design Matrix does not encompass additional dimensions (e.g., stakeholders, existing solutions) or higher levels of refinement.
  2. Code generation using Claude 3.5 Sonnet is limited by token constraints (4096 tokens), affecting the implementation of complex functionalities.
  3. Users reported slow generation speeds; future improvements could optimize code cleaning and debugging processes to enhance user experience.
  4. Future research should conduct horizontal studies across a broader range of non-technical user groups and tools to validate DynEx's generalizability.

By integrating design exploration and code implementation capabilities, DynEx not only addresses shortcomings in existing tools but also provides a solid technical foundation for more efficient exploratory programming.