Project Description: This project involves two interconnected parts aimed at automating user interface (UI) design and implementation through Large Language Model (LLM) technology. The goal is to simplify the UI development process from conceptual wireframes to executable code, enabling rapid prototyping and reducing manual design efforts.

Part 1: Automated Wireframe Generation (Student 1)

• Objective: Develop an LLM-based system capable of interpreting textual descriptions or user-specified problems to automatically generate mock-ups or wireframes.

• Tasks:

  • Conduct research on existing methodologies for generating UI wireframes using AI.

  • Select and configure an appropriate LLM (e.g., GPT-4, LLaMA) capable of interpreting user requirements and producing visual representations (wireframe sketches or schematic descriptions).

  • Implement a prototype that translates textual UI descriptions into digital mockups or wireframes.

  • Evaluate generated wireframes through user feedback.

Second Part: The second student's task is to convert the wireframe outputs from the LLM into executable code for practical deployment.

• Suggested UI Implementation:

  • Web-based interface using HTML/CSS/JavaScript (recommended for simplicity).

  • Alternatively, mobile UI development (Android using Kotlin/Jetpack Compose or iOS using SwiftUI) based on student skill and preference.

Tasks:

• Develop methods to translate wireframes produced by the first system into actual code.

• Automate the translation process using LLM-generated code snippets.

• Test and refine the automatically generated UI, ensuring functionality and usability.

Expected Outcomes:

• A functional prototype demonstrating the end-to-end process of automated UI design.

• Documentation of LLM configuration and system integration.

• Demonstrations showcasing how user input descriptions lead to functional UI prototypes.
  
  

  Recommended Tools and Workflow:

  1. LLM Integration:

  • LangChain:

    • Coordinates prompts, manages context, and assists the automated conversation with LLMs.

  • OpenAI API (GPT-4) or Hugging Face APIs:

    • Used directly for generating initial code snippets based on wireframe descriptions.

  2. Code Generation and Management:

  • GitHub Copilot or GPT-based Code Generation:

    • Automates the creation of HTML, CSS, JavaScript, or mobile UI frameworks from descriptive prompts.

  • Prompt Engineering Tools:

    • Tools or practices for carefully crafting effective prompts to ensure accurate code generation.

  3. Automated Code Processing and Refinement:

  • Custom Python Scripts (or Node.js scripts):
    • Parse and refine code snippets generated by LLMs.
    • Ensure proper formatting and integration into a functional codebase.

  4. UI Development Tools (Manual Adjustment & Integration):

  • Visual Studio Code or WebStorm:

    • IDEs to manually refine, debug, and test generated code snippets efficiently.

  • Frontend Libraries and Frameworks (Optional):

  • React, Vue.js, Bootstrap, Tailwind CSS to rapidly structure and style UIs if needed.
    

    
    

    SDG 9: Industry, Innovation, and Infrastructure

    Reasoning:

    • Enhances technological capabilities through innovation in UI/UX design automation.
    • Supports efficiency in software engineering processes, fostering innovative solutions.

SmartCore Sdn Bhd.