Full Tutorial: Build 10 Beautiful Websites in 12 Minutes with Replit and Gemini 3

Hey everyone. So, Gemini 3 and Replet design mode is the best AI designer that I've ever seen. Instead of purple AI slop, you can now finally build beautiful websites and apps complete with AI videos in a single shot. So, in this tutorial, I'm going to show you the exact prompts that I use to build a stunning travel catalog website, a retro personal operating system, a multiplayer poker game, and much more. This is the most fun that I've had of vibe coding in a while. So, this stuff is definitely a must try. So, this is the travel website

that I built. It highlights top five countries that I've visited. You can see here it has a full screen videos in the background that I've generated with AI. So, this is for Japan. This is for Portugal. This is for Spain, Italy, and France. So I asked AI to create a prompt to build a stunning travel catalog website to showcase my top five countries with full screen videos high in each country. And I try to describe my top five countries and also the video shot that I want. I have to admit that I talked to AI to create these oneline descriptions as well. Okay, so now AI has created a prompt and because I'm using claude it thinks that it cannot generate AI videos which is totally not true. Gemini can. So, here's the prompt that I made and let's just go ahead and copy this part of the prompt and we're going to open Replet and make sure you switch from build to design mode. All right. So, let's paste this prompt to here and let's get rid of this video placeholder stuff cuz let's actually generate the videos. So, let's say generate AI videos as backgrounds for each country screen based on the descriptions below. All right, let's take a quick look. And everything looks good. So, let's go ahead and start designing. And now, Replet is going to go ahead and actually make the website. And while it's working, let me show you how I made the website that I shared earlier. So, pretty much it's the same process. I work with uh AI to generate this prompt. And in fact, I was a little bit too ambitious my prompt. I wanted to generate an interactive map where I can click on each country to visit the page. And it didn't do a good job with that. So I had to remove that from scope uh in subsequent conversations. But pretty much uh it was a back and forth linking to my favorite restaurants, editing some copy and that's pretty much all it took to generate this website. Also with Replet, it's incredibly easy to actually publish the website. All you have to do is just click publish here and then the website will go live. So again, you can generate the same travel catalog website listing your five favorite countries pretty much in 10 minutes if you do it right. All right, so definitely give that a try. But let's not stop there. I'm going to walk through 10 more examples of what Replet and Gemini 3 can create. And all these examples pretty much only took a single prompt to get started. And by the way, I've included all the prompts that I use in the article that's linked to the video description below to make it as easy for you as possible. All right, so now let's talk about our first example, which is

building a retro personal website. I wanted to build a retropersonal website. Back in the day, I was using Windows 95 and playing all my favorite games, right? So I started by working with AI to plan out the spec. So I as AI to write a spec and I asked it to break it down into three different milestones here, right? Because I don't want it to build too much at once. And then finally, I asked it to edit everything that we talked about into a prompt that I can paste into AI to generate the result. And here is the result. All right. So you can see here I started with the prompt that AI gave to me and I created a pretty awesome personal website. Let's just play with it. So, there's a about screen. There is my experience that I copy and pasted over from LinkedIn. There's links to my newsletter and YouTube. And there is even memories. I'm really proud of this. So, these are all the favorite games that I played when I was younger. Starcraft, Red Alert 2, Dino Park Tycoon on the Mac, Commander King, Wolfenstein 3D, and more. Right? If you're younger, maybe you never played games before, then you know, I feel bad for you. You missed out. These games were amazing. So, how did I do all this? First, AI made the operating system. And then I made it do some copy updates. And then I went off and I searched online for screenshots of all my favorite games. And I asked AI to create a memories folder with these nostalgic photos that I can view in a gallery. So again, I didn't look at code or edit code in this entire process. I just pasted in images and gave AI prompts and in fact a lot of the stuff I actually did using replet on mobile. So I was actually waiting in line for boba t you know outside. I found images and paste it into the mobile app for AI to build. So this is the world that we live in now. You know you can actually vibe code these apps these beautiful websites and operating systems while you're actually on the go. So yeah took a lot of back and forth but eventually I was able to get to this. And again with replet you can just pretty much publish it in a single shot. So now the website is live in this link and you can go check it out yourself. Let's keep going. So next I'm going to

show you a prompt to build a multiplayer poker game. All right. So the prompt is create a beautiful poker game with card dealing animations include chip stacks and use clean typography and so on and so forth and make it functional. And here we have the pro game. And you can see here that the buttons actually worked. And yeah, it's actually interactive. You can see here I can call. And you know, maybe it doesn't work fully, but you can definitely go back and forth with AI to make it work. All right. So it looks like Maverick one. And once again, I published this poker game in one shot. So I mean that is pretty incredible. I mean this is like a pretty professional looking poker game. So now let's keep going. So let's go to our next example which is an AI agent builder interface. This is the prompt. Create a high quality interface for building AI agents similar to Zap here. Include a drag and drop workflow builder and so on so forth. And you can see here that it built a pretty awesome interface where I can drag and drop different components together. This interface doesn't actually work. You cannot actually build an AI agent using this interface right now. So everything that happens in replet design mode is front-end code only. But you can easily use replet to convert this interface into a replet build mode where you can actually add backend, you can add databases and you try to make this thing functional. But with this interface, you can now show it to you know potential customers. You can show it to your team and see if this is even a good idea or not. So there you have it. Let's move on

to our fourth example which I think you're going to be really impressed by. So our fourth example is a luxury car landing page with full screen v videos and dramatic reveals. Right? So you can see here that it's generated a dealership in Dubai. We actually asked to build a landing page for a Ferrari showroom in Dubai and you have the Ferrari here. They can scroll down. There's a bunch of feature models for different cars. They can keep going down. There's a showroom start virtual tour and there's even a contact form that you can fill in. So again, now you can generate these professional websites for any kind of business you have pretty much in just a few minutes. All right, let's move on to our next example, which is a high-end page for an audio product. Build a product page for a high-end audio hardware company. And from a style perspective, let's mimic these two popular audio companies, right? So again, this is a pretty stunning website for niche audio devices. I'm not into this space, but seems pretty impressive, right? This is like a professional looking website that you can generate in just a few minutes. If you hire a designer, it probably would have cost thousands of dollars. So, let's keep going. And now we have a prompt to create a portfolio site for a creative director of a gaming studio. And the aesthetic that we want is cyberpunk command center meets sleek product design. All right, so this is a creative director, Alex Chen. We've generated a starfield animation in the back that actually reacts to your mouse. And yeah, this is a crypto looking uh cyberpunk looking website uh for his portfolio. I think this is a little bit too much. This reminds me a little bit of the NFT days, but for certain customers and partners, this might be appealing. Okay, let's move on to our next example. All right, so now we have a motion design portfolio with high-end car commercial aesthetics. Include animation throughout, lighting effects, feature work should display video reels that play on Hover. All right, so again, this is a super high-end portfolio website. I love the animation of liquid in the background, and I love the mouse effects. Let's keep scrolling down. So this is a selected work from the agency and yeah again a really nice professional looking website that Replet generated in just a few minutes. All right so next let's try something

different. This one is a personal journal app for late night cafe aesthetics include soft amber effects and so on and so forth. And here we have a app to remind us to keep our personal journey streak going. And it looks beautiful. There's some uh different things. You can even type in text here. And let's see if other things work. Start writing. Yeah, it takes me to my entry. Okay, let's see if the calendar view works. Okay, it's a little bit janky, but you can ask rep to clean this up. And there's even like a placeholder for stats and insights. So again nowadays anyone can build these amazing personal apps for like very you know personal niche use cases like an app for one just by getting replet and Gemini to generate them. All right you can see here that I've generated all these apps over the past couple days and it's been incredibly fun. I think if you want to start with one thing it's probably best to start with the full screen video website example. So, here is another uh

full screen website that I generated. It's a satirical website for the Bay Area real estate market. You can see here that you can buy this brilliant starter home for only $3. 2 million, right? Uh and you can uh there's beautiful public schools you'll never visit. There is your office is only 12 miles away, but because of traffic, you can be driving for 90 minutes, which is perfect for your audiobook backlog. So again to generate this full screen video website I pretty much just follow the exact same process that I shared with you guys before which is I work with AI first to create the spec and the prompt and I plug it into replet and it was able to pretty much generate the stuff in one shot with a few edits on my end. The key is to actually specify and describe the full screen video examples that you want. So there you have it. Now don't just watch this tutorial. Go out there and try using rapid design mode and Gemini 3 yourself. You know, there's really no excuse not to try this where you can generate your own beautiful website and app in just 2 minutes. Again, I've included the prompts in the article that I've linked in description below, but you can also just work with AI to create the prompt yourself. You know, it's not too difficult. Just go back and forth with it. Ask it to make the prompt that you want and get it to help you describe the videos that you want as well. All right. Replet Design and Gemini 3 is an absolute gamecher. It's the best AI designer they can hire today and I've never had as much fun vibe coding as I've had this weekend. So, if you enjoyed this video, be sure to like and subscribe to this channel for more practical AI tutorials and interviews. And I'll see you next time.