Loop Master Teacher Guide Loop Master
Teacher Facilitation Guide
Lesson Overview
In this opening lesson, students move away from "one-shot" prompting and embrace the iterative loop . They will attempt to generate a specific geometric pattern using AI, documenting how their feedback influences the AI's subsequent outputs.
Objectives
Define the iterative cycle of code generation.
Translate visual requirements into descriptive prompts.
Evaluate AI output against specific success criteria.
Key Vocabulary
• Iteration
• Prompt Engineering
• Output Validation
• Feedback Loop
The Hook: Blind Drawing Challenge (10 mins)
Challenge students to describe a "Starry Night" or a complex "Cyber-Donut" to an AI. They cannot name the object; they must only describe the math, colors, and layout. This highlights how hard it is to get perfect results on the first try.
Instructional Sequence
1
Modeling the Loop
Show students a prompt that produces a "half-baked" result. Demonstrate how to give specific feedback (e.g., "Make the circles larger and change the color to neon green") rather than starting over.
2
The "Target Pattern" Challenge
Distribute the Iteration Log . Students choose a Target Pattern (e.g., a spinning 3D cube or a grid of pulsing squares) and try to achieve it in exactly 5 iterations.
3
Reflective Debrief
Discuss: "Why didn't it work on the first try?" and "What was the most effective piece of feedback you gave the AI?"
Success Criteria
Students have successfully completed the lesson when they can:
Show a document with at least 3 distinct iterations of code.
Articulate one specific strategy for refining a "failed" prompt.
Iteration Log Worksheet Iteration Log
Name: __________________________
Date: __________________________
Goal: The Perfect Pattern
Your mission is to get the AI to generate a specific visual pattern (e.g., a pulsing neon grid, a 3D wireframe cube, or a geometric sunset). You must document every step of the conversation.
Target Specification
Describe exactly what you are trying to make before you start prompting:
Round 1
Initial Prompt & Result
What you asked:
What happened (The "Vibe"):
Round 2
The Feedback Loop
Your correction/feedback:
Improvement level (1-10):
Post-Loop Reflection
1. What was the most effective word or instruction you used to change the code?
2. If you had one more round, what would you fix next?
Bug Whisperer Slides Bug Whisperer
Mastering the Art of Natural Language Debugging
Lesson 02
Debugging Evolution
The Old Way
Hunting for missing semicolons.
Memorizing complex syntax.
Trial and error with punctuation.
The Vibe Way
Describing behavior in English.
Identifying logic gaps.
Prompting the AI to "Fix the Loop".
The 3-Step Debug Prompt
01
Observe
"When I click the button, the counter doesn't go up."
02
Isolate
"The code on line 45 seems to be resetting the value."
03
Direct
"Fix the logic so the value persists after the click."
Example: The Infinite Timer
// The broken code
while (timeLeft >= 0) {
console.log(timeLeft);
// Missing: timeLeft--;
}
The "Whisperer" Prompt:
"Hey AI, my timer loop is running forever and freezing the browser. It never counts down. Can you fix the loop so it decreases the time each second?"
The AI understands the intent even if you don't know the exact syntax for the fix.
Broken Game Challenge
I'm giving you a code snippet for a simple game. It doesn't work. Your job is to describe the bugs to the AI and get a working version without typing a single semicolon yourself.
NO MANUAL EDITS ALLOWED
Bug Whisperer Lab Worksheet Bug Whisperer Lab
// Challenge: Fix without touching the code
Name: ________________
Mission Instructions
Below are three broken code scenarios. Your goal is to write the natural language prompt you would send to an AI to fix the bug. Remember the 3-Step Debug Prompt: Observe , Isolate , and Direct .
Scenario 01
The Vanishing Score
function playerHitEnemy() {
Write your "Whisperer" Prompt:
Scenario 02
The Infinite Loop
let count = 10;
Write your "Whisperer" Prompt:
Scenario 03
The Wrong Library
"The AI used a library called 'MathMagic' to make a chart, but that library doesn't actually exist. The console says 'MathMagic is not defined'."
Write your "Whisperer" Prompt:
vibe_coding_lab_v2.0 // keep_it_iterative
Hallucination Slides Ghost in the Machine
Spotting Hallucinations & Code Lies
Lesson 03
What is a Hallucination?
When an AI model generates information that sounds confident and professional, but is factually incorrect.
Key Rule:
Confidence ≠ Correctness
Signs of a Ghost:
Non-existent libraries
Made-up function names
Impossible logic
References to fake APIs
Case Study: The "FancyGraph" Library
import { Graph } from 'fancygraph';
const myGraph = new Graph('#chart');
The AI says: "To make it look like a galaxy, use the drawStellarMode() function in the FancyGraph library."
The Catch:
FancyGraph doesn't exist. It just "sounds" like a library that should exist.
The "Trust But Verify" Strategy
Run Small
Test one function at a time in a sandbox like CodePen.
Google It
Search for the library or function. If it doesn't show up, it's a ghost.
Call It Out
Tell the AI: "That library doesn't exist. Use a real one like Chart.js."
Deploy or Destroy?
I will show you three pieces of code. Only ONE of them actually works. Can you spot the hallucinations before you hit 'Deploy'?
#detect_the_ghost
Hallucination Hunt Worksheet Hallucination Hunt
// Objective: Verify or Veto
Name: ________________
Mission Briefing
AI models are great at pretending they know what they are talking about. Your task is to analyze the three code snippets below. One is real, one has a logic error, and one is a total hallucination (uses things that don't exist).
Snippet A: The Galaxy Generator
JS / React
import { createGalaxy } from 'nebula-ui';
function App() {
Verdict:
Real Hallucination
Evidence (Why?):
Snippet B: The Infinite Looper
Python
timer = 10
Verdict:
Real Hallucination
Evidence (Why?):
Snippet C: The Standard Counter
Vanilla JS
let count = 0;
Verdict:
Real Hallucination
Evidence (Why?):
The "Vibe Check" Reflection
What is one specific question you can ask an AI to check if it's hallucinating a library?
Vibe Check Slides Vibe Check
Designing User Experience with AI
Lesson 04
The "Vibe" Factor
In coding, the "vibe" is the visual and emotional feeling of an application.
Functional Code vs. Vibe Code
Functional code works, but Vibe code feels good to use.
Layout
Typography
Color
Interaction
Prompting for Aesthetic
The "Vague" Prompt (Bad)
"Make the dashboard look better."
The "Vibe" Prompt (Good)
"Redesign the dashboard with a clean, minimalist aesthetic. Use a monochromatic blue color palette, rounded corners on all containers, and a sans-serif font for readability."
Vocabulary of Design
Cyberpunk
• Neon accents
• Dark theme
• High contrast
• Glitch effects
Brutalist
• Raw exposure
• Bold outlines
• Stark grids
• Loud fonts
Glassmorphism
• Translucency
• Soft shadows
• Frosted glass
• Vivid backgrounds
The Dashboard Flip
Take a boring, grey table of data. Using three prompts or less , transform it into a stunning, interactive dashboard that fits a specific aesthetic vibe.
GO FOR THE GLOW-UP
Vibe Workshop Worksheet Vibe Workshop
// Mastery: Aesthetic Communication
Designer: ________________ Studio: ________________
1
The Aesthetic Translation
Choose one aesthetic "Vibe" from the list (Cyberpunk, Retro-80s, Minimalist, Brutalist). Write a single prompt that directs an AI to transform a plain login form into that style.
Target Vibe:
e.g. Cyberpunk
The "Vibe" Prompt:
2
The 3-Step Refinement
Start with a boring data table. Document how you refine the UX (User Experience) in three specific prompts.
Step 01
Prompt: "Add a dark theme and make headers bold..."
Step 02
Step 03
The "Aesthetic Lexicon"
Map abstract words to code-friendly instructions:
"Clean" means...
"Modern" means...
"Retro" means...
"High-End" means...
Code Architect Slides Code Architect
Optimization, Refactoring & Mastery
Lesson 05
The Art of Refactoring
Refactoring is the process of improving the internal structure of code without changing its external behavior.
Why do it?
Speed / Performance
Readability
Reliability
AI
The AI Architect
"AI is incredible at spotting patterns that can be shortened. It's like having a senior developer review your messy drafts."
Scanning for inefficiencies...
The Pillars of Optimization
DRY
Don't Repeat Yourself
Merge duplicate code into reusable functions.
Clarity
Self-Documenting
Rename variables to describe exactly what they hold.
Speed
Algorithm Fixes
Swap slow loops for faster, native methods.
Example: The "Spaghetti" Fix
Before (Messy)
if (x == 1) { score = score + 10; }
After (AI Refactor)
const POINT_VALUES = [1, 2, 3, 4];
AI Prompt: "Refactor this code to use an array.includes() check and template literals for cleaner logging."
The 100-Line Crunch
You are handed a 100-line program that is redundant, messy, and lacks comments. Your goal: use AI to refactor it to the fewest lines possible while making it easier to read .
READY TO ARCHITECT?
Refactoring Challenge Worksheet The Refactor Challenge
// Goal: Maximum Efficiency
Architect: ________________ Date: ________________
Mission Briefing
Take the provided "Spaghetti Code" (a messy 100-line program). Your mission is to use AI to refactor it. You win by reducing the line count while making the code cleaner and better documented .
Starting Line Count
100
Final Line Count
The Refactoring Strategy
Document the prompts you used to optimize the code:
Prompt 1: (The Big Cleanup)
"Refactor this code to remove all duplicate 'if' statements and use a switch case or object map instead..."
Prompt 2: (The Documentation)
Prompt 3: (Final Polish)
Post-Project Analysis
1. Look at the "Before" and "After". What is one specific thing the AI did to make the code more efficient?
2. Did the AI remove any functionality? How did you verify that the code still works exactly as before?
Certified_Code_Architect_v1.0
