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 video analysis...