00:00:00Take a look at this explainer video we created.
00:00:02Mars, the red planet, a world that has captivated humanity for centuries.
00:00:08It's the fourth planet from the sun, sitting just beyond Earth in our solar system.
00:00:14This was not edited in After Effects.
00:00:16We did not touch keyframes, and we didn't animate anything by hand.
00:00:21Claude called using the new Remotion Agent skill, built and rendered it for us.
00:00:26Motion, timing, everything, all done by just prompting.
00:00:30But first, Claude skills.
00:00:33So if you have been following AI lately, Claude skills are the hottest topic right now.
00:00:38Everyone is talking about them, but here's what they actually are.
00:00:43Instruction manuals that teach Claude how to master specific tools and workflows.
00:00:49There are specialized knowledge packs that turn Claude from a general assistant
00:00:54into an expert in domains like video production, data analysis, or automation.
00:01:00And when you combine skills with Claude code and Thorpe's agenda coding tool,
00:01:05you unlock something powerful.
00:01:07And now, Remotion.
00:01:09It's a framework that lets you create videos using React code,
00:01:13the same technology powering modern websites.
00:01:15But here's the problem.
00:01:16Remotion is incredibly powerful, yet complex.
00:01:20You need to understand React, animation libraries, timing functions, and video rendering.
00:01:26It's a developed tool that has been out of reach for most people.
00:01:30That's why this Remotion Agent skill is a game changer.
00:01:33It gives Claude deep knowledge of Remotion's entire framework,
00:01:37like how to structure compositions, choreograph animations,
00:01:41manage timing, handle assets, everything.
00:01:45So instead of Claude guessing at video code, it now understands the framework
00:01:50like an expert Remotion developer.
00:01:53It's the same setup developers are already using to auto-generate videos.
00:01:58And by the end of this video,
00:02:00you will be able to direct professional motion graphics with prompts.
00:02:04So let's get started.
00:02:05And first, we need to install the Remotion Claude skill.
00:02:08To do that, we are going to type this command here.
00:02:11You can find this command in the Remotion website tool.
00:02:14And we will select all of these models in the list by clicking space and then enter.
00:02:19So when the Claude skill is installed in the project,
00:02:22we will now open the Claude code terminal and ask it to start a new Remotion project.
00:02:28So let's wait for it to finish setting up.
00:02:30So it's now finished setting up the project and the template.
00:02:38So just simply follow these directions here to launch the Remotion Studio.
00:02:42And let's check out how it looks. Great.
00:02:45So this is how Remotion looks.
00:02:46It's like a video editing app, but you program each scene.
00:02:51So now that we have a project installed and you already know how Remotion looks,
00:02:56let's get to the development.
00:02:59So our development has nine phases.
00:03:02Phrases 1 to 3 will establish the systems where Claude operates.
00:03:07And phases 4 to 7 creates the assets and defines usable components.
00:03:13And phases 8 to 9 is execution.
00:03:16And with that said, let's proceed.
00:03:19So first of course, phase 1.
00:03:21Now that we have already installed everything, right,
00:03:25let's open this build guide we made specifically for this video we created.
00:03:29And now while this build guide is for developing the specific video we want to make, right,
00:03:35you can also repurpose this guide and use it to create other videos that you want
00:03:39once you understand how these prompts work.
00:03:42So if you want a copy of this prompt,
00:03:44you can check out our free community where we upload guides like this.
00:03:48So you too can also build with AI.
00:03:51So let's copy the phase 1 prompt and then paste it in Claude code.
00:03:56And then we can hit enter.
00:03:57So what this prompt does is that it establishes a technical foundation
00:04:02that Claude has to follow through the course of development.
00:04:06You can think about rules and patterns that it should follow.
00:04:09And this is very important because most project fails
00:04:13not because the people doing it lack visual direction,
00:04:16but because the AI is not given concrete rules so it ends up doing its own things.
00:04:23So once phase 1 is done, this is how it will look like.
00:04:27And a development markdown file will be created.
00:04:31So Claude is done laying the foundation.
00:04:34And so you can now proceed to the next phase, phase 2.
00:04:37So now we are going to establish the art direction and visual system for this video.
00:04:42And this is a really, really important step in the workflow.
00:04:46Up until now, we have set up the environment and made sure Claude actually understands remotion.
00:04:52What we're doing here is telling Claude how to think visually before it writes any real code.
00:05:00So go ahead and open the build guide again.
00:05:03You'll see a section labeled phase 2.
00:05:05So you can just copy the entire prompt exactly as it is.
00:05:10And then jump back into Claude code in your terminal.
00:05:15You can paste the prompt in and hit enter.
00:05:17And then let Claude take over for a moment.
00:05:21And now I want to pause here and explain why this prompt matters so much.
00:05:25Because this is where a lot of people either skip ahead or try to over control things.
00:05:30So this prompt is not asking Claude to build the full video yet.
00:05:35What it's doing is establishing systems thinking.
00:05:39Like we are defining the rules of the world Claude is about to build on.
00:05:43So you can think of it like creative direction, not instructions.
00:05:46We are telling Claude things like the overall tone, the visual constraints,
00:05:52how motions should fill, and how design decisions should be made when something is not explicitly defined.
00:06:00And this is very important because we are never going to describe every single pixel of this video, right?
00:06:07And that would be impossible.
00:06:08But at the same time, we don't want Claude guessing randomly or inventing patterns that do not match our style at all.
00:06:15So this prompt creates control without micromanagement.
00:06:19And it gives Claude a framework to operate inside.
00:06:22So instead of guessing what clean or modern means, it has a shared definition with us.
00:06:29And instead of hallucinating, it now has both the technical skill
00:06:33and the creative guard rails to work correctly.
00:06:36So let's hit enter and wait for Claude to process it.
00:06:39Alright, once Claude is finished, you'll see here that he created an art direction file,
00:06:44outlining how it should reason and execute future decisions.
00:06:48When we get to the actual development, and do not be afraid to go back and forth in this part,
00:06:55you want your project to have the art direction you want.
00:06:58So you might have to ask Claude to change or add things.
00:07:02And just like that, we have unlocked the next phase of the workflow.
00:07:07We now have a shared facial language between you and the AI.
00:07:12So Claude knows how to think about this video before it ever writes a composition or a sequence.
00:07:18And that's huge.
00:07:19So at this point, we have successfully established art direction and facial control.
00:07:24We have not built the video yet.
00:07:26But we have set the foundation that makes the actual build predictable and professional.
00:07:31With the art direction locked in, the next thing we need to do is craft the story of the video.
00:07:37This step finalizes the system we need.
00:07:40We are moving from how the video should feel to what actually happens moment by moment.
00:07:47And the goal here is very simple.
00:07:49Define the scenes, the flow and the timing.
00:07:52So the video makes sense before we animate anything.
00:07:56Okay, so let's go back to the build guide and find the phase 3 prompt.
00:08:02We can copy the entire thing.
00:08:03And once you have got it, jump back into Claude code.
00:08:08And then you can paste the prompt in and hit enter.
00:08:10And now we wait for Claude to process it.
00:08:13So Claude is taking the art direction we defined earlier and using it to create a timeline.
00:08:18It's deciding how many scenes we need, what each scene is responsible for,
00:08:23and how long each moment should live on screen.
00:08:27So this is what allows us to build a 10 second or 60 second video
00:08:32that actually feels intentional instead of rushed or random.
00:08:36And once Claude finishes, you will see a breakdown of the video into scenes.
00:08:40Each scene has a clear role.
00:08:43There's usually an opening hook, a main message section, supporting moments, and a close, right?
00:08:52And this is effectively a storyboard, just written out.
00:08:56And this is kind of like a storyboard, just written out in text instead of visuals.
00:09:02So at this point, you can ask Claude to tweak things.
00:09:05So if a scene does not feel fit to what you want to create, you can just say that.
00:09:10If you want to reorder sections or remove one entirely, this is the time to do it.
00:09:15This is another place people get stuck, okay?
00:09:17I'm thinking they need to accept the first output.
00:09:20You don't actually.
00:09:21Treat it like a collaborative draft, okay?
00:09:25And that's that.
00:09:27In this case, the structure looks solid, right?
00:09:30The pacing makes sense, the scenes flow logically, and it fits the length we are aiming for.
00:09:37So instead of iterating further, we are going to give Claude the goal signal.
00:09:41So all you need to do is tell Claude to proceed
00:09:45and create the storyboard file based on this structure.
00:09:48Once you do that, Claude will generate a dedicated file
00:09:52that represents the full timeline of the video.
00:09:55And this file becomes a single source of truth for what we are about to build.
00:10:00And just like that, we now have the story of the video locked in.
00:10:04We know what happens, when it happens, and why it exists.
00:10:08Nothing is animated yet, but the hardest creative decision is already done.
00:10:13Now that the storyboard is done, we are going to move into phase four,
00:10:18which is defining our assets infantry.
00:10:20This is one of those steps that might feel optional at first,
00:10:24but it's actually critical if you want clean, consistent results.
00:10:28And the goal here is very simple, define what assets exist,
00:10:33and how they should look before we try to create and animate or place them anywhere.
00:10:38So this step is crucial as it creates separation between design decisions and scene logic.
00:10:44And that separation is what keeps things from breaking later.
00:10:48And here's why this matters.
00:10:50If you ask Claude to design an asset, decide how it should look,
00:10:54and figure out where it goes in a scene or at the same time.
00:10:59You are stacking too many decisions into one step, and that's where it fails.
00:11:04You get inconsistent and bad results.
00:11:07So let's go back to the build guide again and copy the phase four prompt.
00:11:11Once you have got it, jump back into the Claude terminal, paste it in, and hit enter.
00:11:17And now we can wait for Claude to process.
00:11:19While that's running, let me explain what this prompt is doing behind the scenes.
00:11:24It's not creating visuals yet.
00:11:25It's defining design parameters for each asset we'll need.
00:11:29Things like the objects, color usage, etc.
00:11:33So a really common mistake here is keeping this and letting each scene invent its own assets.
00:11:39That's how you end up with a video where every scene looks dead and does not feel cohesive.
00:11:45And once Claude finishes, it will create an assets inventory file that is laid out clearly.
00:11:53And each asset has a name and a defined parameter.
00:11:57And at this point, you do not need to change much unless something is missing or clearly unnecessary.
00:12:04If you do want to add or change anything, just ask Claude to do it.
00:12:10And just like that, we now have a complete list of assets and a design system that governs them.
00:12:17And that means when Claude starts generating emotion components,
00:12:22it will not be guessing how things should look.
00:12:25It will be pulled from this infantry directly.
00:12:28Now that we have the assets specs locked in, we can move into phase 5,
00:12:33which is actually generating the assets themselves.
00:12:36We'll now produce the concrete pieces that will be used across the entire video.
00:12:42Alright, so up to this point, we have been deliberately separating concerns.
00:12:48And first the defined system, then art direction, then storyboard, then previously the assets specs.
00:12:56And this step now turns those definitions into actual usable assets without missing responsibilities,
00:13:04which sets up Claude's code to develop with very clear instructions and context.
00:13:10Which is why this works so reliably.
00:13:13So let's walk through it.
00:13:15Let's grab the phase 5 prompt in the build guide again, and then paste it in the Claude terminal.
00:13:20But before we hit enter, here's an important thing.
00:13:23When you are working with larger projects with lots of assets across different categories,
00:13:29it's a really good idea to generate them in batches by category.
00:13:33What I mean by that is adding a rule to the prompt that tells Claude
00:13:37to generate one assets category at a time.
00:13:40And this reduces the chances that the AI hallucinates, which lowers the chance
00:13:45of Claude missing styles across unrelated assets.
00:13:49So in our case, this video does not have a huge assets inventory.
00:13:53So we just go ahead and generate everything in one single pass.
00:13:57Just know that as your projects get bigger, batching becomes a best practice.
00:14:03Okay, this part usually takes some time, so just be patient.
00:14:08Once it finishes, take a quick moment to scan the output and see if all the assets you need are there.
00:14:15Normally, you will find everything in the SRC folder.
00:14:20And just like that, we now have a full set of generated assets ready to use.
00:14:25And these are not abstract ideas anymore.
00:14:28They are real building blocks that will be reused across scenes,
00:14:32which is what we will give the video consistency we want.
00:14:36With all our assets complete, the next step is to give them motion.
00:14:41This is phase six, and the goal here is to define how each of our assets behaves.
00:14:47Not the final scenes yet, just the motion building blocks will be reused everywhere.
00:14:53These are what you think of as motion primitives.
00:14:56And basically, we are creating a shared motion language that the entire video can use.
00:15:01So in the build guide, just grab the phase six prompt and then paste it into Claude code.
00:15:07Now here's the important mindset shift.
00:15:10We do not need to be very technical here.
00:15:13We are not listing every keyframe or describing every animation in detail.
00:15:18And the reason we can do that is because of the work we did earlier.
00:15:23Because in the first phases of this project, we established how Claude should think.
00:15:28We defined development rules and pattern, visual principles, storytelling,
00:15:33and design constraints using all of those markdown files.
00:15:37And this gives Claude a heart and standing of the style, the pacing, and the tone we are aiming for.
00:15:44So at this point, we can trust it to evaluate the project as a whole
00:15:48and propose sensible motion patterns.
00:15:50So once the prompt is paced in, we can go ahead and hit enter.
00:15:55Claude will start analyzing the assets and generating motion primitives.
00:15:58A common mistake here is trying to over control the step.
00:16:02If you attempt to micromanage motion at this stage,
00:16:05you will end up baking a scene specific motion into your motion system.
00:16:10And that makes things harder to reuse later.
00:16:13So instead, we are aiming for flexible general purpose
00:16:17motion patterns that feel consistent across the entire video.
00:16:21And now that does not mean Claude will get everything perfect.
00:16:25That's okay.
00:16:26Our job here is not to expect flawless motion on the first pass, right?
00:16:31Our job is to get a strong baseline.
00:16:34We'll absolutely come back and polish specific moments later when we see the scene outputs.
00:16:39So after a bit of processing, Claude finishes.
00:16:42And just like that, we now have a set of motion primitives defined for the project.
00:16:47These are reusable, consistent, and aligned with the visual
00:16:52and narrative system we established earlier.
00:16:54That's a huge milestone.
00:16:57We now have assets and we have motion.
00:17:00And we are really close, turning all this into a video.
00:17:04And now for phases 7 and 8.
00:17:06These are the parts where we basically glue everything together.
00:17:09Some of the things that this prompt will be asking Claude to do
00:17:12are likely things that have already been factored during the early phases.
00:17:17But still, it's important to run them to create necessary components
00:17:22and to make sure that we don't have gaps.
00:17:25So just run them in the Claude code terminal
00:17:28while asking Claude to skip things that it has already done.
00:17:31All right, now that all that is done,
00:17:34we finally have the green light to build the scenes and assemble the video, okay?
00:17:40And this is phase 9.
00:17:42And honestly, this is the easiest part of the whole workflow
00:17:46because all the hard thinking has already been done for us, okay?
00:17:50So let's keep it up.
00:17:51At this point, Claude is not guessing anymore.
00:17:54It's executing inside a system we carefully set up.
00:17:57Our goal here is very simple.
00:17:59Generate the code for each scene.
00:18:02Review how it looks.
00:18:05Then assemble everything into one single polished final video.
00:18:10First, copy the phase 9 prompt from the build guide
00:18:13and paste it into the Claude terminal and then hit enter.
00:18:17And what this prompt does is instruct Claude
00:18:21to start building the actual motion scenes
00:18:23using everything we have created so far.
00:18:26Like the art direction, the storyboard, the assets,
00:18:29and the motion primitives all come together here.
00:18:32So now ideally, especially for larger projects,
00:18:35you want to generate scenes one by one.
00:18:38And that's why we decided the prompt that way.
00:18:41And even though this is only a one minute and 30 seconds video,
00:18:45learning this best practice early will save you a lot of pain later.
00:18:49So when scenes are generated individually,
00:18:52it's much easier to debug its rate
00:18:55and make targeted changes without breaking the entire video.
00:18:59So once scene one is done, we move on and generate the rest of the scenes.
00:19:04And after that's finished, we want to actually see what we have built.
00:19:08You can ask Claude to run the Remotion Studio for you
00:19:10and it will give you the URL.
00:19:12Or you can just run npm start and the terminal.
00:19:16Now we are inside the Remotion Studio and let's go ahead and press play.
00:19:21And right away you can see that the art direction
00:19:24and visual style look consistent across every single scene.
00:19:28And that's a really good sign.
00:19:29If the video feels a little flat, that's completely expected.
00:19:34Right now we have only created the scenes, we have not fully
00:19:38assembled the video or polished the transactions yet.
00:19:42So from here, we'll just go back to Claude's code
00:19:45and raise issues that we observed and tell Claude exactly what we want to improve.
00:19:50Like the exact parameters on how we think the scenes should move.
00:19:56And the exact problem we used here is not that important.
00:19:58Your output might look different from each section, like yours to mine.
00:20:04The exact problem we use here is not that important.
00:20:07Your output might look different from each section compared to mine.
00:20:10And that's also a good thing because this is where you start
00:20:14developing the skill of polishing and debugging your own work.
00:20:17You're no longer just following prompts.
00:20:20You're making final judgment calls.
00:20:22And after that's done, we check the video again.
00:20:25And just like that, everything feels tighter.
00:20:28The motion is cleaner, the transitions are better,
00:20:31and the video finally starts to feel intentional instead of mechanical.
00:20:35All right, but we're not stopping here.
00:20:37Okay, the last layer is voiceover and background music.
00:20:41So for this, we'll use the 11 Labs SDK.
00:20:44We keep this part fast.
00:20:46So just head over to the 11 Labs documentation.
00:20:49Grab the appropriate command for your setup.
00:20:52And since we are using Node.js, we will just use that one.
00:20:56Then just ask Claude to run the command and set up the 11 Labs integration for voiceover and music.
00:21:03So Claude will create an ENV file for you where you can just paste in your 11 Labs API key.
00:21:09So after that, you can ask Claude to generate a voiceover script
00:21:13that matches the video you have built.
00:21:16And once that's wired up and done, let's check out the output again.
00:21:20Mars, the red planet, a world that has captivated humanity for centuries.
00:21:27It's the fourth planet from the sun, sitting just beyond Earth in our solar system.
00:21:31At its closest, Mars is 225 million kilometers away from Earth.
00:21:37That's a seven-month journey by spacecraft.
00:21:41Pack your patience.
00:21:42Mars is about half the size of Earth, a smaller world but no less fascinating.
00:21:48A day on Mars is almost the same as Earth, 24 hours and 37 minutes.
00:21:54But a year? That takes 687 Earth days, almost two of our years.
00:22:01The atmosphere is paper thin, just 1% of Earth's.
00:22:05You definitely need a spacesuit.
00:22:07Why so red?
00:22:09Iron oxide, rust, covers the surface, giving Mars its signature color.
00:22:15Mars is home to Olympus Mons, the largest volcano in the solar system,
00:22:19three times taller than Everest.
00:22:21And there's water, frozen at the poles and possibly hidden underground,
00:22:27the key to future exploration.
00:22:29We've already sent five rovers to explore sojourner, spirit, opportunity, curiosity and perseverance.
00:22:37One day, humans will set foot on Mars,
00:22:40will build habitats, plant flags and call it our second home.
00:22:45Mars awaits!
00:22:46Now, this is what our Mars explainer video looks like.
00:22:51A fully built, polished, clean and professional explainer video.
00:22:56Built from a system, not guesswork.
00:22:59And the storytelling feels nice, the visuals look great and each transitions.
00:23:05And the storytelling feels nice, the visuals look great and each transition plays really smoothly.
00:23:12Alright, so let's zoom up for a second and look at what we just did.
00:23:16We went from an empty folder to a fully rendered professional video.
00:23:22No after effects, no timeline, no keyframes.
00:23:26We used cloth code, remotion and agent skills as one single system.
00:23:32And we directed the result instead of manually building every piece.
00:23:38That's a real asset you can post, ship and plug into your workflow today.
00:23:44And that's the bigger takeaway here.
00:23:47The power is not just that AI is faster, it's that these tools work together.
00:23:52So when cloth code can understand remotion and skills inject the right knowledge at the right time,
00:23:59you are no longer working like a solo creator, you're working like a small team.
00:24:05And that is the shift from using AI to actually building with AI.
00:24:09So from here, you are not just making videos, you are building facial systems.
00:24:14You can tweak the vibe, swap data, generate new versions and launch without waiting on anyone else.
00:24:21And this does not replace creativity, it actually amplifies it.
00:24:26And once you have this workflow, you can apply it to product demos,
00:24:30social clips, client work or anything else you want to ship.
00:24:34So if you want to go even deeper, that's exactly what we do inside the AnyNoCode premium community.
00:24:40We break down real world workflows like these, show you how to make money with AI,
00:24:46and you'll be learning alongside professional founders and builders.
00:24:50Plus, you can get our AI website design course there to help you implement things faster.
00:24:54So if you like this video, please hit the like button and subscribe
00:24:58for more tutorials like this in the future.
00:25:01I'll see you in our next one.