Teach Your Kids How To Vibe Code In 22 Minutes

0:00Oh, actually works. The game actually works. Look at that, baby. Oh my goodness. I love it. Oh my god. Wow. We just built that in like 25 minutes. If you want to see how we build this end to end from point A to point Z all the way through and the tools that we use in between, you're going to want to stick around all the way through the video. We're going to be using these two tools to build this app insanely fast. We're going to be using two tools that are going to help every builder build faster. And that is the goal of these videos is to help you not only build faster, but to build with actual vision for your product. So, in this video, we're going to be using a Google AI studio to do the building. And we're going to be using idea browser to find the idea to build. So, let me go through this database of over a,000 ideas. Pick

0:47an idea and we'll start building. What I like is you just go to find ideas here and they literally have an entire database of ideas. Say you want to build what I've been thinking about lately is, you know, we homeschool our kids and I want to teach them about vibe coding and building software. So, let's type in vibe coding kids. Let's just type in that. See what pops up. Okay, nothing. How about just vibe coding? Okay, here we go. We got three ideas here. Competitive vibe coding arena stream to a live audience. That's pretty cool. call an expert service for non-developers stuck at 80% in Bank of Vibe coding an AI powered fintech platform. Okay, I found it. I found it because I saw this pop up in the idea of the day a

1:32couple months back. I just put in coding for kids and it says creative coding platform that teaches kids how to build with AI. I mean, this is exactly honestly just my opinion. We need to be teaching our children on how to use AI to build things. And that's what I've been kind of thinking of working on building myself. So, this is going to be great. Obviously, you could see it is growing in demand. What I like is you could just do a quick uh search on the keywords and just see if it's trending. I think this is important before you start building anything to make sure that you validate demand. And here you go. Like you got it, you got it popping off the chain here. So, just a quick summary is like kids are already using AI. They're asking ChatG to write their book reports. They're generating images for school projects. They're growing up in a world where you describe what you

2:18want and the machine makes it. So, how can we leverage this into an opportunity that we can monetize? Well, let's build a platform that teaches exactly that. So, build along AI with kids ages 7 through 12. They learn to create alongside artificial intelligence. They can draw a character, watch it animate, describe a game, see it come to life, write a story, hear it read back with voices and illustrations. So, this is what we're going to ch choose. We're going to charge $29 a month for families and then sell school licenses for 2 to 5k annually. I love this. This is such a good idea. What you can see here inside of Idea Browser just to give you further confidence on when you start building is that you can see the offer like what are you going to how are you going to get customers? That's the hard part. Building is the fun part. If you think building is the hard part, you got it

3:03the other way around. Getting customers is the most difficult thing in the world. But we need to make sure that we provide enough value and also offer enough free lead magnets to be able to at least collect some emails. So you can see we got a lead magnet here which is just an interactive AI sketch to code tool, a web app that converts children's drawings into basic code animations that can initially get people in the door and then we can upsell from there. Basically says why now? The AI powered kids coding market is poised for substantial growth due to the increased demand for STEM education. rapid adoption of AI tools in learning and supportive regulatory frameworks providing a perfect launch window for innovative coding labs that combine creative and uh creatively and AI. So that's awesome. Comes with proof

3:48signals, market cap, execution plan. I mean it's really robust on what you get. The easiest part to all this, say you come across an idea that you like, you're like, you know what, this looks great. I've seen enough. You just click on build this idea and then you just go into the Idea Builder. It will connect to Google AI Studio if you want it to. I'm going to choose a few prompts that we're going to start with to initially kick this off. Like I said, Google AI Studio, they just released a new model lately, which is the Gemini Flash um 3.5. So, we're going to go into the actual build uh studio, and just start prompting. Um we're going to pick out some prompts here that are super important to like lay that foundation. The first one is going to be the landing page prompt. We're going to copy that

4:34and then we're going to go back into Google AI Studio. I'm just going to paste all of these in. I know it's going to be a long uh prompt to kick this off. The other one is the product requirements document. Think of this as like the vision and the road map for your idea. We're going to copy that prompt as well. And then we're going to go here to uh feature specs, like the specifications of the actual build. And we're going to kick that off as well. And now I'm going to add some further instructions. Here is the idea that I would like to build. It is a learning platform for kids on how to learn to use AI. This is going to be a web app. They're going to be able to sign in, log into their dashboard, and be able to create custom games, tools, artwork, images, videos, video games. And this is

5:21going to be a subscription model. I gave you the feature spec prompt. I gave you the product requirements prompt. and I gave you the landing page prompt. Please knock one by one out. When you're done, let me know and then we can move on to the next prompt to finish it. I'm also going to give you an awesome design markdown file. Pull inspiration on the design from this repository to build the actual landing page. So, there's a repository called awesome design by Volt Agent. It basically just pulls the top I think 50 or 60 of the best um websites from like SpaceX or Stripe, um YouTube, Google, um just a lot of good aesthetically pleasing websites. You got

6:06Railway, you got Replicate, you got Versel, Warp, Sanity, Superbase. like it just it's going to pull in a lot of the UI designs from those websites like the typography the spacing pop-up modal you know things like that the simple things and there's 90,000 stars on this repo and I think it released maybe 2 months ago so I'm just going to copy the link that's it and we're just going to give it to Google AI Studio so we're going to let it do its thing and we're just going to click build and we're going to come back okay so just a few minutes later it had built out a just foundation right I like to see building apps is like the first step is building a foundation similar to like building a house, right? And that's the one thing with any LLM is the UI needs some tweaking. So we have

6:52something up. Does it look amazing? It needs improvement. But there is something here. We can visualize it because before there was nothing. So now to see our idea kind of come to life is nice. It has some nice copy here. It is a little bit wordy, but I think that this is something that we can tweak and play around with. What I love to do is go to dribble.com. And I like to search for landing pages. So, basically, we're going to go to dribble. And it's having me do a security check for some reason. There we go. Okay. And we're going to go to explore. I recommend everyone do this. You need inspiration. Okay. And then we're going to go to landing page. Not fitness. We're just going to go look at landing pages. And we're just going to scroll and look at a few designs. You

7:38can also do this with uh any URL maybe of a website that you like. Actually, you know what? I do have one in mind that I'd like to try, but I wanted to show you dribble first just so you can get some inspiration because if you're not a designer, I'm not. It's really hard to like actually come up with a really nice UI that just looks beautiful. So, um I suggest dribble. You can al also use Google Stitch to play around and iterate. There's a ton of good examples here, but I really like this website design, especially for our target audience for the app we're trying to build. It's Post Hog. Post Hog just I don't know, it speaks to me. It looks great. I love the whole layout. Uh simple. I think it's fun. Um we're going to use Post Hog as an example. So, we're

8:23just going to copy the link and we're going to go back into Google AI Studio. We're going to read what I had done. as successfully built in the complete high converting landing page for buildalong AI directly mirroring the strategic brief. The entire page is fully responsive optimized for both uh mobile and desktop. So it has a visual identity hero and trust anchors problem and solution narrative core process and features conversation optimized for lower funnel and the whole site is functional right out of the box. That is great. So it built that in 179 seconds which is remarkable. So let's keep playing around with the landing page. The landing page is never going to be oneshotted. You're always going to have to go back and iterate. Great. Thank you. Can you pull inspiration from the Post Hog website and incorporate it into our landing page? Boom. And that's it.

9:09Okay. I like this design much better. More fun. The colors pop. Looks great. You really need to keep your avatar, like who you're going to be selling to, in mind. Not how you want to build it, but how your customers are going to perceive the product. Also, another thing is don't have too many words on your landing page. Generally, people don't want to be reading a book when they get to your product. They want something simple, something they can understand. So, I like the colors. I like how everything pops. Looks great. It's very fun. But let's look at the hero section because that is the part that is the most important part of your landing page. This is what's going to stop the scroll, so to speak. So, don't let them consume AI. Teach them to build with it. I love it. Kids are using AI for homework. Teach them to use it for

9:55creation. Vibe coding for kids ages 7 through 12. No syntax errors, just pure imagination. I love that. Another little thing that I'd like to do just for fun is use, and I love this is Google Omni. This is essentially Google's nano banana, but for video. I want to screenshot my hero section, and I want to make it come to life. I want movement. I want things appearing out of thin air. I want a lot of things just going crazy. So, I want to do that. I'm going to play around with that hero section just to give it that extra little touch. And then we will continue on with the feature spec and actually connecting the back end to this. Okay. So, just going to screenshot this. So, here's what I'm talking about. This was just released a few weeks ago now. You could try it in Gemini, Google Flow. I'm

10:41just going to use Gemini and just kind of play around and see what it comes up with. I want you to animate every single component on this photo. I'm going to be using it for my landing page hero section. So, can you just animate everything? Maybe some spinning animations, some fade transitions, some cool way for these components to appear on the screen, maybe something flipping, maybe something rotating. Be creative with it. I want the whole part of this photo to just come alive. We're trying to stop the scroll. So, this is going to be the hero section of my landing page. we really need to, you know, maybe have components drop in out of nowhere. That's kind of my vision for it. Have fun. So, I'm going to drop in that screenshot and I'm just going to let it go to work. That's it. While that's

11:26working in the background, I'm just going to go back to Google AI Studio and continue on with this build. Awesome. What is the next step? Did we do the feature spec yet? Did we follow the product requirements document? Let me know. Okay, so this is kind of just the building process with AI. I mean, you're just going to have to go back and forth with it. You know, it did skip right into building the landing page, which is fine. We're going to have to get to it eventually, but it says to get us fully aligned with the business goals, I have generated the official product requirements document and the feature specifications based on the initial business model. And then it added them to the project markdown file and the feature spec markdown file. So, you can see we're in preview mode right here. If you click on code, it has all these files that are already inside of your repo that is in the cloud. So you could

12:13go to your product requirements markdown and you can read it and you can edit it and just see that if this aligns for your project. It's very important to do so. So that is all done which is really nice and it has your environment variables folder and all that for connecting API keys. But just thought I'd let you know that you can go in and fully edit the code though this is just a hot take for me but you shouldn't be learning how to code anymore. You should be learning how to use AI to write code. that is the future of AI development in building in general. So that's just my opinion, but hey. Okay, so that is awesome. It's all done. It has a product strategy, safety architecture, core application loop. What's next is now that the landing page is looking sharp and our requirements are documented, we can start building out the actual web

12:58application. Which of these would you like to tackle next? The vibe coding editor, build out a working prototype of the split pane game studio, the parent uh dashboard, and the user flow. Let's do the vibe coding editor and then do the parent dashboard next and then as well as the user flow after that. And while that's doing that, we could jump back into Google Omni. And I have not played this, so I have no idea what it's going to look like. Let's see what it looks like. Wow, that is insane. Oh my goodness, that looks so good. That looks so good. Wow, I love that. That is so good. Like this is crazy. like the let's look at it again. I mean, come on. Look at this. That is she guys, you don't even know how much of an impact that makes. I know it's just a simple video,

13:44but it's really going to be helpful. I'm doing this in all of my builds, by the way. You know, it's only a 1.7 megabyte video, and yeah, th this is crazy. I Let's it start incorporating it right now. That is just awesome. All right, cool. So, it finished the I have translated the PRD and the feature specs into an interactive user flow with routing and navigation, the Vibe editor and the parent portal dashboard. That is awesome. So, I am going to take my video and go into that code section again and then I'm going to create a new uh folder basically. So, a new folder and I'm going to call it hero video and then I'm going to drop in my video into that

14:29folder so it has access to it. So, right there, hero video. Boom. Awesome. And then we'll go back into uh chat and we'll just say to incorporate it. I have added a video to the hero video folder in this repository. Can you please replace the current hero section with the animated hero video? And then after the video plays, I want all the components to actually work, like be clickable. >> All right. So, this is the new version right here. And I think it turned out really, really good. We couldn't get the video to quite work, so I just had it basically animate the entire hero section. And it did a great job. It did a great job. So, just like that. Clean, sleek. Now, it's time to get this

15:14database picked out and ready to go that just incorporates with Firebase. So really easy to capture emails and then we'll test the whole flow together just to see if we can actually create an AI project. You know, something that a child would like building, right? Okay. It says we now have a great foundation. Here's a recap of what we accomplished. The product documentation, landing page, Vibe editor UI, parent portal UI. What's next is to make it real with the AI integration. Hook up the Vibe coding editor to the Gemini API on the back end. This would allow the chat to actually reply to the coding prompts and generate real JavaScript code. interactive game sandbox. Build the mechanism to take the Gemini generated code and run it safely. Write side canvas so the game changes in real time. Awesome. That sounds great. Let's do the

16:00database first, which would be Firebase and then that way we can capture emails. I was wondering about 3JS. Would that be a good graphical code to integrate or is that something more complex to be able to build games with AI? Okay, awesome. That's pretty cool. So, it came back uh integrated the Firebase so we can now collect emails and users. So, it did say yes about 3JS, but that is a little bit more power graphically intensive. So, maybe let's just get something started first, then we can switch to that. Stick to the fast 2D engine like Phaser. Okay, cool, cool, cool. Okay, awesome. Yeah, let's move on to the next step and build this out completely so I can start

16:45testing. All right. So now it says the application is fully functional. Highfidelity interactive prototype. All right. So the weight list works. The editor interface is fully built. Game creation works. So to make a game to make the game creation fully functional, we're actually missing two pieces. User authentication. Okay. Awesome. And then AI backend. Cool. Yes. Let's do both. So we're going to implement the Firebase authentication and then the Gemini API backend. Yes, let's do both. Okay, so it has successfully integrated Firebase authentication and linked the core workflows to allow an actual user to sign up and create a game. So, we're going to test this out step by step. I

17:30love the new animations. I'm going to refresh the page just so you see it. I really do think that adding these just these little things to the hero section, a little bit of movement does really help people feel like, okay, what's going on here? you know, you want to stop the scroll, you want to get attention. I love it. I love the flow of the entire landing page. I think it just goes well with our target audience. So, like I said, you can, you know, check this whole thing out. Natural land, uh, language game builder, story to voice engine, interactive sketch to code. So, we have parent intelligence dashboard. Very cool. And I just love the layout. And then you have the family plan, weekly clubs, and then a custom school program. and then Q&A and then start free trial at the end. So let's go through the actual workflow and just see

18:17how it captures everything. Okay, so I have signed up. This is kind of the preview dashboard. Looks fun. Amazing. Let's see. Want to see what they see. Jump into the vibe coding editor in observe mode. Let's go. It works. That's awesome. Sweet. It's awesome. So here is the make the alien jump higher. Make that. >> Okay, I updated the code. Now the alien leaves a rainbow when when it jumps and I changed the variable has rainbow trail. Okay, let's see how this works. Let's restart it. Space to restart. See what happens when we hit change background. Oh, I didn't save it. There we go. Okay, so this is really awesome. It's a good like bare bones to like get started and start building. I want to get this uh build um chat window

19:03working. So, I can actually make changes to the game as we're playing it. Okay, so the changes weren't be weren't being applied because it actually had to hook up the save button. So, let me refresh it and see if this works. All right, so back to this. I fixed the issue. The game was intercepting the space bar across the entire page. Okay, so it wasn't like reading. So, when I would type something in, it wouldn't like it would just restart the game. So, let's see. Make the alien black. Okay. Then I hit save. Oh, sweet. Wow, that's awesome. Let's go. All right. Has a rainbow trail. Okay. Now, let's see if we can make other changes. Let's see. Make the alien color black. Okay. When I go into make other changes like change

19:49the color of the alien to black, it just keeps saying that it will generate a rainbow trail after everything that I want it to change within the game. Do you know why this is? Okay, so basically it had hardcoded that rainbow trail in there. So we couldn't really do anything else but create a rainbow trail to the alien. Now we are supposedly able to change anything. Now you can try modifying the alien's color, asking for it, hitting save. Okay, so let's see. Let's see if we can build games now. Okay, I want to change the alien color to black. Okay, so we were actually able to change the color of the alien. Let's see. Make the alien bigger. Okay, make the alien have a rainbow trail. Nice. Let's go. Wow. And it goes a lot faster,

20:35too. Sweet. Okay. Awesome. So, this gives us a good foundation to build upon, right? And it took like what 25 minutes to build this out. This is just one instance of the whole product coming to life. Tooling apps has never been easier. And using these two tools like Google AI Studio and Idea Browser to build it out, those are the combinations that can really help you build a lot faster these days. So, and to help you iterate. You're not going to build your final product within 25 minutes, but it helps you get kind of the juices flowing and your ideas flowing to be able to go, okay, I can visualize what my product looks like. Here's what I want to build. Go into idea browser, start that ideation process. Like I said, I mean, they have over a thousand ideas in this database. I have built out about maybe

21:21five or six startups with this product and you know all of them have come to life and it's good to have a good foundation to be able to build upon with all the prompts and then the validation through kind of the keywords and market signals. So to be able to pull that whole project into something like Google AI Studio and to just really, you know, get that idea out from the unseen to the scene, once you see your idea come to life, you give a lot more confidence that, you know, maybe you're not so techsavvy that you can build this too. You don't need to learn how to code. You need to learn how to use AI to write the code for you. And that's essentially what these combinations do is you use idea browser in combination to Google AI Studio and then you see your product come to life. It should make you feel

22:06more confident as a builder and when creating your app. So, I'll put the links to those two products down below. You need to check them out. And questions, comments, concerns, let me know what you think. How is building in 2026? We'll see you in the next one. Have a blessed day.