Vibe Coding Intro Slides VIBE CODING 101
Requirement Elicitation & Meta-Prompting
ITERATIVE_APP_DEV GRADUATE_ENGINEERING_AI
The Paradigm Shift
Traditional Coding
Focus on Syntax, Architecture, and Manual Logic Implementation.
Vibe Coding
Focus on Intent, Orchestration, and Automated Verification.
Developer as Architect & Orchestrator
Language as the Primary Interface
Validation over Construction
Meta-Prompting: Coding the Prompt
"The Prompt that Prompts"
"Help me design a technical specification for a [PROJECT]. Ask me 10 clarifying questions to uncover hidden requirements before writing any code."
Elicitation
Surface unknown unknowns
Structure
Define the data model early
Constraints
Establish boundaries
The Vibe Coding Workflow
01
Elicit
Use Meta-Prompts to refine the vision.
02
Specify
Generate a rigid technical markdown spec.
03
Verify
AI critiques the spec for flaws/gaps.
Deploy
Launch the iterative loop.
Today's Objective
Conduct a Requirement Elicitation Workshop. You will act as the Orchestrator, directing the AI to build its own blueprint for an MVP application.
OUT: Vague Ideas
IN: Validated Technical Specs
Meta Prompting Workbook META-PROMPTING WORKBOOK
MODULE_01 // REQUIREMENT_ELICITATION
NAME:
DATE:
Concept: The Meta-Prompt
A Meta-Prompt is a prompt designed to guide an AI in creating better prompts or specifications. Instead of asking for code directly, you are asking the AI to act as a Senior Product Manager to help you uncover what actually needs to be built.
Example Meta-Prompt Template:
"I want to build [APP DESCRIPTION]. Act as a Senior Software Engineer and Product Manager. Before we write any code, I need you to help me define the technical requirements. Ask me 5-10 specific questions about the data structure, user flow, and edge cases to ensure we have a complete blueprint."
01 Define Your MVP
PROJECT VISION (What is the core problem?)
TARGET USERS
02 The Meta-Prompting Cycle
STEP 1: INITIAL PROMPT
Draft your meta-prompt here using the template from Page 1.
STEP 2: AI ELICITATION
List the most critical questions the AI asked you. How did they change your original vision?
03 Final Spec Summary
Once the AI has helped you refine the requirements, summarize the core pillars of your technical spec below:
DATA MODEL:
TECH STACK:
KEY FEATURES:
CORE SUCCESS:
Requirement Workshop Guide FACILITATION GUIDE
LESSON 01 // REQUIREMENT WORKSHOP
Duration
90 MIN
Lesson Objective
The goal of this workshop is to shift student mindset from "how do I write this code?" to "what exactly am I asking the AI to build?". Students will exit this session with a locked-in Technical Specification generated through an iterative dialogue with an LLM.
Key Discussion Prompts
"Why does AI code generation often fail when we give it a simple one-sentence prompt?"
"What are the 'hidden' requirements in a standard Todo app that we usually take for granted?" (e.g., persistence, concurrency, validation)
"How does Meta-Prompting turn the LLM into a business partner rather than just a calculator?"
Preparation
Distribute Meta-Prompting Workbook
Ensure LLM access (Claude/GPT-4o)
IDE Setup (VS Code / Cursor)
Workshop Timeline
15 MIN
Hook & Concept Intro
Present Intro Slides. Frame the "Vibe Coding" paradigm shift. Challenge students to think about their MVP vision.
20 MIN
Individual Ideation
Students complete Part 1 & 2 of the Workbook. Encourage them to pick a simple but functional MVP (e.g., Todo app, Weather Dashboard, Simple CRM).
40 MIN
The Meta-Prompting Loop
Crucial Phase: Circulate the room during this time.
Students engage with the AI using the Meta-Prompt template. Watch for students skipping the questions the AI asks—ensure they actually answer them to refine the spec.
15 MIN
Spec Lock-In & Debrief
Students finalize their technical summaries. Peer-review session: "Does this spec have enough detail to build the app tomorrow?"
Common Misconceptions & Pitfalls
"It's just ChatGPT"
Remind students that LLMs have high "entropy"—the same prompt yields different results. Rigorous elicitation reduces this variance.
Scope Creep
Students often want to build the "Uber for X." Force them to define the "Micro-MVP" (3 core features max) for this sequence.
TDD Vibe Slides REVERSE THE FLOW
Test-Driven Vibe Coding
TDD_FIRST AI_AS_CONSTRAINED_GEN
The Trust Problem
AI can hallucinate valid-looking code that fails in production.
"Trust, but verify."
By writing tests before code, you create a rigid "Success Filter" that the AI cannot bypass.
Tests define the truth .
Code is just a variable that tries to satisfy the truth.
Natural Language Assertions
# Scenario: Adding a Todo Item
GIVEN the input field is empty
WHEN the user types "Buy Coffee" and hits Enter
THEN a new item should appear in the list
AND the input field should be cleared
We prompt the AI to convert these Stories into Executable Code (Playwright, Jest, PyTest).
RED
Generate tests first. Watch them fail on empty files.
GREEN
Feed the failing test logs to the AI. Prompt it to pass the test.
REFACTOR
Ask the AI to optimize while keeping the tests passing.
PHASE 02: THE TRUTH MACHINE
You will write a suite of Natural Language Test Cases for your MVP. Then, you will use the AI to transform those vibes into a functional test suite.
1. Draft Stories
2. Convert to Code
3. Verify Failures
Test Case Log TEST CASE LOG
MODULE_02 // THE_TRUTH_MACHINE
NAME:
PROJECT:
"Your mission is to write the final exam for your application before you build it. Use Natural Language stories to describe every critical success path."
01 Functional Stories (Happy Path)
FEATURE_01 ASSERTION: SUCCESS
GIVEN:
WHEN:
THEN:
FEATURE_02 ASSERTION: SUCCESS
GIVEN:
WHEN:
THEN:
02 Constraint Stories (Error Handling)
What happens when things go wrong? (e.g., empty inputs, duplicate data, network loss)
FAILURE_TEST_01 ASSERTION: ERROR_THROWN
GIVEN:
WHEN:
THEN:
03 The Conversion Prompt
// Copy and adapt this prompt for your AI
"I have a technical specification for [PROJECT]. Based on the following user stories, generate an automated test suite using [JEST / PLAYWRIGHT / PYTEST]. Do not write any implementation code yet. Only write the tests. The tests should fail because the implementation files do not exist."
[INSERT YOUR STORIES FROM SECTIONS 01 & 02 HERE]
Validation Logic Guide VALIDATION LOGIC GUIDE
Cheat Sheet // Test Prompting Strategies
Unit Tests
Focus on individual functions, components, or pure logic in isolation.
Vibe Prompt:
"Write unit tests for the `calculateTotal` function. Mock the database calls. Test for negative inputs, zero values, and very large integers."
Integration Tests
Verify that different parts of the system work together (e.g., API + Database).
Vibe Prompt:
"Write an integration test that checks if creating a user via the POST /users endpoint correctly populates the record in the Postgres DB."
E2E (End-to-End)
Simulate a real user interacting with the browser/UI.
Vibe Prompt:
"Use Playwright to write an E2E test. The user should log in, navigate to 'Settings', change their theme, and verify the background color changes."
Stress & Fuzzing
Push the boundaries of input to find edge-case crashes.
Vibe Prompt:
"Write a stress test that attempts to submit 100 random JSON payloads with missing fields to the API. Assert that none of them crash the server."
PROMPT COMMAND DICTIONARY
STUB OUT
Usage: "Stub out the following test cases in Jest with `test.todo` so I can see the roadmap."
SCAFFOLD
Usage: "Scaffold the test environment and configuration files needed for a React + Playwright setup."
ASSERT
Usage: "Write the assertions for this test case. Ensure we check both the status code and the body schema."
MOCK
Usage: "Mock the external Weather API response so we can test the UI's error state without a real network call."
Pro-Tip: Iterative Failure Analysis
When a test fails, don't just ask the AI to "fix it." Instead, Copy the error log and say:
Sprint Cycle Slides THE SPRINT LOOP
60 Minutes to MVP
GENERATE_VALIDATE_REFINE VELOCITY_OVER_PERFECTION
The Vibe Coding Cycle
1. GENERATE
"Write the code to pass the tests."
2. VALIDATE
"Run the tests. Inspect the logs."
3. REFINE
"Feed errors back to the AI."
REPEAT UNTIL GREEN
Speed is the Skill
Short Prompts
Don't try to build the whole app in one go. Build one feature, pass one test, commit.
Zero Syntax Debates
If the code works and the tests pass, it's correct. Refactor for elegance later.
MVP Goal: Todo App
Local Storage Persistence
CRUD Operations
Filter by Status
Modern CSS Layout
When the Loop Breaks
The Hallucination Trap
The AI keeps suggesting the same broken code.
SOLUTION: Reset the context. Start a new chat with the current spec and the failing test.
The Context Window Blur
The AI starts forgetting previous features.
SOLUTION: Provide the existing codebase as a reference 'Knowledge Base'.
THE 60-MINUTE SPRINT
No Syntax Writing. Only Prompting & Testing.
$ vibe-code --sprint --target mvp
MVP Sprint Log MVP SPRINT LOG
CYCLE_03 // THE_GENERATION_LOOP
Time Limit
60 MIN
No Typing
Test First
Commit Often
Fail Fast
Iteration Tracking
# Prompt Focus Tests Obstacle / Bug Found 01 PASS / FAIL 02 PASS / FAIL 03 PASS / FAIL 04 PASS / FAIL 05 PASS / FAIL
Sprint Reflection
What was the hardest feature to prompt correctly?
Did you ever need to manually fix code? If so, why?
SPRINT STATUS
Total Iterations
Features Completed
Sprint Facilitation Notes Sprint Facilitation Guide
LESSON 03 // MANAGING THE LOOP
Classroom Dynamics during the Sprint
Your Role
You are the Operations Officer . Do not help them write code. Instead, help them diagnose why their prompt is failing . Look at their terminal logs and their prompt history.
The "vibe"
Keep energy high. Call out time milestones (30 mins left, 15 mins left). Encourage students who are "stuck" to start a fresh chat—context poisoning is the #1 reason for failure.
Troubleshooting "The AI is Stuck"
01
The Endless Loop
Symptom: AI generates the same code that just failed the test.
Advise: Stop the chat. Open a new window. Copy the spec and the code into the system prompt. Specifically say: "I have tried [X] and it resulted in [ERROR]. Do not suggest [X] again."
02
The "Lazy" AI
Symptom: AI provides comments like "// rest of logic here" instead of writing code.
Advise: Use a "No Comments" prompt. "Rewrite the entire file. Do not use placeholders or omit any logic. Provide the full functional code blocks."
03
Library Mismatch
Symptom: AI is using an outdated version of a library (e.g., Lucide icons or Tailwind classes).
Advise: Find the correct documentation snippet and paste it into the prompt. "Use this specific syntax for the icons: <i data-lucide='icon-name'></i>."
Sprint Success Criteria
Grade based on process, not just the final product.
Iterative Rigor
Did they commit after every green test?
Is the Sprint Log filled out with specific errors?
Prompt Evolution
Did their prompts get more specific over time?
Did they use technical terminology correctly?
MVP Stability
Does the final app pass the "Happy Path" tests?
Is it functionally ready for Lesson 4 (Refinement)?
Final Debrief Question
"In the last hour, you built more than most junior developers build in a week. Was it because you were 'smart,' or because the feedback loop was fast?"
Refinement Pipeline Slides CLOSE THE LOOP
Automated Refinement Pipelines
SELF_CORRECTING_SYSTEMS ORCHESTRATION_OVER_MANUAL_FIXES
The Copy-Paste Bottleneck
Manual Vibe Coding
1. Run Test
2. See Error in Terminal
3. Copy Error
4. Switch to Browser
5. Paste Error & Ask for Fix
Automated Refinement
1. Build a Runner Script
2. Script captures Terminal Output
3. Script sends Output to LLM API
4. Script Overwrites the file
5. Infinite loop until Exit 0
Pipeline Architecture
RUNNER
Execute Tests
PARSER
Extract Traceback
REFINER
Generate Fix
APPLIER
Write Code
while (!tests_passing) { fix_with_ai(get_error_logs()); }
Leveling Up: Towards Autonomy
We are moving from Human-in-the-Loop to Human-as-Monitor.
Aider / Cursor / OpenDevin
Scripted Feedback Loops
Multi-Model Verification
The Ultimate Goal
BUILD A SYSTEM THAT CAN DEBUG ITSELF WHILE YOU SLEEP.
THE REFINEMENT LAB
Script your first autonomous self-healing loop.
Capture StdErr
Feed to LLM
Patch & Retry
Pipeline Automation Worksheet Pipeline Scripting Lab
CYCLE_04 // AUTOMATED_REFINEMENT
Script Lang:
Target API:
01 Logical Architecture
Sketch out the logic for your 'Self-Healing' script before you prompt it.
# Pseudocode for the loop
WHILE tests_fail {
1. Capture stderr and stdout from test runner
2. Read the broken_file.js
3. Send { error, file_content } to LLM
4. LLM returns patched_code
5. Write patched_code back to disk
6. Increment attempt_count
}
02 Generating the Pipeline
Draft the prompt you will use to generate this automation script. What constraints must the script follow?
[PROMPT: "Write a Python script that uses the Anthropic API to..."]
03 Pipeline Execution Log
RUN # INPUT ERROR AI FIX QUALITY RESULT 01 PASS / FAIL 02 PASS / FAIL 03 PASS / FAIL
Autonomous Insights
How many iterations did it take for the script to solve a bug that you couldn't solve manually?
What is the "Meta-Risk" of an autonomous loop? (e.g., Infinite loops, API costs, hallucinations)
Error Analysis Cheat Sheet ERROR ANALYSIS GUIDE
Debugging for Vibe Coders
The 3 Types of Vibe Failures
01
Syntax / Compiler Errors
"SyntaxError: Unexpected token", "IndentationError", "Variable not defined"
FIX STRATEGY: Feed the raw traceback to the AI. These are the easiest for AI to solve because they are objective and structural.
02
Logic / Assertion Failures
"Expected 'Buy Coffee' but received 'undefined'", "Test failed: Items not saved to DB"
FIX STRATEGY: Feed the AI the failing test file AND the implementation code. Explicitly state what the expected behavior was vs what actually happened.
03
Context / Hallucination Errors
AI keeps suggesting a library that doesn't exist or uses an API that doesn't match your version.
FIX STRATEGY: Provide the AI with the correct documentation. Stop the current chat and start fresh with a clean "Vibe" and the correct dependencies listed.
The "Root Cause" Prompt Template
Master Template
"I am getting the following error in my terminal:
Here is the relevant code from [FILENAME]:
Before you provide a fix, analyze the traceback. Explain WHY this error is occurring. Then, provide the minimal necessary patch to fix it while maintaining existing functionality."
When to use "Aider" mode
"Use for complex refactoring where multiple files need to change simultaneously."
When to use "Manual Override"
"If you spend more than 3 prompts on the same bug, fix it manually to break the AI's loop."
Hardening Deployment Slides PRODUCTION READY
Deployment & Edge Case Handling
HARDENING_AI_CODE SECURITY_AUDITS
The Happy Path Illusion
AI-generated code is excellent at solving for the average case, but often fails at Chaos.
Human Responsibility
"You are the pilot. The AI is the engine. You are responsible for where the plane lands."
Uncaught Exceptions
Null pointers, undefined objects, and unexpected API responses.
Security Vulnerabilities
SQL Injection, insecure headers, and hardcoded API keys.
UX Degeneracy
Missing loading states, poor error messaging, and broken responsiveness.
Hardening Strategy
Security Sweep
Prompt: "Perform a security audit of this code. Look for OWASP Top 10 vulnerabilities."
Edge Case Fuzzing
Prompt: "Generate a set of chaotic inputs to try and crash this validation logic."
Deployment
Prompt: "Create a Dockerfile and CI/CD pipeline for this application."
The Final Review
Before you hit deploy, you must perform a Final Human Audit.
"Does this app feel like it was built by a human who cares, or an AI that just followed orders?"
LAUNCH DAY
Your MVP is live. Your process is proven.
Code Refined
Tests Passing
Edge Cases Handled
Successfully Deployed
Chaos Audit Checklist CHAOS AUDIT CHECKLIST
CYCLE_05 // HARDENING_FOR_PROD
01 UI/UX Resilience
Loading States
"What does the user see when the database is slow? Is there a spinner or skeleton?"
Empty States
"If there are no items in the list, is there a helpful 'Get Started' message?"
Error Messaging
"When a request fails, does the app show a cryptic JSON error or a human-friendly message?"
02 Technical Hardening
Input Sanitization
"Try entering <script>alert('XSS')</script> into every field. Does it break?"
Type Safety
"Try sending a number where a string is expected, or an object where a boolean is expected."
Data Persistence
"Refresh the page in the middle of an operation. Does the data stay consistent?"
03 Chaos Prompts (Hardening via AI)
Use these prompts to force the AI to find flaws in its own code.
// PROMPT: THE ADVERSARY
"Act as a Senior Security Engineer. Audit the following files for security flaws. Specifically look for input injection, hardcoded secrets, and insecure session management. Provide a list of vulnerabilities and then provide the fixes."
// PROMPT: THE CHAOS MONKEY
"Identify 5 edge cases for this function that would cause it to return 'undefined' or crash. Write tests for those edge cases, then update the implementation code to handle them gracefully."
// PROMPT: THE OPTIMIZER
"Analyze the bundle size and execution speed of this component. Suggest 3 optimizations to improve performance without changing the functionality. Keep the tests passing."
Audit Verification
Auditor Signature
Your Name
Status
READY_FOR_DEPLOY
Vibe Coding Final Rubric FINAL PROJECT RUBRIC
MVP // Vibe Coding Mastery
Criterion Exceptional (90-100) Proficient (70-89) Developing (<70) Iterative Rigor Complete commit history; every feature is backed by a green test. Detailed sprint log. Most features have tests; commits are consistent but occasionally large. Fragmented test coverage; few commits; missing documentation of errors. Requirement Elicitation Technical spec is exhaustive. Meta-prompting led to specific edge-case handling. Clear spec document. Some ambiguity remains in edge cases. Vague or incomplete spec; AI was not used to refine requirements. Automation & Logic Automated self-healing script implemented and functional. Pipeline is documented. Pipeline script drafted and tested, but requires some manual intervention. No automation script; all feedback loops were conducted manually. Hardening & Security Application passes security audit. Loading states and error handlers are robust. Basic security audit conducted. Some UI edge cases (e.g., empty states) handled. App is "Happy Path" only; crashes on unexpected inputs or network errors. Deployment Successfully deployed to production URL. Codebase is clean and well-structured. Application runs locally in a stable environment. Deployment attempted. App only runs in development mode or has critical runtime errors.
Final Evaluation Summary
INSTRUCTOR FEEDBACK
Total Score
/ 100
Grade
____
"The code is transient. The process is permanent."
