LongCut logo

How I Use Claude Code to Make INSANE Instagram Carousels (for beginners)

By Duncan Rogoff | Learn Claude Code

Summary

Topics Covered

  • Turn Any Screenshot Into a Reusable Design System
  • MCP Connectors Make Claude Code Actually Do Things
  • Skills Turn One-Off Prompts Into Repeatable Systems

Full Transcript

It has never been easier to generate viral Instagram carousels using clawed code. But the problem is they all look

code. But the problem is they all look the same. So in this video, I'm going to

the same. So in this video, I'm going to 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

Duncan Rogoff. I'm a former art director for brands like Apple, PlayStation, and Nissan. And I now run a six-figure AI

Nissan. And I now run a six-figure AI agency. If you want to get access to

agency. If you want to get access to anything we build today along with tons of done for you prompts and skills for Claude code, just check the link in the description. So, the reason that most

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." But Claude works so much better when you have

references. But there is a very specific

references. But there is a very specific way to do this and all it takes is one single prompt. So, in order to get

single prompt. So, in order to get started, like just come over to Pinterest. I typed in graphic design and

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 liked some of these that came up. And so

that's what I used to create my carousels from. What works for me may

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, kind of 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.

I'm going to pop over into Claude and I'm just going to be using basic Claude chat. I'm going to drop in this

chat. I'm going to drop in this screenshot here. I'm using the desktop

screenshot here. I'm using the desktop app and I'm just in the chat over here, not co-work and not even code, just in the basic chat. And all you need is a single prompt. And this is the prompt.

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. I'm just

going to come back over here and I'm going to 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

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.

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

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

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

system. It creates an entire color palette for me. It creates an entire text hierarchy. It creates all of the

text hierarchy. 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

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 a design MD file. And before you tune out,

like I'm not going to read through all this, but this is essentially this visual system turned into language that Claude understands. And so a design MD

Claude understands. 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

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

the lights. It goes ahead and actually creates these backgrounds, these beautiful gradient backgrounds for us, all of the typography 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 want to do.

So, all you have to do is click download all and we can start building out our carousels. And if you're like me and you

carousels. 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. Like if you go and you look

carousels. Like 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 going to do now

brand. And so what I'm going to do now is I'm going to come back into the Claude desktop app and I'm just going to switch over to code so we can actually start coding. Give me two seconds. If

start coding. Give me two seconds. If

you're just getting started with Claude Code and you want to learn how to build real things and turn your skills into income, just check the link in the description. You can get started today

description. You can get started today for only $9. All you have to do is down here. Just make sure that you're inside

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. really doesn't matter, but

carousel. really doesn't matter, but just so you have everything all in one place and click open and you are ready to start building. And 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 Higsfield. This

generates all of your images, all of your videos. Literally connect to this

your videos. Literally connect to this once and you can pretty much build anything for your brand. You can see everything here is absolutely beautiful.

But what's cool about Claude is we no longer have to do this like manually inside of the website itself. What we're

going to be using is something known as the Higsfield MCP. And MCP stands for model context protocol. It's basically

just a way for Claude code to talk to Higsfield to generate all of your images. And it's really easy to install.

images. And it's really easy to install.

All you have to do is come over to higsfield.ai/mcp

higsfield.ai/mcp and then you're going to open the cloud settings and you're just going to add a custom connector. So I'm going to copy

custom connector. So I'm going to copy this. And if we come back into Claude,

this. And if we come back into Claude, all we have to do is click the plus at the bottom. It's probably behind my

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

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. In order to connect to Higsfield, click the plus up

here, come to add custom connector, and we can just name this Higsfield. And

then we want to just paste in that code or this link that we got from Higsfield itself. And all we have to do is click

itself. And all we have to do is click add. You can see we are not connected to

add. You can see we are not connected to Higsfield. All we have to do is sign in

Higsfield. All we have to do is sign in with our account. Once we're here, I'm just going to click allow. This takes a couple of seconds and it says I'm now connected to Higsfield. 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

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

always allow. So, we don't need human approval for Higsfield to go ahead and do things. And so, now Cloud Code can

do things. And so, now Cloud Code can basically do anything that Higsfield can do. And just to show that this works,

do. And just to show that this works, you can just click the plus again, come into connectors, and you can see that we have Higsfield right here, all toggled on, and we're good to go. And so what I'm going to do now is I'm just going to open up this YT carousel folder that we

created. I'm going to unzip the gradient

created. I'm going to unzip the gradient design system that we created. And I'm

just going to go ahead and rename this design system. And so now, because we

design system. And so now, because we are inside of the folder inside of Qual, it can read this design system. And

let's just test it out. I want you to use the Higsfield connector and generate an image about AI and robotics based off of the design system that is inside of

the YT carousel folder.

And so what's cool is we can actually see Claude working here. And so it basically went ahead and looked at the files inside the folder. It found our design system markdown file and it's just going to go ahead and read that and then send everything off to Higsfield to

generate an image for us. Now we can see that it translated our design system into an image prompt for Higsfield. We

want a cinematic editorial photograph of a humanoid robot torso and face emerging from deep near black void darkness whipped by volutric atmosphere. Again, I

couldn't write this prompt if I tried.

So, I'm just going to 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

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 want to make sure the

this. One, you want to make sure the cover leads with a hook. You want to two address the pain. So, what pain is your audience experiencing? Name it directly.

audience experiencing? Name it directly.

You want to list out the steps to solve that problem. So, like a numbered list

that problem. So, like a numbered list like do step one, two, and three. Share

the result at the end of like 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 want to do is not

time. Now, what we want to 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

overthink it. All it is is you write down the steps for Claude 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

CTA. I'll leave a link in the description where you can access it for only 9 bucks 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 going to 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 going to

new session. So, I'm just going to restart Claude real quick and then I'll come back. So, now that I've restarted

come back. So, now that I've restarted and I'm back in Cloud, I can use the same chat. I'm just going to type slash

same chat. I'm just going to type slash and Aurora. And it's probably behind my

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 going to copy this lesson. I'm just going to give it all as context to Quad Code for the carousel. And I'm just going to

the carousel. And I'm just going to 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

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

questions. I can fill this in now and I can say, "Hey, update our skill with this information." So now moving

this information." So now moving forward, anytime we use the skill, it's not going to have to ask me these questions again. And so I just answered

questions again. And so I just answered these questions pretty basically. I just

said it's for nontechnical founders who are new to Claude, the CTA is going to lead to the Claude Code Club. And for

the tone of voice, I literally just said, "Use your best judgment." So check this out. In just a couple of minutes,

this out. In just a couple of minutes, we have generated all of the slides for us, all the steps, the hook, the CTA at the end. Right? So this is super cool.

the end. Right? So this is super cool.

all in our brand design system. If you

want to go ahead and make changes to this, you have all of the structure already set up for you. And you can just say, "Hey, Claude, update my scale to maybe we want to 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 Blow to schedule this all out for you

automatically. So now all you have to do

automatically. So now all you have to do to create a carousel is come into Claude, type in Aurora carousel, give it a topic to research or write on, and it's going to go ahead and do everything for you. If you want to keep learning

for you. If you want to keep learning how to build your personal brand with Claude code, just check out this video right here. If you want to learn how to

right here. If you want to learn how to use Cloud to grow your income, grab the link in the description. It's only N bucks to get started. I'll see you inside.

Loading...

Loading video analysis...