Claude Design Just Unlocked AI Motion Graphics

TL;DR: Claude Design's animation feature can generate dynamic graphics synced with voiceover from transcript text using prompts, reference images, and reusable design systems. This article contains the exact prompts, workflow, and editing process the author uses. ## Claude Design's Animation Feature: Overlooked by Many, but the Author's Most-Used Tool Claude Design is gaining popularity, but there's one feature most people overlook—animation. The author says this is actually the feature he uses most, and it's how he creates all the motion graphics in his YouTube videos. What makes it most unique: you can paste in a transcript, and Claude Design will generate animations that sync perfectly with what's being said. This article covers the types of animations it can create, the exact prompts and workflow the author uses in his videos, and includes the editing process. ## How to Access Claude Design You need a paid Claude plan (Pro or Max) to use Claude Design. There are two ways to access it: - Visit claude.ai/design - Find it in Claude's sidebar Once inside, there are various templates to choose from, including slide decks, mobile app designs, UI mockups, resumes, 3D objects, and more. This video focuses on animation. The author will demonstrate in order: 1. Creating an animation using only prompts 2. Using a reference image 3. Using multiple reference images 4. Using a design system (a complete brand style and voice guide that you can work from every time) For every video about Claude, the author has a design system containing everything—UI, logo, colors, etc. Simply select it, paste in the prompt, add the timestamped transcript, and send. ## Creating Animation with Prompts Only: LLM Training Example For the first example, the prompt used was: > "Make a visual explainer animation for how LLMs are trained and how they work." After sending it directly, Claude sometimes returns a series of questions. For this very vague prompt, it asked quite a few questions. The author's answers were: - For curious professionals and executives - 30 seconds (this is just a demo) - 16:9 aspect ratio - Decide for me - Decide for me - Minimal labels After clicking continue, the results came back just a few minutes later. The result comes with an adjustment panel where you can test different accent colors. The author really loves that opening shot—"cat sitting on a mat"—which is the example he sees every time this topic is explained. He thinks it's a great transition, and red is his favorite color. There's also a timeline at the bottom where you can adjust the duration of each shot. If you want a shot to be faster, you can drag it in. ### Editing Animations with Natural Language The best part is that you can make edits using natural language. For example, if you want it to use a different phrase as the example, you can simply ask it to change that part. After the edit, the example became "the kettle starts boiling." It changed it perfectly while keeping everything else intact. The author skipped to the end to check the question section and found that it had been changed too. He points out that creating such an animation from scratch would take a long time, and this was still a relatively simple example. ## Data Visualization: Dynamic Charts and Graphs Another particularly useful feature is data visualization, like animated charts and graphs. The author shows a quick example generated purely from a prompt, with no reference images. The prompt asked to compare historical market bubbles and where we currently stand in the AI bubble. The results were amazing. The author didn't provide any data in the prompt—Claude went and researched and found all the data to use on its own. So with just a prompt, you get some incredibly useful animations that are very different from what typical text-to-video generators produce. ## Under the Hood: Claude Writes Code, Not Rendered Video Under the hood, Claude writes actual code—like HTML, CSS, and JavaScript—and displays it in real time. These three correspond to structure, styling, and motion respectively. The whole process happens in real time, which is completely different from generators that return a complete video file. This is also why outputs in Claude Design are so easy to edit precisely—it's just modifying that part of the code. ## Free Guide: "Claude Design in Action" The video mentions that they made a free guide called "Claude Design in Action," which contains use cases you can try today. Each use case has an optimized prompt so you can get the results you want faster. The guide has been updated to include the exact prompts the author used to create these motion graphics in the next section. There are also workflows like custom pitch decks, building landing pages from competitor screenshots, social media templates, and more. The free guide link is in the video description. ## Image-Based Animation: Single Reference Image In a previous video about the Claude ecosystem, the author used GPT image 2 to generate an image of the visual effect he wanted, almost exactly as imagined. But he needed to make it move. How it works: put the image in, then describe what kind of animation you want. The author's instructions at the time were roughly: > Start by showing the top three layers, then each layer fades in sequentially, pauses, then moves to the next layer, working down through the entire ecosystem. He set pauses because he was using it as a title card, and would switch when he got to that part of the narration. This generation didn't ask any questions—it just started and returned the result: starting with the title, then the core product entrance, a pause, then the general layer, then context memory, a pause, and finally the autonomy layer. Perfect on the first try. The author notes: the result doesn't look exactly like the reference image, because Claude isn't animating the image itself—it's recreating the concept in code. ### UI and Interface Mockup Animations You can do all sorts of things with image references. One major use the author has been relying on is UI for different platforms. Put the image in, and Claude can simulate cursor movement, clicking on things, pop-ups, typing in prompt boxes, or back-and-forth conversations. These are very difficult to do traditionally unless you use templates. You can find templates for common platforms, but definitely not for less common ones, and you can't do much customization either. This saves a huge amount of time. ## Multiple Reference Images + Universal Prompt With multiple reference images, you can really guide the style and keep it consistent across longer generations, while including specific logos, UI, icons, or anything else needed. When creating an animation about Claude, the author used: - The little Claude character - The prompt box - The chat interface - An image of how he wanted the background to look These four images provided everything needed. Then the author used a relatively simple, universal prompt, giving Claude room to design—something that works across various generations for different products, concepts, and explanation types. ### The Universal Prompt (Used by the Author in the Video) > I want to create motion graphics that go above a talking head video. They should follow the transcript and illustrate concepts at matching timestamps, defaulting to graphics and icons to explain concepts where possible. Use UI screenshots where applicable. Minimize text where appropriate, using text to emphasize key points or label things. Exception: if a definition is involved, it makes sense to show the exact quoted text on screen. The author explains: this prompt is fairly generic and applies to basically any type of video he makes. The part about minimizing text is because Claude defaults to using lots of text, almost like subtitles throughout, which he doesn't like at all—but it's easy to fix. ### Leaving Space for the Talking Head The next part is telling Claude: > Leave blank space on the right third, sometimes the top third, for the talking head. Otherwise, it defaults to full screen the whole time, and there's no place for me. Tell it to switch positions as needed. But usually top third open is for big key points and definitions, or it can go full screen when needed. This time the author also added a line telling it to use the background image he provided and add a subtle animation to the background. Aspect ratio was 16:9. ### Getting the Transcript: Generating SRT with Gemini The easiest and fastest method the author has found is using Gemini, saying: > "Give me the SRT transcript of this" Then drop in the video clip for which you want to generate animation. About 5 to 10 seconds later, it returns. SRT stands for SubRip Text, a plain text file format containing timecodes with text below them, separated by line breaks. Gemini knows what this means. Click copy, paste it at the end of the prompt, and send. This time there were no questions to answer. When the result returned, you could see: - Space was reserved on the right for the talking head - The chat interface looked great - The little Claude character was floating up and down But it made the most sense when the talking head actually sat on top. The author added the talking head and played the whole thing through with audio. ### Editing by Referring to Segments by Name Claude only reserved space on the right the whole time, so the author wanted to switch the open space to the top near the end. He sent a quick follow-up edit: > "Move the conversation and one round of replies to the bottom center, leaving enough space at the top for the talking head." Those are the titles Claude gave those sections, which you can see below. When the author needs to make edits, he usually just refers to them by name. The edit came back and was absolutely perfect. ## Export and Editing Workflow The author goes to the "Share" button, selects "Video," bumps the video up to 1080p, exports it, and imports it into Premiere. - Manually adding zoom and position keyframes, using bezier curves to smooth the motion - Doing similar things with masks—manually adjusting them to where you want, then letting them sync with the motion - Moving to the next motion point, clicking in, and repeating the same process - Once you've done these motion operations once, you can copy and paste ### A Self-Built Premiere Plugin The author points out that doing these operations in Premiere is actually quite tedious, so he built a plugin for Premiere to solve this problem. It also handles other operations that are time-consuming for this type of video, like zooming, dynamic highlights, and more. This plugin is currently a personal plugin he uses himself and isn't available yet. The author is very excited about it and did a quick demo of some features. He built the whole thing in Cursor. **Zoom**: Click where you want to zoom, change the zoom percentage if needed, then click "Animate" and it's done. **Highlight**: Place a rectangle, click "Enlarge" to size it just right, and you can change the color or animation style. The author really likes the "stroke" style. After clicking "Animate," the highlight animates in while zooming, with a fade-in added to the background. **Pop-in effect**: Place another rectangle, and it will animate expanding to that rectangle. ### Handling the Talking Head The author puts the talking head clip on top and the Claude-generated video underneath. Then he clicks one of the preset positions and a shape, manually adjusts the size if needed, and can add a border, change color, add gradients, glow, or drop shadow. The author re-frames the position of the composition so the orange light is right at the top of the mask, then clicks "Animate to this state." A few seconds later, it's done. In a later section, he wants the composition to move to the center. He puts the playhead there, clicks "Refresh frame" to see where it needs to go, clicks position and shape again, makes sure the orange light is perfectly at the top, then clicks "Animate." When playing, the animation syncs with what the author is saying: > "And everyone knows. It works exactly the same way across all three interfaces." The author then shows the full clip: > "Chat is the feature everyone knows, and it works exactly the same way across all three interfaces. It's where you go back and forth with Claude for brainstorming, writing, researching, refining ideas. It's a thinking partner. You can extend it with built-in features like Projects, which give it permanent context about your work, or Connectors, letting it use your other tools like your email or calendar, and Artifacts—app or document windows that open beside the chat. But at its core, chat is a conversation. Everything chat does, even when it generates a file or builds a small dashboard for you, happens within a single turn, and then it hands things back to you, waiting." The author says he's used these in quite a few videos already, but it's still unbelievable to him how easy it is to get this quality of motion graphics. ## Reusable Design Systems Uploading a set of reference images works well, but only for that one generation. Many times, you'll want to use a style across multiple generations to maintain consistency between different shots or different videos, maybe to match brand colors every time. The author makes many videos about Claude and wants the logo, UI, and colors every time. Even within one video, he usually generates only about 30 seconds or at most 2-minute segments at a time, and a video can have several of these segments, so he needed to create a reusable design system. How to create one: - Click the plus button under the Design Systems dropdown - Or view all previous design systems in the Design Systems tab below - Click "Create design system" - Choose to create using Claude Code, or "Create here" Then you can: - Link code from a GitHub link - Upload from your computer - Upload a Figma file - Add images you want it to reference The author's example: he added three images, generated with GPT image 2 in a consistent style, covering various content that might appear across some of his videos. Then he added more notes to guide it, clicked "Continue generating," and it took about 5 minutes. Once generation finished, Claude produced complete documentation containing: - System layout - Content foundations - Visual foundations - All the different visual elements that would be used across different generations: the types of lines connecting things, glass and stroke styles, glow layers, icon designs The list goes on and on—there's a massive amount of content. The author concludes: design and animation work that used to take a long time has now become incredibly efficient with Claude Design's animation capabilities, transcript guidance, reference images, and design systems. Source: Claude Design Just Unlocked AI Motion Graphics - YouTube (https://www.youtube.com/watch?v=97Y5cz7H8SM)