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.

Turn Ideas into Apps

• Digitize an activity
  Turn what already works into something interactive.

• Fix a recurring hassle
  Make repetitive or clunky tasks easier.

• Build games and brain breaks
  Create or adapt playful activities that energize.

• Personalize something you use
  Make an existing resource work better for you.

• Amplify a learning goal
  Support practice, reflection, or extension.

• Follow curiosity
  Build “what if?” experiments to see what works.

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. Build – 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.

Read through the chat I did with Gemini to create the Angle Ace app.

How to Start

Canva AI

• Go to canva.com/ai

• Click in the Describe your idea box and click the Code button.

Gemini

• Go to gemini.google.com

• Click Tools and choose Canvas.

ChatGPT

• Go to chatgpt.com

• Click the + button, click More, and choose Canvas.

Claude

• Go to claude.ai

• Ask it directly for code. No special selection needed.

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.

• Canva AI

  • While previewing your app, click Publish. Enter a subpath and click Publish. Copy the live website link.

• Gemini

  • While previewing your app on the Canvas, click Share and choose Share. Copy the public link.

  • Restriction: You can generate and preview apps within Gemini, but you cannot share the live app link from an Education or Business account.

• ChatGPT

  • While previewing your app on the Canvas, click the Share icon, Create Link, and Copy Link.

• Claude

  • While previewing your app as an interactive artifact, click Publish, and click Publish & copy link.

• Google Sites

  • Select all the code from the AI and copy it.

  • Go to sites.new or open an existing Google Sites.

  • Click the Pages tab.

  • Hover over the + and choose Full page embed.

  • Name the page and click Done.

  • Click the Add embed button.

  • Click the Embed code tab and paste.

  • Click Next and Insert.

  • Click Publish and view the page.

  • Copy or bookmark the page’s URL.

• App Hive

  • Go to AppHive.us.

  • Click Teacher Login to create an account or log in.

  • Click your profile picte in the top-right, choose My Apps, and click Add App.

  • Enter an App Name, URL slug, description, and app icon.

  • Paste HTML code and Save.

  • Your app is now live at the go.apphive.us URL.

Keep Learning

• Join the Vibe Coding Educators Community on Facebook.

• Subscribe to the Learning in Hand email newsletter.

• Register for Classy Vibing with AI online workshop.