Transcription
So, Claude can now do something that it had a really hard time doing before, which is easily build a website that looks cinematic while you scroll. But, I built this entire thing in about an hour and a half using Claude Code and the new Higgsfield MCP integration, which generated every single image and video on this page. And today, I'm going to walk you through exactly how I did it from start to finish, including the 30-second setup that makes all of this work.
To start, I want to thank Higgsfield for sponsoring this video. Their tool has honestly been a blast to learn, and the fact that they built in an MCP so that plugged right into Claude is really cool. With that said, let's jump right in and connect Higgsfield directly into Claude. To do this is really easy. You're going to want to make sure that Claude is open. You're going to go to settings, you're going to go to connectors, then you click on customize, then click this plus button, and you're going to want to name this Higgsfield. And then make sure that you paste this URL right here, and then click add. And when you do that, a window's going to pop open asking you to log into your Higgsfield account, which will authorize it. And once you authorize it, you're good to go.
And that little connection that you just made has a name, it's called an MCP, which stands for Model Context Protocol. And all that really is is a doorway that lets Claude reach out and use other tools in your behalf. And in this case, that other tool is Higgsfield. And by the way, if you've never heard of Higgsfield before, now's a good time for us to talk about it. Higgsfield is a really neat tool. It's an AI tool that creates cinematic video and images from a prompt. And I like to use it with Claude because Claude is the brain, but it's not really good at making videos on its own. But, that's the part that Higgsfield handles. It's also a hub for a bunch of different types of models. So, you don't have to sit there and think about which model is the right one to pick. It's going to pick the right one for you. You just have to describe what you want and it lands right inside of your project folder.
Okay, with that said, let's jump right in and build that webpage. For this landing page, I didn't want to build something just for this video. I want to build something that I'm going to use, something that is real. And as soon as I started building this, I realized that I don't have an official brand. I don't have a logo. I don't have colors picked out. I don't have a website. I don't have any of this yet. Because of that, I'm going to let Claude design this brand for me.
Okay, for my first prompt, I'm going to tell it that the page has one job. The job is to get people to subscribe to my free daily newsletter, which is a 2-minute AI briefing every morning. And I want the whole thing to look sharp. I want it to look like a modern AI brand. I want it to be clean, big text that's on there. I'm going to try to stick with the same coral accent newsletter has. And I want to make sure that it lands the big idea, which is there's an overwhelming amount of AI news every single day, and my newsletter cuts right down to a 2-minute read that you get in an email. So, let's send this off and see what it comes back with.
And after 5 minutes, let's take a look at what it came back with. Okay, so it's giving me everything that I've asked for. As I scroll down here, I see my colors, I see my font, I see a little bit of a a logo. I'm having Higgsfield take a look at that logo that it created, and it's turning it into something that looks a little bit more premium, right? I wanted to give it some depth. I wanted to have cinematic lighting. And I wanted to drop it right into the project folder so I can look at it and reuse it whenever I want it. And after about 7 minutes here, it created my logo. Now, you can start to see the power of Claude and Higgsfield together. Claude designed this, but Higgsfield took it to the next level. It made it look a little bit more polished and ready for my website.
Okay, so we have some branding pieces. Now, when you start working on the website, we need to focus on the hero of the webpage. A hero, if you're not familiar with it in design terms, the first big thing that you see at the top of a webpage. It's the thing you see before you scroll. It's supposed to carry the feeling of the entire site. So, of course, I'm going to ask Higgsfield through Claude to generate that hero image for me. We'll just hit enter here and give it some time and see what it comes back with.
Okay, so this is looking pretty good. Take a look at my project folder here. Every piece Higgsfield has made so far is sitting right here. That's the MCP doing its thing. Every image and every video that's going to create, it's going to drop it straight into my folder as if I created it on my computer.
Next, we're going to put Hicks field to the test. So, we have our images, we have our still images, which is nice. But, the whole point is to create something with motion on my website. I want people to scroll down and see this great animation. So, now I'm going to ask Hicks field to create exactly that type of video so we can use it on our website. So, for the first hero video, we want the same look as the AI news desk, the one that had the warm lighting. But, now we want we want video to slowly push in over it. We want the pages to start lifting up a little bit. And I'm going to tell it to use cinema studio, which is part of Hicks field that gives you that real camera move look that I mentioned earlier.
Okay, let's see what it came up with. Okay, this is kind of cool. I'm loving the way that this looks. Okay, now we need three more clips just like this to help tell that story as you're scrolling through the website. So, we'll give that some time to process. Okay, looks like they are ready. Let's check them out. Ah, man, okay. This is interesting. I like this. I love the way that they look. I think we can work with this. I think this can help tell the story. And this is really what we needed Hicks field for, right? So, it created the imagery, it created the videos, and now we're going to turn it back to Claude and we're going to tell Claude to turn this into a real page for us.
And first, with my prompt here, I'm going to tell Claude to build a single page that uses the brand that it created using the hero image that it already has. I want my name at the top, and then right underneath it I want a one-line promise that says, "The day's AI news in a 2-minute read every morning."
Okay, so it thought for about 5 minutes and I Here's what it gave me. So, it's not looking great, right? It's It's okay, but this is the skeleton of the web page. It looks like it's functional. It is functional, but it's flat. There's no motion to it yet. So, we need to make sure that we're adding video effects to the page. But, what we need instead here is for the video to play as soon as you start scrolling down the page. So, when you scroll down, you're actually moving the footage forward frame by frame, and then when you scroll back up, you're doing it in reverse. That's the look that we're going for. And to do that, Claude uses something called WebGL and a library called 3.js. Now, if you're not into building websites, you don't have to let those names scare you. All you need to know is that it's the technology that lets websites play video in 3D smoothly. It's the same kind of technology that games use as well. So, let's tell Claude that that's what he needs to do and see what it comes up with.
Okay, so I saw what it came up with and I'm not a big fan. It did what I asked it to do, so I can't fault it for that, but I did feel like it was a bit too gimmicky. So, I did spend about 30 minutes going back and forth with Claude and Hicksfield until I landed on something like this. This is a cinematic zoom across a messy desk that ends on a phone and the phone is showing a single email. And to me, that is the whole point of my newsletter. And my newsletter brings all in to one email every single morning. And I think this is looking way better.
All right, so like I said, this took me about an hour and a half to put together, but honestly, for somebody who doesn't have a lot of design experience, I feel like this looks really good. And what I loved most about this project is that it reminded me that Claude and Hicksfield, they're awesome tools. They're better even together. They got me 90% of the way there of this website. But that last 10%, that was still human. That's the creativity part. That's knowing which shots to keep and which to cut. I know designers can blow this page out of the water, but I love the fact that anybody with an idea and the right tools, like Claude and Hicksfield, can now build something like this without having to spend thousands of dollars or hiring a full design crew.
If you want to try this out yourself, I made it easy. The setup is only 30 seconds. That's the part you watched earlier. I did drop my link in the description and I pinned it in the comments so you can connect to Hicksfield using MCP the way that I did and go build something. And now you have the tools and the knowledge to build something like this yourself. And if this was helpful, the best thing that you can do is the same thing that this whole page was built for and that is subscribe. And I will see you in the next one.