Transcription
You can now build beautiful videos, websites, and images using Cloud Code and the new Higfield 2, even if you've never coded before. And in this video, I'm going to show you exactly how to build your own content operating system, so you can build beautiful and animated websites, videos, and images quickly using one single app. Meaning, you can turn your viewers into buyers faster than your competitors. And if you're new here, my name's Jack. I built this on my last tech startup with a gazillion customers. Now I'm building my own AI businesses and I share here the stuff that actually works. So if you haven't already, grab that beautiful coffee and let's dive straight in.
Higfield reached out and said, "Jack, we want you to do a video on our new MCP." I was like, "This is cool because I use Higsfield every single day. I've got results like this using Higsfield." So it's very cool to do it. And what I found is it leads to a content operating system that really unlocks some cool stuff inside Claude, which I'm going to show you inside this video. And I've also seen Higsville everywhere. I see Higsfield online now more than my own mom. That's how crazy this is getting.
But what's the point of this? The idea here is if we can connect Claude code or chatb 5.5 to Higsfield, we can effectively create this unlimited content factory. And the idea is that we have everything in one app. We're going to be building ours inside codeex and we can essentially use Hicksfield as our content generation system. So let's see what this actually looks like. You have access to over 50 generation models. You going to have one brain that runs it all with one really cool workflow. And the idea is we can use this to generate websites, videos, images, audio, animation in one place.
So here's the key thing is that the reason why is we've got time and there's quality. So effectively what we're going to do here with cloud code is connect to every generation engine. So the idea is we got cool code in the middle but we need to use different models for different things and often times the flavor of the day changes. Maybe one day it's chat GBT image, the next it's N banana, maybe it's this video model, that video model. Effectively we connect cla code to a system that has access to every model. We can essentially do everything within one location. So Gemini, Nana, Banana, Flux, Mjourney, Sora V3, you name it. Everything connects into Claude with one super duper simple integration which is very freaking cool. And you can see the different image generations we've got. We've got lots of video generation obviously Higfield itself, Runway Gen 4, Kia AI 11 Labs and a gazillion a gargantillion more sitting behind it also. And so the idea here with all these image generation, video generation and audio voice and music generation is effectively the brain which we're going to be using inside code. we're going to be tagging in various different models is essentially going to pick the best item for us for the specific job without having to have like a thousand different integrations. And we can literally swap that out the second that something better drops. So we don't have to re-engineer our entire workflow. And so we can power in this Higsfield MCP into different softwares codeex open core you name it. And effectively this content engine can power through everything that we needed to.
Now there are a million different applications for this. But what we're going to do is get a website. We're going to actually add in a video component to that without ever having to leave the Claude Code ecosystem, which is freaking crazy. Get a new project, get Claude Code to build the website. Claude can add the images to that website, and then we can get Higsville to animate it, and then we can actually push it live all within Claude Code.
Well, before we can do that, the very first thing that we have to do is basically connect either Codeex or Cloud Code, whatever our environment is, to Higsfields directly. Now, the great news is it is very very easy to install. As you can see, it works on lots of different platforms. So, you can pick the different integration vertical here, but honestly, you don't really need to do a lot. So, now we're inside Codex. We want to go ahead and connect to Hicksfield. Now, here's the thing. There's a couple of different ways we can do this. The MCP, the CLI, the SC. I would recommend the CLI. It is way better. It's the one that I'm going to be personally using. So, all we're going to do is come over and select the CLI. We are going to copy this. Now the cool thing about using the command line interface which just plugs directly into it is whatever model we're using codeex cla code any of these things they can all draw on the same connection which is why it's superior in my view. So I'm going to say hey there dude dude is important I want to go ahead and install the Hicksfield CLI onto my laptop. Okay. And then going to paste in all this stuff here and then just let it rip and do its thing.
Now when we want to bring in claude code to the table to do some really cool website design what we can do very easily actually is click this thing here at the top which is toggle terminal like so and as you'll see claude code is down here to come down here and there's another conversation I was having about the exact same thing and I just come down I click on claude and as you can see literally Claude will now appear for us so we can have those conversations super duper easy and they're very easy to shut down. If you're new to this interface, here's my full video showing pretty much the 99% of stuff you need to know about CEX. You can go check that out and I'll be waiting for you here when you come back or welcome back if you're back with us now. So, look at this now. It's going ahead and getting a CLI installed and verifying everything for us. And by the way, if you do want to go deep with claw code, I've got this full master class just launched on my community this week. It's got everything from power systems, memory systems, clawbar apps, building anything, design systems, compliance, and turn that into dollars. I'll put a link down below in description. I highly highly high. It's stuff I've never covered on YouTube. So, if you want to go deep on that and learn the kind of expert stuff, I'll put that down there for you down below.
Now, what's really cool is when this is connected, we can effectively use it for anything we want to. And we have the full arsenal of media and content and video creation at our disposal. And then just like this, this screen pops up that says connect to Higs full. We're going to say, you know what, we're happy to do that. We're happy to connect these two worlds combined, which is awesome. Now, my devices are authorized. If we come back over, that should all be finalizing. And it looks like it's done. Oh, best thing to do actually is why don't we go ahead and give it an example. So, I might give it a prompt like this. Okay, I would like to create for me a 16x9 jibli style image of uh three English Springer Spananiels. Um, and then bring that back to me and go ahead and use the nano banana 2 model, please. Beautiful. And just like that, now we've got it. So, you can actually see this image. So, it's given us the image here. We're going to click on this guy. It's too big to view. So, if we click on open up, we see this right now. And do we have Spring of Spinals? We do in Jibli style. That is freaking awesome. Now, we did this with nano banana. You can within codeex use GPT 2.0 for images which is incredible. But one of the limitations is that we can only really do one at a time. If we use Higsfield, we can do four or so. And also, if any model comes out and happens to be better than chat GBT, we can leverage that also.
But where this really shines is in its video generation, the cord video. So, what we're going to do actually now is build a website together. And what we're going to do to do this is we're going to tag in Claude code. So what I want you to do is close this down here. And I want you to come over and grab the terminal by clicking on this button here. And then what we're going to do is essentially give it this command to create Claude. I'm just going to do dangerously skip permissions, but you can just create Claude. And now we have Claude here. And I want you to basically create a website. So I'm going to say this. Hey, I would like you to create for me a website for a web design agency that sells websites and services to businesses. And I want you to do that in the style of Versel. Okay. Enter that in. And then to supercharge that, I'm actually going to come up to this repo here, which is a design collective, which has design systems from loads of different businesses. Like Spotify, for example. I open this up. This is the entire Spotify design system. So, this is just going to help it shortcut it and make it wonderful designs. So, I'm going to click on code. I'm going to click on this. Come back over and say, I'd like you to do this and just gain some insights from the design systems inside this repo. And then we're going to throw that one in. And then the other repo, I actually made this one here, which is something called power design, which is effectively is based on universal design laws that apply to everything. It's really freaking cool. So, I'll show you what this looks like in practice. It essentially just goes through everything. So, you know, it talks about attention economics, um, all the best design principles that exist. So, this was built for slides. I'll put a link on screen for that one if you want to. I've never seen results as good as that. It's really freaking cool. So, what I'm going to come ahead and do is come back over to the design repo. And I'm actually going to go ahead and copy this bad boy by copying the code, coming back over, and then I'm going to say, I would like you to be inspired by the design principles contained within this GitHub repo. And then I'm going to come over and just throw in that one there. And then basically set Claude off on its merry way. Now, you could do this within codeex track above, but the reality is that the best model on the planet right now is actually Claude for design. So, we're going to use the best model for the very best thing. Beautiful.
And when that's complete, we can check out what those websites look like. And I got two versions for you. So, we can check it out. I always recommend we do this. So, this is version number one, built for websites, uh, built for businesses that ship. Really cool. We got trusted by, and then we can see all of the colorful logos. I think that's really freaking cool. Three stages. So, again, we can come down and pick the kind of designs that we think is cool. I think this is refreshingly simple and gorgeous. Actually, to be fair, I'm really impressed with this. Obviously, it's leaning in our power design skill, which I built, which is just like one basically one view port, one point. This is a very, very nice option. And then we can add in our video. The second option we got is this one here, websites that ship. Slightly different vibe and feel, which is cool. Again, we got the logos there. A site for every part of your funnel. And I wonder if this is this is really freaking cool. I like this feature. Come down. Build the basic website from idea to life in 14 days. Built on the modern web. I'm not a big fan of these like cody graphicy things. I think they're kind of overdone now. And then we've got probably a bit more color, you know, contrast. That'd be good. And then we've got everything, which is decent. I really like this. This is a really nice touch and feature. Ready to ship. Then we can just basically get on. So we just picked the website that we like after running it a couple of times. And honestly, I quite like the first one here. I think we just have a couple of improvements. So I'm going to basically increase the size of this. And then what we're going to do is actually add in a a sort of like a video. So when you scroll, it kind of like animates a little bit. So I think what would be cool is maybe we have this slightly on the left. Then on the right hand side, we could just have a laptop with a gorgeous website on it. So we're going to come here now. I'm going to create a beautiful uh prompt. So I'm going to say something like, hey, I'd like to create for me a image of a MacBook that looks beautiful with a gorgeous website showing on it. Uh I want this to be ideally image dimensions. Let's do 4x5. Uh and I want it to look fantastic and it must have a white background. I'm bordered with a white background. Please give me four different versions of this and use the best image model available. And then I'll just add in Hixill CLI just at the end there so we can rock and roll and make sense. And this right here is really cool. So look at this. I'll use the image gen workflow which is great. Uh and what's cool here is picked Nano Banana Pro because it's the right pick because it supports 4x5 directly and goes up to 4K while GPT image 2 in the CLI does not expose 4V5 in the CLI that is. But what's cool is I can get four separate generations and bring that down. Ordinarily what I would often do is go into the Hixite, basically the Hickfield app and I'd look at the four images. Then I decide what I want to do, then I'd reiterate and do various different things. It's very convenient to be able just to file this off um within the actual app itself. Now, this is really freaking cool because not only has it gotten all all four things down for us. So I can click on this and see the images, not this one here, but what this has actually done in codeex is created a contact stream. So I can just click on this, have a look, and it's grabbed all the four images and said, "Look, which of these four do you prefer?" So I think number four here, which is number three, the V3 software is best. Then we can do some magic. So I'm going to give it the following prompt, which is this. Hey there, I'd like to create for me an animation. So my desired end goal here is that basically as the user scrolls on our website that the laptop evolves in some way, shape or form. So could you for example animate this laptop such that you know as they scroll maybe like the graphs and things like the laptop opens up a little bit and does something creative and interesting. Use the best video generation model that you can for that. And when that's done I'm going to go ahead and integrate that into the website. And then what I might also do is just say this in parallel, I'd also like to create for me four different image versions of this end state such that if the video doesn't look as good as we want, we could actually play around with the images as well. And I'm going to send this one off.
Now, what's really cool, guys, is that you can actually head over to Higsfield, click on images here on the top left, or like come down to image and create an image. And you'll see this page here, which effectively is what it's designing. So anything that we build together through you know codeex through cloud code is visible here. So you can see these ones and I think it looks really cool. So we might say hey this looks fantastic. Maybe we want to go ahead and use that one or maybe you like this one. So you can effectively just go and pick the designs that you think are really decent. And the exact same thing is true of the video which is generating for us right now in the background. And then guys when it's ready you can actually come over to Hickfield and check it out if you want to. Of course this will all be available for you down below in codeex. I think this one is really crisp and really nice and it came out better than the straight video one. I think that when you give it a certain dimension like a 4v5 and ask it to do like landscape you there can be some crossover but what was really cool about using the Higful CLI here is the fact that it actually found the right model that can take the right dimensions and I'm super impressed with that. So then all we would literally do now is say hey there I love the 4x5 one the latest video gen. What I'd love to do is to integrate that into the website on the right hand side. And in addition to that, I'd like to make the H1 and the H2 larger. We're going to have that on the left and then this laptop on the right hand side. And what I would love you to do is have a scrolling animation. So as I scroll through the website, basically this whole thing just kind of like um you know unfolds as I go through the website. And while it's working on building that, I want to show you another little hack that we can do with Higfield and that's something called characters. What you can basically do is create a character by uploading stuff. So you click on this current character thing and you can drop like 20 images up. We recommend at least 20 to get a good scope of it. So you see this one I did here for example. If I come back over to characters I'm breaking up thinking about it. I can see now there's me with like nine photos. So less than you'd expect. But if you click on generate, you can generate in the app. Or if you come back over to your environment, for example, and I just open new chat, I could say something like, "Hey, using the nano banana 2 model, use the Hixfield CLI to do a photo of Jack drinking a coffee working at a laptop face on." And then we just send that off. And what's cool is you just reference your name, Jack, and it knows that. So if you wanted to do custom photos for LinkedIn or something, you can do that now all within your actual environment. What's cool here is it's now going ahead using the CLI and start generating that photo for us directly and then guys it will pull up the image you can click on it take a look captures your identity one interesting thing though is like you want to make sure that you reference my character ID just say hey it's like a character that an avatar that I built and what we can do is basically say awesome and now I'm like to turn that into a skill such that if I ever ask you to create a character including named Jack you're going to go ahead and use this character within Hicksfield then literally you'll have this skill.mds so you can click on it and you can see that basically I've got the entire skill here. So whenever I actually ask it questions it will now build that and that's how you build these content systems is you find any use case you want to for video image audio and then when you're happy with the output we just say hey turn that into a skill and then we can use it whenever we want to.
Then after you've gone back with chat GPT or if you want to chat with Claude for example cuz Claude's got a little bit of a better eye for design. You're going to end up with a website looks like this gorgeous gradient very professional very smart. We scroll down and we should have this beautiful animation. Look at that guys. That is really crisp. Then as you come down, you got these different logos, three stages, strategy, positioning, brand new XUI. Again, leveraging all the skills that we've given it using this Higful feature to generate the videos. Absolutely gorgeous. Really freaking crisp. Looks fantastic. And if I do, you know what? I really like Look at this. My favorite bits of this as well. I love that we can just like add these things in really premium, really freaking crisp. We can do anything we want to. Then we can come back over literally to the chat window and publish this on a website very simply by coming over here. We could say, "Hey, sounds awesome. Create a brand new GitHub repo using the GitHub CLI and then use my Versel CLI to go ahead and publish this and create a website. And if you're not sure what all this stuff means, I'll put a link on screen for my codeex full master class that get you 99% of skills. If you didn't click on it earlier, it'll be down below in the description. Um, so you can literally learn how to do all this stuff very quickly. And so what we've basically done here, we've wired up, we've connected the skills. Every tool that we've used in this stack has basically become a callable skill that we can enshrine by basically explaining you've done an excellent job. Now turn this into a reusable skill. All right, we can animate any image. We can clone and narate things with voice. We could use so many different features. It's really freaking cool. And what we do fundamentally is turn it into a skill. Run the workflow once, save as a skill.md, and then it will auto run the next time. So the core idea here for your content operating system is that we build it once, we get it to a great standard and then we can reuse it forever. That could be client websites like I just showed you. Animated ads, sell pages, course content, UGC content, product launches, pitch decks, brand systems, you name it, we can literally build it now.
So what is all this sort of cost? So I had a look at the Hixel pricing. Obviously there's a cost using Hixold if you're going down that route. Any kind of video gen, there's going to be something on there. So if you're doing annual is $15 a month for 200 credits. Um $39 gives you,200 credits. So it's kind of like I guess almost four times the price for six times the credits. Um and then you can pretty much decide if you want starter plus or ultra just to give you an idea and a sense of what that actually costs. Okay. So firstly let's say that you wanted to do something with Nana Banana 2. Okay. And you wanted to do 2K which is a minimum and you wanted to do four iterations that is 8 credits. Likewise if you're doing a video with Cans for I don't know let's say 5 seconds for instance that would be 45 credits just to give you a sense of what the actual price is. And once again, I'll put it down here. N9 Pro image is two credits. Cling 3.06. And you get a kind of great idea of how that all connects together.
So now you've learned exactly how to build these beautiful videos with Claude Code and Hicksfield and build this really cool freaking AI content system. The next thing that we're going to want to do then is build on these skills by making our websites incredible, which you can do by watching this video right.