I Built a $10,000 Premium Website with Claude Design for FREE

Added: 2026-05-06

[00:00:00]This website which you're seeing right here was done completely using AI and that too from completely scratch and for completely free. Again, this just looks absolutely immaculate and absolutely insane. Uh as I'm scrolling through this as you can see and yep this just looks absolutely insane. And if I go into menu and go into our fleet again I think this just looks absolutely insane. And um this was all done using AI and that that two from completely scratch. Now, now a design agency would usually charge you $5,000 to $10,000 to get something like this done for you.

[00:00:32]But I've done this for completely scratch using AI for completely free.

[00:00:36]And here's the funny thing. I did I did this actually twice. So, this one looks way better. And the reason I did this twice was because my recording recording was off when I was trying to build this out. But this looks absolutely insane. I don't even want to say about how premium and good it feels. So, yeah. In this video, I'm going to run you through how to make this kind of website from complete scratch and write it for completely free. Uh so again without any further ado let's get right into it.

[00:01:02]Myself Shreas Raj founder and coexi and for more noni swap high value content subscribe to shasraj. Also you can follow me on Instagram which is ai.w.raj.

[00:01:13]And yeah let's get right into it. Now to make the website first thing we need is an inspiration because even though I can call myself an artist I'm not an originalist. I obviously take inspiration from other things. So the best place to find inspiration for premium websites is in my opinion Pinterest. So just open a new tab and go to Pinterest. Once you're inside Pinterest, just simply search for Y website. As you can see now, I've already made a search on this. So it's very easy. And as you can see, there's some insane looking YCH websites already. And uh damn, they actually all look really cool. So what we could do in here is uh let's just say I really like this design. Okay, I don't know why this just looks insane and okay, we can go with this design or we can obviously contemplate. We can see okay now this design is also looking mad good. Okay, uh so we can maybe go with this design.

[00:02:03]Okay, so let's just say we finalize onto this design. Now what? Well, we'll take a quick screenshot of this website real quick.

[00:02:12]Website design and then let's put it into Perplexity. Now Plexity is obviously paid. In case you're a student, you'll get it for $9. And if you don't want to use Publixity, you want to do you want to do it for truly free use chat GPD or Gemini or any of the models, they're all pretty good, but I like Publixity because I like Publixity. In here, go under models and select Clawson Sonet 4.6 and turn on the thinking mode. And then in here, I'm going to give the following prompt. I'm going to dictate a prompt. Please listen to it very carefully. So, I'm trying to build a website like this for one of my clients. He also own owns a yacht business. So I would like you to give me all the image visuals which I would need to generate using AI for all the various sections. Uh in the hero section I envision a yacht in a side angle cutting through water and it looks highly premium and on the left side there should be text. That's what I'm kind of envisioning. So I would like you to give me the visuals for this website image visuals and the output should obviously be in JSON format. The image outputs the prompts need to be in JSON format. give me 10 visuals minimum so that I can go ahead and generate images for these particular visuals and then put them onto the website. Thank you. You can just read it or understand this but just to make things super clear. Here's how we usually work when we are trying to make a high-end. So there's two things we need when we are making a high-end website. One is inspo. Now we already have a inspo. Now what we're going to do is we're going to use that inspo to give AI an anchor and then we'll say you know what now we need visuals to add onto the website because a website is just a bunch of wireframes. You need to add images of visuals like video visuals to the website to make it appealing. So for that I'll just be like hey you know what uh inspo is done now please help us make visuals. That's what I just asked the AI to do and then I can just press on enter and wait for the output to come through.

[00:04:00]So now we're going to go to go on to Google flow and start generating images.

[00:04:03]For that just open a new tab and type flow and you'll see this as a first option. Click on it and you'll be redirected to this page. Now obviously image generation is completely free but in case you want to do video generation you would need to sign up for a 1 month trial and you can cancel the trial to not get charged. But this is what I do and yeah I I really like Google flow because it's free. So till now we are still moving on to the free stuff. Okay.

[00:04:28]So um let's go to our publicity and let's wait for the outputs right here.

[00:04:32]As you can see we got a JSON output. Now this is not what we're looking for. So if you want because again there's two things in image generation. You can give it a simple image prompt but it won't perform that well. You need to give it a JSON image prompt to make sure it performs super well or the output is super crisp. So for that I have a secret ace up my sleeve. So if you go to this doc which will be attached in the description of the video, you will find a JSON image generator. Just copy this real quick. Paste it into publicity or whatever AI model you're using and I'll say that give me image prompts in this above JSON format for all the images. Thank you. Do the needful.

[00:05:14]This will force the AI to give me image prompts in the above JSON format. Now you can go through the JSON format.

[00:05:21]Obviously, it's a set prompt. It has rules. So, rules are that output only the JSON, no explanation, no text outside the block, etc., etc., etc. So, it's a very sophisticated rule which I came up with. If I want crisp outputs, that's what I do. So, let's wait for the output to come through. Now, while this is going on, obviously while we are getting the image prompt, so what I would recommend is parallelly, let's start generating our website because once the website is done, we can just add the visuals, add the videos, and we'll be done with the website because we just doing a front end for now. So while this is going on, let's actually go to our y um y complete oneshot rebuild prompt. This is document and in this document, this is the very first this very first prompt is what you can just simply grab and put inside your AI coding agent. Now you can be using cloud code, you can be using anti-gravity, you can be using codeex, I don't give a but I personally like to use windsurf. So, Vinsurf is free for 14 days and it gives you and gives you access to Claude Opus 4.6 and 4.7. So, yeah, I mean it's free and it gives you and it gives you access to Claude Opus 4.7. I don't think there's any there could be anything better than this. So, anyways, as you can see, I'm currently signed up onto this trial. If you guys want to sign up for a trial, just click here to sign up for the trial. Then download Windinsurf on your computer by clicking on the top right corner. Once you've downloaded Windinssoft, just open the search bar and search for Windsor.

[00:06:47]And this is Windsor. Now what I'll do here is I'm going to open a new window because this is a new project. Let's let's open on let's click on open folder. And then let's go on the desktop and then let's create a new folder.

[00:07:01]Let's name this as Y Club Pro Club. Okay, that's bad. Club Pro. So again obviously uh you can name it anything it doesn't really matter. Click on open and once you do click on the sidebar uh casket window and in this just simply paste the prompt and make sure that your uh you're connected your Windsor account is connected. Now down here you'll see claude opus medium is has been selected. Now personally I personally like to go with cloud opus medium because it's more than enough for our work. And then what we just need to do is press enter and it will start building the website's wireframe while we make the visuals. Also here's another cool thing which I did for you guys. So if you go under components and effects, right? So uh if I open let's just say this y website. So if you see I when I move my cursor there is a ripple effect and that ripple effect I've what I've did is I've isolated that ripple effect so that in case you want to use that ripple effect in any other project of yours you can just go in here under the prompt section and go to component and effects and you will find the ripple effect right here. So you can just grab the code for ripple effect and add this onto any website. Same goes for the sidebar. So if I go to the website again, I have the sidebar and it's a double opening sidebar. You can see that. So if you want to use this component or reuse this component ever again, you can just go to this document and grab that particular component and use it further. So that's kind of so as you can see this is the image outputs which I've got. Now this is after I've added the JSON prompt. This is what it gave me. What I'm going to do is I'm just going to copy this real quick and I'm just going to start generating images using flow for all these. I'm just going to start generating all these various images for flow and I'll revert back to you once all the images are done. So, yep. Just give me a moment.

[00:08:48]Just going to do this real quick.

[00:08:59]So, this is the output that we have gotten. Again, the outputs are looking absolutely insane. I'm just going to get a few more images done before I revert back to you guys. So, so once that's done, I asked the AI agent to give me the bird's eye view for the three yches which is in our fleet.

[00:09:16]So, what do I mean by that? So, if I go to our y website, right? And if I go under menu, so you'll see that we have three yes in our fleet and they're all AI video. So, you have to make sure that these AI videos are obviously, you know, also generated. So, for that what I did was I simply went to Perplexity and I and I said the following. I said I need a bird's eye view of three ores of different colors. One could be black, one could be white, one could be silver to show our fleet. It should be bird's eye view of the ship in 9x6 format.

[00:09:43]Thank you. Uh need image prompts in JSON format etc. And it did the best. So now let's generate the bird's eye view of our three ports. So let's do the needful real quick.

[00:09:54]Paste it here.

[00:09:58]Paste it here.

[00:10:02]So now once that's done uh once that that's done right so what I asked AI that hey you know what I mean I do have a lot of visuals these visuals are looking good I mean we have a few visuals right here but I just said I need more visuals because these visuals are not enough for me so can you give me more visuals so then I what I just simply did was I went to our reference dock and I went to image prompts grabbed this whole section gave it to AI and said the following use the following images, image prompts as basis of more visuals and then give us more visuals or more image prompts so that we can create more visuals. As simple as that. And then it gave me a bunch more image prompts. So let's also generate these real quick.

[00:10:47]This was supposed to be 9x6. My bad.

[00:10:49]Just going to generate this as 9x6. So all these visuals have been generated as you could see and the visuals are looking absolutely stunning. Now the next thing we need to do is convert these images into videos. And in case you guys are wondering, hey Shas, I didn't get the exact output. I didn't get you know image prompts like this. No worries. I'm just going to share this thread with you you all guys. You can just go and grab the prompt from this particular from this particular page and just put it inside your Google flow and get outputs like this. Now there's two ways you can go about it. In case you want to generate videos from these images, you can obviously verbally say that, hey, you know what? I want a video like this. I want a video like that. But in case you're not very good at prompting, what you could do is you can just go to your AI agent and tell the AI agent the following. Hey, I need visuals. I need video prompts a looping video prompt for all the visuals because you know it has to be in loop and they need not to be they need not to be in JSON format but I just need looping visuals and the same. So for example, if we have this particular image, right? So the same image is going to be the start frame and the end frame. So this way the video loops automatically. So again just just have to say this much and it's going to give you these looping video animations. You can just copy this and um start making generating the videos.

[00:12:04]So you can just link for example as you can see this is tender launch sequence.

[00:12:08]So you have to make sure that this particular video prompt corresponds to the right visual else it's going to be up. But yeah, uh but what I'm going to do here is I'm going to demonstrate to you guys my prompting skills to get some insane video outputs.

[00:12:22]So let's get right into it. So first things first is uh let's generate our hero section. I really like this particular image as the hero section. So let's actually go down here and let's click on video and let's make sure the video is set to 9x6 and 4x4. Uh so we we only we only will generate one single video but let's make sure the that the frame is set to 9 by6 and let's add this as a first frame and let's also add this as a last frame because we have to make this a looping video. The next thing what we'll do is we'll say that the ship is cutting through the sea. The camera stays still. The ship never moves out of the camera frame and um yeah it's just cutting through the waves at super high speed uh while giving a cinematic and majestic vibe. Make sure that that vibe is composed and yeah, make sure that you give give us a really cool output. The camera follows the ship. The ship never moves out of the frame and it's a looping animation. Thank you.

[00:13:18]So, this was my prompt. Now, let's see the output. I'm just going to do this for all the various uh visuals here. So, give me a moment. I'm just going to do it and I'll be back with you guys. So, as you can see, I've just got all the major components here. This will be our hero section. This will be our uh uh further section like you know the board just going through this will so I've just got all the major videos right here. What I'm going to do is I'm just going to download all of them real quick. So download upscaled download upscaled. You have to make sure that the three for example if you are if you are generating video for the selection of let's just say three boards right make sure they're all in 9x6 because the menu bar selection is in 9x6 format. So obviously they look good if it's in 9x6 and then this is our yeah we're just downloading all these videos and once we have all these videos let's get them all downloaded real quick. Yep. So all the videos are being downloaded. Until then, let's check on to our AI agent to see what it has done.

[00:14:18]So our AI agent has done a good amount of work right here. And uh yeah, I'm just liking how the work is going on.

[00:14:26]And yeah, I'm just pretty uh I'm pretty happy about the pace. So what we'll do in here is while this is being built out, let's create a new folder. Let's call this as media.

[00:14:38]So in the same folder in which the code is being written out, let's make a new folder and let's name this as media. And under media, let's quickly go. Let's first wait for downloads to complete. So let's wait for all the videos to download real quick.

[00:14:53]Your moving slowly. Yep, it's all I think it's all downloading. Yep.

[00:14:57]Let's make sure that all the videos are downloaded. So, let's go to our um let's go to our today at 5:23 a.m. This one is This one was downloaded. This one was downloaded. This one was downloaded.

[00:15:09]This one. This one. This one. This one.

[00:15:12]Okay. I think the hero video is left.

[00:15:14]The hero video was not downloaded yet.

[00:15:17]Let's go here. Let's make sure that this is also downloaded real quick.

[00:15:23]And I think that's all like that's all the videos that we need to be having.

[00:15:26]Let's go to downloads in the meantime.

[00:15:28]while that video is downloading. And let's grab the videos which we downloaded at which we downloaded at 5:24 a.m. Copy all of them. Paste it in under media. Click on paste and boom, we have all the media assets right here.

[00:15:44]Let's wait for the fourth video to download. While this is happening, let's quickly grab uh copy the path of um this folder.

[00:15:55]Paste it here. And I'll say that this folder houses all the media assets which you need. So there are few videos which are in 9x6 format. And um so for all the videos which are labeled as boat moving straight, they are the three board selections for our fleet. Add that. for the video which says boat riding waves that one is obviously you can add it anywhere in the website doesn't really matter gleaming metal attachment can be also added anywhere on the website it can be used in any section y moving forward can be also moved in any section just make sure that the text is aligned on the left side of the of the video as um the video the the the ship is on the so the ship is on the left so make sure the text is aligned on the right when using y moving forward video same goes with um there's not a pro there's no problem with y moving slowly. That's a different video. You can obviously you can uh that can also be used in any section of the website. Doesn't really matter. Finally, we have this video which is ship cutting uh ship cutting through and that is the hero video. Make sure that you add that in the hero section. I've given you all the uh I've given you everything that I know. So yeah, just build this out for me. Thank you.

[00:17:15]So again obviously you'll say sh what the did you just say? So but I just made sure that for example in the folder we have boat moving straight right? So all these boat moving straight are are supposed to go in that section and stuff. That's what I just told it that hey put boat moving straight in this section and put this in that section. As simple as that. So that way AI knows where to put what video else it's going to just misplace all the videos and it won't look good. Finally we'll also tell the AI that locally deploy this once it's done. locally deploy the website once it's done for it for us to view. Uh let's close this off and let's add this under the queue. And that's kind of done from our side. Now the website is going to be built out. It's going to be done and it's just going to look absolutely insane. Let's wait for the website to build. Do visit website.trapidexi.com.

[00:18:01]We help you or if you're a business owner, we help you build websites that actually sell. We also have a money back guarantee in case the website doesn't bring you conversion. So yeah, do visit websites.com or book a call with me.

[00:18:13]It's in the description. And we can also do this for you in case you have your hands tied. You don't have time to build this out or anything like that. So yeah, that's kind of about it.

[00:18:24]And they say it's live. Let's see.

[00:18:28]Ooh. Okay, this is not bad. Uh yeah, this looks absolutely immaculate, bro.

[00:18:33]It's it's it's looking insane. I have nothing to complain about. Like yeah, this just looks absolutely gorgeous.

[00:18:41]Nothing to complain about. Nothing nothing to say. Obviously, this in your academy, this can be better. This is not that well done. But yeah, the hero section, the ocean is yours, claim it.

[00:18:54]Okay, there's some bug here. There's like there's a few bugs here. Let me just refresh this real quick to check it out. But yeah, the website is done well.

[00:19:01]I should say that it's actually nice.

[00:19:03]Let's click on the menu and let's look at our fleet.

[00:19:07]Yep, it's done to perfection. So again, thanks for watching. If you need any assistance, um obviously I also have a course on this. Do visit educated.com to learn how to sell these kinds of website. And thanks for watching. I'll see you next one. Bye. Cheers. Thank you. Thanks for staying with me for I don't know it. It took me 35 minutes.

[00:19:24]And I actually had this recording the recording the last time I did this, this got corrupted. So again, I hope you like this one. Again, I was a bit dumb to not turn on my mic, but whatever. So, the last recording got corrupted, but anyways, I hope you like the video and share this with anyone who needs this.

[00:19:40]Drop a subscri subscribe to Sh for no AI slop videos and actually valuable content. And do follow me on Instagram.

[00:19:46]My Instagram is as follows. It's uh AI.w.j. We're almost about 50k followers on Instagram. Please follow me there.

[00:19:54]Appre it's much appreciated. And that's kind of about it. Thanks for watching.

[00:19:57]I'll see you next. Bye-bye. Cheers.

[00:19:58]Thank you and have a great night or day.