WEBVTT 00:00:00.320 --> 00:00:17.725 Hey. 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. So 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. 00:00:17.725 --> 00:00:31.890 So you can see this here. I'm gonna show you exactly how to do it. This 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. 00:00:32.290 --> 00:00:44.930 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:00:45.525 --> 00:00:52.485 And 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 00:00:52.485 --> 00:00:54.805 views on their announcement video 00:00:55.205 --> 00:00:57.765 showing this motion design that they created themselves, 00:00:58.180 --> 00:01:03.780 you know, to promote it. They created with this this skill, with this tool. Uh, you know, they released a, 00:01:04.180 --> 00:01:13.285 uh, like, little video showing how they did it, which is super confusing. They'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 00:01:13.365 --> 00:01:14.885 the types of designs 00:01:15.205 --> 00:01:29.780 that they built. Uh, 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. 00:01:30.500 --> 00:01:36.820 So the first thing you're actually gonna have to do is open up your terminal here, and you can see on the x 00:01:36.980 --> 00:01:41.315 announcement here, they gave us what to run here. So we're gonna run this 00:01:42.115 --> 00:01:44.035 right here inside of your terminal. 00:01:44.355 --> 00:01:48.035 Alright? And it's going to download the skill from the repository 00:01:48.595 --> 00:01:58.440 that we need to use here. So 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, 00:01:58.600 --> 00:02:00.760 best practices for Remotion video creation, 00:02:01.160 --> 00:02:12.825 and then, uh, you get to choose what agents. So 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 00:02:12.825 --> 00:02:13.545 methods. 00:02:13.865 --> 00:02:15.785 Alright. Proceed with installation. 00:02:15.865 --> 00:02:25.240 Done. It now installed it. After you do that, you need to run, uh, a couple more things here. It's very simple. Just follow. You're gonna run bun create 00:02:25.880 --> 00:02:26.520 video. 00:02:27.080 --> 00:02:31.000 Once you do that, it's gonna open up all these templates that Remotion gives us. 00:02:31.320 --> 00:02:34.040 Honestly, I don't know what, you know, some of these are. 00:02:34.785 --> 00:02:38.145 We have, like, a hello world starter template. 00:02:38.545 --> 00:02:40.545 We have a recorder. 00:02:40.545 --> 00:02:44.945 We have let's see. I don't know. A bunch of still images, audiogram, 00:02:44.945 --> 00:02:46.225 music visualization, 00:02:46.225 --> 00:02:52.780 stuff like this. I see one for TikTok as well, generated generate animated word by word captions. 00:02:53.100 --> 00:03:12.645 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. You'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. So, for example, what I'm gonna do here is just call it, like, uh, motion design. 00:03:12.805 --> 00:03:13.445 Right? 00:03:14.005 --> 00:03:17.360 And then once you do this, you're gonna add the agent skills, 00:03:17.840 --> 00:03:29.360 and then this will fully set up the project here inside of that folder. And 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. 00:03:29.840 --> 00:03:31.945 So we're gonna open this in Versus Code, 00:03:32.345 --> 00:03:45.100 and this is what it opens up. So 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. 00:03:45.500 --> 00:03:50.300 So you're gonna see here on the left that we have, like, dot agent dot ClaudDotCursorDotGemini 00:03:50.300 --> 00:03:57.885 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 00:03:57.885 --> 00:04:00.205 system here, I'm just gonna delete these 00:04:00.685 --> 00:04:07.245 these other ones that we don't want, like Cursor, Gemini, OpenCode. I'm gonna delete those to clean it up. Alright. 00:04:07.725 --> 00:04:18.780 And now we have our dot Claude file, which you should be familiar with if you build out, you know, claud systems here. We have our skills. Now it has the the agent skill for room motion best practices. 00:04:19.180 --> 00:04:24.380 Alright? And then we also have everything else we need here to start creating the motion designs. 00:04:25.045 --> 00:04:39.820 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. So we're gonna first go over to my cowriting system. 00:04:40.540 --> 00:04:43.820 Alright. And here we are. This is what my cowriting system looks like. 00:04:44.140 --> 00:04:52.315 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. 00:04:52.315 --> 00:04:54.795 So if we come here to Google, 00:04:55.035 --> 00:04:59.515 we have the cowriter system. This is the new motion design I put on my landing page. 00:04:59.755 --> 00:05:23.185 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. And 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. 00:05:23.425 --> 00:05:36.950 So what we're gonna do is let me come back over to my, uh, system here. And 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 00:05:37.110 --> 00:05:40.390 to create, uh, you know, a motion design 00:05:40.470 --> 00:06:05.250 for my landing page, and I pointed it to the path of my landing page. And 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? I took that prompt, and we went over to our motion design 00:06:05.490 --> 00:06:16.865 project opened here that we just had downloaded, right, from Remotion. We downloaded the skill and I showed you everything here. So I came over to that and I started a new Claude session and I pasted this prompt. 00:06:17.105 --> 00:06:26.225 Alright? Once I pasted this prompt, you can see that the Remotion skill, the agent here in Claude, started working on creating this animation. 00:06:26.465 --> 00:06:43.030 It it put a bunch of to dos. It, you know, it completed all the to dos. Alright? And 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. 00:06:43.525 --> 00:06:45.525 So you could see the first thing I created 00:06:45.685 --> 00:06:56.245 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 00:06:56.565 --> 00:07:00.060 to finally get to this where it was like a longer promotional video 00:07:00.060 --> 00:07:04.460 for the CoWriter system, which I keep talking about it. If you don't know, it's a exclusive 00:07:04.460 --> 00:07:10.700 community training program and and platform that I have. So I wanted to build out this full one, I kept iterating on it. 00:07:11.345 --> 00:07:19.825 Now 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. 00:07:20.785 --> 00:07:30.240 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. It's a completely fresh folder. 00:07:30.560 --> 00:07:45.065 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. So, for example, maybe I'm gonna tell it, 00:07:46.185 --> 00:07:48.185 I want you to create a motion design 00:07:48.890 --> 00:07:51.690 of a terminal typing out the following. 00:07:52.570 --> 00:07:55.530 And then what I'm gonna do is paste this 00:07:55.690 --> 00:08:08.815 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. And then, really, just my idea is to have a terminal type that out. I'm gonna tell it that, 00:08:09.695 --> 00:08:12.735 and you're gonna see Claude fire up now its 00:08:12.895 --> 00:08:13.695 skill, 00:08:13.935 --> 00:08:16.540 its Remotion skill to create 00:08:16.700 --> 00:08:25.260 this design, and then we can see what that looks like. So it's gonna read everything here, all of its different files. We're gonna give it access to all of that. 00:08:26.700 --> 00:08:35.245 Alright. And 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 00:08:35.485 --> 00:08:43.165 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. 00:08:44.220 --> 00:08:50.060 Alright. Now you can see after it took about two or three minutes, uh, we let it run through everything. 00:08:50.300 --> 00:08:55.820 It finished up its design, and you can see it should automatically spin up its, uh, server. 00:08:55.980 --> 00:09:00.865 And we can now look at what this looks like. So let's go up. It it automatically 00:09:00.865 --> 00:09:03.265 pulled this up, and now we have, 00:09:03.745 --> 00:09:11.730 uh, this this motion design created just like that. So we're gonna play it. You can see we told it. This is exactly what we wanted. I mean, this is insane. 00:09:11.970 --> 00:09:13.970 Like, being able to create this is 00:09:14.530 --> 00:09:15.890 is pretty incredible. 00:09:16.050 --> 00:09:23.970 So 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. So 00:09:25.125 --> 00:09:28.005 let's see. I'm gonna put this side by side here with our 00:09:28.805 --> 00:09:35.125 what we're working in here. And what we can literally do is let's see. So this is where we're working here. 00:09:35.525 --> 00:09:37.685 I'm gonna literally tell it to 00:09:38.085 --> 00:09:38.565 let's see. 00:09:39.540 --> 00:09:40.980 Start off the video 00:09:41.460 --> 00:09:42.180 with, 00:09:42.420 --> 00:09:43.860 you know, the 00:09:44.020 --> 00:09:47.860 the text co writer system by Alex McFarland 00:09:47.860 --> 00:09:51.140 and then, uh, flow into this terminal. 00:09:51.380 --> 00:09:58.325 And then at the end, I want you to put the URL of my landing page and use my profile picture. 00:09:59.445 --> 00:10:00.085 Alright? 00:10:00.325 --> 00:10:07.685 I'm just gonna tell something like that just so I can show you how you can now start expanding this. So what I'm thinking is, like, at the beginning of this, I wanted to, 00:10:08.760 --> 00:10:09.560 you know, 00:10:10.040 --> 00:10:13.000 like, just show that this is the Cowriter system, 00:10:13.800 --> 00:10:15.640 you know, Cowriter system 00:10:16.360 --> 00:10:18.040 by Alex McFarland. 00:10:18.920 --> 00:10:21.480 And then what I'm gonna do is 00:10:21.775 --> 00:10:26.175 literally come over here. And now on the left, you can see this folder here public. 00:10:26.415 --> 00:10:39.720 You 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. 00:10:40.280 --> 00:10:48.040 Alright. So 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. 00:10:48.440 --> 00:10:50.005 Alright. And 00:10:50.085 --> 00:10:51.845 what we are gonna do here 00:10:52.085 --> 00:10:52.885 is 00:10:53.125 --> 00:10:57.445 take just the path of that, copy the path, and give it to Claude. 00:10:58.165 --> 00:11:06.760 Alright. 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, 00:11:06.760 --> 00:11:08.920 putting in your own images and assets. 00:11:09.080 --> 00:11:18.165 So we gave it to it. Alright. It's gonna say, what is the URL for your landing page? I forgot to give it that, so it's actually alex mcfarland 00:11:18.405 --> 00:11:19.605 dot a I 00:11:20.645 --> 00:11:21.925 slash 00:11:22.005 --> 00:11:23.045 co writer 00:11:23.285 --> 00:11:24.005 system. 00:11:24.485 --> 00:11:25.125 Right. 00:11:25.525 --> 00:11:26.245 Alright. 00:11:26.405 --> 00:11:31.190 So we're gonna submit that. Alright. So it got the URL. It got the photo of us. 00:11:32.390 --> 00:11:37.590 And 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. 00:11:38.070 --> 00:11:50.285 Alright. So 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. It's telling us it added in an intro, the terminal scene, 00:11:50.445 --> 00:11:57.485 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. 00:11:58.340 --> 00:12:01.300 So now it has the CoWriter system by Alex McFarlane. 00:12:01.540 --> 00:12:04.100 We have the terminal that we had already before. 00:12:04.660 --> 00:12:16.085 This is so insane. I'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 00:12:16.325 --> 00:12:31.540 the, um, URL. So, 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. But like I said, 00:12:32.260 --> 00:12:37.700 um, I also created a Claude skill that will help you create prompts. So let's try that out now. 00:12:38.020 --> 00:12:41.385 So we're gonna open up a new instance of Claude here, 00:12:42.105 --> 00:12:42.665 and, 00:12:43.465 --> 00:13:16.875 uh, what I actually did was copied the skill already, and we're gonna paste it here. So 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. But 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. And we have this skill here. Let me 00:13:17.420 --> 00:13:19.820 make it a little easier to read here. 00:13:20.860 --> 00:13:30.695 Alright. 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. 00:13:31.015 --> 00:13:35.975 Alright? We give it all sorts of reference materials in different phases to follow. Alright? 00:13:36.455 --> 00:13:40.615 So now you can literally come to Claude and be like, Claude, 00:13:40.615 --> 00:13:46.750 I need your help coming up with a motion design prompt. Can you use your motion designs prompt skill? 00:13:47.630 --> 00:13:53.710 And then the way I designed this skill was to kinda give you two options. Like, if you already have an idea in your head, 00:13:54.190 --> 00:14:13.585 then you can provide that idea to it. Or 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. Let 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 00:14:13.585 --> 00:14:14.065 ideas? 00:14:14.830 --> 00:14:19.550 Alright. 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, 00:14:20.190 --> 00:14:24.030 I have a rough idea of creating a motion design 00:14:24.350 --> 00:14:27.150 that shows basically a user, 00:14:27.470 --> 00:14:33.315 um, typing in a a query into a terminal, for example, like creating a LinkedIn post, 00:14:33.475 --> 00:14:36.675 and then it's showing agents being invoked, 00:14:36.995 --> 00:14:38.035 um, to, 00:14:38.115 --> 00:14:42.035 uh, you know, go create this content. Uh, that's kinda my rough idea. 00:14:42.860 --> 00:15:14.050 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. And 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 00:15:14.210 --> 00:15:19.970 to create the these really cool designs. Now the last note I kinda wanna wanna say 00:15:20.610 --> 00:15:21.490 is that 00:15:21.810 --> 00:15:35.805 the and I've been messing with this for all day now and since last night, actually, when it was released. And the one main thing I can say is don't try to get super complicated with your designs here because, 00:15:36.125 --> 00:15:36.765 you know, 00:15:37.645 --> 00:15:49.990 when you try to get super complicated, I was realizing it was kinda getting really messy. Things were not formatted correctly. Pieces were all over the place. Uh, it was just not good. So it's not at the point where you can create, like, these super high level, 00:15:50.150 --> 00:15:52.550 you know, intense motion designs. 00:15:52.710 --> 00:16:17.150 Uh, you should really try to keep it simple. So, 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. And 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 00:16:17.150 --> 00:16:18.270 nondevelopment, 00:16:18.270 --> 00:16:21.485 like writing workflows with Cloud Code or AI. 00:16:21.725 --> 00:16:22.285 So 00:16:22.685 --> 00:16:34.685 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 00:16:34.685 --> 00:16:37.170 is that, you know, whether you are 00:16:37.570 --> 00:16:46.450 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, 00:16:46.690 --> 00:16:53.545 or if you're like a startup founder, you know, and you're strapped for resources and trying to carry out marketing by yourself, 00:16:54.025 --> 00:17:09.630 you know, all of these just add on to your stack of skills that you have. So, you know, it's not just about writing. Writing is the focus, but then you can build on top of that. You know? Now we have, like, you know, we already have, like, research that can go on top of that. We have image generation, 00:17:09.790 --> 00:17:11.070 video generation. 00:17:11.150 --> 00:17:13.550 Now we have motion design. We have sound. 00:17:13.710 --> 00:17:15.710 So when you add all of that together, 00:17:15.950 --> 00:17:53.145 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. And 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. So this is all stuff you should be learning. You know? I talk about it all the time. I run several 00:17:53.305 --> 00:17:55.145 digital content businesses, 00:17:55.145 --> 00:18:02.585 uh, successful businesses all by myself. And besides that, I ghostwrite for CEOs. I've ran content operations for startups. 00:18:02.745 --> 00:18:08.540 Uh, I have, you know, news publications that I write for, and I do all of this by myself. 00:18:08.780 --> 00:18:14.860 And it includes not just writing, but thumbnail generation, video generation, marketing material, PDFs, 00:18:14.860 --> 00:18:25.485 now motion design, and I've never spent a penny on outside help. And I run all of this myself. So, you know, take that, you know, and definitely live by that and 00:18:25.645 --> 00:18:31.615 start out by using this motion design skill. I'm gonna include all the resources below. 00:18:31.695 --> 00:18:36.895 Consider joining my substack where the Claude skill will be if you need help prompting. 00:18:36.895 --> 00:18:39.935 And, uh, yeah, drop any comments if you've tried this out already.