Motion design with Claude: the method and the prompt for your brand

I asked Claude for a 56-second motion design video, synced to a voiceover, in a brand's exact colors. No editing software. Here's the method, the pitfalls I ran into and the prompt you can reuse for your own brand.

The prompt matters less than what you attach to it.

The trap: asking for "a video" in one sentence

If you just write "make me a video for my brand", you get the average of what the model has seen. Purple gradients, rounded cards, one-size-fits-all headlines. Your brand guidelines aren't there, because the model doesn't know them.

Second problem: an animation running in real time in a browser is hard to capture cleanly. Frames drop and the sync with the voice drifts as the seconds go by.

Third problem, and a sneakier one: Claude's execution environment can't reach everything. On my first try, there was no way to fetch the official logo from Figma or from the website. Claude redrew it. Close, but wrong. In a video that claims to follow brand guidelines, that's the first detail an art director notices.

The solution: a web page photographed 30 times per second

The idea is simple. Claude builds an HTML page where every element depends on a single variable: time. A render(t) function places everything at time t. A headless browser (Playwright) takes a screenshot for each frame, then ffmpeg assembles the screenshots with the audio.

Every frame can be recomputed identically. You can sync a word to within 1/30 of a second, fix a shot and rerun the render without breaking anything.

1. 01

   Gather the inputs

   Voiceover as MP3 (plus its timestamps as .srt if your tool exports them), logo as SVG, fonts, a Figma link or brand guidelines PDF, and a reference video for the rhythm. Anything not attached will be approximated.

2. 02

   Approve the storyboard

   First round: a table (timecode, line, visual, motion) and 6 key frames. You make the calls before anything is rendered. Changing direction at this stage costs almost nothing.

3. 03

   Render frame by frame

   Second round: full render in batches of about 600 frames. On my test, 1,680 frames in 1080p, about 90 ms each, so two and a half minutes of rendering.

4. 04

   Review and mix

   Claude reviews its own work on a contact sheet (one frame every 0.5 s), fixes the defects, then mixes the voice and sound effects at -14 LUFS, the level expected on social platforms.

Why it works

• The brand guidelines come from a verifiable source. Figma, a design system connector or a PDF: Claude reads the real values (fonts, colors, radii, shadows) instead of guessing them.
• The sync relies on the silences in the voiceover. ffmpeg detects the pauses, Claude aligns each sentence of the transcript with its segment, and each element comes in 0.1 s before its word.
• The render is deterministic. No real-time animation, so no stutter and no drift.
• Claude reviews its work by eye. The contact sheet reveals the overlaps, cut-off text and empty shots that the code alone doesn't show.

The prompt to copy

Fill in the brackets, attach the files, send. Delete the lines that don't apply to your case.

Goal
Create a motion design video for [BRAND NAME] ([WEBSITE URL]), synced to the attached voiceover. Formats: 1920×1080 at 30 fps, plus a 1080×1350 variant for the mobile feed. Style: [e.g. understated / energetic / editorial], one idea per shot, cuts synced to the voice, no gratuitous decorative effects.
If a reference video is attached, take only its rhythm (cut frequency, how text and elements come in, type of ending), never its content or its colors.

Attachments
- voiceover.mp3, and voiceover.srt with word-level timestamps if available
- reference.mp4/.mov (optional)
- logo.svg: official logo, to be used as is, never redraw it
- brand fonts as .woff2/.ttf, if they aren't Google Fonts
- useful brand visuals (icons, illustrations, photos, decorative elements)
- music.mp3 (optional)

Transcript
"""[EXACT VOICEOVER TEXT]"""

Brand guidelines source, in order of priority
1. If a brand or design system connector is available, read it before doing anything else. If it fails, say so in one line and move on to the next point.
2. Figma: [NODE URL] → get_screenshot, then get_design_context on a representative block (main heading, buttons), to extract fonts, colors, radii and shadows.
3. Brand book or brand guidelines PDF, if attached.
4. Declared values as a fallback:
   - font: [name + weights]
   - text color: [#]
   - primary color: [#]
   - secondary colors: [#, #]
   - background: [#]
   - radii, shadows and signature elements: [e.g. pills, gradient, grid, texture]
   - tone of voice: [3 adjectives]
Don't put any claim on screen that you couldn't verify (e.g. "made with our tool" if the tool wasn't called).

Required technical pipeline
- A single HTML page with a pure render(t) function: no real-time CSS or JS animation. Frame-by-frame rendering with Playwright/Chromium to JPEG, assembly with ffmpeg.
- Fonts: attachments first, otherwise npm @fontsource for Google Fonts. The container may not be able to reach Figma, Google Fonts or the website: every external asset comes from the attachments.
- Sync:
   - if the .srt is provided, use it;
   - otherwise, ffmpeg silencedetect in two passes (-38 dB / 0.12 s, then -32 dB / 0.05 s) and align the transcript sentences with the segments;
   - each element appears 0.1 to 0.15 s before its word.
- Render in the foreground, in batches of about 600 frames per call. No background processes.
- Sound: voiceover, subtle whooshes on cuts, pops when elements appear, music at -20 dB under the voice. Normalize to -14 LUFS, true peak at or below -1.5 dBTP.

Design rules
- At most two levels of information per shot.
- The brand's signature elements are reserved for key moments (conclusion, CTA); don't repeat them everywhere.
- If the script contrasts "before / after" or "generic / our brand", treat the generic side in a deliberately bland style (Inter, purple/pink gradients) so the contrast is visible.
- Key messages are written on screen: the video must make sense without sound.
- No third-party logos drawn: tool or partner names appear as text.

Flow
Step 1, this turn: storyboard as a table (timecode, voiceover line, visual, motion) and 6 key frames rendered as PNG. Then you stop, and I make the calls.
Step 2:
   - full render;
   - contact sheet at one frame every 0.5 s, which you review yourself;
   - fixes;
   - delivery of the MP4.

Deliverables
- MP4 in H.264/AAC
- 5 sync timecodes to check
- list of everything that was approximated or wasn't accessible

Before sending, attach at least three files: the voiceover, the logo as SVG and your fonts if they're not on Google Fonts. When step 1 comes back, check three things on the key frames: your font, your real logo, your exact colors. If one is missing, fix it before launching the render.

What you get out of it

• A one-minute launch video in two rounds of conversation.
• Edits down to the timecode: a shot to shift, three minutes of rendering, without reopening editing software.
• Brand guidelines applied from their real values, so you can check them token by token.

The limits, to be honest

• Without an .srt file, the sync is accurate at the sentence level (about 0.1 s) and rougher inside long sentences.
• Any asset you don't attach gets recreated. Logo, proprietary fonts, illustrations: attach them.
• The style that works best is still typography, interfaces and simple shapes. Animated characters, realistic 3D and live-action footage are out of scope.
• No generated music. Claude synthesizes subtle sound effects; for a mood, attach your own track.
• In a conversation, a render running in the background stops at the end of the turn. Hence the instruction to render in the foreground, in batches.

Who it's useful for

• You have clear brand guidelines and need short videos on a regular basis (launch, new feature, post): this workflow takes care of a good share of the motion design.
• You're a designer and want to test an animation idea before moving to After Effects: you get a faithful prototype in a few rounds.
• You have neither a motion designer nor a budget for a teaser: you walk away with a clean base to get signed off.