WEBVTT

00:00:00.000 --> 00:00:38.950
It has never been easier to generate viral Instagram carousels using quad code, but the problem is they all look the same. So in this video, I'm gonna show you exactly how to go from carousels that look like this to beautiful custom carousels that look like this all in a couple of minutes. And if we haven't met yet, my name is Duncan Rogoff. I'm a former art director for brands like Apple, PlayStation, and Nissan, and I now run a 6 figure AI agency. If you wanna get access to anything we build today along with tons of done for you prompts and skills for Cloud Code, just check the link in the description. So the reason that most carousels all look the same is because people are coming into Claude and they're saying something like make me a cool Instagram carousel.

00:00:38.950 --> 00:01:25.925
But Claude works so much better when you have references. But there is a very specific way to do this and all it takes is one single prompt. So in order to get started, like just come over to Pinterest, I typed in graphic design and you can just start scrolling. You can start to see what you like and you can see based off my carousels, I really like some of these that came up and so that's what I used to create my carousels from. What works for me may not work for you. Just go ahead and find something you like. So since I was going with that cool retro style, I thought for this, it'd be cool to go with something a little bit more modern, kinda like this fuzzy gradient world that we got going on here. So it is really easy to recreate this style now. And all you need is what's known as a design system and a design MD file. And I will break down exactly what those are. So the first thing that you're going to do is you just need to take a screenshot of this.

00:01:26.885 --> 00:01:28.885
I'm going to pop over into Claude.

00:01:29.390 --> 00:01:49.645
Now I'm just going to be using basic Claude chat and I'm gonna drop in this screenshot here. I'm using the desktop app and I'm just in the chat over here, co work and not even code, just in the basic chat. And all you need is a single prompt. And this is the prompt. Turn this into a design system in an HTML file and a design MD file. That's it. So I'm going to copy this.

00:01:49.965 --> 00:02:24.740
I'm just gonna come back over here and I'm gonna paste this in. So this is going to get to work. Now what is a design system and what is a design MD file? A design system is basically everything that makes up your design. It is all of the colors. It is all of the type. It is how things are laid out. What is the spacing between elements? It is what do the components look like? Are they buttons? How do you treat your images and things like that? For the system that I created for my carousels, this is what the design system looks like. It's pretty incredible, and Claude did this in a couple of minutes. It breaks out all of the rules of the system. It creates an entire color palette for me. It creates an entire text hierarchy.

00:02:24.980 --> 00:02:48.105
It creates all of the composition and all of the layout. So how are these going to look inside of your carousel? And it just goes on and on with all of these references and things like that. It's pretty incredible. And so this is great as a designer or someone visual to be able to look at this and understand what exactly is going on. But what Claude actually needs is something that is called the design MD file. And before you tune out, like I'm not gonna read through all this, but this is essentially

00:02:48.265 --> 00:02:52.270
this visual system turned into language that Claude understands.

00:02:52.350 --> 00:03:25.340
And so a design MD file basically just decodes what are the main decisions that go into making this design and then puts it together in that format that we saw to basically talk about the colors and the type and the spacing again to create consistent outputs in a way that Claude can understand. So check this out. Literally from this single prompt, I created this entire design system. It creates all of the laws or the rules. It creates all of the color palettes, both the darks and the lights. It goes ahead and actually creates these backgrounds, these beautiful gradient backgrounds for us, all of the typography

00:03:25.340 --> 00:03:41.215
and all of the different pieces that we might need for this design system. And then of course, it goes ahead and also creates that MD file which looks like this here, which again is what you actually give to Claude to teach it what you wanna do. So all you have to do is click download all and we can start building out our carousels.

00:03:41.295 --> 00:04:53.890
And if you're like me and you start thinking ahead, once you have established this design system, you don't just have to use it for your carousels. If you go and you look at this little website that I built for this video today, you can see it follows the same design system. So if you're building a landing page or you're building emails or a newsletter or whatever, you can use that same design system to basically establish your brand. And so what I'm gonna do now is I'm gonna come back into the Claude desktop app and I'm just gonna switch over to code so we can actually start coding. Give me two seconds. If you're just getting started with Claude code and you wanna learn how to build real things and turn your skills into income, just check the link in the description. You can get started today for only $9. All you have to do is down here, just make sure that you're inside of a folder somewhere on your computer. Just go ahead, click open folder. You can put a folder on your desktop and we can just go ahead and name this like YouTube carousel. It really doesn't matter, but just so you have everything all in one place and click open and you are ready to start building. If you've never used Claude code before, this is the time to not be scared like it's really just like talking to chat, but instead this can actually do things for you. And so in order to build out our beautiful carousel graphics, we're going to be using a site called Higgs field. This generates all of your images, all of your videos, literally connect to this once and you can pretty much build anything for your brand. You can see everything here is absolutely

00:04:53.890 --> 00:05:12.455
beautiful. But what's cool about Quad is we no longer have to do this like manually inside of the website itself. What we're gonna be using is something known as the Higgs Field MCP, and MCP stands for model context protocol. It's basically just a way for Claude code to talk to Higgs Field to generate all of your images, and it's really easy to install.

00:05:12.695 --> 00:05:15.815
All you have to do is come over to higgsfield.ai/mcp,

00:05:16.210 --> 00:05:37.065
and then you're gonna open the Quad settings, and you're just going to add a custom connector. So I'm going to copy this. And if we come back into Quad, all we have to do is click the plus at the bottom. It's probably behind my head, but just come into connectors and then click the little gear for manage connectors. And you can see this is where you integrate with basically all of the other platforms that you use, like all of the Google platforms or Notion or Slack or whatever.

00:05:37.385 --> 00:06:26.930
In order to connect to Higgs Field, click the plus up here, come to add custom connector, and we can just name this Higgs Field. And then we want to just paste in that code or this link that we got from Higgs field itself and all we have to do is click add. You can see we are not connected to Higgs field. All we have to do is sign in with our account. Once we're here, I'm just gonna click allow. This takes a couple of seconds and it says I am now connected to Higgs field. Awesome. And we can see now that I have this connector in my list over here, this is everything that it's allowed to do. Generate all of the images, generate all of the videos and so on and so on. And what we can do if we want, we can just go ahead and say always allow so we don't need human approval for Higgs field to go ahead and do things. And so now QuadCode can basically do anything that Higgs field can do. And just to show that this works, can just click the plus again, come into connectors, and you can see that we have Higgs field right here, all toggled on, and we're good to go. And so what I'm gonna do now is I'm just gonna open up this YT carousel folder that we created.

00:06:27.525 --> 00:06:29.845
I'm gonna unzip the gradient

00:06:30.005 --> 00:06:51.080
design system that we created and I'm just gonna go ahead and rename this design system. And so now because we are inside of the folder inside of Qualit, it can read this design system. And let's just test it out. I want you to use the Higgs field connector and generate an image about AI and robotics based off of the design system that is inside of the yt carousel folder.

00:06:52.200 --> 00:07:17.480
And so what's cool is we can actually see Quad working here. So it basically went ahead and looked at the files inside the folder. It found our design system markdown file and it's just gonna go ahead and read that and then send everything off to Higgs field to generate an image for us. Now we can see that it translated our design system into an image prompt for Higgs field. We want a cinematic editorial photograph of a humanoid robot torso and face emerging from deep near black void darkness whipped by volumetric

00:07:17.480 --> 00:07:20.280
atmosphere. Again, I couldn't write this prompt if I tried.

00:07:20.680 --> 00:07:55.655
So I'm just gonna say allow always and it should generate an image for us. So it went ahead and said the image is generated and complete and all you have to do is click show image and then open this link and now we can see this image here that it generated with very minimal instruction from me all in our style. You can see there's no text on this yet, but that's what we're about to fix next. There are a bunch of different schools of thought on what makes a good or a viral Instagram carousel. You can find information all over the place. I have found that this structure tends to work for me, but there's a million ways to do this. One, you wanna make sure the cover leads with a hook. You want to, two, address the pain. So what pain is your audience experiencing?

00:07:55.655 --> 00:10:55.770
Name it directly. You wanna list out these steps to solve that problem. So like a numbered list, like do step one, two, and three. Share the result at the end of implementing these steps and then have some sort of CTA. A lot of people will have a CTA to like join this or get this offer or comment this word and I'll send you a thing. You've seen it all the time. Now what we wanna do is not only turn this style into an Instagram carousel, but we want to turn this into what's known as a skill, which is a repeatable set of instructions so Quad can run this skill every single time to generate carousels in our style on any topic that we choose. If you are unfamiliar with what a skill is, don't overthink it. All it is is you write down the steps for Quad to follow, it goes ahead and follows them so you get the same result every single time. So I've created a prompt that will do this all for you. This is going to create a Claude code skill to generate a Instagram carousel using your design system starting with the hook, the pain points, all the steps to follow, and the CTA. I'll leave a link in the description where you can access it for only $9 along with the exact systems that we use to grow income, build websites, apps, and your content. So I'm just going to copy this prompt here and I'm gonna come back into Claude and I'm going to paste this in. So we can see here that in a couple of minutes, our skill is done. It is live, the Aurora carousel skill. So all we need to do is give it a topic and it's going to create the carousel for us. In order to access a new skill, you either need to restart Claude or just be in a new session. So I'm just gonna restart Cloud real quick, and then I'll come back. So now that I've restarted and I'm back in Cloud, I can use the same chat. I'm just gonna type slash and Aurora, and it's probably behind my head, but we can see here that I have the Aurora carousel skill. And so now all we have to do is give it a topic. So inside the community, I just have this lesson about how to bring your memory over to Quad if you've been using this somewhere else. So I'm just gonna copy this lesson, I'm just gonna give it all as context to QuadCode for the Carousel and I'm just gonna paste this in and see what we get. And so you can see here that this is asking me a couple of questions like who is this carousel targeting? So who is my audience? What is my actual offer? And kind of like what is the voice that I want to use? And so what's cool about this is that it's asking me these questions. I can fill this in now and I can say, hey, update our skill with this information. So now moving forward, anytime we use the skill, it's not gonna have to ask me these questions again. And so I just answered these questions pretty basically. I just said it's for non founders who are new to Claude. The CTA is gonna lead to the Claude Code Club. And for the tone of voice, literally just said use your best judgment. So check this out. In just a couple of minutes, we have generated all of the slides for us, all of the steps, the hook, the CTA at the end. Right? So this is super cool all in our brand design system. If you wanna go ahead and make changes to this, you have all of these structure already set up for you, and you can just say, hey, Claude. Update my scale to maybe we wanna move the text a little bit higher up. Right? Like, no big deal. And what's cool is this went ahead and it generated an Instagram caption for you and a LinkedIn post. So you can just copy and paste this over to LinkedIn, or you could use a third party service like Bloatato to schedule this all out for you automatically. So now all you have to do to create a carousel is come into Claude, type in Aurora carousel,

00:10:55.850 --> 00:11:10.570
give it a topic to research or write on, and it's gonna go ahead and do everything for you. If you wanna keep learning how to build your personal brand with Clogd Code, just check out this video right here. If you wanna learn how to use Clogd to grow your income, grab the link in the description. It's only $9 to get started. I'll see you inside.