Requirements

Here we define the project scope, user needs, and key objectives that guide development.

Introduction

We are Team 21, developing Blueprint AI, a VSCode extension that integrates AI-driven frontend UI generation. We aim to simplify and accelerate UI development by enabling users to generate and customise frontend layouts directly within VSCode. The project was inspired by the challenges faced by hackathon participants, developers, and project managers who need a fast, efficient, and flexible way to create frontend UIs without extensive manual coding.

Project Goals

Blueprint AI aims to: Provide seamless UI generation using screenshots, sketches, or text prompts. Allow no-code UI editing, making design accessible to both developers and non-developers. Enable user to chat with AI on making changes to frontend design Integrate AI-driven suggestions for design improvements Enable exportable frontend code in multiple languages and frameworks. Ensure a smooth development workflow within VSCode.

Requirement Gathering

How We Collected Requirements We gathered requirements through: User interviews with developers, UI designers, and project managers. Market research on existing tools like Microsoft PowerApps, Wix and Visily. Feedback from industry professionals to understand development pain points. Technical feasibility studies on AI-driven layout generation. 3.2 Surveys and Analysis We designed a survey targeting: Developers who need rapid UI development. Project managers aiming for efficient team workflows. UI/UX designers looking for AI-assisted design suggestions. The survey included: Multiple-choice questions on preferred development tools. Ranking-based questions on UI generation needs. Open-ended questions for feature suggestions. Key Findings: The main reason why people use AI tools is to save time on repetitive tasks (66.7% of people identified speed as being extremely important in frontend development process) and generate design ideas. With most people already using AI tools to assist in programming. We found that improved accuracy, better customisation freedom and integration with popular frameworks and libraries were key requirements in an AI front-end development tool.

Personas

Persona 1: Landon (CS Student @ a Hackathon)

Landon

Persona 2: Emma (Project Manager)

Emma

Use Cases

UC-01: Add API Key

Use Case ID UC-01
Use Case Name Add API Key
Actor(s) User
Description User adds their OpenAI API key for AI calls.
Basic Flow 1. System prompts the user to enter an API key.
2. User enters their OpenAI API key.
3. System validates the key.
4. If valid, system stores the key for future AI interactions.
5. System confirms successful API key addition.
Result API key successfully added, enabling AI functionalities.

UC-02: Screenshot-to-UI

Use Case ID UC-02
Use Case Name Screenshot-to-UI
Actor(s) User
Description User uploads a screenshot, AI generates a UI layout.
Basic Flow 1. User selects the "Upload Screenshot" option.
2. User uploads a UI screenshot.
3. AI analyzes the image and extracts UI components.
4. AI generates a structured UI layout.
5. System displays the generated UI for review.
Result The UI layout is successfully generated and ready for further editing or export.

UC-03: Text-to-UI

Use Case ID UC-03
Use Case Name Text-to-UI
Actor(s) User
Description User describes UI in text, AI creates layout.
Basic Flow 1. User selects the "Text-to-UI" option.
2. User enters a text description of the UI.
3. AI processes the text and generates a UI layout.
4. System displays the layout for user review.
Result The UI layout is successfully created based on the user's text description.

UC-04: Asking AI to Make Edits

Use Case ID UC-04
Use Case Name Asking AI to Make Edits
Actor(s) User
Description User modifies UI components using AI.
Basic Flow 1. User selects an AI-assisted editing option.
2. User provides instructions (e.g., "Change button color to blue").
3. AI processes the request and shows the user the updated UI.
4. User validates the changes by clicking ‘Accept’ or ‘Reject’.
5. System displays the modified UI accordingly.
Result UI modifications are successfully applied based on user instructions.

UC-05: Manual Edits

Use Case ID UC-05
Use Case Name Manual Edits
Actor(s) User
Description Taking control of the edits manually.
Basic Flow 1. User selects UI components.
2. User makes manual changes (e.g., resizing, repositioning, modifying styles).
3. System applies the changes.
Result The UI components are successfully modified by the user.

UC-06: UI Export

Use Case ID UC-06
Use Case Name UI Export
Actor(s) User
Description User exports generated UI as frontend code.
Basic Flow 1. User selects the "Export UI" option.
2. System presents export format choices (React, HTML, etc.).
3. User selects the preferred format.
4. System generates and downloads the UI code.
Result The UI is successfully exported in the selected frontend framework.

MoSCoW Requirements

Functional Requirements

Must Have Should Have Could Have Won't Have
  1. Upload a screenshot and generate a corresponding CraftJS layout using AI.
  2. Users describe a webpage in natural language, and AI generates a CraftJS layout.
  3. Modify design attributes, add features, and receive context-aware AI suggestions.
  4. Generate frontend code that is exportable in different languages and frameworks.
  5. AI suggests 2 different version of initial design generation for user to choose
  1. AI generates complex, nested layouts based on user descriptions.
  2. AI remembers user interactions and refines components/layouts accordingly.
  3. AI generates meaningful comments for exported code to enhance readability.
  4. Convert exported UI code into various frameworks as per the user’s choice.
  1. AI generates boilerplate code for quick integration with other projects.
  2. Users describe animations in plain language, and AI generates CSS/JS code.
  1. AI provides both natural language explanations and structured output for layouts.

Non-Functional Requirements

Must Have Should Have Could Have Won't Have
  1. Fast AI Processing (Performance):
    UI generation must take less than 5 seconds to ensure an optimal user experience.
  2. Intuitive UI (Usability):
    The interface must be easy to use so that users can generate and refine the UI with minimal learning curve.
  3. Data Privacy (Security):
    The system must not store any user screenshots or input data externally.
  1. Modular Codebase (Maintainability):
    The code should be structured in a modular way to support easy updates and extensions.
  2. Plugin Support (Extensibility):
    The platform should be designed to allow future extensions for additional AI models and IDEs beyond VSCode.
  1. Community Contributions (Open Source):
    The codebase could be made accessible for developers to contribute and improve the project, promoting a community-driven approach.