Best Vibe Coding Tools That Print Money 24/7

By Beau Johnson · · 13 min · 360 views

Chapters

  1. 0:00It worked on the first try
  2. 0:49What you will see built end to end
  3. 1:00Starting the idea in Idea Browser
  4. 1:21Why this one hit home with four kids
  5. 1:37Connecting the context into Google AI Studio
  6. 1:52What homeschool families spend on kits
  7. 2:03A science project from household items
  8. 2:15Step-by-step guides and extension activities
  9. 2:32Homeschool resources trending up since 2022
  10. 3:04Why the timing works
  11. 3:53Build this idea and connect to AI Studio
  12. 4:14It needs screenshots, context, and frameworks
  13. 4:31Pulling in the PRD, feature spec, and brand packaging
  14. 4:50Feeding it screenshots of a site I like
  15. 5:00Saving that site as an HTML file
  16. 5:53Why more direction produces better design
  17. 6:18Sending the first prompt with everything attached
  18. 7:30Using Google AI Omni for the hero section
  19. 8:05Adding motion to a hero without overcomplicating it
  20. 8:45Testing it with items around the house
  21. 10:09Prompting the hero video
  22. 10:33Making the video 16 by 9
  23. 10:43Overlaying the video on the hero page
  24. 11:03Adding transparency so it sits right
  25. 11:38The lesson: give it information

About this video

Steal my prompts and build with me for free: https://www.ideabrowser.com/b/diy-educational-tools-for-kids?utm_source=youtube&utm_medium=video&utm_content=youtube-description Any parent can build this app, and I build the whole thing here: a DIY science project generator for homeschool families. You tell it what you already have lying around the house, a hair dryer, some string, whatever is in the closet, you pick your tools, and it hands back a curriculum-aligned science project with step-by-step guides. I have four kids and we homeschool them, so this one hit home. I found the idea on Idea Browser and built it in Google AI Studio. Along the way I show you the trick that fixes AI-generated design: feed it screenshots and the saved HTML of a site you like, then use Google AI Omni to generate an animated hero video and overlay it on the page. TIMESTAMPS 00:00 – It worked on the first try 00:49 – What you will see built end to end 01:00 – Starting the idea in Idea Browser 01:21 – Why this one hit home with four kids 01:37 – Connecting the context into Google AI Studio 01:52 – What homeschool families spend on kits 02:03 – A science project from household items 02:15 – Step-by-step guides and extension activities 02:32 – Homeschool resources trending up since 2022 03:04 – Why the timing works 03:53 – Build this idea and connect to AI Studio 04:14 – It needs screenshots, context, and frameworks 04:31 – Pulling in the PRD, feature spec, and brand packaging 04:50 – Feeding it screenshots of a site I like 05:00 – Saving that site as an HTML file 05:53 – Why more direction produces better design 06:18 – Sending the first prompt with everything attached 07:30 – Using Google AI Omni for the hero section 08:05 – Adding motion to a hero without overcomplicating it 08:45 – Testing it with items around the house 10:09 – Prompting the hero video 10:33 – Making the video 16 by 9 10:43 – Overlaying the video on the hero page 11:03 – Adding transparency so it sits right 11:38 – The lesson: give it information WHAT YOU WILL LEARN - How to steer AI-generated design with screenshots plus the saved HTML of a reference site - Why a prompt alone produces generic output, and what to attach instead - How to generate an animated hero video with Google AI Omni and overlay it on your landing page - How to pull the PRD, feature spec, and brand packaging across in one move - How to keep a build simple enough that a parent can follow it start to finish THE BUILD, STEP BY STEP 1. Why this idea. Homeschool families spend around $50 a month on educational kits, and a year of that leaves you with very little to show. I have four kids and we homeschool, so I would buy this myself. That is usually the best signal an idea is worth building. 2. What it does. You enter the items you already have at home, pick your tools, and it returns a curriculum-aligned DIY science project built from household items, with four to six experiments, step-by-step video guides, explanations, and extension activities. 3. The timing. Homeschool resources have trended up since 2022, driven by a thriving DIY culture, rising homeschool numbers, and tools that make kit creation simple. 4. Setting up. I click build this idea, which connects Idea Browser to Google AI Studio and carries the product requirements document, the feature spec, and the brand packaging across in one step. 5. The design trick. Expecting AI to produce a good landing page from a sentence gets you generic output. It needs screenshots, context, and frameworks. I take screenshots of a landing page I like, save that whole site as an HTML file, and hand both to AI Studio along with the link. 6. The first prompt. I send the context, the screenshots, the HTML file, and the reference link together, describing exactly how I want the page to look. The more direction you give, the closer the first version lands. 7. The hero video. I use Google AI Omni to generate an animated hero section from the existing hero plus a prompt, set it to 16 by 9, then overlay it on the page and add transparency so it sits properly behind the copy. 8. Testing it. I put in items from around the house and watch it return a real science project, then check the whole flow from landing page to result. TOOLS USED Idea Browser — https://www.ideabrowser.com Google AI Studio — https://aistudio.google.com #GoogleAIStudio #IdeaBrowser #VibeCoding #AIApps #Homeschool #BuildInPublic #AITools #Gemini We do 4 live bootcamps every week in Shipping Skool! Join Here ⬇️ https://www.shippingskool.com/ 🔗 GET CONTENT MACHINE: https://www.content-machine.dev/ 🤝1-1 OpenClaw Setup/Integration - https://calendly.com/beaujohnson1/ai-mastermind 🚨Idea Browser Lifetime Discount https://join.ideabrowser.com/beau Get the weekly AI builder newsletter 📕 https://substack.com/@buildnpublic Follow Me On X - https://x.com/BeauJohnson89

Transcript

Read the full transcript

0:00This crazy that we just got this built together in 15 minutes with these two tools and it's essentially just helping kids that are homeschooled get into science project with tools around the house and it's working just on the first attempt. So you can see and demo it right here. You have pre-session cabinet audit. So you can basically go through your house, see what you have, pick what you have, you know, say you have a hair dryer, a black clean trash bag and you have direct radiant sunlight exposure and you have packing tape and let's say you have some cotton. So then basically you pick your tools, you hit next and then it goes through the special instructions on how to build the project. I mean that's amazing. If you

0:45want to see how we actually build this out end to end, you're going to want to stick around through the whole video from crafting the landing page, the hero section and actually building the hero feature of this app. Check it out and let's get right into it. Okay, so we're going to be using Idea Browser to launch this idea off the ground. It's going to take more than 30 minutes and I really hit home when I found this idea on Idea Browser. We pay $50 every couple months for Crunch Labs. This helps our kids get more into engineering and build out projects that are science-based at home, but it can be costly especially if you have four kids. So we home school them, but I came across this idea where you can essentially build your own type of Crunch Labs kit with just things that

1:31lie around your house. So this is going to be a web app. This is something that is going to be built right on Google AI Studio, really simple. We can connect and pull over the all this context into Google AI Studio, but the whole idea is to be able to take something that we actually use in our life and actually put it into production. So something like this is something that we would actually use and build out. So basically homeschooling parents typically spend about $50 per month on educational kits that kids complete in 20 minutes, but Curiosity Crates delivers curriculum-aligned do-it-yourself science project based on using household items, giving families unlimited hands-on learning without breaking the budget. So, each monthly box includes four to six experiments with step-by-step video guides, educational

2:17explanations, and extension activities that can stretch a single project across multiple days. So, this is stuff that you could basically find in your garage, in your closet, and you can turn it into do-it-yourself science kits. That it's going to be amazing. So, obviously this is in demand. You can see homeschooling resources have been trending up and up since 2022, and it's amazing. Like you have the lead magnet here, which is going to be an educational kit preview. You have the front end, which you can charge $15 to $20 a month, which is an introductory do-it-yourself kit, and then you have a monthly subscription box. So, monthly delivery of new do-it-yourself projects aligned with educational themes and curriculum standards. So, it says why now? The do-it-yourself educational kits market is prime for explosive growth fueled by a thriving do-it-yourself culture, rate

3:04rising homeschool trends, and technological advances that simplify kit creation. Just homeschooling in general is exploding right now. People feel like, man, my kids in public school for What is it, like thousands, 1,100 hours a year, and they come away with not a ton of useful knowledge. So, you can see more people that are just getting into homeschooling. I won't go into the whole philosophy of it, but when you're homeschooling your kids, it seems like they get actual, more practical advice for real-world application. And this is something that is perfect, directly in line. I know the avatar. I am one. This is something that I would buy. So, I know the avatar. I know the pain points. This is going to be great, easy to build. Let's get started. The first place we want to start is there's a top right-hand corner button where it says

3:49build this idea. What happens when you click on that? Well, we're going to go into Idea Bot Builder. This is going to allow us to connect to Google AI Studio and start building essentially. So, Google AI Studio just got a massive upgrade over this last week. You have Gemini 3.5 Flash, which really excels at design if you give it the right context. Don't just expect AI to just build out a beautiful high-converting landing page just by you telling it to do so. It needs screenshots. It needs context. It needs frameworks to be able to understand what to build. And that's what we're going to be doing. We're going to be looking at other example websites to that actually like convert and have modern style aesthetics to be able to build upon this website. So, we're going to pull in the product requirements document from Idea Browser, the feature spec, the brand packaging,

4:35all of that into Gemini, uh Google AI Studio, and we're going to start building this out. Okay, just to give Google AI Studio some context, I just copy-pasted this whole front page. The more context, the better. And then I paste that in. I'm going to go ahead and paste that in with some screenshots of a website that I want to kind of replicate. And I'm going to take some screenshots and just save the website as HTML. I just really like the Anti-Gravity website landing page in general. I love the style aesthetic. I love the typography. I love the movement through the actual landing page. I want to mimic and apply some of those concepts to what we're building here. So, like I said, I'm saving the HTML file. You can just see here, I mean it's

5:20beautiful, obviously. And you scroll down, has some more movement, more movement, really cool. And I just love it. It's really simplistic. For what we're trying to build with this homeschooling do-it-yourself type project, we want to keep it simple. So, save that. I'm going to take a few screenshots, and we'll go from there. We need to remember too that going back to these LLMs, you know, by design, they are all different, right? And Google AI Studio is one of the better when it comes to UI design, but it does need some direction and some more context the better. So, doing screenshots, copying the HTML of one of your websites that you're looking to kind of, you know, go after as far as the styling and typography and movement and things like that and also giving screenshots is

6:05really going to help you at least build the first best version of your landing page. So, again, I'm even going to give it the link. And then, I'm going to also give it that HTML file. And now, I'm going to get this initial prompt started. I want to build up this startup idea. It is a homeschooling do-it-yourself science-based project. Here is the context and here is some screenshots, the HTML file, and the website link for how I want the landing page to look. Take the styling, the typography, the motion, and apply it to our landing page. Now, I'm going to send this off and at least it's going to start building the foundation. When you think about building apps, you need to think about like how a house is built. The most important part of any home is the

6:52foundation. If you don't build and take the time to build out a good foundation for your app, you're going to go back and fix bugs later that you wish you had just squashed from the get-go. This is why we start with the PRD. This is why we start with the right structure and framework to be able to build this out properly. And the next step after that, you're going to want to give it the product requirements document. Without this document, it's not going to know anything about what to build, how to build it. So, we're going to copy this and send it off with the prompt as well. Okay, here's what it came up with after I gave it the PRD and the feature spec. I like this. I'm actually going to try something a little bit different and I'm going to use the new Google AI Omni to generate a beautiful hero section. So,

7:37I'm basically going to give that hero section that we have now along with a prompt to actually create some more movement. I think that we want to stop the scroll, we want to captivate the audience. I'm going to use that tool to be able to really build out a nice looking landing page. I think the website's very clear. Maybe it's a little bit too wordy, but I do like it as far as getting this MVP built. Remember, we're the target audience is parents who homeschool their kids and just want to do a science project. So, we don't want to overcomplicate it. So, if you haven't heard of Google Omni, this is a great way to add animate and add some motion into your hero section, and I think this is going to completely change how websites are being built. So, you can use it straight into inside of Gemini, and I'm just going to take a quick screenshot of this landing page

8:22real quick, and then we can just play around with it. So, you're seeing this happen in real time. I don't know exactly what's going to happen, but I have seen people do this with great results. So, we're going to take that screenshot. We're going to go to video section here, and it says create videos with Gemini Omni. Create anything. Create from anything. That's awesome. So, let's try it. I'm going to plop in my screenshot. Animate this hero section to portray building science projects that are directly related to homeschool kids. So, using things that are from around the house to create something cool. So, this is the hero section that I have now. I would love for something to be happening

9:07in the background behind all of the text. Some type of movement, something being built, some type of object being built or crafted from everyday supplies that are found around the home. From cabinets and garages, things that can be combined together to build something cool like a science project. And we're just [snorts] going to let it cook and see what it comes up with. I have no idea, but let's see. We are on the 3.5 flash model. Let's use the 3.1 promo just to see what happens. I think it's going to give us a 10-second video. Let's go from there. Wow, that was fast. That took like 30 seconds. Let's see how this turns out. I have no idea. Pretty cool. Um I don't know what's going on here. Um might need some

9:53tinkering. So, let's do that. Okay, good first try. Let's redo it so the background video doesn't make the text terrible. So, let's basically just focus on maybe creating a video. Um forget the screenshot that I handed to you. Just create a video, maybe a cartoon animation of kids putting something together that's crafted around the house for a science project. And just give me the video. Some type of like 3D animation and make it so black text can stand out on top of it overlaid. Also, make the video 16 by 9. Okay, it came up with a pretty simple video. I like it. It's simple. I mean, it's just better than nothing, right?

10:38So, I'm going to um overlay the hero page and have this kind of play underneath it, maybe with some transparency. We'll see how we can implement this and pull it into Google AI Studio to have that implemented. Okay, so now I'm back in Google AI Studio and I just told um the LLM, you know, I have attached the video. I'd love for you to add it to the hero section and have it play there. You may need to add some transparency so we can read the text overlaid on top of it on top of it. So, let's have it implement this video. All right. So, after implementing the video, I think it looks great. You don't want it to kind of be overwhelming and kind of go crazy. It just put it at a perfect transparency, very simple. And this is how we need to start thinking

11:24about building when we're building in Vibe coding websites that actually stick out because by design, the LLM, whatever you're using, is just not good. It's not the best. It needs context. It needs screenshots. It needs information. It needs HTML files. It needs skills to be able to put these components together. And using Google Omni in addition to Google AI Studio to put this all together, I mean, what? That took us like 20 minutes and we have a nice, really good looking website, you know, might be a little wordy, so we can go back and fix that. But here's the thing, this works. And like I said, the two tools that we used to make this all happen was simply Google AI Studio and Idea Browser. Those are two tools that help you just ship faster and be a better builder. We need to be able to

12:10learn how to use these tools efficiently and effectively to be able to create high converting landing pages that actually get customers quickly. You know, the days of building and taking weeks and months and years to build are long gone. Using tools like, you know, Google AI Studio and Idea Browser to just fast track the process is really going to help you in your building journey. I'll put the links to them down below. Check them out and we'll see in the next video. Bye-bye.

Build this with us, live

Shipping Skool is a free community with 4 live build sessions a week. Bring your idea.

Join Shipping Skool — Free