Vollständiges Transkript anzeigen (3.737 Wörter)
I built this entire interactive 3D website in a matter of minutes. When you click on the orange panel, the experience begins, the headset flies apart, and pulls you into a 3D showroom. And here you can select your product, rotate it, and inspect every detail of it. I even made a commercial for this headset. And all of this started with one image. I used an image generation model to design an image of how I want the website to be. Then I gave this image to Open AI's new GPT-Astra model and it built the entire website. Building something like this would normally take months, but with GPT-Astra and today's sponsor, Higgsfield, it took minutes. And in this tutorial, I'll show you how to build the entire thing from the scratch with every prompt linked below. Let's get into the build.
When I'm building websites, the first thing that I typically do is to come out there on the internet and get inspired from what other people are building. And I'm going to show you a few places that you can come to to get inspired. Now, my first place that I typically come to is for instance, Pinterest. As an example, when I just search virtual reality glasses website, you can see that I get a few designs that you can get inspired from. Now, if you find a design that you like, just right click on that and save that image on your desktop. We're going to go through and do the same thing for all the other designs that you like. For instance, if you like this one here, you can just do the same thing, right click on the image, save that image on the desktop. What we're going to do is we're going to combine all the images of the inspiration websites that we like and then create our own version of our websites from the inspiration websites that you find. Now, other places that you can also get inspired from when you want to build websites is for instance, mobin.com. They also do have nice websites that you can also get inspired from. You can also come to collectui.com. You can come to dribble.com, but one of the ones that I've recently discovered is for instance, awwwards.com. Now they really have award-winning websites. So whatever website that you see here, you can basically be guaranteed that it's a nice website. Now when you come to the explore section, you can either explore a website by category or you can also come to their sites of the month, sites of the day, for instance, that are currently being nominated for an award. And here the same concept also applies. If you find something that you like, you can just click on it, visit their website, and you can see the website how it looks. And all these are places that you can come to to get inspired from. Like awwwards.com is really my favorite at the moment. They really have nice winning websites. And once you find websites that you like, for instance here, I saved four websites that I liked for an inspiration of what I wanted to build. What we're going to do is we're going to go to an image generation model where we can upload a reference image and tell the image generation model that hey, I want to build a website, looking at this inspiration, build something out of it for me. And to do that, just come to higgsfield.ai, come to their image tab here, and then here you can either use for instance C-Dream 5.0 Pro, or you can also use Nano-Banana Pro. Now, for this demonstration, I'm going to be using Nano-Banana Pro, and I have uploaded the four images that I want to use as a reference. Now, what we're going to do, we're going to give the Nano-Banana Pro this prompt here. The prompt is just saying, I would like to design a unique homepage section for a premium VR headset spatial computing product websites. So just using the four reference images that I'm providing as an inspiration, I want you to combine them all into our own version. I'm telling him, hey, do not build a website. I just want to give me the final hero section as a high quality image. I'm going to copy that prompt, and you can just give that prompt to C-Dream or Nano-Banana Pro, choose the number of images that you want to generate. The aspect ratio, I'm going to go with 16 by 9, because that is the typical website ratio, and then just click on generate. And you can see that Nano-Banana gave us an image. So when you click on this image, this is a nice website, right? Remember, this doesn't look like any of the websites that we showed Nano-Banana, but it just builds something for us based on the inspiration images that we give to it.
Now, ChatGPT released GPT-Astra. And ChatGPT has the possibility to generate images for you as well. So what you can just do is to download ChatGPT, open a new chat, and then here just upload a reference images that you want to give to ChatGPT. I uploaded the reference images, and I'm also going to give ChatGPT the same prompts that we give to Nano-Banana Pro. And then here, ChatGPT is done with that as well. So this also looks like a pretty nice website, right? We have the product in the hero section, we have some text on the left, basically a nice immersive website in the direction of what we want to build. Remember, this doesn't look like any of the reference images that we give to it. It created something for us based on the reference images that we provided. And using the same process, I came up with this website that I want to build. Now, remember, we have this website that currently as an image, but we're going to transform this image into a full-blown website, and we're going to add all the 3D effects and animations and stuff like that. Now, for the entire build, we're going to be using the GPT-6 Astra model from OpenAI, which will blow this off very quickly for us. But there are other functions that we want to add to the website. We don't want to have a static website. We want to have a website with 3D effects, the animations, hovering animations and stuff like that. And for that, we're going to need a tool that we're going to use to generate these animations. We're going to be using Higgsfield for that. Now, Higgsfield has a lot of image generation tool and video generation tool. The best part is that they have this thing that is called an MCP, which allows other agents to be able to connect directly to Higgsfield without you having to come to Higgsfield to generate the images. Everything can be done directly through ChatGPT using their MCP, and I'm going to show you how we can do that as well. And to add the Higgsfield MCP to your ChatGPT connection, just come down here and click on your name, come to the settings tab, and in the settings tab, just come to plugins. And here come to browse directory and you can just search Higgsfield here. Typically Higgsfield should show up. Click on the plus button here, click on continue to Higgsfield, and you just going to bind your Higgsfield account to the ChatGPT session. And currently you can see that when I close this here and I come to plugins, you see that currently I have the Higgsfield MCP connected here, which means that we basically go to go to shoot our website. And to start a build of the website, just come to ChatGPT and click on new chats. And then here we're going to come to the work section here. What we're going to do is we're going to upload a reference image of the website that we want to build. And for the model, I'm going to go with GPT-6 Astra in a medium effort. And then we're going to start with the first prompt of what we want to build. Now, all the prompts that I'm going to be using in building this website, like I said, I'm going to make available to you. The first prompt that I'm going to give to ChatGPT is this. I want you to build a homepage shown in the uploaded image as a working HTML website, and I'm telling ChatGPT to use the image as a virtual reference and match it as close as possible because we want to get very close to the image that we generated because this is a design that we like. And I'm telling to match it from the composition, typography, color spacing, product placements and everything that is in the image. And I'm telling to build only the homepage now and he should not build any other section at the moment because we're going to work on those later. I want the website to fill the browser height and also I want it to be fully compatible with laptop layouts, mobile layouts and stuff like that. I'm going to copy this prompt here and I'm going to give to ChatGPT to work on this.
And Astra nailed it. It looks incredibly good. Now let me show you the picture that we had originally. This is the picture that we gave to ChatGPT and this is what it build at a website, and this is quite impressive, right? This looks like identical to the reference image that I gave to it. And that is why I like building websites starting from an image and then transforming it into a website. And just to prove that he didn't just paste the image that you can see that all these are rendered text, everything here you're seeing here is a text. You look into the source code, you would see that this is a full-blown HTML document that has been created with all the CSS and stuff like that. So from a first shot, Astra basically blew this. I did not see anything particular that I would like to change currently when I'm looking at it. Now the second prompt that I want to give to Astra to work on is a headset follow tilt. So I want to have it in such a way that when I hover my mouse over the headset, I want it to tilt, move left, right depend on how the mouse pointer is moving. And for that, I'm going to be giving Astra this prompt here that, hey, I want to add a smooth mouse-driven movement to the main headset at work on the homepage we just built. And I want it to preserve the layout and styling. The concept is that as the pointer moves across the hero, moves up, the headset rises slightly and tilts downward. And you can see that one of the nice things that I like about Astra and ChatGPT is that currently you see that he used working on it and he's testing it himself. So you can see that this mouse pointer that you are seeing here is from the AI agents and you can see that he's moving his mouse, checking exactly what he is building. And this is one of the cool things that I like when I'm building with ChatGPT or OpenAI models, because the in-built browser that the agent is able to use makes the agent to be able to test exactly what he, she or it is building. So this is the website, right? See that when I move my mouse up, right, the headset is basically tilting just like we gave Astra that prompt. Now, what I would like to have is I would like to have similar effects for all the elements on the website. So for instance, when I move my hands over this text here, I want it to also move up and down like a bed and stuff like that. And for that I'm going to be giving Astra this prompt here that keep the headset's current pointer movement exactly as it is, but add a consistent subtle up-down effect hover to the other visible interface elements. So I want it to apply to the logo, the navigation items, the head and basically all the other elements that we have on the website. All right, and he's done with that as well. So when I move my mouse over the headset, you see that it tilts and when I move my mouse over every element on the homepage, you see that it has sort of a small tilt and a push for all the other elements that we have on the page. Now we're going to move to the 3D animation part. The concept of what I want to have is that when you click on this button here, it sort of starts this 3D video that takes you sort of into the immersive experience of the virtual reality website that we want to build. And I would also like to have this experience button also do the same thing. Takes you into 3D perspective of basically to give the user an idea of how virtual reality basically looks like. And for that I'm telling Astra that, hey, I want to build the next stage of the website and I want the orange side panel of the headset to become the entrance into an interactive spatial world. And for the orange pain panel, I mean this one here. I want you to keep the existing homepage the same. If someone hovers around the orange section, it shouldn't trigger the animation. It should only trigger when someone clicks this. And I'm telling Astra to use the Higgsfield MCP to generate the video, right? Remember, ChatGPT cannot generate videos. We need a video generation model to be able to do that. And for that I'm telling Astra to use the C-dance 2.5 model from Higgsfield. And here's some more orientation on how I want the animation to be like. So the first 1 second, I want the headset against a clean white background, and the main immersive effect is this part here. I want the headset to separate into an exploded view where all the components of the headset will be flying out, right? And after that it takes you through all the layers of the headset and brings you into the spatial environment. Now in the spatial environment, it basically brings you into this spatial environment where you would have all the other products of the platform. I'm going to give this prompt to Astra to shoot and build on that. And that is also done as well. Now let me open this on a browser. Let me make this full screen. When I hover over this orange section, you see that we have this sort of border that comes around it. When I click on this, let's look at the animation. So the parts of the headset is splitting out just like we wanted to have it. We are zooming into the lens and then it takes us into the spatial environment. Now what I would like to have is that once we get into the spatial environment, I want us to have some products of the company that we are working with, basically so that you can click on it and see every product that the company has to offer. And for that, we're going to be using this prompt here, that build the six product showroom with a finished product realism. So basically, when the spatial destination that we built ends, we want it to enter a premium interactive showroom. And when that is done, I'm also going to follow up with this prompt here where we want to be able to click on every product and view the specifications of that particular product. So I'm going to give these prompts to Astra and let's see what comes out of that. And that is also done as well. Now let me open this on a bigger browser, let's get an experience, click on the button, the components flying out, zooming in into the headset area and this brings us to a spatial environment where we can see the products. So now for instance when we click on every product here, you can see that we can move around up down, right, we can click on the three quarter view, we can look look at the rear view, we can click on the front, we can move through all the products, we can change the viewports, we can click any product from here, it moves us to that particular product, camera, controller, wearables, and for all of them we can basically navigate through, right? And we also have a reset button here where we can reset to basically where we started from. Like this is beautiful. I also want to show you that the entire website is also mobile layout compatible. So when I come up here and I click on show device toolbar, and switch for instance to 15 Pro, you see that the entire website is also mobile compatible. When I click on the button here, the entire experience is also working on a mobile. The spatial elements are also working. You can click on any elements here, basically navigate through just like we would have done this on a mobile. So the website is also fully mobile compatible. The tricky thing about building these websites is that sometimes people forget that most of viewers are coming from mobile, so whatever you build has to be something that would also work on a mobile layout. Now what I'm thinking now is that I want to put some sound effects to what we build just to give it a bit more of an engaging experience. And that is done as well. Let's look at what was built. So we see that we have this mute button here, and when I hover over every element, you hear the sound. I mean, this is not the best sound you can have, but thinking about the fact that we didn't plug in any sound generation tools, Astra built all these sounds basically from code, right? So this looks pretty nice. Now what I'm going to do is I'm going to work on a few fine tuning of the website, so there are few things that I would like to improve, maybe get some better sound, and then I'll show you what the final website looks like. And now to the final polish, there are few things that I'm going to do to improve on the whole website experience and the layout. For instance, I would like to have a loading animation that loads before the main website loads. And for instance, I think this image here, from my perspective, would be nicer if we have like a rounded corners to make it feel a bit more premium. This text here is also too big in size, I would like to reduce the font size a little bit, and down here I see that this text here, people, places, potential, and beyond, is also distracting. I would like to completely remove it and also the font size of the footer here also looks too small, which I would also improve as well. And currently when you click on the Watch Film, it doesn't do anything. So would also build a professional commercial using Higgsfield marketing tool, so that when you click on it, it basically gives you a commercial of the product that we are building. And over here, I don't like that the the arrow sort of touches the edges of the circle and that I would also improve as well. All right, so I'm done with all the fine tuning. Let's look at the final products. So you see that we have a nice animation that loads before the website basically loads. And then it brings you into the homepage experience. There is music but I muted it by default, when you click on this, you see we have a nice music that is playing in the background. We have this tilt effect where the headset basically tilts depend on which direction that the mouse is. Every single element has this subtile moving effect when you hover around them, and then when you click on the button here, the experience starts. And it brings you to the spatial environment. I'm recording the screen, that's why the movement wasn't so smooth. Now here you can click on any product, you see that we have a sub-tile sound when you hover around them. When you click on any product, you can view it from the front, from the three-fourth view, from the rear, you can switch between every product down here, view each of them in a different perspective. You can reset the view, you can come back to the homepage. And then I also built a commercial to sell the product, when you click on this section here, the commercial is going to play. I mean this is crazy, right? I just build the entire commercial using Higgsfield, Astra sent the commercial direction to Higgsfield to the MCP, and then the commercial product was generated for us. So I'm going to put this website that I have built somewhere online. If you guys want to play around with it and see how the whole website is, to get inspired from it, I'm going to put this online so that you guys can also have access to it. As I said, all the prompts that I used in building this, I'm going to make these prompts available to you that you can also download for free. If you do have any particular question with respect to what I built here, hey, just put in the comment section and I respond to almost every comment that comes to my video. And with that, I say hey, thanks for watching this video and catch you in the next one. Bye.
Video
Video
Video
