⚑

Youth AI Founders Camp

Day 6: Intro to Vibe Coding & Prompt-to-Prototype

Design with wordsβ€”translate your startup vision into a working, interactive prototype instantly using AI prompting and S-L-O-P!

Design with Words S-L-O-P Prompt Formula Live Prompt-to-Prototype
← All lessons Lesson materials 1 Vibe Coding vs Old-School 2 The S-L-O-P Framework 3 Wireframe Studio 4 Prompt-to-Prototype Sandbox πŸ•ΉοΈ Marble Game Task 5 Production Checklist 6 Marketing Kit Deliverable
Saved on this device

Lesson 6 Materials

1. AI Warm-up Β· Human vs AI Image Challenge

Start with the interactive presentation and guessing activity.

Open AI warm-up β†’

2. Intro to Vibe Coding

Continue below to learn the S-L-O-P framework, sketch a wireframe, and try the prototype simulator.

Start the workbook ↓

3. AI Prototype & Design Β· Advanced Prototype Task Guide

Use the task guide to develop and improve your product prototype.

Open prototype & design guide β†’

60-Minute Vibe Coding Masterclass Schedule

10m
What is Vibe Coding?
00:00 - 00:10
15m
The S-L-O-P Formula
00:10 - 00:25
15m
Wireframe Flow
00:25 - 00:40
15m
Prompt-to-Prototype
00:40 - 00:55
5m
Pitch & Export
00:55 - 01:00
⚑
1. What is Vibe Coding?
⏱ 10 Mins (00:00 - 00:10)

The Lego Castle Robot Analogy

Imagine you want to build an awesome Lego castle, but instead of snapping every single plastic brick together yourself, you have a super-smart robot assistant standing right next to you. You just talk in plain English:

"Hey Robot! Build me a dark purple castle with a tall dragon tower, a glowing green moat, and a button that drops a drawbridge whenever a knight walks up!"

That is Vibe Coding! You focus on the vision, aesthetics, and user experience (the vibe), while AI handles all the confusing code syntax.

Old-School Coding

  • Memorizing hundreds of syntax rules & semicolons `;`.
  • One missing bracket crashes the entire app.
  • Takes weeks or months just to build a simple screen.

Vibe Coding

  • Designing with words: Talk or type to AI naturally.
  • Intent-first: Focus on colors, layout, and user flows.
  • Lightning fast: Build a working app prototype in 5 minutes!
🎨
2. The S-L-O-P Prompting Framework
⏱ 15 Mins (00:10 - 00:25)

Use the golden S-L-O-P formula every time you prompt an AI to design a user interface or prototype. It guarantees your AI understands the complete visual and functional requirements!

S
Style & Vibe

Dark mode / light mode, color palettes (cyberpunk purple, neon teal), rounded card corners, font styles.

L
Layout & Structure

Top navbar, sidebars, grids of cards, centered primary buttons, mobile vs desktop responsiveness.

O
Operations & Logic

What happens on button click? Increment points counter, show modal dialog, play sound, open tab.

P
Polishing & Rewards

Hover animations, confetti success messages, status badges, instant visual feedback.

πŸ—ΊοΈ
3. Wireframe Studio
⏱ 15 Mins (00:25 - 00:40)

App Wireframe

Choose blocks to sketch your app, then turn your layout into a prompt.

2. Arrange your screen

Use the arrows to reorder blocks. Remove any block you do not need.

Screen 1 Β· Home0 blocks
πŸ’»
4. Prompt-to-Prototype Sandbox
⏱ 15 Mins (00:40 - 00:55)

πŸ•ΉοΈ Your Task: Create a Cartoon Marble Game

Build a playful marble game for kids using vibe coding. Start with the prompt below, then improve your game through follow-up prompts.

  1. Create: Paste the starter prompt into your AI coding tool and generate a first version.
  2. Improve: Ask for colorful cartoon scenery, a friendly marble character, large controls, and a star counter.
  3. Test: Try the controls, collect stars, check the score, and restart the game. Ask AI to fix anything that does not work.
  4. Share: Show your game, save your final prompt, and explain one improvement you made.
Follow-up prompt:

β€œAdd left and right arrow-key controls and large touch buttons. Let the marble collect stars for points. Add gentle obstacles, a restart button, and a cheerful celebration when the player reaches the finish.”

The lesson simulator shows a predefined marble-game example. Use your AI coding tool to build and refine your own game.

Craft Your S-L-O-P Prompt

Live Prototype Simulator

Task Dragon Prototype Live
βœ…
5. Student Production Checklist
⏱ Practical Workflow

Vibe Coding Checklist

1. Dream It: Brainstormed your startup concept and core user problem.
2. S-L-O-P Formula: Defined Style, Layout, Operations, and Polish in your prompt.
3. Wireframe Canvas: Sketched your UI screen layout(s).
4. Prototype Generation: Tested and verified your interactive prototype in the sandbox.
5. Tweak the Vibe: Asked AI for follow-up improvements (colors, buttons, counters).
πŸ“
6. Output: Complete Vibe Coding Kit Deliverable
⏱ Deliverable

Formatted Vibe Coding Kit

Action completed successfully!