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





