First VybeCoding session

This is the hands-on heart of the course. You’ll move from a small idea to a working, shareable prototype using v0, all within about an hour.

Instructors: treat this chapter as a step-by-step script for the live 60–70 minute session.

Learning objectives

By the end of this chapter, you should be able to:

• Follow a VybeCoding session flow from brief → build → iterate → share
• Use v0 prompts to create and adjust a small interactive experience
• Talk about your prototype in terms of vibe, behavior, and choices

Session outline

A suggested breakdown for ~60–70 minutes:

1. Warm-up micro prompts (10–15 min)
2. Introduce the main brief (5 min)
3. Guided first build pass (15–20 min)
4. Iteration rounds (15–20 min)
5. Sharing and reflection (10–15 min)

Adjust timings to match your group’s pace.

1. Warm-up micro prompts (10–15 min)

Goal: get everyone comfortable typing prompts into v0 and observing changes.

Instructor demo ideas (students mirror you):

1. Change the title text to something playful.
2. Ask v0 to adjust colors to match a specific vibe (e.g., “chill evening”, “energetic morning”).
3. Add a button and some text that reacts when the button is clicked (even with a simple message).

Example prompt sequence:

• “Update the main heading to say ‘Today’s vibe’.”
• “Change the background to a soft gradient that feels like a calm morning.”
• “Add a large button below the heading that says ‘Surprise me’ and show a little message under it when clicked.”

Encourage students to personalize at least one element (their name, favorite color, a phrase they like).

2. Introduce the main brief (5 min)

Pick one clear, simple brief and stick to it. Example:

Brief: Build a tiny mood check-in app. The user chooses or clicks a mood, and the app responds with a message or small change in the interface that matches that mood.

Explain:

• The scope is intentionally small.
• The goal is to explore different ideas, not to ship a perfect product.
• Any of these are valid:
  • A few buttons for different moods
  • A dropdown and a response
  • A slider with a changing description

Students can vary the theme: moods, energy levels, focus levels, etc.

3. Guided first build pass (15–20 min)

Walk the class through one full pass from blank-ish screen to a basic mood check-in.

Suggested steps (instructor-led, students follow):

1. Structure

   • Prompt: “Create a simple layout with a title at the top, a short description, and three big buttons labeled ‘Happy’, ‘Tired’, and ‘Stressed’.”

2. Behavior

   • Prompt: “When each button is clicked, show a message under the buttons that responds to that mood in a friendly, encouraging way.”

3. Styling

   • Prompt: “Style the buttons so each mood has a distinct color, and make the messages easy to read.”

4. Fine-tune

   • Manually tweak one or two labels or messages to feel more personal.

After this pass, everyone should have a basic working app.

4. Iteration rounds (15–20 min)

Now shift from following to exploring.

Run 2–3 short, time-boxed rounds (5–7 minutes each):

Round 1: Personalize the vibe

Prompt ideas:

• “Adjust the colors and fonts so the app feels like a cozy evening journal.”
• “Make the layout more compact so it fits nicely on a mobile-sized screen.”

Encourage students to:

• Change mood labels to ones they actually use
• Rewrite messages in their own voice

Round 2: Add a little magic

Prompt ideas:

• “Add a simple animation or effect when a mood is selected.”
• “Show a small suggestion under the message, like ‘Take a 1 minute break’ or ‘Write one thing you’re grateful for’.”

Students can propose their own variations, and you can pick a few to try live.

Optional Round 3: Stretch goals

If time and skill allow:

• Add a reset button
• Track how many times a user has checked in
• Show a timestamp of the last mood selection

Remind everyone: it’s okay if not everything works perfectly. The focus is trying and observing.

5. Sharing and reflection (10–15 min)

Reserve time at the end for quick demos.

Fast demo format

Ask for volunteers to share, each for 1–2 minutes:

• Show the app
• Click through a couple of moods
• Say one thing they changed that reflects their personal style

Celebrate variety: colors, wording, structure, even glitches.

Reflection prompts

Discuss as a group (or have students jot notes):

• What felt surprisingly easy with v0?
• What was frustrating or confusing?
• How did using prompts change how you think about coding?
• Where could you imagine using VybeCoding again (projects, other classes, hobbies)?

Adapting difficulty

For absolute beginners:

• Keep everything prompt-based
• Avoid opening raw code unless necessary
• Focus language on “screens”, “buttons”, and “messages” rather than technical terms

For more experienced students:

• Show how to lightly edit the generated code or structure
• Invite them to add one small custom behavior by hand

Wrapping up the session

End by clearly marking the finish:

• Congratulate everyone on building and sharing something
• Remind them that imperfect prototypes are normal and valuable
• Suggest a simple follow-up: “Later this week, spend 15 minutes making a new variation of your app or starting a fresh idea.”