Session 6 Slides: Rapid Application Prototyping

--:-- --
↓ Scroll for more

Session 6

Rapid Application Prototyping

AI Product Engineering

Block 2: AI-Assisted Engineering & Integration

Today’s Agenda

  • The Prototype Mindset
  • Architecture-First: Three Questions
  • The Minimal Stack
  • Generating a UI: The Workflow
  • The Mock Backend Pattern
  • Interactive: Architecture First (3 min)
  • Interactive: Browser or Server? (3–4 min)
  • Lab: Product-Specific UI (Core)

The Prototype Mindset

A prototype answers: "Can AI do this task well enough to be useful?" with minimum investment.

✅ Yes to

  • Core AI functionality
  • Demonstrable workflow

❌ Not needed yet

  • Production infrastructure
  • Authentication
  • Perfect UI polish

Architecture-First: Three Questions

  1. What does the user do? Describe every interaction step-by-step
  2. Where does processing happen? Client? Server? External API?
  3. What data moves between layers? Strings, JSON objects, files?

Draw the box-and-arrow diagram before generating any code.

The Minimal Stack

LayerTechnology
FrontendHTML + CSS + vanilla JS
BackendNode.js + Express
AI LayerCloud API (Session 7)
KnowledgeObsidian Markdown (Sessions 8–9)

Runs on any laptop. No cloud deployment required during development.

Interactive: Architecture First (1/3)

True or false — cold-call a team.

Interactive: Architecture First (2/3)

True or false — cold-call a team.

Interactive: Architecture First (3/3)

True or false — cold-call a team.

Generating a UI: The Workflow

1. Describe the screen in plain English
2. Specify constraints (no external libraries, mobile-responsive)
3. Generate with Copilot or chat AI
4. Open in browser — evaluate layout and errors
5. Iterate with targeted refinement prompts

The Mock Backend Pattern

Replace the AI call with a hardcoded string. Test the full UI → server → response cycle before the API is integrated.

Isolates UI bugs from AI logic bugs — much easier to debug.

Interactive: Browser or Server? (3–4 min)

Where does each piece live in the starter stack?

Lab: Product-Specific UI (1/2)

Do not ship the starter HTML unchanged.

  1. 6.1: Diagram browser → Express → mock JSON — save to Architecture.md
  2. 6.2: Product title, domain control + query, empty/loading/error states

Lab: Product-Specific UI (2/2)

  1. 6.3: Confirm mock POST /query still works after UI edits
  2. 6.4: Checkpoint — screenshot + diagram before Session 7

Stretch: brand CSS; sources list placeholder for Session 9.

Session 6 Summary

  • Prototype = minimum to validate "can AI do this?"
  • Architecture first — draw before you generate
  • Minimal stack: HTML + Express, runs anywhere
  • Mock backend lets you test flow before AI integration

Next Session: API Integration & Cloud Models