Two quick questions — the whole page adjusts to your answers.

What chatbot are you using?
Is this for education?

A practical guide

How to Vibe Code

Build small interactive apps by describing them in plain language to an AI chatbot — no coding experience required. We'll go from a one-off activity to apps that generate activities on demand, and cover practical ways to put what you make in front of students.

Open Claude ↗ Browse the examples →
No coding experience required Bring one course problem Start in the next ten minutes
01 · Origin

What Is Vibe Coding?

In February 2025, Andrej Karpathy — a founding member of OpenAI — posted about a new way of working where you "fully give in to the vibes" and stop paying attention to the code itself. See it, say it, run it, paste the error back when it breaks.

The post got over four million views, and Collins Dictionary named "vibe coding" its Word of the Year for 2025. Karpathy has since moved on to "agentic engineering" for professional software — but for what we're doing here, the original meaning still fits perfectly.

The definition to leave with

Vibe coding is describing what you want in plain language, looking at what comes back, and saying "no, more like this" until it's right.

We're not shipping banking software. We're building a drag-and-drop sorting activity for Module 4, or a self-check quiz that gives real feedback instead of "Correct!" The stakes are low and the payoff is high. You don't need to understand the code — you need to judge whether it works for your students. That's a skill you already have.

Collins Word of the Year ↗ Scholarly analysis (arXiv) ↗
02 · Main Tool

Working in Claude

Everything on this page works in any capable AI chatbot. The examples are written for the one you picked above.

claude.ai ↗

Picking a model

You're not talking to "the AI." You're choosing which AI, and they're genuinely different.

  • Bigger, slower models — better at building from scratch. Start here and be patient. With Claude: Opus for building from scratch, Sonnet for everyday work, Haiku for quick edits.
  • Faster models — better for quick edits. "Make the buttons bigger." Don't burn a heavyweight model on a one-line fix.
  • If one gives you something broken twice in a row, switch models before you switch strategies. That's a real technique.

See it while you build it

Claude renders what you build in a live preview pane called Artifacts, right next to the chat. That matters more than it sounds — you can click the thing you just described without saving a file or opening a browser.

Beyond the chat: use Projects

Projects let you keep files, instructions, and context in one place so you're not re-explaining yourself in every new conversation.

Most useful habit

When something doesn't work, don't diagnose it. Copy the error — or just describe what you saw ("the buttons don't do anything when I click them") — and paste it back. The model is better at debugging its own work than you are.

03 · Demo

Creating & Testing Small Apps

Start simple, then ask for more. Your first prompt doesn't have to be perfect — it has to be specific enough to give you something to react to.

Try one of these

1
Create a one question HTML knowledge check based on a fact from this page: https://en.wikipedia.org/wiki/Photosynthesis
2
Create a drag and drop HTML sorting activity based on this page: https://en.wikipedia.org/wiki/Water_cycle
3
Create a flash card HTML activity based on 5 facts from this page: https://en.wikipedia.org/wiki/Photosynthesis
Copy & paste this approach 
Create a single file HTML app that will do ______this______.

Make it fully accessible with WCAG 2.1 AA color contrasts.

Make it in the style of __________.

Make sure it has ______, ______, and ______.

Draw from this content below or attached or at this
website: __________

Add in one more feature to surprise me.

Why each line matters

  • "Single file HTML" — say it every time. Three separate files are much harder to place anywhere.
  • Accessibility up front — dramatically easier to ask for at the start than to retrofit later.
  • Describe behavior, not code — "correct items turn green and stay put." You don't need to know how.
  • Say what happens when someone gets it wrong — this is what makes it a learning object instead of a toy.
  • "Surprise me" — rolling the dice. You never know.
The loop

See it. Say it. Run it. When it's off, describe what's wrong in plain language and send it back. That's the whole thing.

04 · Important Additions

Canvas HTML Rules

Canvas strips out anything it considers unsafe. Paste these rules into your prompt alongside the request and the model will build something that survives the copy-paste into a Canvas page.

Canvas LMS — HTML rules for copy-paste interactive content
  • No <script> tags or JavaScript event attributes (onclick, onchange)
  • No <style> blocks — all CSS must be inline via style=""
  • Use <details> / <summary> for all interactivity (expand/collapse)
  • System fonts only — no Google Fonts or external CSS frameworks
  • All links must use https://
  • No <iframe> unless pointing to an external HTTPS URL
  • Make all font colors WCAG 2.1 AA contrast compliant
Why this matters

If your app worked fine in the browser but looks broken after pasting into Canvas, this list is almost always the reason. Put these rules in the prompt up front rather than debugging afterward — or host it externally and embed it instead (see Getting Into Canvas).

05 · Orientation

First Real Questions

Before you build anything, three questions worth sitting with.

?
What can you create?
Not "what's technically possible" — what's within reach for your course, this semester.
?
What problem would you like solved?
Start with the thing students always get stuck on. Not a months-long build — one thing.
?
Does something else already solve it?
A Canvas quiz, an existing tool, a colleague's activity. Building isn't always the answer.
06 · Framework

Three Levels of Creation

Each level is a bigger lever. Everybody starts at one — and plenty of great work lives there.

Level 1 Create one thing ▾
A one-off prompt — type it in, or copy and paste from somewhere else.
One interactive object. One activity, one topic, one module. You write a prompt, you get a thing, you put it where people will use it. Nothing to set up and nothing to maintain. If you never go past this, you'll still have changed how your course works.
Level 2 Create something that uses a system ▾
Save your standards once in a Project, then build against them every time.
Instead of re-explaining your standards in every new chat, you put them somewhere the model reads automatically. Your brand colors, your accessibility rules, your constraints, your content.
The content also stops being hard-coded: it lives in a list at the top of the file you can edit yourself. Same crossword engine, different words. The prompt shift is tiny — "Put all the content in a clearly labeled list at the top of the file so I can swap it out." Now one build serves twelve modules.
Vibe prompt template Project instructions starter

Drop either of these into a Project so everything you build comes out consistent. The starter file is written for Claude but works anywhere — rename it for your tool.

Level 3 Create something that builds the thing for you ▾
Build a custom assistant that guides the whole process.
You're not making objects anymore — you're making a machine that makes them. The assistant carries the resources, asks the right questions in the right order, and produces the finished thing. Hand it to a colleague and it teaches them the process while it builds.
Honest caveat

Level 3 sometimes means the app talks to an AI service directly — which means API keys, hosting, and cost. Real considerations, not scary ones. If your app needs to store anything about the people using it, that's the point to slow down and ask someone.

07 · Guardrails

Before You Ship It

"It works on my laptop" is not the same as "it's ready for 200 students." A short list that catches almost everything.

📱
Test it on a phone
More than half the people who open it will be on one. Ninety seconds, and it's the single most common failure.
⌨️
Try it with the keyboard
Tab through it without touching the mouse. If you can't reach a control or can't see where you are, ask the model to fix the focus states.
🎨
Check the contrast
Ask for WCAG 2.1 AA up front, then spot-check it. Light text on a bright fill is the usual culprit.
🔒
Watch for personal data
If it stores names, responses, or grades, stop and ask someone first. Not a "no" — a different path.
The two people trip over

1. Anything that collects personal information changes the conversation. Find out who owns that decision where you work before you build it.

2. Test it on your phone before you test it on a student. It takes ninety seconds and it's almost always where things break.

08 · Shortcut

Don't Start From A Blank Page

This site is a collection of small working apps — every one with a live demo, the full source code, and the prompt used to make it. Free to copy, no attribution needed.

Online Education → Small Apps → Games & Fun → Websites →
  • Every project shows the prompt, not just the code. The Pomodoro timer is vibe coded three different ways — comparing those prompts teaches more than any tutorial.
  • The Mini Crossword is a solid Level 2 example: a real engine where you define the words, positions, and clues in one list.
  • Interactive Content Delivery came from a single prompt with no follow-ups. The prompt is right there on the card.
  • Starter files included — a project instructions starter and a vibe prompt template, so you're not re-explaining your standards every time.
How to use it today

Find the thing closest to what you want, copy the prompt, change the parts that describe your content, run it. That's not cheating — that's the design.

09 · Deployment

Getting Code Into Canvas — Four Ways

You've built something. It runs. Now how does it reach students? In order of effort:

Method 1Copy & paste the HTML

Canvas page → rich content editor → HTML editor view. Paste your single-file HTML. Save.

This is why you say "single-file HTML." If the model gives you three separate files, this doesn't work.

Best for: simple interactives, quick turnarounds Canvas strips some things for security
Method 2Use the Canvas file system

A little tricky, but it keeps everything inside Canvas — no external host, no extra account.

  • Upload the file to Files in your course — it must have a .html extension.
  • Click the file to preview it, then grab the File ID from the URL.
  • Paste the code below into a page's HTML editor, swapping in your Course ID and File ID.
Embed code — replace COURSEID and FILEID 
<iframe
  src="/courses/COURSEID/files/FILEID/download"
  width="100%"
  height="900px"
  style="border: 1px solid #444; border-radius: 8px;"
  tabindex="0">
</iframe>
Best for: staying entirely inside Canvas Height must be a fixed value — percentages won't work
Method 3Host it elsewhere and embed it

Put the file on a website, server, GitHub, or a drag-and-drop host — then embed that URL in Canvas as an iframe.

GitHub ↗ Netlify Drop ↗
The prompt that saves the headache 
Give me the code in an embeddable iframe for Canvas LMS.
Best for: anything complex, or anything Canvas mangled Fix a typo once, not in nine pages
Method 4Ask for the SCORM package
Prompt 
Package this as a SCORM 1.2 zip that I can upload to
Canvas, including the manifest file.

Required when you need completion or scores reported back to the gradebook.

Best for: graded activities Finicky — most likely to need a second pass
10 · Proof

See It In Action

Every one of these was built by describing it, not by writing it. Open one, then open its prompt.

🌱
A content explorer
Six profiles, animated growth, a season simulator and a recommendation finder — from one prompt with zero follow-ups.
 🧩
A crossword engine
You list the words, positions and clues; it numbers the grid, handles typing, and checks the answers.
 ✅
A knowledge check
Instant feedback with an explanation after every answer, not just "Correct!" — the smallest useful thing to build first.
 🃏
Flip cards
A 3D card flip in pure CSS. Swap one list at the top of the file and it's a whole new deck.
What to notice

None of these are hard. They're specific. The difference between a toy and something people use is almost always in how precisely the prompt described the behavior.

11 · Land It

Wrap Up & What's Next

1
You don't need to learn to code. You need to learn to describe, and to judge whether the result works for the people using it. You already do the second one professionally.
2
Start at Level 1 and start small. One thing, the thing that always causes friction. Not a months-long build — one thing this week.
3
Say the magic words in every prompt. These three phrases will save more rework than anything else here.
single-file HTML keyboard accessible works on a phone

Your next steps

  • Open Claude today, while it's fresh.
  • Find something on this site close to what you want, and steal the prompt.
  • Test it on a phone and with the keyboard before anyone else sees it.
  • Build the second one. The first is the hardest, and it stops being hard quickly.