WEBVTT 00:00:00.000 --> 00:00:02.400 Claude code sucks at carousels, 00:00:02.640 --> 00:00:10.240 and it's your fault. Right now, social media is drowning in low quality Claude code created carousels that get zero engagement. 00:00:10.320 --> 00:00:14.960 And that's because they all look exactly the same, and they're all just made with pure HTML. 00:00:15.265 --> 00:00:21.185 And this is a major problem if you're someone who is trying to leverage AI in your social media marketing because carousels 00:00:21.265 --> 00:00:41.290 are one of the highest converting forms of social media content out there today. So in this video, I'm gonna help you out by showing you how to break out of this trend with a hybrid approach that takes the best of Claude code and its HTML assets and combines it with outside image models like GPT images too and Nano Banana Pro to create carousels 00:00:41.290 --> 00:00:42.010 that actually 00:00:42.425 --> 00:00:59.310 work. So when we talk about carousels that convert, I'm talking about something like this. This is a post I made about five weeks ago, hundreds of thousands of views. We got about 18,000 likes on this post, and it is the perfect example of this sort of hybrid approach I'm going to teach you about. First of all, when we talk about carousels, 00:00:59.310 --> 00:01:05.230 we need to think about the cover image. This is the first thing people are going to see, and this needs to be the most visually striking. 00:01:05.550 --> 00:01:22.455 What you see here was created with GPT images too, and it is with this cover image that we are going to lean on outside tools, whether that is GPT images too or something like Nano Banana Pro. As we then scroll through the rest of the carousel, when we look at, like, the body slides or the value slides, 00:01:22.615 --> 00:01:36.770 this is where something like HTML assets created by Cloud Code itself are perfectly fine. You already hooked them with the cover slide. We got them in here. Now we need to give them some actual value, and there isn't as much of an emphasis on 00:01:37.265 --> 00:01:49.825 it being visually stunning. We just need to provide value, and we need to be able to do this in a way that is repeatable, that we can do over and over and over again in a systemized manner in a relatively quick amount of time. That's also inexpensive because remember, 00:01:50.310 --> 00:01:55.590 it isn't free to create these images with something like GPT images too or Nano Banana Pro. 00:01:55.990 --> 00:02:10.145 I can't do that for every single image. Well, I mean, I could, but it's just gonna take forever. Right? We need to balance speed with quality. And I have found after doing this over and over again myself that this is the best way to approach 00:02:10.385 --> 00:02:17.425 carousels in AI and social media. And we talk about social media being flooded with these low quality carousels. You know what I'm talking about, especially if you're in the AI niche here. 00:02:18.220 --> 00:02:37.765 Four of these six that you see right here were very clearly created with Cloud Code. I don't even need to point them out to you. Right? They have the HTML, like, slide deck feeling like very, very samey, and you're only gonna see more and more of this. So if you want yours to convert, you have to figure out something that stands apart. And so as I just alluded to you, it's a two part process. 00:02:38.005 --> 00:02:46.620 First is going to be the cover image. That's where we use the AI image generation. For today, I'm gonna be showing you how to do this using the Higgs Field CLI. 00:02:46.780 --> 00:02:50.860 I like the Higgs Field CLI because it gives me a way to access any 00:02:51.340 --> 00:03:06.065 AI image generator tool, whether that is Nano Banana, GPT images too, or whatever else comes out next week that's on top, and do it via the terminal. And the second part is the body slides via Claude code using HTML assets. But first, before we start building anything, 00:03:06.385 --> 00:03:13.425 we need to find inspiration. We need to actually do some research, see what's working when it comes to carousel formats outside of your niche especially 00:03:13.585 --> 00:03:25.370 so we have something to build off of. If you just try to do all of this from blank slate, I promise you, you're gonna struggle, and it's gonna take you a ton of time. Why are we starting from scratch? Just see what works and don't copy them, but take inspiration. 00:03:25.785 --> 00:03:47.920 And where do you find it? Well, you find it on social media. And so the easy thing to do is just go to Instagram, go to TikTok, search for Carousel, that's all I put in up here, and start scrolling and seeing what jumps out at the page to you. What are you attracted to visually? What do you think looks cool? That's what we're gonna do. And if I see something I like, I'm going to do two things. 00:03:48.320 --> 00:03:48.960 One, 00:03:49.280 --> 00:03:52.480 I'm just going to click on it and take a screenshot 00:03:52.605 --> 00:03:53.725 of the 00:03:53.885 --> 00:03:54.925 cover image, 00:03:55.165 --> 00:04:10.740 and then I'm gonna do the same thing on the body. I'm gonna kinda take a look at the body slide, see if it's something I like, and I'm gonna screenshot that as well. And if this is your first time doing this, frankly, you should do this for at least like twenty to thirty minutes, And you need to start building a library 00:04:11.140 --> 00:04:11.780 of 00:04:12.020 --> 00:04:13.380 visual inspiration. 00:04:13.540 --> 00:04:36.250 I myself have an entire folder dedicated to carousel inspiration, and it's not all AI stuff. Frankly, you should be looking at stuff outside of your niche that you can bring to your niche. Because if I'm just doing the same thing as everyone else in the AI space or you're doing everything that everyone else is doing in your space, it's not gonna stand out. So it's always great to see what other people are doing in completely different domains. So step zero, inspiration. 00:04:36.250 --> 00:04:56.125 I want you to start building that library. And for today's video, I want you to hone in on one specific one that you would like to use your template off of for the carousel we're gonna build today. The next step, step one, is to install the Higgs Field CLI. Again, this gives you access to all of the different image and video generators that are out there. So you'll just head to higgsfield.ai, 00:04:56.125 --> 00:04:58.045 go to the MCP and CLI tab, 00:04:58.285 --> 00:05:07.380 click over here to the CLI. There is an MCP as well, but I do prefer the CLI. And then you're just going to install it by using this command. You're then going to run Higgs field auth login 00:05:07.540 --> 00:05:23.515 to actually log in to your account, and then you can add these skills as well. So now let's talk about creating these carousels. Now first things first, you wanna create a folder for your carousels. I call mine Chase AI carousels. Doesn't matter what you call yours. The reason for this is 00:05:23.675 --> 00:05:32.235 long term, you wanna start building a library of your own carousels that have performed well. We just did the whole thing, right, where we're looking through all these ones for inspiration. 00:05:32.660 --> 00:05:41.140 Well, imagine after you've created thirty, forty, fifty, sixty carousels and you know you have, like, 10 or 15 templates that always work. 00:05:41.460 --> 00:05:54.865 Well, being able to create carousels later down the line becomes infinitely easier because then you can just tell Cloud Code, hey. Go do carousel version 10. We're now gonna do it on this topic. Blah blah blah blah blah. So you're gonna start building that foundation today here. 00:05:55.025 --> 00:06:12.800 But today, since we have nothing, we need to start with some inspiration. So what we're going to do is we're going to take a screenshot of the title page we like, that we are trying to do ourselves. Now I found this title slide for inspiration, so this is what I'm going to be used. And the topic I'm gonna be talking about for my carousel are the top five 00:06:13.120 --> 00:06:24.665 Claude code plugins for June. And so with the screenshot of that image put into Claude code, I'm now going to prompt something along the lines of, hey. Here's the image I wanna use as inspiration. 00:06:24.985 --> 00:06:26.665 Use the Higgs field CLI. 00:06:26.905 --> 00:06:38.520 Use this particular image model. We'll use GPT images too. And then I'm gonna go into how I want it to differ from the original image. So I want you to use this Higgs field CLI to create a cover image 00:06:38.680 --> 00:06:54.715 for my new carousel that's going to be about the top five Claude code plugins for June. That's the title I want on the page, top five Claude code plugins for June. I want to use the screenshot that I just gave you as a reference image. So I want it to be 00:06:55.515 --> 00:06:59.035 essentially exactly the same as that image, but swap 00:06:59.035 --> 00:06:59.755 the 00:07:00.635 --> 00:07:01.435 current 00:07:01.595 --> 00:07:02.475 woman 00:07:02.610 --> 00:07:13.970 who's sort of the statue in the middle, change it to a male so we switch it up a little bit, but keep everything else the same in terms of aesthetics. What I want also changed is I don't want those things to be Photoshop 00:07:13.970 --> 00:07:14.770 icons. 00:07:14.770 --> 00:07:16.450 Just have them be like GitHub 00:07:16.865 --> 00:07:18.065 icons or 00:07:18.385 --> 00:07:22.625 Anthropic icon instead. I want you to use GPT images too. 00:07:22.865 --> 00:07:55.195 I want you to use an aspect ratio that's as close to four to five as possible. I want it to be high quality. I want it to be two k, and I want you to have it create four images. And once they're done, go ahead and bring them up for me. So now it's gonna go ahead and start building it for me. So I told it the reference image. I told them how I want it changed. Because remember, we look at it, I'm basically saying change the statue to be something that's male, get rid of the Photoshop icons to be like GitHub icons, and then change the actual text. Beyond that, I told it which image model to use, GPT images too, and then gave it some, 00:07:55.790 --> 00:07:58.270 you know, instructions in terms of the 00:07:58.590 --> 00:08:07.070 quality. Now if you don't know what sort of inputs you need to give for a particular image model, say you're using Nano Banana Pro instead of GPT images two, Cloud Code knows. 00:08:07.150 --> 00:08:18.825 It has the skills. It has the CLI, so it can tell you what it thinks is best. The biggest thing is to get that just prompt correct in terms of what you wanna change. Now the other thing you need to remember is, 00:08:19.865 --> 00:08:44.485 especially at the beginning, when you're just getting started here, you're probably gonna have to do this a few times. It's gonna give us an image back. We're probably gonna edit it. So there's this iterative creative process. It's very rare that you one shot these things. And that's why we do this purely for the title page. Imagine going through this process for each and every slide, each and every image in your carousel, which could be up to, 10 images. It just takes too long. That's why we do this only on the title, and the rest of this we do much 00:08:44.965 --> 00:08:52.245 quicker via HTML. So here are the images it came back with. First thing, it's missing the actual text. 00:08:52.565 --> 00:08:54.750 But I would say overall, 00:08:55.150 --> 00:09:03.310 not bad in terms of, like, the general vibe we're going for. I like how the statue came out. I like how the icons came out. We could nitpick the 00:09:04.030 --> 00:09:19.505 icon with Anthropic a little bit. Maybe the cream looks a little different, but it kinda has what we're going for. If we can just imagine the text being put up there, I would be happy with this. We even have some shadowing and things like that. And if we compare it to the original, and I'll hop off screen for a little bit, pretty close. 00:09:19.825 --> 00:10:03.170 Right? Like, you can see where the inspiration came from. There's a little bit more going on with the original. Right? They would have another icon up in the top left, but I like it. I think if we now just add the text here, I would be totally happy. To be honest, not totally sure why the text disappeared, but pretty easy move going forward. Right? And you actually have two options here. The first one is we take this cover one because I like this one out of the four it produced. We just feed it back into Cloud Code and we say, hey, just keep everything the same. All I want you to do is add the text to the top. The other option is you could bring this into something like Canva if you wanna be a little more hands on. The choice is yours. But for today's video, we're going to give it this image and say, hey. Add the text for top five skills 00:10:03.225 --> 00:10:26.160 or top five plugins for Claude Code in June and, like, highlight some portion of it so it has sort of that, you know, like, rainbow effect we see along the eyes. So I like this image we came up with, but I wanted to add the text. And I wanted to emulate the text from the original image we use as the reference image. So remember for the title, the text I want is it to say the top five Claude code plugins 00:10:26.240 --> 00:10:27.360 for June. 00:10:28.080 --> 00:10:35.335 And then some portion of that should have sort of that, like, rainbow gradient, the same sort of thing that's going along 00:10:35.575 --> 00:10:37.335 our statue's eyes, 00:10:37.575 --> 00:11:00.645 so to speak. So go ahead and do that and create four versions of that as well. And that's pretty much how that back and forth needs to go when you go through this. You don't need to overcomplicate it. Just say what you want. Ask for multiple images. It can do four at a time. Actually, I believe it can do up to 16 at a time, but I found four is kind of a good middle ground. We'll see what it comes back with. Here's what we got when we told it to add the text. So like I said, we got four options. 00:11:01.125 --> 00:11:02.325 Of the four, 00:11:02.485 --> 00:11:04.485 I think I like this one the 00:11:04.805 --> 00:11:07.925 best. If I had more time, I would probably 00:11:08.165 --> 00:11:14.580 edit this maybe a little bit more, maybe add some sort of, like, drop shadow to the text itself to give it a little bit more of a pop, but 00:11:14.980 --> 00:11:32.645 you can kinda go on forever and ever trying to get something you like. But I think this is good enough for now. If I saw this when I was scrolling through my own Instagram Instagram or or TikTok TikTok or whatever, and I saw this as a cover image, I would stop. So once we have the cover image locked in, now we can go into the body slides. And remember, when we talk about the body slides, this is just everything 00:11:32.885 --> 00:11:33.685 after 00:11:33.765 --> 00:11:35.045 the title slide. 00:11:35.285 --> 00:11:59.465 And some things we wanna keep in mind is we don't have a lot of room to operate here. So, like, this single slide. Right? We have one image. We kinda have a title, and then we have, like, one or two lines of text to work You don't you kinda wanna treat this almost like you would a normal slide deck with PowerPoint. We don't wanna fill it with text. Images are good. We all love images. Come up with some sort of title, and then you get, like, you get a couple sentences. 00:12:00.120 --> 00:12:14.360 So, you know, economy of action is really big here. But what you need to think about is, okay, what are the images going to be? What is the general background gonna be? And what is the text going to be? Now the great thing here is this is almost entirely done with HTML. 00:12:14.595 --> 00:12:18.675 So Cloud Code generates all of this on its own with one exception, 00:12:18.915 --> 00:12:20.435 that being these screenshots. 00:12:20.515 --> 00:12:21.075 So 00:12:21.555 --> 00:13:07.430 I gave Cloud Code these screenshots you see for a lot of these things. Well, for some of these things. So this was a screenshot I gave and I told to put it in there. This was a screenshot I gave it, but it can also create its own. So this thing showing like a terminal, Claude code created all of that. I didn't do anything. So in this portion, what we need to do is we need to figure out what we want these slides to look like and then we're going to, just like we did with the cover slide, have sort of an iterative process. But we can get a lot more hands on because what I'm gonna show you is we're gonna have Cloud Code create these HTML slides for us, but we're gonna bring it up in our browser, and we can actually do tweaks. Like, we can actually go in there, change the text, move stuff around, tell it to make edits. So we get even more control than we do with the title slide. But just like the title slide, this is where we can also use inspiration. 00:13:07.430 --> 00:13:41.740 So let's say I wanted to copy what I've done here and one of mine already or you wanted to copy one of mine. So what are we gonna do? We're gonna take a screenshot. We're gonna paste it in here, and now I'm gonna give it a prompt, something saying like, hey. Now let's kinda work on the title. Now let's look on the body slides. We've got the title slides done. Here's sort of what I'm looking at. I wanna do some pure HTML. Can we bring it up in the browser? Now I'm just sort of doing these prompts raw. All these prompts I'm giving Claude Coden now could also be skills because we can totally codify all this. Now I have my own personal set of skills for all these things as well as examples of my very own 00:13:42.145 --> 00:13:43.025 carousels, 00:13:43.185 --> 00:13:49.905 you can get all that inside of my community. I'll put a link to that in the pinned comment. But if you're doing this on your own, this is what it should kinda sound like. 00:13:50.545 --> 00:14:09.380 Now let's move into doing the body slide. So we have the title slide locked in. I like what we did there. Now with the body slide, it's going to be HTML. This image you saw is what I wanna use as inspiration. I kinda wanna use this as a template for how we do our body slides. I like the textile. I like the background. I like all that. So I wanna create 00:14:09.835 --> 00:14:27.590 the body slides. I want it to be HTML. I want you to be able to pull up this HTML in the browser, and I wanna be able to do the tweaks. So I wanna be able to move things around, change font size, change the actual text there, be able to do it via the browser. If I have to copy over the JSON, When I make those edits, so be it, but I want it to be as easy as possible. 00:14:27.830 --> 00:14:33.190 And for the five body slides, I want them to relate to the the five plugins for June. 00:14:33.350 --> 00:14:33.910 So 00:14:34.150 --> 00:14:37.670 for example, five plugins we can do. Let's do for one of them. Let's do 00:14:38.005 --> 00:14:38.885 caveman. 00:14:38.885 --> 00:14:41.045 Next one, we'll do the codex plugin. 00:14:41.285 --> 00:14:43.845 Third one, let's do impeccable. 00:14:44.005 --> 00:14:47.125 And then come up with the fourth and fifth plugin on your own, 00:14:47.525 --> 00:15:03.760 and then bring it up once you've done that. So I went ahead and built the slides, told us the five plugins it created, and then also created this tweak loop thing. So we're bringing up here inside of the browser. You can see it. So remember, what did we gave it? We gave it a screenshot of my 00:15:04.400 --> 00:15:20.975 carousel I created here. So relatively similar. You can see it tried to emulate, like, the Anthropic logo back here. I could easily feed Claude Code an actual image of the Anthropic logo and have it base it off that. But we have sort of this pillow up here, plug in number one, caveman mode. 00:15:21.550 --> 00:15:24.750 And also, I didn't tell it what caveman was. 00:15:25.390 --> 00:16:02.000 Remember, it on its own did its research, took a look at GitHub, created all the copy for us. I didn't give it any copy. And it went ahead and did this for pretty much everything. And you can see here on the bottom, you know, this little, like, terminal thing it created, relatively simplistic because, again, it's just working off its own HTML assets. I didn't give it any sort of screenshots. But the real power of this is over here on the tweaks. So this idea kinda spawned from Claw Design, which also has its own sort of tweak mode. So I thought, hey. Why don't we just start implementing something like this, which is fairly easy to do when we do our carousel? So I can change, you know, the headline size, the body size, 00:16:02.000 --> 00:16:06.725 you know, the opacity in the background, and then I can really easily, you know, 00:16:07.445 --> 00:16:08.485 change stuff 00:16:08.965 --> 00:16:23.000 on the fly. Right? This is the power of doing everything through HTML versus having to do it all through an AI image generator. And anything on here, can adjust. Right? The card, we can adjust to tilt, everything. Now if I change something, 00:16:24.040 --> 00:16:28.680 when it creates this tweak thing for you, again, I have my exact skill for it in the 00:16:29.080 --> 00:16:43.405 school community, but if you do this yourself, it's probably gonna say, hey. Like, when you make these changes, you need to export your tweaks. So there's export tweaks on the bottom, which is just in JSON. So anytime we make a change, and I can do this on multiple slides at once, I just export the tweaks, 00:16:44.030 --> 00:16:47.070 go back into here, and then paste them directly into 00:16:47.230 --> 00:16:53.470 Claude code, and then it's gonna update it on its own. So really easy to change stuff. And, like, from here, 00:16:53.790 --> 00:16:57.310 what are we gonna do? Well, we're just gonna go through the slides. We're gonna see if it matches our vision. 00:16:57.975 --> 00:17:06.455 You know? Is it, like, too wordy, not wordy? Is it talking about the right things? And then I think where you can really, like, add to this is adding screenshots 00:17:06.695 --> 00:17:08.215 to things. So 00:17:08.535 --> 00:17:17.710 for example, what's what's something we have here? Caveman mode. So I can go to the caveman GitHub. And it could be as simple as me, like, taking a screenshot of this image, 00:17:17.950 --> 00:17:21.470 going into Claude code, pasting the image in there, and saying, 00:17:21.790 --> 00:17:23.870 hey. Can we add this image 00:17:24.030 --> 00:17:25.310 to the caveman 00:17:25.875 --> 00:17:28.515 slide as the caveman image instead of whatever you created? 00:17:30.755 --> 00:17:39.475 And then we would just repeat that process over and over and over. And you can see it added the caveman image here and it's pretty big so I can just, you know, 00:17:40.200 --> 00:17:51.640 move it around till I get something I like. And furthermore, you can also tell Cloud Code to go out on the Internet and find appropriate images for all these things too. It isn't just HTML or screenshots. Like, 00:17:51.960 --> 00:18:02.715 you can get pretty creative here. And at this point, we would just repeat this process over and over till we get something we like. Again, in terms of creativity, a lot of it's gonna come from the inspiration you found. 00:18:03.035 --> 00:18:25.235 Mine was this one, but just like I talked about before where we go into actually searching for carousels on Instagram, we did it for the cover image. You can look at all their body slides as well. And that's pretty much it in terms of how to do it. Now to make it look good, you know, creative stuff, depends on what you're talking about. But, like, that's the Claude code piece of it. That's the building side of it, and it's very simple. And again, like I talked about earlier, 00:18:25.715 --> 00:18:30.915 you're just gonna do this for all your carousels, and they're all gonna have different templates. And so when it comes time to, 00:18:31.395 --> 00:18:46.300 you know, build carousel number 20 when you've been doing this over and over and over again, you don't even have to go through all this trouble we've gone through at this point of like, alright. Find the inspiration. Do these tweaks. Like, it's already kinda prebuilt. You just change the copy. And so it is through this three step process of finding inspiration, 00:18:46.540 --> 00:18:53.500 creating the cover image with outside AI image models, and then three, creating the body slides with HTML 00:18:53.495 --> 00:18:55.735 that we get a sustainable 00:18:55.735 --> 00:19:00.455 and repeatable process that kinda gives us the best of both worlds. We get all the cool creativity 00:19:00.695 --> 00:19:05.255 and all the cool imagery with the AI image models, get the HTML as kind of the backbone, 00:19:05.890 --> 00:19:18.370 but it's easy enough to execute that we can do this at scale over and over and over and not be sitting at the computer for hours every day. So with all that in mind, that is where I'm going to leave you today. I hope this shed some light on how to create carousels that are just a bit better, 00:19:18.935 --> 00:19:36.340 I think, than what you see out there. Don't fall into the, oh, all's you need is this single skill inside of Claude Code trap. We we can do a bit more. And, again, it isn't that much more work. You just have to build a foundation. So as always, let me know what you thought. Make sure to check out chase.ai+ 00:19:36.340 --> 00:19:41.620 if you wanna get your hands on my Claude code masterclass as well as all my skills and examples of my carousels. 00:19:41.860 --> 00:19:43.620 That is inside the pinned comments. 00:19:43.780 --> 00:19:45.700 Besides that, I'll see you around.