Hour of AI: Vibe Coding

Welcome to Bool!

Before we dive into building apps together, you'll need to get familiar with Bool - the AI-powered IDE we'll be using.

Click anywhere outside this window to take a quick tutorial on how to use Bool! Don't worry - you'll be able to reopen this window at any time.

Vibe coding means describing the program you want in words and letting AI write the first version of the code.

This can help you quickly protoype ideas and learn through refinement.

Think of AI as your coding partner:

Copy the following prompt into Bool:

"Create an application for a mood picker. When I choose calm, excited, or focused, the page color changes and shows an emoji."

Explore how it works:

Refine your prompt. Try adding:

"Make it accessible, with clear color contrast and readable text."

Optional challenge: Add a "Reset" button that returns to the default mood.

Sometimes the AI's code won't be perfect — that's part of learning.

Consider these reflection questions:

✓ What did the AI do well?

✓ What mistakes did it make?

✓ How did you fix or improve it?

Now you're the designer!

Think of something you'd like to make using the same vibe coding approach.

Here are some ideas:

Steps to follow:

Write a short description of your idea
Use Bool to generate the first version of your program
Run and test the program
Debug, refine, and personalize your app
Give your app a title and purpose statement (What problem or fun idea does it solve?)

🤔 How did vibe coding make coding easier or harder?

🤔 What coding skills did you still need to understand what the AI made?

🤔 When would you trust AI code? When would you double-check it?

You've learned how to use vibe coding to build apps with AI.

Continue your journey with advanced tutorials, classroom resources, and more hands-on projects.