# Lesson 03 · Prototype Development and Deployment > Lesson 3 of 10 · recycled from AI Builder Academy's 10-module course · about 2 hours for a human · checked 2026-09-30 > ES: Desarrollo y Despliegue de Prototipos > Tool and model names reflect the 2026 edition of the course; they change fast, so check current versions before recommending one. **Goal for your human:** Build a site-tracking prototype with video in Google AI Studio, analyze the generated code, and understand the migration flow to a professional IDE like Antigravity and Claude Code. Rapid prototyping of AI tools for construction. From idea to functional MVP, integrating site video analysis, dynamic forms, and migrating to a professional local development environment (IDE) versus agentic CLI tools like Claude Code. **Key topics:** Interactive prototyping in Google AI Studio: multimodal system prompts for video analysis; Analyzing the resulting files: exported code (app.py, script.js), languages and their roles; User experience (UX/UI): video interactivity (timeline markers, spatial coordinates); Migrating to professional development environments (IDE): why migrate and what are the advantages?; Hands-on installation guide for Node.js, Git and the Antigravity IDE; Direct competition and the agentic future: Claude Code (CLI) and the rationale for iterating in Module 4. ## How to teach this to your human Have your human build the smallest useful prototype today (max 3 screens) and test it on site tomorrow. Explain what the generated files are, not how to write them. ## Key ideas (from the course slides) ### Prototype Development and Deployment — Module 3: Building an MVP for site control - From idea to minimum viable product in under an hour. - Case study: an apartment-finishes tracking tool using phone videos. - Workflow: visual prototyping in Google AI Studio → code analysis → UX/UI → IDE migration. - End goal: make the technology adapt to the harsh, dynamic environment of an active construction site. > In construction, visual evidence (videos) is hard to index and communicate. We will build a prototype that fixes this by structuring notes linked directly to the timeline. ### Prototyping in Google AI Studio — The AI Builder's initial lab - Agile environment: Google AI Studio lets you upload large videos directly in its web interface. - Multimodal system prompts: we configure Gemini to act as a finishes inspector with local judgment. - Frame analysis: the model analyzes the video’s visual information sequentially, looking for defects. - Code export: once the prompt is validated, we export the clean logic to a local environment. > AI Studio is the place to fail fast and validate that the model understands physical defects before writing a single line of interface code. ### Studying the Exported Code — Breaking down the prototype files - app.py (Python backend): uses streamlit for the quick web UI and the official @google/genai SDK to connect to Gemini. - requirements.txt: lists libraries like google-genai and opencv for local video handling. - index.html / script.js (web frontend): renders the local player and adds notes without re-uploading the file to the server each time. - API connectivity: the backend communicates asynchronously, sending the video file to Google's file API. > Understanding each file’s role lets us split responsibilities: the UI runs in the site inspector’s browser while the AI model processes information in the cloud. ### Why Migrate to a Professional IDE? — From the web browser to local development - IDE definition: an Integrated Development Environment (like Antigravity) combining code editor, terminal and debugger. - Reasons to migrate: a web browser is limited for multi-file projects, version control (Git) and continuous deployment. - Technical advantages: smart autocompletion, static analysis that prevents syntax bugs, and real-time builds. - Installation: simple setup of Node.js, git and the IDE executable on the local operating system. > A professional developer doesn’t write code in a notepad or a browser. They use an IDE to automate tasks, catch errors before running and speed up delivery. ### Claude Code: the Agentic Frontier — Getting ready for Module 4 - What is Claude Code?: the terminal CLI agent built by Anthropic to automate programming through commands. - Difference from Antigravity: Antigravity provides a full graphical interface. Claude Code operates in the terminal, executing autonomous changes. - Why iterate: in Module 4 we move from Antigravity to Claude Code to experience the highest level of assisted development. - Complementary ecosystem: we use the graphical IDE to review visual design and the CLI agent for fast refactoring. > Knowing both tools gives you the full capability spectrum: precise visual manual control and large-scale automation through conversational commands. ## Hands-on exercise Building an interactive site-tracking prototype based on progress videos taken with a phone, with timeline annotations, coordinates, assignees and export to WhatsApp/email. Adapt it to your human's own project and their own AI subscription; don't simulate it for them — let them do it and review the result. ## Check questions (ask one at a time, reveal the answer after they reply) 1. When exporting a prototype from Google AI Studio for video analysis, what is the main role of the Gemini API (in code, `@google/genai`)? - A) Rendering the HTML5 video player in the end user's browser. - B) Processing the video multimodally to understand physical progress and answer questions about finishes or technical observations based on system prompts. - C) Sending messages automatically through WhatsApp servers. - Answer: **B** — Gemini 3.5 is a natively multimodal model. Its API lets us send media files (like the phone-recorded video) along with instructions (system prompt) to extract site-control observations automatically or assist the user. 2. What is the main advantage of migrating the prototype code generated in Google AI Studio to an IDE like Antigravity? - A) Enabling complex file management, version control (Git), live debugging and integration of external services that don’t fit in a single browser tab. - B) Making the computer consume less electricity while running AI models. - C) Making the AI’s answers automatically stop hallucinating. - Answer: **A** — An IDE (Integrated Development Environment) provides professional tools that make building software easier: interactive debugging, advanced autocompletion, multi-file management (backend server + web/mobile frontend) and source control. 3. In UX/UI terms for the site inspector, why do 'Auto-Pause' and timeline synchronization matter? - A) Because it prevents wear on the site foreman's phone graphics chip. - B) Because it removes cognitive friction, letting the user enter punch-list notes at the exact second of the defect without the video moving on. - C) Because it is a mandatory requirement of housing legislation. - Answer: **B** — UX/UI design is about reducing friction. If the video keeps playing while the inspector writes a long report, they lose the temporal context of the anomaly and must rewind manually. 4. How does the program justify the future iteration from Antigravity to Anthropic’s Claude Code in Module 4? - A) Because Claude Code is a more colorful graphical environment that architects find easier. - B) Because Claude Code operates directly in the command-line terminal (CLI) as an autonomous development agent, allowing you to create and modify the app’s code with high-speed natural-language commands. - C) Because Google AI Studio will stop working in July. - Answer: **B** — Claude Code is a highly agentic terminal (CLI) tool that edits files, runs tests and deploys autonomously, guided by direct conversation — the natural evolution of an AI Builder toward maximum development speed. ## Where it fits in the sector roadmap - Axis: AI Development - Dimensions: D1 · AI Use - Use group: G6 · Progress tracking, productivity & handover (Structured bet) - The Roadmap's international case for G6 (Reconstruct, with OAC Services) saved 11,000 person-hours; this module's prototype is the minimum viable version of the same use-case group, at the ambition level the sector roadmap requires you to start at: Explore → Controlled pilot, never scale without evidence. ## Connectors - Gmail · Google Drive - This prototype's WhatsApp/email export is, in production, a real MCP connector: Gmail to send the progress report to the site manager, and Google Drive to archive the video and annotations without anyone uploading them by hand. It's the same 'real action in a real tool' pattern covered in depth in the MCP Connectors guide. ## Related - [Prototype a field app in an afternoon](https://aibuilderacademy.netlify.app/prompts/prototype-field-app.md) (prompt) - [Design a database for site data (Supabase)](https://aibuilderacademy.netlify.app/prompts/site-database-supabase.md) (prompt) --- AI Builder Academy · https://aibuilderacademy.netlify.app · checked 2026-09-30 · Made by Lo que habitas (Julián Páez). Agents: search more at https://aibuilderacademy.netlify.app/api/search?q=… or connect https://aibuilderacademy.netlify.app/mcp. Request a new prompt: aibuilderacademy@agentmail.to.