Vibe Coding in the CS Classroom

Vibe Coding and Its Place in the Computer Science Classroom

What Is Vibe Coding?

Vibe coding is a new way to build software: describe what you want in plain language, and an AI coding assistant (like bool) writes the code for you. Instead of typing each line yourself, you guide the AI to generate, test, and refine.

Why It's Exciting for the CS Classroom

• Lower barriers to entry: Students can build something visual and interactive early, even with minimal coding experience.
• Faster prototyping: Great for project-based learning where students want to create and test something quickly.
• Focus on creativity & design: Students spend more time on user experience, problem-solving, and product vision.
• Gateway to AI literacy: Using AI to code gives a real-world context to discuss how these tools work and their limitations.

How You Might Use It

• Kickstart projects: Have students use AI to scaffold an app, then spend class time understanding and improving the code.
• Differentiate learning: Advanced students can dive deeper into debugging or optimizing; beginners can still create.
• Teach prompt engineering: Students learn to ask precise, iterative questions to get better AI results.
• Discuss AI responsibly: Explore bias, errors, and safe use when relying on AI-generated code.

Quick Classroom Scenario

A 9th grade student describes:

Build a page that lets me pick a mood and changes the background color.

Copy this prompt into bool!

You can then ask the student to:

• Annotate sections of the code.
• Find and fix a bug (e.g., typo or missing event listener).
• Add a new feature (emoji display, better color contrast).

This shows students that AI can help build—but they need to read, debug, and understand what's happening.

Prompting & Iteration (Make AI a Helpful Pair-Programmer)

The Loop (an iterative process)

1. Describe the goal and constraints.
2. Generate code with AI.
3. Run & test what is created.
4. Refine the prompt with specifics: features, style, errors to fix.
5. Repeat with small, focused requests.

Try-This / Not-That

• Vague: "Make a website."
• Better: "Make a single HTML file with a centered card. The card has a mood dropdown and a result area. Use a large, readable font."

• Vague: "It doesn't work."
• Better: "Clicking 'Calm' doesn't change the background. Please add an event listener to the dropdown and update document.body.style.background accordingly."

Prompt Add-Ons You Can Ask For

• Accessibility: "Ensure color contrast meets WCAG AA."
• Readability: "Use clear variable names and add comments."
• Safe inputs: "Handle empty or unexpected input without crashing."

Hands-On: Build a Tiny Mood App

Goal

Create a one-page app where a user picks a mood and the page changes its "vibe."

Step 1: Describe

Create a prompt that describes the goal and constraints of what you want to build. You can use this prompt or create your own.

Write JavaScript that listens to the #mood dropdown change. For calm, set the background to a soft blue and show '😌 Calm vibes'. For excited, warm orange with '🎉 Excited vibes'. For focused, gentle purple with '🎯 Focused vibes'.

Step 2: Generate

• Copy and paste the prompt into bool and generate your first version of the app

Step 3: Run & Test

• Run the app to test how it works.
• What works well? Are there any errors?
• Do you have any notes for improvements? Consider functionality and design.

Step 4: Refine

• Give additional prompts to fix, improve, and refine your app
• Some ideas are:
• Ask for WCAG AA contrast and a reset button.
• Add a "custom mood" text input; map it to the nearest vibe.
• Add subtle animations (CSS transitions).
• Add a short description explaining why each color/emoji was chosen.

Step 5: Repeat!

• Continue to these steps with small, focused requests until you are happy with the final product!

Teaching With AI and Teaching Coding

Classroom Pattern: "AI-Then-Explain"

1. Generate: Students vibe-code a tiny feature with AI.
2. Explain: They write pseudocode or annotate the generated code.
3. Test: Create two test cases (normal + edge case).
4. Improve: Rename variables, add comments, or refactor duplication.
5. Reflect: When would you trust this code? When not?

Prompts That Build Understanding

• "Add comments that explain each step at a 9th-grade level."
• "Rewrite with clearer variable names and a single applyVibe(mood) function."
• "Provide three test cases and expected results."

Guardrails You Can Set

• Always cite sources if code comes from elsewhere.
• No secrets/API keys in prompts.
• Require a Code Review Checklist before turning in: readability, correctness, edge cases, accessibility.

Sample Mini-Lesson (40–60 min)

• 10 min: Prompt & generate the feature.
• 15 min: Read/annotate code in pairs.
• 10 min: Write tests and fix one bug.
• 10–20 min: Refactor + reflection (what changed, why it's safer/clearer).

💡 Next: You've seen how AI can accelerate coding and how we can scaffold student understanding. Next, we'll zoom out and tackle the question many teachers face: "If AI can code, why should students still learn to code?"

Why Coding Still Matters in an AI World

The Question Many Are Asking

With tools that can write working code in seconds, some wonder: "Do students still need to learn to code?"

What Experts & Educators Say

• AI can generate code, but not understanding. LLMs predict patterns—they don't truly reason. Bugs, security flaws, and bad logic can slip through unnoticed unless you know how code works.
• Coding builds computational thinking. Writing and debugging code teaches problem decomposition, abstraction, and logical reasoning—skills beyond just typing syntax.
• Agency matters. Students who understand code can direct, critique, and control AI outputs, not just consume them.
• The job market isn't vanishing—it's shifting. As AI spreads, people who can combine CS fundamentals with AI will shape future technology.
• CS is broader than code typing. It's about systems design, ethics, data, and creativity—things AI can't replace.

How to Frame This With Students

• "AI is your assistant, not your replacement."
• "We learn to code so we can debug, improve, and innovate."
• "Knowing how code works lets you build responsibly and creatively."

🎉 Congratulations!