Ideation Teacher Guide Ideation &
Stack Selection
Lesson 01 | Teacher Implementation Guide
Objectives
• Define a unique web application concept.
• Evaluate AI-suggested technology stacks.
• Analyze technical feasibility vs. time constraints.
Key Terms
• Vibe Coding
• Tech Stack (Frontend/Backend)
• MVP (Minimum Viable Product)
• Technical Feasibility
RAPID APP PROTOTYPING
Sequence: Science & Engineering > AI & Engineering
Teacher Resource
Instructional Procedure
The Hook (10 Mins)
"Pitch a crazy app idea to the AI and ask it to critique the technical viability—then defend your idea."
Teacher Script Snippet:
"Class, today you aren't just coders; you're technical leads. I want you to tell ChatGPT or Claude a ridiculous idea—like an app that translates cat meows into Shakespearean English—and ask it if it's actually possible to build. When it tells you 'no' or 'it's hard,' find a way to make it possible."
1
Phase 1: Concept Ideation
Students use the App Pitch Worksheet to narrow down three potential ideas. They should focus on utility: What problem does this solve?
Check for Understanding: Can the student explain the "core loop" of their app in 2 sentences?
Vibe Check: Is the app too complex? AI is great, but multi-user real-time systems are still tricky for beginners.
2
Phase 2: Stack Consulting
Students prompt the AI: "I want to build [App Concept]. What technology stack (Frontend, Backend, Database) would be most efficient for a rapid prototype using an AI assistant?"
Frontend: React (Next.js), Vue, or simple HTML/Tailwind?
Backend: Node.js, Python (Flask/FastAPI), or Supabase?
Storage: Local Storage, Vercel KV, or PostgreSQL?
3
Phase 3: Final Selection
Students lock in their "MVP" (Minimum Viable Product) features. They must identify the *one* thing the app must do to be successful.
Pro-Tips & Differentiation
Common Misconceptions
"The AI can do everything for me."
Correction: AI is the builder, but students are the architects. If they don't understand the "Why" behind the stack choice, they will get stuck when the AI hallucinates or creates conflicting code.
"I need a massive database for my 10 users."
Correction: Encourage students to start with local storage or simple JSON files to reduce friction in early stages.
Differentiation Strategies
For Advanced Learners
Challenge them to integrate an external API (Weather, Spotify, OpenAI) or use a more robust framework like Next.js with Server Actions.
For Scaffolding Support
Provide a "Starter Stack" recommendation: Vite + React + Tailwind + Supabase. This has the most documentation and AI-friendly support.
Prompt of the Day
"Act as a Senior Software Architect. I want to build a [Type of App] that allows users to [Primary Action]. Suggest a modern tech stack that is highly compatible with AI coding assistants (like Cursor or Copilot). List the pros and cons for a solo developer."
Ideation Slides Level 01: Ideation
Vibe Coding
From Idea to Architecture: Setting the Foundation for Rapid Prototyping.
// INITIALIZING SYSTEM
LOAD_COMPLETE_20%
The Jury Prompt
01 // THE_HOOK
"Pitch a crazy app idea to the AI and ask it to critique the technical viability."
"Example: An app that uses your phone's camera to identify if a cloud looks like a celebrity."
Goal: Defend the idea. How can we simplify it to make it buildable?
// AI_CRITIQUE_RESPONSE.txt
"While technically possible using Computer Vision and Image Recognition APIs, real-time cloud-to-celebrity matching requires a massive dataset of celebrity profiles..."
> CHALLENGE: Can we just use a 'Random Celebrity' generator based on cloud shapes instead?
Anatomy of an App
02 // ARCHITECTURE
Frontend
The "Vibe." What the user sees, clicks, and feels.
React, Vue, HTML/CSS, Tailwind
Backend
The "Brain." Processing logic, authentication, and routing.
Node.js, Python, Supabase, Firebase
Database
The "Memory." Where user data and content live forever.
PostgreSQL, MongoDB, JSON, LocalStorage
The MVP Principle
03 // MINIMUM_VIABLE_PRODUCT
Don't build the whole car. Build the skateboard.
Does it solve the core problem ?
Can it be built in one week ?
Does it show the proof of concept ?
Your Turn
"What is the ONE feature your app cannot live without?"
System Consultation
04 // YOUR_MISSION
Active Task
01
Open your AI Chatbot of choice.
02
Describe your MVP idea in 3 sentences.
03
Ask for a Tech Stack recommendation optimized for speed.
04
Fill out your App Pitch Sheet.
App Pitch Worksheet App Concept & Stack Pitch
Project: Rapid Application Prototyping // Phase 01
NAME: __________________________
DATE: __________________________
01
The Vision
App Name (Working Title):
Elevator Pitch (1-2 Sentences):
What does it do? Who is it for? Why is it cool?
The Primary Action (The Loop):
Example: "User uploads a photo, AI gives it a personality."
The Vibe (Target Aesthetic):
Example: "Retro cyberpunk, neon colors, dark mode."
02
AI Stack Consultation
PROMPT: "I am building [App Name] which does [Action]. I am a student using AI assistants. Suggest a modern, AI-friendly tech stack (Frontend, Backend, Database) for a rapid prototype. Explain why these are good for AI coding."
Frontend
Backend / Logic
Storage / DB
Why did the AI suggest this?
03
The MVP Scope
The "One Feature" Promise:
If your app ONLY did this one thing, would it still work?
Included in MVP:
List 3 sub-features...
Saved for "V2" (Scope Creep):
What will you NOT build yet? (Be realistic!)
Scaffolding Teacher Guide Scaffolding
the Structure
Lesson 02 | Teacher Implementation Guide
Objectives
• Prompt AI to generate a logical file directory.
• Create boilerplate code for multiple files.
• Verify cross-file connectivity (linking).
Key Skills
• Directory Management
• Scaffolding Prompting
• Dependency Verification
• Local Development Setup
System Initialization Phase
Sequence: Rapid App Prototyping
Teacher Resource
Procedural Roadmap
The Hook (5-7 Mins)
"The Instant City: Watch an empty folder transform into a full project structure with one well-crafted paragraph."
Demonstrate on the projector: Create an empty folder, open Cursor/VS Code, and prompt: "Generate a complete file structure for a React app that tracks gym workouts." Show the magic.
01
Phase 1: The Blueprint Prompt
Students draft their first "Architectural Prompt." This prompt shouldn't ask for code logic yet, just the skeleton .
"Based on my tech stack [X], provide a list of all necessary files and folders I need to create to get a basic 'Hello World' running. Organize them in a standard industry structure."
02
Phase 2: Creating the Files
Students create the physical files on their machines. This is a critical "hands-on" moment where the abstract becomes concrete.
Create the root folder.
Create subfolders (src, public, components, etc.).
Ask AI for "Boilerplate code" for each file.
03
Phase 3: The Link Check
The "Ghost in the Machine" check. Students must verify if App.js actually imports Component.js correctly. AI often makes mistakes with file paths!
Facilitation Hacks
Common Scaffolding Pitfalls
Relative Path Hallucinations
AI might suggest import User from './User' when the file is actually in ../components/User. Teach students to look at the folder tree.
Version Mismatch
The AI might provide code for React 17 while the student's project setup is React 18. Suggest they explicitly say "Use the latest version of [Framework]" in their prompts.
The "Linkage" Test
Challenge students to change the background color of their app in a globals.css file. If the app doesn't change color, their CSS file isn't imported correctly. This is the first lesson in debugging AI mistakes.
Scaffolding Slides Level 02: Scaffolding
The Instant City
// Transforming an empty folder into a living structure.
The Magic Trick
01 // DEMONSTRATION
"Generate a full directory structure for a Next.js application using Tailwind CSS. I need folders for components, hooks, and lib. Create the boilerplate for layout.js and page.js."
Empty Folder
Live Project
One prompt. 2 seconds. Whole structure.
Project Anatomy
02 // DIRECTORY_LOGIC
// Standard Next.js Structure
📁 my-app/
📁 src/
📁 components/
// Reusable UI bits
📁 app/
📄 layout.js
📄 page.js
📁 public/
// Images and static assets
📄 package.json
📄 tailwind.config.js
The Why:
AI works best when it follows Industry Standards . If you use a weird structure, the AI will get confused about where to find files.
The Linking:
Every file in a web app is connected. page.js "imports" components. If the path is wrong, the city goes dark.
The Verification Gap
03 // AI_LIES_CHECK
Don't trust. Verify.
AI often assumes files exist that don't, or gives you code for the wrong version of a library.
YOUR CHECKLIST:
[ ] Do paths actually exist?
[ ] Are imports correct?
[ ] Did it give me ALL the code?
// Error found in AI output:
import Navbar from '../NavBar'
Actual file name: navbar.js
// Case sensitivity matters in code!
Your Mission
04 // TASK_INITIALIZATION
Initialize Your Project
1
Write your "Architectural Prompt" following the guide.
2
Create the folder and files manually or via terminal.
3
Ask AI for the boilerplate for each file.
4
Run the project and fix the first "Ghost" error.
Prompt Engineering Handout Prompting the Architect
REFERENCE GUIDE // SCAFFOLDING PHASE
VERSION 1.0.4
The Perfect Scaffold Prompt
"Act as a [Role: Senior Software Architect]. I am building a [Project: Recipe Journal App] using [Stack: Next.js and Tailwind].
// Phase 1: Structure
Please provide a complete file directory tree for this project following industry standards. Explain the purpose of each main folder."
// Phase 2: Boilerplate
"Now, provide the boilerplate code for the root layout and main entry point. Ensure they are correctly linked with appropriate imports."
Component Strategy
When asking AI to build a specific component (e.g., a Sidebar), use the "Prop First" method:
"Create a Sidebar component. It should accept an array of 'links' as a prop. Each link has a title and an icon name from Lucide. Use Tailwind for a dark theme."
* This forces the AI to write clean, modular code rather than hard-coding everything.
The Verification Loop
Import Verification
Does the import path ../components/Header actually point to the file? Case sensitivity is key!
Dependency Check
If the AI uses lucide-react, did you actually install it via npm install?
The Console Rule
Keep the browser dev console open (F12). Red text is a hint, not a failure.
Prompting Cheat Sheet
Goal Prompt "Power Word" AI Instructions New Feature Boilerplate "Give me the minimum boilerplate to see it on screen." Errors Trace "I'm getting [Error Name]. Trace the imports to see if I missed a file." Clean Up Refactor "Refactor this file to separate the UI logic from the Data logic." Explain Documentation "Add JSDoc comments to this function so I know what the parameters do."
Functionality Teacher Guide Implementing
Functionality
Lesson 03 | Technical Lead Guide
Objectives
• Execute feature implementation via AI prompts.
• Manage regression (preventing new code from breaking old code).
• Debug AI logic errors using "Rubber Duck" prompting.
Risks
• Feature Creep
• Hallucinated Logic
• Technical Debt
• Regression Errors
Construction Phase
Sequence: Rapid App Prototyping
Teacher Resource
The Implementation Loop
The Hook (10 Mins)
"The Jenga Challenge: Add a new feature to your code without toppling the existing features."
Scenario: "You just added a 'Delete' button. Now, suddenly, your 'Save' button stopped working. Why? You didn't change the Save button code!"
Discuss: How do we tell the AI to be 'careful' with existing code?
01
Phase 1: Feature Isolation
Students must pick ONE feature from their MVP list. They prompt the AI to build only that feature in a separate component first.
Strategy: "Build the [Feature] logic. Do not modify the main app state yet."
02
Phase 2: The Integration Prompt
The most dangerous part. Merging the feature. Teach the "Context Dump" technique.
Copy/Paste current App.js.
Tell AI: "Here is my current code. I want to add the [New Feature] component. Please update the code but do not change the existing [Old Feature] logic."
03
Phase 3: Rubber Duck Debugging
When it breaks: "Explain to the AI what happened step-by-step." If they can't explain the bug, they can't prompt the fix.
Bug Squashing Facilitation
Regression Defense
Regression happens when AI rewrites a function you already perfected to fit a new, lower-quality logic. Teach students to use "Partial Updates":
"Don't rewrite the whole file. Just give me the updated code for the [handleDelete] function."
Student Struggle #1
"The AI keeps giving me code that doesn't work with my other files."
Fix: Mention all relevant file names in the prompt so the AI 'understands' the context.
Winning Strategy
"I'll just add one line of console.log to see if the button is even firing."
Fix: Encourage manual sanity checks! Don't let the AI be the only one checking the work.
End of Lesson Checklist
Functionality Slides Level 03: Implementation
Feature Jenga
Building the core without breaking the foundation.
The Jenga Effect
01 // REGRESSION_LOGIC
In Vibe Coding, adding a new feature often accidentally removes or breaks an old one.
"I asked the AI to add a 'Dark Mode' toggle, and now my 'Submit' button doesn't save to the database anymore."
Why? AI 'hallucinates' the old logic to save space or tokens.
Broken Piece
Safe Integration
02 // THE_WORKFLOW
1. Isolation
Ask the AI to build the feature in a separate component or file first. Don't touch the main app.
2. Context Dump
Give the AI the entire current file and say: "Integrate this new part without changing existing logic."
3. Sanity Check
Test the old features immediately after adding the new one. Did they survive?
Prompted Debugging
03 // RUBBER_DUCKING
If you can't explain the bug, the AI will just guess. Guessing leads to worse code.
// BAD PROMPT
"It doesn't work. Fix it."
// GOOD PROMPT
"When I click 'Submit', the console shows 'Error: userID is undefined'. Look at how I'm passing the user state to the form."
"Tell the AI what you see, not just what you feel."
Today's Sprint
04 // MISSION_LOG
The Implementation Mission:
Build Feature #1 (Logic Only)
Build Feature #2 (Interaction)
Integrate into main project
CRITICAL:
"Document every bug you find and how you prompted the AI to fix it in your Feature Implementation Log ."
Implementation Log Feature Implementation Log
Project: Rapid App Prototyping // Sprint 03
NAME: __________________________
APP: ___________________________
Target Feature
Status: Initializing
Feature Name & Primary Goal:
Example: "User Login System - allow users to save their scores."
Inputs Required:
Outputs / UI Change:
The Prompt Loop
1
Prompt Sent:
Result / Bug Found:
2
Refined Prompt (The Fix):
Outcome:
Regression Audit (The "Jenga" Check)
List 2 things that were working before this feature. Test them now.
Final Status Reflection:
If everything broke, what will be your first prompt tomorrow to recover?
Polish Teacher Guide UI & UX
Polish
Lesson 04 | Visual Design Facilitation
Objectives
• Translate "Vibe" into specific design terminology.
• Prompt for layout responsiveness and accessibility.
• Refine visual consistency across components.
Key Concepts
• Visual Hierarchy
• Semantic HTML
• Design Tokens
• User Feedback Loops
Refinement Phase
Sequence: Rapid App Prototyping
Teacher Resource
The Aesthetic Sprint
The Hook (10 Mins)
"Ask the AI to 'make it pop' and analyze why the result is usually terrible, then refine with specific design language."
Analysis Activity:
Show two prompts on the screen:
1. "Make the header look professional and cool."
2. "Add a subtle shadow to the header, change the background to #F8FAFC, and use a semi-bold Montserrat font with 2px letter spacing."
Which one will the AI actually get right?
01
Phase 1: Defining the Tokens
Students establish a "Global Design Prompt." This creates consistency so the AI doesn't pick random colors for every new component.
"Use Tailwind colors: primary is Slate-900, secondary is Indigo-500. Rounding should be 'rounded-2xl' for all cards."
02
Phase 2: Mobile Responsiveness
Students prompt the AI to make the layout work on phone screens. "Use a hamburger menu for mobile and a grid layout for desktop."
03
Phase 3: The Accessibility Audit
"Check the color contrast of my buttons. Ensure all images have 'alt' tags. Does the screen reader know which button is the 'Delete' button?"
The "Vibe" Translation Guide
If they want "Minimalist"
• "Use high white-space."
• "Stick to a monochrome palette."
• "No borders, use subtle shadows."
If they want "Brutalist"
• "Use thick black borders (4px)."
• "Use neon, clashing colors."
• "Use monospaced fonts for headers."
If they want "Cyberpunk"
• "Dark mode by default."
• "Glow effects (text-shadow)."
• "Electric blue and pink accents."
If they want "Retro/Analog"
• "Add a subtle grain/noise filter."
• "Use Serif fonts (Merriweather)."
Polish Slides Level 04: Refinement
Vibe Polish
Transitioning from "Good Enough" to "Pixel Perfect."
The "Make it Pop" Trap
01 // VAGUE_PROMPTING
Vague design requests lead to ugly apps.
You say:
"Make it look modern and sleek."
The AI sees:
"Add a blue gradient, use Arial, and maybe make some things bold? I'll just guess."
"The AI cannot see the vision in your head."
Design Tokens
02 // SYSTEM_BUILDING
Palette
Primary: #6366f1
Geometry
Rounding: 24px
Typography
Headers: Montserrat Black
"Feed these rules into every prompt to maintain the Vibe."
The Inclusive Vibe
03 // ACCESSIBILITY
Clickability
Are button hit-zones large enough for mobile thumbs?
Contrast
Can people read your light gray text on white backgrounds? (Hint: No.)
Semantics
Does the AI use button tags or just div tags?
"Polish isn't just how it looks. It's how it works for EVERYONE."
> PROMPT: "Run an accessibility audit on this component. Fix any low contrast or missing labels."
The Glow-Up
04 // MISSION_DESIGN
Step 1: The Token Set
Define your 3 primary colors and 2 fonts. Lock them in.
Step 2: The Refine Loop
Prompt for: Spacing, Borders, Shadows, and Hover states.
Step 3: Mobile Check
Resize your window. Did it break? Prompt for Flexbox fixes.
Finish the Vibe!
Design Language Reference Design Language Reference
Vibe Translation // Rapid App Prototyping
Use these specific terms in your prompts to help the AI "see" your vision.
01 // Layout & Spacing
Instead of "Space it out"
"Add 40px of padding inside the card and a 24px gap between grid items."
Instead of "Make it look better on phones"
"Make the container responsive . Use a single column for mobile breakpoints and 3 columns for desktop ."
Instead of "Center it"
"Use Flexbox to center content both vertically and horizontally (justify-center , items-center )."
Instead of "Line it up"
"Ensure all text is baseline-aligned and cards have a consistent aspect ratio ."
02 // Visual "Vibe" Tokens
Shadows & Depth
• "Subtle drop-shadow"
• "Inner-glow effect"
• "Neumorphic elevation"
• "Glassmorphism / Frosted glass"
Borders & Corners
• "Rounded-3xl (large)"
• "Hairline border (0.5px)"
• "Pill-shaped buttons"
• "Sharp 90-degree corners"
Interactions
• "Hover state: scale 105%"
• "Smooth transition (0.3s)"
• "Active state: depressed"
• "Staggered entrance anim"
The Polish Prompt Template
// Copy and adapt this:
"I want to refine the UI of my [Component Name]. Please apply the following design tokens: 1. Colors: primary is [Color], background is [Color]. 2. Spacing: Use [Standard Unit, e.g. 16px] as the base multiplier. 3. Borders: Use a [Weight] border with [Radius]. 4. Typography: Headers should be [Font-Weight] [Font-Size]. Ensure the layout is fully responsive and meets WCAG AA accessibility standards for color contrast."
Rapid App Prototyping // Design Unit
DO NOT TRUST THE DEFAULT VIBE.
Deployment Teacher Guide Deployment &
Documentation
Lesson 05 | Launch Day Guide
Objectives
• Deploy web applications to hosting services (Vercel/Netlify).
• Use AI to generate comprehensive technical documentation.
• Conduct peer-reviews of deployed applications.
Key Skills
• CI/CD Pipelines
• Git Fundamentals (Optional)
• README Writing
• Peer Assessment
Launch Phase
Sequence: Rapid App Prototyping
Teacher Resource
The Launch Protocol
The Hook (5 Mins)
"The Stranger Test: If you handed your code to a stranger, could they run it? Let the AI write the instructions."
Discussion: Why is documentation the 'final boss' of software engineering?
01
Phase 1: Environment Readiness
Students must ensure their code is "portable." They prompt AI: "What environment variables or dependencies do I need to document so someone else can host this app?"
Checklist: .env files, package.json scripts, build commands.
02
Phase 2: The One-Click Launch
Guide students through Vercel or Netlify. This is the moment their local project becomes a live URL.
⚠️ Warning: AI cannot do the physical clicking for them. They must manage the hosting dashboard themselves.
03
Phase 3: AI-Generated Docs
Prompt AI: "Here is my file structure and core features. Write a professional README.md that explains how to install the app, what it does, and how the architecture works."
Peer Review Facilitation
The "Gallery Walk" Protocol
1
The Visit
Students visit a peer's live URL. They should try to 'break' the app by entering weird data.
2
The README Check
Does the documentation accurately describe what the app does? Is the "Vibe" reflected in the writing?
3
The Feedback
Give one "Glow" (What was cool?) and one "Grow" (What could the AI improve next?).
Mastery Check
"Can the student explain one specific architectural choice the AI made and why it was the right (or wrong) one?"
Extension
Have advanced students set up an automated 'Build Hook' that redeploys the app every time they save their code.
Deployment Slides Level 05: Launch
Deployment Day
Taking your code from the terminal to the world.
The Stranger Test
01 // DOCUMENTATION_LOGIC
"If you handed your code to a stranger, could they run it in 5 minutes?"
Documentation is for:
• Future You (who will forget everything)
• Collaborators / Teammates
• Potential Employers
# README.md
## Project Name: Nebula
"A decentralized vibe-engine built with React..."
### Installation
1. `npm install`
2. Set environment variables...
> Use AI to generate this professional tone!
Live Hosting
02 // DEPLOYMENT_SYSTEM
Git / Upload
Send your code to a repository or directly to the host.
Build Settings
Tell the host: "This is a Next.js app. Run `npm run build`."
HELLO_WORLD.APP
The Audit Walk
03 // PEER_FEEDBACK
GLOW
"What is the most unique 'vibe' choice they made? Did the AI help them execute a cool transition or layout?"
GROW
"Find one bug or 'AI Hallucination'. Suggest a specific design term they could use in a prompt to fix it."
System Online
04 // FINAL_INITIALIZATION
CONGRATULATIONS.
You have successfully transitioned from a syntax writer to a Technical Product Lead.
App Deployed
Docs Generated
Deployment Checklist The Launch Checklist
Project Completion // Rapid App Prototyping
URL: ____________________________________
Technical Readiness
Environment Variable Audit
Did you remove all private API keys from your code? (Use .env files for deployment!)
Build Command Verification
Does `npm run build` actually work on your local machine? If it fails here, it fails in the cloud.
Dead Code Removal
Prompt AI: "Review my components. Remove any unused imports or console logs meant for debugging."
Documentation (README.md)
Professional Header & Description
Step-by-Step Setup Instructions
Feature List (MVP Proof)
AI Collaboration Notes (What did AI help with?)
Peer Review Log
Reviewer Name:
One "Glow" (Visual/UX):
What was the best part of the user experience?
One "Grow" (Bug/Logic):
Found a bug? Suggest a fix...
Project Status: DEPLOYED
