Teachers often have creative ideas for digital tools and activities but lack the time or coding skills to make them. That’s where vibe coding comes in.

Vibe coding means using an AI chatbot to build an app by describing what you want in plain language. You explain your idea, share the look and feel you imagine, and the AI writes the code for you. It is a creative and approachable way to turn ideas into interactive, classroom-ready tools.

Vibe coding combines the imagination of a teacher with the problem-solving power of artificial intelligence. It also connects closely with the Engineering Design Process, encouraging teachers to ask questions, imagine possibilities, plan solutions, create, test, and share.

About Vibe Coding

When you vibe code, you partner with an AI chatbot such as ChatGPT, Gemini, Claude, or Canva AI. You describe your idea and let the AI write the code. Then you test it, make revisions, and publish it so others can use it.

The process works for almost any idea: quizzes, games, randomizers, writing tools, spinners, pickers, or something entirely new. It allows teachers to customize digital experiences that fit their classroom goals rather than settling for pre-made apps.

The Vibe Coding Process

Vibe coding follows the same structure as the Engineering Design Process.

1. Ask – Identify a problem or opportunity.

2. Imagine – Brainstorm app ideas with AI.

3. Plan – Define the user experience and interface.

4. Create – Ask AI to generate the code.

5. Test and Improve – Run the app, revise, and refine.

6. Share – Publish and share your creation.

This process encourages experimentation, reflection, and steady improvement.

Designing the Feel and Function

Before asking AI to code, clarify how the app should feel and how it should function.

• The vibe is the overall mood or style (playful, calm, competitive, etc.).

• The flow is the sequence of screens and interactions.

• The feedback is how the app responds to actions, such as showing success messages or hints.

Defining these parts helps AI better understand your intent and produce results closer to what you envision.

Helpful Reference Phrases

When describing an app, giving AI familiar examples helps it understand faster.
These “Reference Phrases” provide instant context:

• Jeopardy-style quiz

• Memory matching game

• Escape room challenge

• Mad Libs, but with…

• Like Battleship, but…

• Side-scrolling game like Mario

• Tic-Tac-Toe, but…

• Like the Duolingo lesson screen

Mix and match phrases to describe the mood, structure, and format you want.

Try Vibe Coding

Think of a classroom idea that could be more interactive. Then open an AI chatbot and start with a prompt like this:

“I want to make a web-based activity where students [describe what they will do].
Help me plan the layout, interactions, and visual style before generating the code.”

Test what the AI creates, make changes, and try again. A clear description and a little persistence can turn a simple idea into something creative, fun, and ready for the classroom.

Publishing Options

After AI generates your code and you have tested your app, you can choose how to share it. Each publishing option has its own strengths and limitations.

Publishing Within the AI

The fastest way to share is directly from the AI platform you used.

• Gemini creates a shareable page with a Gemini header and footer. Visitors can copy your code and use it as their own. Google Workspace for Education accounts cannot share, but personal account can.

• ChatGPT offers a shareable page that includes a ChatGPT header. Visitors can copy your code and use it as their own.

• Claude lets you publish a Public Artifact, which creates a hosted web page that’s great for interactive HTML outputs. Visitors can copy your code and use it as their own.

• Canva AI can publish directly as a Canva Website or presentation link, keeping your layout and design intact.

Publishing inside the AI is quick and convenient for testing, feedback, or short-term sharing. However, these links can look branded, may be blocked on school networks, and are not guaranteed to stay online long-term.

Publishing with Google Sites

Embedding your code in a Google Site makes your app easily accessible in a familiar, school-friendly environment.

It’s ideal for teachers and students using Google Workspace, since it shares smoothly with anyone who has a Google account. A Google Site also allows you to include directions, videos, or other resources alongside your app.

The drawback is that Google Sites cannot host complex scripts or large projects. It’s best for smaller, self-contained HTML files that work entirely in the browser.

Publishing with Google Apps Script

Google Apps Script is a free, reliable way to host an app using Google’s servers. It’s well-suited for teachers who want a clean link and seamless integration with tools like Sheets, Forms, and Drive. Apps Script removes most branding and runs quickly once deployed.

On the downside, publishing through Apps Script requires a bit more setup, and school web filters could block Apps Script links.

Publishing on a Web Host

Using a web host such as Bluehost, HostGator, or DreamHost gives you complete control over your app. You can use a custom domain, remove all external branding, and publish multiple apps in one place. This option provides the most professional presentation and avoids issues with blocked links.

The main drawback is cost and maintenance. Paid hosting usually ranges from $2 to $10 per month, and you’ll need to upload new versions of your app manually. It’s the best choice for long-term projects or when you want a permanent, polished home for your creations.