Big Idea

The argument in one line.

Claude Code paired with the open-source Hyperframes tool builds video the way a browser renders a webpage — writing HTML/CSS, screenshotting it frame by frame, and stitching the result into an MP4 — which turns motion-graphics editing into something you describe in a prompt instead of assemble by hand.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You post short-form video regularly and want animated cards, transitions, and split-screen graphics without learning After Effects or a template app.
You already pay for Claude Pro or Max and want a genuinely useful non-coding use case for Claude Code.
You want a repeatable brand look you can lock in once (colors, fonts, card style) and reuse across every future edit.

SKIP IF…

You edit 16:9 long-form content — the specific skill demoed here is pre-configured for 9:16 vertical output and needs manual reconfiguration for widescreen.
You're not willing to install VS Code and pay for a Claude subscription — Hyperframes editing isn't available on Claude's free tier.
You want fully hands-off automation with zero setup — there's still a one-time install and prompt-writing step before it runs itself.

TL;DR

The full version, fast.

Motion-graphics-heavy short-form edits are increasingly made with Claude Code and Hyperframes, a free open-source tool from HeyGen that builds a webpage in HTML/CSS, screenshots it frame by frame, and stitches those frames into a finished MP4 — no dedicated video editor required. After installing VS Code and the Claude Code extension (which needs a Pro or Max subscription), a creator can either write a fully detailed one-off prompt describing aspect ratio, brand colors, and layout, or install a reusable 'skill' file that bakes those specs in permanently. In the demo, a raw 16-second talking-head clip becomes a fully animated split-screen short — cards, voice-synced captions, transitions — from one prompt, in about five minutes. Revisions are just follow-up prompts, and a brand.md file inside the skill lets a creator lock in colors, typography, and card style so every future edit matches without re-explaining it.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 00:29

01 · How are they making these?

Hook: motion-graphics-heavy reels and TikToks look expensive to produce, and most creators assume they need real video-editing skill to pull them off.

00:29 – 02:07

02 · The secret is Claude Code

Reveals that Claude Code plus the Hyperframes skill is behind most of these edits; walks through installing VS Code and the Claude Code extension, which requires a Pro or Max subscription.

02:07 – 03:09

03 · Opening the project and meeting Hyperframes

Opens a project folder in VS Code and launches the Claude Code chat panel, then explains what Hyperframes actually is: build a webpage, screenshot it frame by frame, get a video.

03:09 – 04:50

04 · Installing Hyperframes for the project

A single 'install Hyperframes' prompt pulls in the tool; approving permission prompts (or flipping on bypass-permissions mode) reveals an AGENTS.md file listing the skills Hyperframes supports, like product-launch videos and motion graphics.

04:50 – 06:57

05 · The manual approach: describe everything

Plays the raw, unedited 16-second demo clip, then shows the fully manual path — writing a long prompt that spells out aspect ratio, frame rate, brand colors, typography, and the exact split-screen layout wanted.

06:57 – 07:55

06 · The shortcut: a reusable Shorts Edit skill

Introduces a pre-built 'shorts edit' skill (from Tyler's free community) that bakes in all those specs, and shows dropping it into a project's .claude/skills folder and picking a strong model.

07:55 – 09:38

07 · One prompt, five minutes, done

A single prompt pointing Claude at the demo clip and the shorts-edit skill produces a fully animated output video in about five minutes — cards, split-screen graphics, and captions synced to the speaker's voice.

09:38 – 12:23

08 · Iterating and locking in your brand

Shows requesting a revision (turning a static number into a countdown animation) with a follow-up prompt, then opens brand.md to set colors, fonts, and card style so every future edit matches automatically, and notes the skill needs manual edits to support 16:9 long-form output.

Atomic Insights

Lines worth screenshotting.

Claude Code paired with Hyperframes builds a video the same way a browser renders a webpage: it writes HTML/CSS, screenshots it frame by frame, and stitches the frames into an MP4.
Hyperframes is a free, open-source tool from HeyGen — no cloud rendering fee, no subscription beyond Claude itself, and no output limits.
Editing with Hyperframes requires a Claude Pro or Max subscription; the workflow isn't available on Claude's free tier.
A single detailed prompt — video file, aspect ratio, frame rate, brand colors, and layout instructions — is enough for Claude Code to generate a fully animated short in about five minutes.
A pre-built 'skill' file collapses the workflow into a one-line prompt: point Claude at the skill and the raw clip, and it applies the same card layouts, transitions, and captions every time.
A brand.md file inside the skill centralizes color, typography, and card-style tokens, so every future edit inherits the same look without re-explaining brand details in every prompt.
Because the edit is generated code, revisions are just follow-up prompts — asking Claude to swap a static number for a counter animation regenerates the video instead of requiring manual re-cutting.
The skill demoed is built specifically for 9:16 short-form output; reusing it for 16:9 long-form content means manually editing the skill's baked-in aspect-ratio and frame-rate defaults first.
Claude reads a project's AGENTS.md and skill files before generating a video, so brand or spec changes saved there apply automatically to every future prompt without repeating them.

Takeaway

Prompted video editing replaces manual assembly with described specs.

WHAT TO LEARN

Motion-graphics editing can be described in a prompt instead of assembled by hand once the specs — aspect ratio, brand colors, layout — are written down somewhere Claude can read them every time.

A video edit can be generated the same way a webpage renders: write HTML/CSS, screenshot it frame by frame, and stitch the frames into an MP4.
A free, open-source rendering tool can replace a paid video editor entirely for motion-graphics-style short-form content.
AI-assisted video generation tools built on top of a coding agent typically require a paid subscription tier, even when the rendering tool itself is free.
A single prompt that fully specifies aspect ratio, frame rate, brand colors, typography, and layout is enough to produce a finished animated edit without manual editing software.
Turning production time from tens of minutes into about five minutes is possible once the editing instructions are explicit enough for an agent to execute unsupervised.
A reusable 'skill' — specs saved once and referenced by every future prompt — turns a long, detailed one-off request into a one-line command.
Centralizing brand tokens like color, font, and card style in a single config file keeps every future output visually consistent without re-specifying them each time.
Because generated edits are code, revisions are just follow-up prompts describing the change, not manual re-cutting or re-rendering from scratch.
Tools built for one aspect ratio or format need their baked-in defaults manually reconfigured before they'll reliably serve a different format.

Glossary

Terms worth knowing.

Hyperframes: A free, open-source tool from HeyGen that renders a webpage frame by frame in a browser and stitches the screenshots into a finished video file.
AGENTS.md: A file Claude Code creates and reads inside a project that documents what an installed tool or skill can do and how to invoke it — a manual written for the AI agent rather than a human.
Skill (Claude Code): A saved, reusable set of instructions and specs a user points Claude at so it repeats a specific workflow — like editing a short-form video — the same way every time.
brand.md: A configuration file inside a skill folder that stores reusable brand tokens such as colors, fonts, and card style, so generated output stays visually consistent across edits.
Bypass permissions mode: A Claude Code setting that stops the agent from pausing to ask for confirmation before every command it runs, speeding up multi-step tasks.

Resources

Things they pointed at.

01:19toolVisual Studio Code ↗

01:19toolClaude Code for VS Code ↗

02:32toolHyperframes

06:57productShorts Edit skill (Tyler's free Skool community)

Quotables

Lines you could clip.

00:29

“Well, here's a little secret. If they're not using a dedicated video editor, then they're most likely using Claude.”

Direct reveal that reframes the whole video as an insider secret.→ TikTok hook↗ Tweet quote

02:41

“It will literally stitch every single frame together and convert that into an MP4 file ready for you to use immediately. And it's all completely free, no cloud, no subscription, and no limits.”

Punchy free-and-unlimited claim about the underlying tool.→ IG reel cold open↗ Tweet quote

08:22

“So the video is now complete, and that took around five minutes to complete for me.”

Concrete time-savings proof point right before the reveal of the finished edit.→ newsletter pull-quote↗ Tweet quote

03:29

“So all you have to do is just describe the edits that you want and the agent will do it.”

One-sentence summary of the entire pitch.→ TikTok hook↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphorstory

If you scroll TikTok or Instagram reels, you've probably seen a lot of videos that use a lot of motion graphics and animations to go along with the video. For example, this is an Instagram reel I posted the other day. You can see there's motion graphics, fades, and animations, and you may have thought how the hell are people making these animations for every single video and posting every single day?

I mean, I was thinking the exact same thing before. Because if you have any video editing experience, then you know how difficult it is to create even the simplest of animations. Well, here's a little secret.

If they're not using a dedicated video editor, then they're most likely using Claude. More specifically, they're using the hyper frames skill with Claude and in this video, I'm going to show you exactly how it works, how to set it up and how to use it. So that you can edit short form videos just like the video of mine that I showed you earlier.

So to get started, you're going to need to install Visual Studio Code. Just search up online Versus Code and you'll see the first link right here. This is a code editor where we're actually going to be using Claude Code, but don't worry, you're not gonna have to write a single line of code.

So just go ahead and install this for your PC and open it up. So when you open it up, it's gonna take you to a welcome page like this and now I know it might look a little bit intimidating, but don't worry, I'm gonna walk you through every single step of the way. First, go to the left side right here where you see these cubes.

This is gonna open up your extensions tab and in the extensions, type in Claude and you'll see Claude code for Versus code right here. So just go ahead and install that for your Versus Code.

And once that's done, it's going to prompt you to log in to your Anthropic account. So go ahead and log in. And also in order to use Claude code, you're actually going to need to get either the pro or max subscription for Claude because unfortunately, it isn't available on the free version.

Okay. Now that we've got all of that set up, let's actually open up a project where we can edit our video. So go ahead and look at the top left right here.

You'll see this icon for the explorer. Click on that and you'll see that we have not opened up a folder yet. So go ahead, click on open folder, and just find or create a folder for this specific project.

So I'm going to use this Hyperframes demo folder. And now we've actually opened it up and we're inside of our Hyperframes demo folder project right here.

So anything that we create inside of here, it's going to be inside of that folder. Now let's actually open up Claude Code. So in the top right, you'll see this Claude Code icon right here.

Click on that, and that's going to open up the GUI chat. And let's just go ahead and close the welcome page right here. So now the next step before we get started editing our video is we need to install Hyperframes.

But before we do that, what actually is Hyperframes? So Hyperframes is a free open source tool from Heygen that allows AI agents to actually edit video with code. So instead of dragging clips around in Premiere Pro or CapCut or whatever other video editing software that you use, ClaudeCode will actually build out a web page first using HTML and CSS, and then Hyperframes will screenshot that web page frame by frame and convert that into an actual video.

So it will literally stitch every single frame together and convert that into an MP four file ready for you to use immediately. And it's all completely free, no cloud, no subscription, and no limits.

So all you have to do is just describe the edits that you want and the agent will do it. Okay. So now that we know what Hyperframes is, let's go ahead and install it for our project.

So let's just ask Claude code, install Hyperframes for this project.

So let's just send that off and it'll go and find the exact web page it needs to install Hyperframes from, install it for us and we can use it immediately. And if it asks you any questions like this, then just click on yes because it's just asking you for permission in order to run certain commands.

So if you don't want it to constantly ask you for permission in order to do certain things, then just change the mode to bypass permissions. And if you don't see that there, then go to the bottom left in the settings, click on settings, type in Claude in the search bar, and then just enable Claude code allow dangerously skip permissions.

And that will basically add in this option for you right here. Okay. Now it's done.

It's installed hyperframes for us and if you look on the left hand side here, you'll see that it's created a couple of files for us. So if you actually look inside some of these files here like the agent dot m d file, you can see that it's written a whole bunch of details about hyperframes and what it's actually capable of.

So, you can go ahead and read through all of this. So, for example, it specifies a whole bunch of different skills here that hyperframes can use. For example, product launch video, website to video, faceless explainer, and these are just all different types of videos that hyperframes can create or like specific visuals.

So for example, here, like motion graphics. So if you do slash motion graphics, it'll create a short typically under ten second design led motion graphic. But what I want to make and show you in this video is actually a full edit of a short form video.

So that'll include motion graphics, animations, and fades, and all of that kinda stuff. Basically, exactly what I showed you at the beginning of this video.

So I actually went ahead and created a demo video that I will bring into here and this is just a short sixteen second video of me talking about some random topic, but it'll serve as a good example for editing with hyperframes. So let's watch the raw video first just so that we can understand what we're actually working with here.

The cost of running AI has dropped 99% in under two years. GPT level intelligence went from $36 per million tokens to under 30¢, which means that every automation that used to be too expensive to run is now basically free.

Okay. So that was the raw video and the only thing I edited manually myself in that video was the raw cuts in the middle. So there's no motion graphics, there's no captions, there's no animations, none of that.

And now, I want to convert this sixteen second video into a fully edited video ready to post immediately on social media. Now, what you could do is just go straight into the chat right here and just tell Claude Code to edit this video with hyperframes and explain all of the details of what you want.

So you would say something like edit demo video dot m p four using hyperframes and the video is nine by 16, it's ten eighty by nineteen twenty, 60 frames per second, add in motion graphics and animations, and then here are my brand colors.

So, you know, use these colors in the video, use this type of text, make the motion graphics animate in and then split the video so that my face is at the bottom and the motion graphics are at the top half and you get my point.

You just have to explain all of the details for the video that you're looking for. Be as precise and as detailed as possible because that will give you the best results. However, if you want to skip that entire process and you just want an easy drag and drop skill, I actually created a skill for this exact specific process.

So it's called the shorts edit skill, and I just pasted it in the project right here. So you can see that this is the skill dot m d file, and basically, all of this right here is all of the specifications for a short form video.

So if you wanna use hyperframes for a long form video, let's say 16 by nine, then maybe don't use this skill, but if you want to edit like a reel, a TikTok, a YouTube short, then I'd recommend using this skill right here. And if you wanna find this specific skill, it's gonna be in my free school community. It'll be linked down in the description below, so you can go ahead and join that completely free and go grab it for yourself.

So now, let's actually put this skill into a dot Claude folder and a skills folder just so we have a little bit of organization here. And now open up a new chat and change the model to the best model that you have.

So right now, Fable five is available for everyone, so I'm gonna use Fable five. But if it's not when you're watching this video, then use Opus 4.8. And make sure to change the effort level to high or something higher.

And now, we can actually just prompt Claude to edit this video with the skill and we don't really need to say anything else. And now, let's go to the chat and let's say edit the demo video dot m p four file using the shorts edit skill.

And let's just go ahead and link that file right here. So demo video dot m p four. And there we go.

So we sent that off, and now it's going to take a little bit of time to create the actual video. It might be ten minutes, twenty minutes. I mean, it really depends on the actual length of the video that you're making.

So I'll come back to you when this is all done. Okay. So the video is now complete, and that took around five minutes to complete for me.

And you can see on the left right here in the videos folder, we have the output dot m p four file. So let's give it a watch.

Alright. There we go. That was not bad.

I actually quite like that. So you can see here in the first couple of seconds, it created a card at the top of the screen. So the cost of running AI has reduced 99% in under two years.

And then it did a nice transition into, uh, splitting the screen half half. So you'll see this a lot in short form content where someone's face will be at the bottom half of the screen and then they'll have some graphics in the top half. And then GPT level intelligence went from 36 per million tokens to 30¢.

And you can see that every single animation is actually syncing to my voice, to my words. And there we go. So that was all from literally just one prompt asking Claude to edit my video using that skill.

Now if there's something that you don't like in the video, you can go ahead and ask Claude code to edit it and it will go ahead and remake the video for you. So let's say right here at the end where it says basically free, let's say I wanted to change that to be a counter that drops to $0.

So it goes from like a $100 and it drops really fast down to zero to symbolize free for example. You could go ahead and ask Claude to make that edit and it will go ahead and do that for you.

Now, if you were to go ahead and use the skill and the same prompt as I have for your videos, then you're gonna get the exact same kind of look for your videos. But, obviously, you have your own brand and you wanted to customize to your own colors, your own typography to make it look how you want it to look. So to make sure that it looks like how you want it to look like, make sure that in the prompt when you're writing it out, specify the exact colors or the typography you want to use or the certain type of style.

So for example, in this video, it's a lot of, uh, dark themes, so it's a black background. Let's say you want a lighter theme, you should go ahead and specify that, but if you don't want to specify it every single time you write a prompt, then simply go to the Claude skill right here and you'll find a brand dot m d file and in here, you'll find all of the different specifications.

So if you have certain brand colors, then you can adjust it right here and you can also find fonts right here, so you can, uh, adjust this text to specify the type of font. So in my video, I was using the inter font and then down here, you can actually specify the card style. So for me, I quite like a minimal, modern, dark kind of style.

So that's what I've said right here. So basically, go through this entire file, read everything, and if there's something you wanna change, go ahead and make that change. And the next time you write a prompt, it's gonna read this file first before it actually goes ahead and makes the video.

And again, I just wanna clarify this skill is specifically for short form content, so that's the nine by 16 format. So if you want to reconfigure this skill so that it works with long form content as well, so 16 by nine, then go into the skill dot m d file and you can also change the specifications in here too. So there's this baked in default section right here.

So if there's something here that doesn't quite match what you're looking for, let's say your videos are 60 frames per second, then you wanna change the render at 30 FPS to 60 FPS. Or if you wanted only for a long form content, so 16 by nine, then specify here, you know, render only at 16 by nine. You get the idea.

So go ahead and read this file too and adjust things as you like. And there you go. So that is how you use hyperframes to edit short form content with literally one prompt.

So now you can actually go ahead and drag this output dot m p four file into your video editing software and you can add in motion graphics or captions or anything extra that you want to tweak before you go ahead and upload it to social media. Or if you actually want, you can go ahead and prompt Claude again to add captions to the video and also sound effects.

It is pretty amazing what it can do. Anyways, that wraps it up for this video. Subscribe for more content like this, and I'll see you in the next video.

The Hook

The bait, then the rug-pull.

Every creator has wondered how competitors churn out slick, animated short-form edits daily without a dedicated editor on staff. The answer, according to Tyler Mommsen, isn't a paid tool at all — it's Claude Code, a free open-source skill called Hyperframes, and a prompt.

Frameworks

Named ideas worth stealing.

02:32model

The Hyperframes Pipeline

Build a webpage (HTML/CSS with text, cards, shapes, animations)
Hyperframes screenshots the page frame by frame
Frames get stitched together into a finished MP4

Hyperframes treats a video edit as a rendered webpage rather than a manually cut timeline — Claude writes the page, Hyperframes captures and assembles it.

Steal forany code-driven video-generation workflow that swaps manual timeline editing for browser-rendered, prompt-described output

05:53concept

Manual Prompt vs. Reusable Skill

Manual prompt: spell out aspect ratio, fps, brand colors, typography, and layout every time
Reusable skill: bake those specs into a skill + brand.md once, then prompt with one line per edit

The same Hyperframes output can be produced either by writing an exhaustive one-off prompt or by front-loading the detail into a reusable skill file so every future prompt is short.

Steal forany repeated AI-generation task where brand consistency across outputs matters

CTA Breakdown

How they asked for the click.

VERBAL ASK

07:25product

“If you wanna find this specific skill, it's gonna be in my free school community. It'll be linked down in the description below, so you can go ahead and join that completely free and go grab it for yourself.”

Soft mid-video CTA to a free community, positioned right after showing the skill file rather than at the very end.

MENTIONED ON CAMERA

01:19toolVisual Studio Code ↗

01:19toolClaude Code for VS Code ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.