Structure Prompting GenAI for Architecture Engineering

Web-based GenAI tool for structured architectural sketch prompting, dictation, and classroom research (WIP)

In this project, my goal is to develop a web-based tool to support architectural concept sketching, with a focus on structured prompting, input method, and display interface design. This research is led by and developed in close collaboration with architectural engineering experts, who contribute to analyzing project goals, workflow pipeline, and educational needs. The project also includes a critical evaluation of the ethical use of AI in architectural education and practice.

The experiment is designed as an in-lab, within-subject study with 2×2×2 conditions. The factors are: Display (VR/Mixed Reality vs PC), Prompting System (One-shot vs Structured), and Interface (Typing & Dictating). Each participant will experience all combinations of these conditions to evaluate the impact of display modality, prompting workflow, and input method on user experience and design outcomes.

Project Demo

System Design and Features

  • Two-Column Layout: Left panel for prompt input (including dictation and API key management), right panel for displaying the generated image and loading state.
  • Structured Prompting: Drag-and-drop prompt modules to build a multi-layered, domain-specific prompt. Each module can be filled via text or voice.
  • Dictation Integration: Robust dictation feature using the Web Speech API, with microphone selection and real-time volume feedback.
  • Global Prompt Configuration: Uses a global configuration for prompt type, model (DALL-E-2), and a pre-written architectural rendering prompt.
  • Image Generation and Storage: Images are created via the OpenAI API and saved to Firebase, along with prompt data, for later review and analysis.
  • Gallery and Editing: Users can browse, edit, and manage their generated images and prompts, supporting iterative design and classroom collaboration.
  • Deployment: Built with React + TypeScript, configured for GitHub Pages deployment, and uses environment variables for API keys and secrets.