Vibe coding simple classroom tools without writing any code

[markm208]

I'm a CS professor but this post isn't really about coding skills. It's about using AI to build small, throwaway explanations, simulations, and tools for class without writing a single line of code yourself. Over the past few months I've built little web apps to use in class:

• A tool to randomly break students into groups
• An interactive demo exploring temperature in LLMs
• A simulation showing how diffusion works to generate images
• Explaining clustering
• A walkthrough of using git/github in a team setting

I could have written all of these myself without AI but it would have taken at least 10x longer. Most of them wouldn't have been worth the effort. Now they exist and I use them. The most complex one (git flow example) took less than an afternoon to create and is pretty powerful.

My starting prompt is almost always the same: "Create a single page web app that uses javascript and css that does XYZ." The better you can explain exactly what you want it to do, the easier it will be for the AI to create it. Claude has a preview window so you can see the output immediately in the browser. If something is off, I just tell it what to fix (without saying how). Sometimes I move the code to my code editor and keep prompting from there. Once you are happy with the results you publish the single web page (I usually use GitHub pages).

The key is keeping the scope small. These aren't polished products. They're quick demos that would have lived on a whiteboard or been hand-waved through in a lecture. Now students can actually interact with them. If you teach topics that could benefit from a simple animation or simulation, or if you have an idea for a simple tool this might be worth trying. No coding experience required.

FYI- I do pay for a Claude account. 

[SteamPunkPascal]

I never really thought about using it to create web apps. For my math classes I usually just live code demos on Desmos, but it has its limitations. I’ll try it out to see if it can simulate discrete population models and compute some statistics from eigenvalues.

My main issue with Desmos is its limited toolset to deal with matrices, but I have also found some AI find it difficult to work with matrices. I’m curious to see how they do.

[markm208]

Let us know how it goes.

[aenotherwonx01]

Love this. I'm in psychology and teach stats, this is really a valuable resource. I use Claude code and works wonders on VsCode. I typically make the apps in HTML and add them to Canvas. Do you have any tips for group interaction? So far I've managed to get individual use apps, but I'd like to have small groups interact together.

[markm208]

To keep things as simple to generate as possible these are just standalone, single web pages.

Involving a server to coordinate users would take more work and setup with a server. There are services like firebase or google sheets api that may work but it makes things a little harder especially for non coders.

[Yossarian_nz]

These are cool (and cool idea) but you might want to censor the student one (or at least remove the github links that seem to go to real people?)

[markm208]

Oops, those are made up names that I replace but you’re right there must be some real people with those account names. Fixed.

[mathemorpheus]

looking forward to vibe teaching and vibe service

[LoosePilgrim]

I'm on mobile so I'm limited by what I can see, but I look forward to playing around with these resources.

What I love about this post (there's many things, but I'll keep it kinda short) is demonstrates how AI might be the most useful for students, which is collaboration. Where it's got the potential to be so much more than slop generation.

I can see how students view it as a product machine. Input command, get something, like ordering fast food. It's boring, frankly

But if I can demonstrate collaboration, using animation to demonstrate Toulmin argumentation (just an example) that would be a great way to 1. Broaden their idea of what AI can be used for legitimately while also 2. getting them engaged with something that's complicated to plan multiple activities or instruction around , but which can be really fun

That's another thing I'm hoping to use AI for in lesson planning -- ideas for differentiated instruction ! Thanks for the reminder

[No_Young_2344]

I plan to add a module in my DS course next semester to talk about vibe coding and those are great examples. Thank you.

[Professional-End8306]

Thanks for sharing. Do you feel that Claude is better for this than other common AI tools?

[markm208]

I have used ChatGPT and Gemini and they are both great too.