Modern Creator Network
Alex McFarland · YouTube · 18:40

Claude Code Can Make Videos Now (Remotion Guide)

An 18-minute screen-share walkthrough of the Remotion agent skill for Claude Code — from terminal install to live motion graphic in your browser.

Posted
3 months ago
Duration
Format
Tutorial
educational
Channel
AM
Alex McFarland
§ 01 · The Hook

The bait, then the rug-pull.

Twenty minutes. One prompt. No After Effects license. Alex McFarland opens with the finished terminal animation already playing — then rewinds to show every step that produced it, from a single npx command to a looping promotional video embedded on a live landing page.

§ · Stated Promise

What the video promised.

stated at 00:17I'm gonna show you exactly how to do it.delivered at 10:00
§ · Chapters

Where the time goes.

00:0001:30

01 · Cold open — the result

Shows the finished Co-Writer System terminal animation running in Remotion Studio, then pivots to the Remotion X announcement (8.3M views) that kicked this off.

01:3003:35

02 · Install the Remotion skill

Run `npx skills add remotion-dev/skills` in terminal — downloads the Claude Code agent skill. Then `bun create video` to pick a blank-canvas template and scaffold the project folder.

03:3504:25

03 · Open in VS Code + clean up agent folders

Project opens in VS Code. Delete the non-Claude agent folders (.cursor, .gemini, .opencode) to keep only .claude/skills/remotion-best-practices.

04:2507:05

04 · Build the first animation — co-writer system terminal

Shows Alex's own Co-Writer System project. He uses a two-step process: first ask Claude to write a detailed prompt for the desired motion graphic, then paste that prompt into a fresh Claude session inside the motion-design folder. Claude reads the skill, plans todos, builds the composition, and spins up Remotion Studio at localhost:3001.

07:0510:00

05 · First result + iterating — add intro and profile photo

The initial terminal animation works. Alex then expands it: asks Claude to add a title intro ('Co-Writer System by Alex McFarland'), flow into the terminal, then end with his profile photo and landing page URL. He drops the photo in /public and gives Claude the file path.

10:0012:25

06 · Final 3-scene video + Remotion Studio preview

Claude builds a three-scene composition: title intro (3s), terminal animation (11s), outro with profile photo and URL (4s). Total 18 seconds at 30fps. Preview plays in the browser.

12:2515:20

07 · The motion-design-prompt skill

Alex introduces his custom Claude skill that guides users through building the kind of hyper-detailed prompt the Remotion agent needs. Two paths: provide a concept, or brainstorm from scratch. He demos it live — inputs a rough idea about a terminal showing AI agents being invoked — and Claude starts asking structured clarifying questions.

15:2016:15

08 · Keep it simple — what actually works

Key warning: complex multi-element designs break down. Terminals, text on screen, links, and simple visuals work well. Don't over-engineer on day one.

16:1518:40

09 · The bigger picture — stack your skills

Closes with a positioning argument: whether you ghostwrite, run a startup, or build a content business, motion design stacks on top of writing skills and makes you dramatically more valuable as an AI operator. He pitches his Substack for the prompt skill and CoWriter System.

§ · Storyboard

Visual structure at a glance.

result first
hookresult first00:00
X viral post
hookX viral post00:44
terminal install
valueterminal install01:30
VS Code setup
valueVS Code setup03:35
prompt chain
valueprompt chain05:20
live animation
valuelive animation09:13
3-scene video
value3-scene video12:00
prompt skill
valueprompt skill12:25
stack argument
ctastack argument18:00
CTA
ctaCTA18:25
§ · Frameworks

Named ideas worth stealing.

05:20model

Two-step prompt chain for motion design

  1. Step 1 — Ask Claude to write a detailed motion design prompt from your rough idea and landing page
  2. Step 2 — Paste that detailed prompt into a fresh Claude session inside the Remotion project folder

Using Claude to write the prompt for Claude removes the friction of writing pixel-level animation specs yourself.

Steal forAny AI-generated creative asset where the bottleneck is prompt quality, not execution
12:25concept

motion-design-prompt skill

A custom Claude skill that guides users through creating detailed, AI-executable motion design prompts via structured conversation — either from a concept or from scratch.

Steal forTemplate for building prompt-writing skills for any creative domain (thumbnail, ad copy, video scripts)
16:15concept

Stack your AI skills

Writing alone is table stakes in 2026. The multiplier is layering motion design + video + image generation + research on top of writing to become a full-stack AI content operator.

Steal forPositioning argument for MCN+ or any AI skills offer — 'own the whole stack'
§ · Quotables

Lines you could clip.

00:09
I created this motion design graphic that you're looking at right now in less than twenty minutes using Claude Code.
Proof-of-concept opener — no setup needed, immediate credibility hitTikTok hook
20:10
Most of the stuff you see on X is, like, total hype and BS — but this was one time where it's actually pretty crazy.
Pattern interrupt — creator calling out AI hype while vouching for the toolIG reel cold open
25:30
It's not just about writing. Writing is the focus, but then you can build on top of that. Now we have research, image generation, video generation, motion design, sound. When you add all of that together, it makes you so much more valuable.
Tight positioning statement on the AI operator stack — no setup needednewsletter pull-quote
17:38
I don't know how good this is gonna come out. My instructions weren't the best, but you'll still be able to see the point.
Rare creator honesty mid-demo — builds trust, models the 'ship rough, iterate' mindsetTikTok hook
§ · Pacing

How they spent the runtime.

Hook length17s
Info densityhigh
Filler8%
§ · Resources Mentioned

Things they pointed at.

§ · CTA Breakdown

How they asked for the click.

18:25product
Consider joining my Substack where the Claude skill will be if you need help prompting.

Soft verbal pitch at the very end — no lower-third, no pinned comment shown. The prompt skill is paywalled behind Substack.

§ · The Script

Word for word.

analogystory
00:00Hey. What's up, everybody? I created this motion design graphic that you're looking at right now in less than, like, twenty minutes using ClaudeCode.
00:08So I had to get in here and drop this video because I'm genuinely blown away by this this new capability of creating motion design with ClaudeCode. So you can see this here. I'm gonna show you exactly how to do it.
00:20This is the full, you know, ten, fifteen second design here. It started off with this initial terminal design that I then built out for a larger, like, promotional video for my co writer system. And the, you know, the reason this was this is capable now is from this company here, Remotion, that dropped an agent skill for building out these motion designs in their, like, studio.
00:45And if you're on X, then you probably saw this because it went super viral. I think yesterday, can see they have 8,300,000 views on their announcement video showing this motion design that they created themselves, you know, to promote it.
00:59They created with this this skill, with this tool. Uh, you know, they released a, uh, like, little video showing how they did it, which is super confusing.
01:07They're super fast. It's not really good, so I'm gonna break that down for you today. And you could see a bunch of people here sharing the types of designs that they built.
01:16Uh, be careful if you're on XTO because there's a lot of, uh, rage bait. There's a lot of people who post stuff that's not really designed with this. Um, but, you know, nonetheless, it's, like, incredible, so I'm gonna show you exactly how you can do that today.
01:30So the first thing you're actually gonna have to do is open up your terminal here, and you can see on the x announcement here, they gave us what to run here. So we're gonna run this right here inside of your terminal.
01:44Alright? And it's going to download the skill from the repository that we need to use here.
01:50So you're running this just in your regular terminal outside of any project as of right now. You're gonna see you got this new Remotion best practices skill, best practices for Remotion video creation, and then, uh, you get to choose what agents.
02:03So we're using Cloud Code. You're gonna hit enter here. We're gonna install this on the project scope, alright, instead of globally, and then we're gonna use the recommended installation methods.
02:13Alright. Proceed with installation. Done.
02:16It now installed it. After you do that, you need to run, uh, a couple more things here. It's very simple.
02:21Just follow. You're gonna run bun create video.
02:27Once you do that, it's gonna open up all these templates that Remotion gives us. Honestly, I don't know what, you know, some of these are. We have, like, a hello world starter template.
02:38We have a recorder. We have let's see. I don't know.
02:42A bunch of still images, audiogram, music visualization, stuff like this.
02:47I see one for TikTok as well, generated generate animated word by word captions. So I don't really you know, I haven't tried any of these out. I just use this blank canvas here, so it's just, you know, a blank canvas.
02:59You're gonna hit enter here, and now it's gonna tell you a directory to create your project. So this is the folder. You're gonna create a folder to run this project in.
03:07So, for example, what I'm gonna do here is just call it, like, uh, motion design. Right? And then once you do this, you're gonna add the agent skills, and then this will fully set up the project here inside of that folder.
03:22And it's even gonna ask to open it in Versus Code. You should already have you should have Versus Code installed for your co writer or cursor, stuff like that. So we're gonna open this in Versus Code, and this is what it opens up.
03:34So I'm gonna close these out here. And this is the Remotion project that's now opened up here inside of Versus Code. You can see on the left, we have all the packages and files that you need.
03:45So you're gonna see here on the left that we have, like, dot agent dot ClaudDotCursorDotGemini dot open code for whichever one you're using, I guess. And since we use or I use claud for my entire writing system and operating system here, I'm just gonna delete these these other ones that we don't want, like Cursor, Gemini, OpenCode.
04:04I'm gonna delete those to clean it up. Alright. And now we have our dot Claude file, which you should be familiar with if you build out, you know, claud systems here.
04:13We have our skills. Now it has the the agent skill for room motion best practices. Alright?
04:19And then we also have everything else we need here to start creating the motion designs. So the first thing I wanna do is I'm gonna show you inside of my own, uh, Claude folder and show you the whole process that I did to create those designs I showed you, and then I'll show you how to start, you know, fresh and create your own.
04:36So we're gonna first go over to my cowriting system. Alright. And here we are.
04:41This is what my cowriting system looks like. And, you know, one of the things I have inside of my cowriting system is I have a deployments folder where I literally have my landing pages deployed online. So if we come here to Google, we have the cowriter system.
04:56This is the new motion design I put on my landing page. But, you know, forget about that being there for a second. This is, you know, my cowriting system landing page that I had with all of these these different images and different, uh, graphics here.
05:11And what I wanted to do was create these designs for this landing page. So the first idea I had was to create this design that you're looking at right here and put it inside of my landing page, and you could see it worked perfectly here. So what we're gonna do is let me come back over to my, uh, system here.
05:28And this is the prompt, basically, that I used. So I told it, like I told Claude that I wanted to write me a very detailed prompt to create, uh, you know, a motion design for my landing page, and I pointed it to the path of my landing page.
05:45And what we did here was we created this this big prompt, a realistic computer terminal window where a folder file structure types itself out line by line, that exact, you know, uh, design you were looking at. And I got this really detailed prompt here. Alright?
05:59I took that prompt, and we went over to our motion design project opened here that we just had downloaded, right, from Remotion. We downloaded the skill and I showed you everything here.
06:11So I came over to that and I started a new Claude session and I pasted this prompt. Alright? Once I pasted this prompt, you can see that the Remotion skill, the agent here in Claude, started working on creating this animation.
06:26It it put a bunch of to dos. It, you know, it completed all the to dos. Alright?
06:31And then I kept iterating and adding on to it, like, little things that I wanted. And this is what we came up with here. We came up with, at first, this design Claude created, and it launches this little studio on your web browser.
06:43So you could see the first thing I created was this terminal for my co writer system kinda just showing what's inside of it, Claude dot m d file, uh, agents, and stuff like this. And then I kept iterating inside of that Claude session to finally get to this where it was like a longer promotional video for the CoWriter system, which I keep talking about it.
07:02If you don't know, it's a exclusive community training program and and platform that I have. So I wanted to build out this full one, I kept iterating on it.
07:11Now to make this even easier for you to do, I went ahead and created a Claude skill that will help you create prompts like this. So that's what we're gonna do now. So we're back here in that original motion design folder at the very beginning of the video that we set up in our terminal and set up this new folder.
07:28It's a completely fresh folder. And what we can do here is open up a new, uh, Claude session here. And before I show you how to use the skill for prompting, I wanna just show you that you can also just simply, you know, type out things and talk to it here.
07:42So, for example, maybe I'm gonna tell it, I want you to create a motion design of a terminal typing out the following.
07:52And then what I'm gonna do is paste this sort of system that I have here in the terminal or here, like, basically, what the the sidebar of my co writer system looks like. So I give it, like, to Claude dot m d, Claude.
08:04And then, really, just my idea is to have a terminal type that out. I'm gonna tell it that, and you're gonna see Claude fire up now its skill, its Remotion skill to create this design, and then we can see what that looks like.
08:19So it's gonna read everything here, all of its different files. We're gonna give it access to all of that. Alright.
08:27And after Claude, you know, analyzed everything here in its folder, it's now updating its to do and telling us that it's gonna create a terminal typing animation that displays the directory tree, and it's gonna create a new composition file with the realistic terminal. So we're gonna let that run for another minute and see what it comes up with.
08:44Alright. Now you can see after it took about two or three minutes, uh, we let it run through everything. It finished up its design, and you can see it should automatically spin up its, uh, server.
08:55And we can now look at what this looks like. So let's go up. It it automatically pulled this up, and now we have, uh, this this motion design created just like that.
09:06So we're gonna play it. You can see we told it. This is exactly what we wanted.
09:10I mean, this is insane. Like, being able to create this is is pretty incredible.
09:16So you could see it did everything perfectly, terminal, co writer system, and it's gonna loop here. Alright? Now we can even do some crazier stuff.
09:23So let's see. I'm gonna put this side by side here with our what we're working in here.
09:30And what we can literally do is let's see. So this is where we're working here. I'm gonna literally tell it to let's see.
09:39Start off the video with, you know, the the text co writer system by Alex McFarland and then, uh, flow into this terminal.
09:51And then at the end, I want you to put the URL of my landing page and use my profile picture. Alright? I'm just gonna tell something like that just so I can show you how you can now start expanding this.
10:05So what I'm thinking is, like, at the beginning of this, I wanted to, you know, like, just show that this is the Cowriter system, you know, Cowriter system by Alex McFarland.
10:18And then what I'm gonna do is literally come over here. And now on the left, you can see this folder here public.
10:26You can literally put images or videos in here and then copy the path and put it here and tell Claude to include those in the design. So I'm gonna grab a profile picture of myself and put it in there so it could put it into the design. Alright.
10:40So we're gonna come here into the public folder and I copied a profile picture of myself. I'm gonna paste it in there. So you can see now I have this profile pic.
10:48Alright. And what we are gonna do here is take just the path of that, copy the path, and give it to Claude.
10:58Alright. I don't know how good this is gonna come out. My instructions weren't the best, but you'll still be able to see the point of expanding this out, you know, creating multiple frames, putting in your own images and assets.
11:09So we gave it to it. Alright. It's gonna say, what is the URL for your landing page?
11:13I forgot to give it that, so it's actually alex mcfarland dot a I slash co writer system.
11:24Right. Alright. So we're gonna submit that.
11:28Alright. So it got the URL. It got the photo of us.
11:32And now let's see what it can do. We're gonna let that run for another minute, and then we'll see the update here on the right. Alright.
11:38So Claude just finished building that out. It took, like, a minute or so, and it automatically updates here in this little studio here to the right. So we could see it added in here.
11:47It's telling us it added in an intro, the terminal scene, and then the outro, right, and some extra files it created. And now we can click this play button and see what it looks like here.
11:58So now it has the CoWriter system by Alex McFarlane. We have the terminal that we had already before. This is so insane.
12:05I'm so blown away away by this, and, uh, that doesn't happen too too often because most of the stuff you see on x is, like, a ton of hype. But now look at this. Now I'll put my image here and put the the, um, URL.
12:17So, yeah, like I was saying, most of the stuff you see on x is, like, total hype and b s and it's you know, most of the time, it's not really good, but this was, one time where it's actually, uh, pretty crazy. Alright. So now we have that built out.
12:30But like I said, um, I also created a Claude skill that will help you create prompts. So let's try that out now.
12:38So we're gonna open up a new instance of Claude here, and, uh, what I actually did was copied the skill already, and we're gonna paste it here.
12:48So you can literally do this in, like, this original folder. Like, I created that motion design folder all the way in the beginning. You can literally do it right here, or you can put this in your, you know, current Claude system that you're running or whatever.
13:00But here, we're gonna go into dot Claude. We have the skills folder, which has the Remotion one, and now we are gonna paste, uh, my own motion design prompting skill here. I put some references of example prompts that I found were, uh, that I've been using that were really good.
13:14And we have this skill here. Let me make it a little easier to read here.
13:20Alright. And then we have this motion design prompt builder. So the purpose is to guide users through creating detailed motion design prompts that AI tools can actually execute.
13:31Alright? We give it all sorts of reference materials in different phases to follow. Alright?
13:36So now you can literally come to Claude and be like, Claude, I need your help coming up with a motion design prompt. Can you use your motion designs prompt skill?
13:47And then the way I designed this skill was to kinda give you two options. Like, if you already have an idea in your head, then you can provide that idea to it.
13:56Or if you need help, you can kinda work with Claude, and it'll kinda help you come up with an idea. Right? So we say, now I understand the format.
14:03Let me guide you through creating your motion design prompt. Uh, I'll help you create a, uh, detailed motion design prompt that AI tools can execute. Do you already have a concept in mind, or do you need help brainstorming ideas?
14:14Alright. So now I'm just off the top of my head because I haven't really thought about this, but let's try to give an idea. We could say, like, I have a rough idea of creating a motion design that shows basically a user, um, typing in a a query into a terminal, for example, like creating a LinkedIn post, and then it's showing agents being invoked, um, to, uh, you know, go create this content.
14:40Uh, that's kinda my rough idea. Of course, you're gonna have some ideas for whatever it is you do, but just to show you how the skill will work here. So it's gonna think, and it's gonna tell you, um, you know, what's this motion design for, a landing page or hero animation product demo.
14:56And you're gonna keep going through because this is gonna take, like, ten, fifteen minutes, you know, however long, uh, for you to kinda iterate with Claude. But in the end, you'll be able to come up with a prompt that looks just like the ones I showed you earlier that you can then just paste into this whatever motion motion design studio to create the these really cool designs.
15:16Now the last note I kinda wanna wanna say is that the and I've been messing with this for all day now and since last night, actually, when it was released.
15:27And the one main thing I can say is don't try to get super complicated with your designs here because, you know, when you try to get super complicated, I was realizing it was kinda getting really messy.
15:40Things were not formatted correctly. Pieces were all over the place. Uh, it was just not good.
15:45So it's not at the point where you can create, like, these super high level, you know, intense motion designs. Uh, you should really try to keep it simple.
15:54So, for example, terminals like this work really good. Text on the screen, putting links and visuals like this work, uh, really well. So that's the main thing I would I would say to focus on right now.
16:05And then the last point I really wanted to leave you with was, like, you know, most of my work and all my videos and content, you know, is all focused around co writer system. Right? It's like writing with AI, creating professional nondevelopment, like writing workflows with Cloud Code or AI.
16:21So when you see me doing motion design, you might not think that that, you know, is is on par with the with the stuff I'm doing. But, you know, something that's so important going into the future now in 2026 is that, you know, whether you are somebody who's trying to use these these systems to make money, you know, for example, you you're trying to ghost ride or or get marketing work for companies, or if you're like a startup founder, you know, and you're strapped for resources and trying to carry out marketing by yourself, you know, all of these just add on to your stack of skills that you have.
16:59So, you know, it's not just about writing. Writing is the focus, but then you can build on top of that. You know?
17:03Now we have, like, you know, we already have, like, research that can go on top of that. We have image generation, video generation.
17:11Now we have motion design. We have sound. So when you add all of that together, it not only just supercharges your writing, but it just makes you more of an AI operator who's able to do all these different things.
17:22And it makes you so much more valuable for either, you know, clients that might wanna hire you on to do work or for your own company if you're like a founder or something like that. So if you think about it, you know, if you're trying to land, you know, a new client and and it's you who only knows how to use AI for writing versus somebody else who knows how to use it for writing, but also all these other marketing use cases like motion design and video and thumbnails and stuff like that, they're gonna choose that other person every other time.
17:47So this is all stuff you should be learning. You know? I talk about it all the time.
17:51I run several digital content businesses, uh, successful businesses all by myself.
17:57And besides that, I ghostwrite for CEOs. I've ran content operations for startups. Uh, I have, you know, news publications that I write for, and I do all of this by myself.
18:08And it includes not just writing, but thumbnail generation, video generation, marketing material, PDFs, now motion design, and I've never spent a penny on outside help. And I run all of this myself.
18:19So, you know, take that, you know, and definitely live by that and start out by using this motion design skill. I'm gonna include all the resources below.
18:31Consider joining my substack where the Claude skill will be if you need help prompting. And, uh, yeah, drop any comments if you've tried this out already.
§ · For Joe

The two-step prompt chain is the real unlock.

Steal this workflow

Don't ask Claude to make the motion graphic — ask Claude to write the prompt for the motion graphic, then paste that prompt into the Remotion session.

  • Install in two commands: `npx skills add remotion-dev/skills` then `bun create video` (blank canvas template).
  • Keep it simple: terminals, text, links, and static images work well. Multi-element complex layouts break down fast.
  • Use the two-step chain: Claude writes the spec-quality prompt, then Claude executes it — your rough idea never touches the agent directly.
  • Drop assets (photos, logos) in /public and give Claude the file path — it'll pull them into the composition.
  • The Remotion Studio preview runs at localhost:3001 automatically — Claude keeps it live during iteration.
  • Build a prompt-writing skill like his motion-design-prompt.md to systematize the briefing process for any creative domain.
  • Positioning angle for JoeFlow/MCN+: 'motion design is now a dictation workflow' — you speak the concept, Claude specifies, Remotion renders.
§ · For You

You can make promotional animations without design software.

If you want to try it

Remotion + Claude Code lets you describe what you want in plain English and get a looping video animation back — no After Effects, no freelancer, no design skills needed.

  • Install takes two terminal commands — no prior coding knowledge required if you follow the walkthrough.
  • Start with something simple: a terminal typing out your file structure, or a title card with your name and URL.
  • Iterate by just typing what you want to change — 'add my profile photo at the end' is a valid instruction.
  • Export as a video file and embed it on your landing page or use as a looping background on social media.
  • The prompt-writing skill (free via Substack) removes the blank-page problem — it interviews you about your concept before writing the spec.
§ · Frame Gallery

Visual moments.