Vibe Shift Slides LESSON 01 // VIBE CODING
VIBE SHIFT
From Syntax to Intent: Communicating with the Machines of the Future
Traditional
Vibe Coding
The 10-Second Game Dev
"Can you describe a video game character so well that a computer builds it without you typing a single line of code?"
No semicolons.
No brackets.
No "Syntax Errors."
JUST INTENT.
Traditional Coding: The Syntax Trap
function createPlayer() {
Syntax is the specific "grammar" and "spelling" rules of a computer language.
Vibe Coding: Pure Intent
Natural Language Prompt
"Make a red square player that is 50 pixels wide."
AI processes intent and generates the syntax for you behind the scenes...
Intent Focused
You focus on WHAT it should do.
Language Native
Speak your own language, not binary.
How Intent Becomes Reality
HUMAN INTENT MACHINE SYNTAX "Make it blue" color: blue; "When I click..." element.onclick = () => { ... } "Bigger" transform: scale(1.5);
AI acts as the Universal Translator.
Activity: Prompt Oracle
In your worksheets, you'll see natural language prompts. Can you predict what the AI will build before it runs?
LET'S SHIFT THE VIBE
Syntax vs Intent Worksheet Syntax vs Intent
Lesson 1: The Vibe Coding Revolution
NAME:
Vibe Coder ID: _________
Mission Briefing
Traditional coding requires Syntax (the exact rules of writing code). Vibe Coding uses Intent (what you want the machine to do). Match the descriptions to the code, and then try your hand at predicting AI outputs.
01 The Decoder Ring
Draw a line connecting the Natural Language Intent to its Technical Syntax .
"Make the background dark grey."
"Change color to red when clicked."
"Move it 100 pixels to the right."
"Wait for 2 seconds before starting."
transform: translateX(100px);
setTimeout(start, 2000);
background-color: #333;
onclick = () => color = "red";
02 Outcome Prediction
Read the natural language prompt and describe or sketch what you think the AI will generate.
PROMPT_INPUT.txt
"Create a round neon-green button. When I hover over it, make it glow and spin 360 degrees. Add the text 'LAUNCH' inside."
Your Prediction (Visual or Descriptive):
PROMPT_INPUT.txt
"Build a retro scoreboard. It should show 'Score: 0' in a pixel font. Every time a user clicks the screen, the score increases by 10 and a small blue dot appears where they clicked."
Your Prediction (Visual or Descriptive):
THE REFLECTION VIBE
If you don't need to know "Syntax" anymore, what becomes the most important skill for a programmer? Why?
Token Talk Slides LESSON 02 // MECHANICS
TOKEN TALK
How Large Language Models (LLMs) Actually "Write" Code
The "Magic" of AI
Observation
AI reads millions of lines of existing code.
Probability
It guesses which word comes next based on patterns.
AI isn't "thinking." It's predicting.
The Building Blocks: Tokens
AI doesn't read full sentences. It reads chunks.
func tion greet ( name )
1
A token is roughly 4 characters or 3/4 of a word.
2
AI assigns a numerical ID to every token.
Next Token Prediction
The prompt: "The sky is..."
"blue"
85%
"cloudy"
10%
"falling"
5%
In code, the AI predicts symbols, variables, and structures instead of colors.
YOU ARE THE AI
We're going to simulate a Large Language Model. You'll work together to predict the next piece of code based on a description.
START SIMULATION
Human LLM Lab The Human LLM
Activity: Simulating Next-Token Prediction
CPU STATUS: READY
Protocol: Paper-Based Prediction
In this activity, you will act as a Large Language Model. You have been "trained" on common coding patterns. Your job is to fill in the missing "tokens" based on the probability of what usually comes next in a code file.
01 Basic Syntax Prediction
<button style="background-color: ;">
Click
</\>
Training Data (Weights): blue: 70% red: 20% Me: 90% button: 99%
02 Logical Flow Prediction
let score = 0;
03 Dealing with Uncertainty
Sometimes the training data is ambiguous. Fill in these tokens and then answer the question below.
const playerSpeed = ;
Reflect on Round 3:
Why was it harder to fill in the blanks in Round 3 compared to Round 1? What does this tell us about how an AI "decides" what code to write when our instructions are vague?
The LLM Lesson
An AI doesn't "know" what a player is or what a score should be. It only knows that statistically , the word score is often followed by + 1.
Key Takeaway:
"If you give the AI a bad pattern, it will predict a bad completion."
Prompt Power Slides LESSON 03 // PROMPT ENGINEERING
PROMPT POWER
Structuring Intent into Unstoppable Code
The "Make a Sandwich" Challenge
Vague Prompt
"Make a sandwich."
POSSIBLE RESULTS:
Bread inside ham?
Whole jars of mayo?
Just a pile of lettuce?
Engineered Prompt
"Place two slices of sourdough bread on a plate. Spread 1 tbsp of mustard on one side..."
PRECISE LOGIC.
The Vibe Coding Formula
1. TASK
What is the core action? (e.g., "Create a button")
2. CONTEXT
Where does it live? (e.g., "For a space-themed game")
3. CONSTRAINTS
What are the rules? (e.g., "Must be neon green, max width 200px")
Good prompts remove Guesswork.
Level Up Your Prompts
Noob Coder:
"Make a red box."
Vibe Coder:
"Create a <div> that is 200px wide and 100px tall. Set its background to 'Crimson Red' and give it a 5px black border."
MISSION_START.EXE
Prompt Surgery
We are going to take "dead" prompts and perform surgery to make them functional, precise, and beautiful.
Prompt Surgeon Worksheet Prompt Surgeon
Lesson 3: Fixing Broken Intent
PATIENT ID:
TASK The Action
CONTEXT The Background
CONSTRAINTS The Rules
CASE #001: THE "LAZY" PROMPT
CRITICAL CONDITION
"Make a game about space."
Why it's failing:
Too broad. The AI doesn't know if it's a platformer, a quiz, or a 3D simulation. It will probably "hallucinate" something you don't want.
Surgery Required: Rewrite with TASK + CONTEXT + CONSTRAINTS
CASE #002: THE "VAGUE LOOK" PROMPT
UNSTABLE
"Make a cool button that does stuff when I click it."
Why it's failing:
"Cool" is subjective. "Stuff" is not a command. The AI needs specific visual attributes and a specific action.
Surgery Required: Rewrite with specific visuals and one clear action
FINAL CHALLENGE: THE MASTER PROMPT
Create a prompt for a Weather App Component .
It must include:
A dark mode background.
A big sun icon.
A temperature display (72°F).
A button that says "Refresh" which changes the temperature to a random number between 60 and 90 when clicked.
Write your Master Prompt here:
Vibe Coding Cheat Sheet The Vibe Coder's Manual
Quick Reference Guide for Natural Language Programming
THE PROMPT FORMULA
TASK: The core action. Use strong verbs like "Create," "Generate," or "Modify."
CONTEXT: The setting. "For a weather app," "In a retro arcade style," etc.
CONSTRAINTS: The limits. "Max 500px wide," "Use blue only," "Hide on mobile."
ITERATION TIPS
Build the skeleton first, then add the skin (CSS).
Talk to previous parts: "Change that button from Step 1..."
One feature per prompt keeps logic clean.
VIBE DICTIONARY
Words that AI "feels" effectively:
Retro 8-bit, Pixels, Neon
Modern Clean, Minimal, Round
Cyberpunk Glow, Dark, Contrast
Glassmorphism Blur, Frost, White
COMMON TRAPS
Subjective Words: Avoid "Make it look nice" or "Add stuff."Prompt Overload: Don't ask for a whole game in one go.Ignoring Errors: Copy-paste errors back to the AI.
"The best syntax is a clear mind."
Happy Vibe Coding, 8th Grade Engineers.
Context is King Slides LESSON 04 // ITERATION
CONTEXT IS KING
Building Complexity through Ongoing Conversation
The AI Memory
Chat Context
AI doesn't just look at your last message. It looks at the entire thread.
Variables created earlier.
Styling choices (the "vibe").
Your preferences and rules.
Complexity is built layer by layer.
The Iteration Loop
1
Build Base
Create the simple version first.
2
Refine Style
"Change the background to dark blue."
3
Add Feature
"Now, add a counter that goes up."
DON'T: Try to build a full game in one prompt.
Talking to the Project
Use specific phrases to point to previous work:
"Using the button from before..."
"Add this new style to the existing container."
"Keep the same logic, but change the text to 'Win!'"
The Feature Log
You are going to plan a series of 5 prompts that build a simple app from scratch, step-by-step.
START BUILDING
Feature Add Log Worksheet Feature Add Log
Lesson 4: Building with Iteration
ITERATION COUNT: 05/05
Mission: The Progressive Build
You are going to plan a sequence of prompts to build a Digital Pet Tracker . Instead of asking for everything at once, you will build it in 5 layers. Write a specific natural language prompt for each step.
1
LAYER 01: THE FOUNDATION
Task: Create a simple container for the pet with a name header (e.g., "Fluffy's Home").
Write prompt here...
2
LAYER 02: THE VISUALS
Task: Add an image placeholder and change the background color of Fluffy's Home to a light pastel green.
Write prompt here...
3
LAYER 03: THE INTERACTION
Task: Add a button that says "Feed Fluffy" and a text element that shows "Hunger: 10".
Write prompt here...
4
LAYER 04: THE LOGIC
Task: Make the "Feed Fluffy" button decrease the hunger number by 1 every time it is clicked.
Write prompt here...
5
LAYER 05: THE VIBE SHIFT
Task: When Hunger reaches 0, change the background color to gold and show a message: "Fluffy is Happy!"
Write prompt here...
THE ITERATION ADVANTAGE
Why is it easier for the AI to follow these 5 separate prompts than it would be to follow one giant prompt containing all the instructions?
App Alchemy Slides LESSON 05 // FINAL PROJECT
APP ALCHEMY
Building Your First Interactive Widget with Words
The Final Mission
Today, you will use Vibe Coding to build a functional interactive component from scratch.
YOUR GOAL:
A "Mood Dashboard" that changes styles and messages based on user interaction.
Transform your Intent into Functional Code .
Project Requirements
1
Visuals
Specific colors, fonts, and a layout that matches your "vibe."
2
Interaction
At least two buttons that do different things.
3
Logic
A "state change" (e.g., text that updates or background that flips).
4
Iteration
Built using a minimum of 3 progressive prompts.
The "Vibe Check"
Debugging by Chatting
If the code doesn't work, don't panic. Describe the error to the AI!
"The button is appearing but the color isn't changing. Can you fix that logic?"
Ready to Build?
Use your Project Guide to plan your prompts before you start chatting. Remember: Precision is your new superpower.
LAUNCH APP ALCHEMY
Mini Widget Project Guide Mini Widget Project
Final Assessment: The Mood Dashboard
PROJECT VERSION: 1.0_PROD
The Mission
Build a "Mood Dashboard" component. Users should be able to click buttons (e.g., "Excited", "Chill", "Focus") to change the entire look and feel of the dashboard instantly.
Success Criteria:
Dashboard has a clear title.
Includes 3 "Mood" buttons.
Each button changes the background and text content.
The layout is centered and responsive.
Estimated Time 30 MINUTES
The Build Sequence
STEP 1
Base Structure & Style
Planned Prompt:
Example: "Create a centered div with a dark slate background. Put a title at the top that says 'Mood Control Center' in a bold font..."
STEP 2
Interaction & Buttons
Planned Prompt:
Write your prompt here...
STEP 3
Logic & Feedback
Planned Prompt:
Write your prompt here...
VIBE CHECK: PROJECT REFLECTION
What was the hardest part about describing your "intent" to the AI?
How did your prompt change between Step 1 and Step 3 as the project got more complex?
END_OF_SEQUENCE // VERSION_CONTROL: FINAL_DELIVERY
COMPLETED
