📊 View Lecture Slides Full-screen presentation with navigation

Session 6: Rapid Application Prototyping

Session Duration: 2 Hours     Block: 2 — AI-Assisted Engineering & Integration

Learning Objectives

By the end of this session, students will be able to:

  • Apply a structured approach to translating a product idea into a technical architecture
  • Generate a working frontend UI using natural language and AI coding tools
  • Identify the components of a minimal viable prototype (MVP)
  • Connect the generated interface to a placeholder data layer in preparation for API integration

Hour 1: From Idea to Architecture (Instructor-Led — 60 minutes)

1.1 The Prototype Mindset

A prototype is not a finished product. It is the minimum necessary to validate a hypothesis.

The hypothesis for every project in this module is: “Can AI do this task well enough to be useful?” A prototype answers that question with the least possible investment.

This means:

  • No production-grade infrastructure. A single Python file with a simple HTTP server is fine.
  • No perfect UI. A functional interface that demonstrates the workflow is sufficient.
  • No authentication. One user, hardcoded or passed as a variable, is acceptable.
  • Yes to core functionality. The AI integration must work.

1.2 Architecture-First Thinking

Before writing (or generating) any code, answer three architecture questions:

  1. What does the user do? Describe every interaction: “User types a question → presses Send → sees an answer”
  2. Where does processing happen? Client (browser), server (Python/Node), or external service (AI API)?
  3. What data moves between layers? A string input goes from the browser to the server, the server calls the AI API with a formatted prompt, the API returns a string, the server sends it back to the browser.

Drawing this as a simple box-and-arrow diagram before generating code prevents fundamental architectural mistakes.

1.3 The Minimal Stack for This Course

Layer Technology Why
Frontend HTML + CSS + vanilla JavaScript No framework required, AI generates it well
Backend Python with Flask Simple, readable, excellent AI support
AI Layer Cloud API (Gemini, OpenAI, Anthropic) Sessions 7+
Knowledge Local Markdown files Your Obsidian vault — Sessions 8–9

This stack runs on any laptop with Python installed. No cloud deployment required during development.

1.4 Generating a UI with Natural Language

The workflow for generating a UI component with Copilot or a chat AI:

Step 1 — Describe the screen: “I need a single-page web app with a text input area, a Submit button, and a results section that displays the AI response.”

Step 2 — Specify constraints: “Use plain HTML, CSS, and vanilla JavaScript only. No external libraries. Mobile-responsive.”

Step 3 — Generate: Paste the description into Copilot Chat or a chat model. Review the generated HTML/CSS/JS.

Step 4 — Evaluate: Open the file in a browser. Does it look right? Is the layout reasonable? Are there any obvious errors?

Step 5 — Iterate: “The results section should display text in a scrollable box with a monospace font. Update the CSS.”

Hour 2: Practical — Build Your Application’s Frontend (60 minutes)

Lab 6.1 — Architecture Diagram

Draw (on paper or in a tool like Excalidraw) the architecture of your application. Show:

  • The user interaction (input → output)
  • Where processing happens
  • What data flows between components

Lab 6.2 — Generate Your Interface

Using Copilot or a chat AI, generate the frontend HTML/CSS/JS for your application.

Starter prompt:

I am building a [description of your application].
Generate a clean, mobile-responsive single-page HTML interface with:
- [Input element 1: e.g., a text area for user queries]
- [Input element 2 if needed]
- A Submit button
- A results section that displays the AI response
- Clear visual hierarchy and a professional appearance
Use only HTML, CSS, and vanilla JavaScript. No external libraries.

Lab 6.3 — Add a Mock Backend

Create a simple Python Flask server (app.py) that:

  1. Serves the HTML file
  2. Accepts a POST request from the form
  3. Returns a hardcoded mock response (a string that simulates an AI response)

This structure means you can test the full UI → server → response cycle before the AI API is integrated.

Starter structure:

from flask import Flask, request, jsonify, send_from_directory

app = Flask(__name__)

@app.route('/')
def index():
    return send_from_directory('.', 'index.html')

@app.route('/query', methods=['POST'])
def query():
    data = request.get_json()
    user_input = data.get('query', '')
    # Placeholder — replace with real AI call in Session 7
    mock_response = f"Mock AI response to: {user_input}"
    return jsonify({'response': mock_response})

if __name__ == '__main__':
    app.run(debug=True)

Lab 6.4 — Connect Frontend to Backend

Update the JavaScript in your HTML to send the user’s input to the /query endpoint and display the response. Verify the end-to-end flow works with the mock backend.

Key Takeaways

  • A prototype validates the core hypothesis with minimum investment — not a finished product
  • Architecture-first thinking prevents fundamental mistakes before generating code
  • The minimal stack (HTML + Flask + Cloud API) runs on any laptop and is fully AI-generatable
  • A mock backend lets you test the full UI flow before the real AI integration is ready
  • The evaluate-refine cycle from Session 5 applies to every generated component

Further Reading