No Video Editing Tools Needed: How to Mass-Produce Viral Videos with Claude Code and HyperFrames

@MakeAI_CEO
जापानी2 दिन पहले · 26 जुल॰ 2026
170K
243
20
2
630

TL;DR

A comprehensive tutorial on HyperFrames, an open-source framework that allows AI agents to render videos from HTML and prompts, eliminating the need for traditional editing tools.

You might not need to open video editing software ever again. I know that sounds bold, but I am completely serious.

0:01 / 0:30

In June of this year, there was a major event called the AI Engineer World's Fair. The official opening video shown there was actually created without ever opening an editing program. It was produced by the team at HeyGen, famous for AI avatars, using a system called HyperFrames. Sponsor logos appear like waves, and countless particles of light gather to draw a logo. It looks like professional motion graphics from every angle, but it was built entirely with prompts and HTML.

Now, here is the main point: HyperFrames is open-source and available for free. It works with Claude Code and Codex. This means the AI agents we usually use for drafting articles or writing code can now become video creators.

Does this sound familiar? You know we are in an era where video is king. But you gave up on Premiere Pro after three days, CapCut templates look generic, and you closed the tab after seeing a quote for outsourcing. I was stuck there for a long time too.

To be honest, when I first saw HyperFrames, I almost dismissed it as just another flashy demo from overseas. But as I followed the primary information, my mind changed. This isn't just for big corporations; it's a system that works best for individual creators. You can make videos with zero assets, finish revisions with a single sentence, and maintain brand consistency. You don't need outsourcing fees, software subscriptions, or hours of editing practice.

0:01 / 0:30

In this article, I have summarized in Japanese everything from what HyperFrames is to the setup procedure, five practical recipes for creating videos with zero assets, a browser version that doesn't even require a terminal, how to give revision instructions, and how to connect this to your branding and work. It is worth reading especially for those who find it exhausting to follow primary information in English. All you need is a computer that can run Claude Code or Codex and fingers to copy and paste. No programming knowledge is required. Let's get started.

For those who want to know the setup method quickly, click here:

https://x.com/MakeAI_CEO/status/2027682940847898770?s=20

Chapter 1: The Day Claude Code Became Video Editing Software

0:00 / 0:30

First, let's start by experiencing "what is happening now." It's much faster to see examples than to hear theory.

The Behind-the-Scenes of the World's Largest AI Event Official Video

The AI Engineer World's Fair is one of the world's largest conferences where engineers and researchers from famous AI companies gather. The HeyGen team, developers of HyperFrames, was in charge of producing the opening video. They have released the entire behind-the-scenes process, and it is quite shocking.

One highlight is the wall of 5x5 headshots of the speakers. The wall opens like a wave from the top left, and hundreds of sponsor logos appear from below. Then, logos of major AI labs float up and become a rotating carousel, finally landing on the sentence "All because of you." Another is the ending, where light particles float up from the darkness, find the outline of the logo themselves, gather, and finally turn into the real logo. Describing it in text sounds plain, but seeing the video, it is completely professional work.

Both of these shots were created without opening editing software. They converted the design system shared by the event into a short rulebook, had the agent fetch logos and speaker photos from the official site, and then assembled it with prompts. The attention to detail is incredible; for example, the next logo starts appearing just before the face cards disappear so the screen is never blank. Even this kind of craftsmanship is reproduced through instructions and rules.

What's even more surprising is that the light particle effect in the ending is included in their free skill set. By specifying any logo, anyone can reproduce the same effect for their own brand. The production shown at one of the world's largest events becomes yours with a single command. At this point, the story sounds crazy. To clarify, this wasn't a private demo; it was the actual footage shown at the event. A professional delivery was made using this method. That fact alone should tell you that the tide has changed.

Zero Assets, No Editing Software, Revisions in One Sentence

If I summarize the impact of HyperFrames, it boils down to three points: zero assets required, no editing software needed, and revisions finished in one sentence.

First, the zero assets part. In an example released by HeyGen, they created a 45-second explainer video with a single prompt. The human only provided the theme, a brand settings file, and a background music track. Upon receiving the instruction, the agent hit the GitHub API to start research, chose a real popular project with over 250,000 stars as the subject, studied its mechanism, and wrote the script. From there, it synthesized the narration, designed moving typography and diagrams, added subtitles, BGM, and sound effects, and exported the MP4. Every number on the screen was real data fetched on the spot; no filming or asset gathering occurred.

Next, no editing software. Did you notice that none of the steps I just described involved manually touching a timeline? The script, composition, design, animation, and sound are all the agent's job. The human only made the initial request.

And what impressed me most was the revision process. In this 45-second video, the subtitle design was initially poor. The words being spoken were in an animated frame that clashed with the background video. The revision instruction given was just one sentence: "Remove the frame, make the words to be spoken gray, and the word currently being spoken blue." The agent redesigned the subtitle style, re-verified the entire video, and handled the re-rendering itself. An interaction that would take days of back-and-forth with an outsourcer was finished in one sentence. I personally think this is the most revolutionary point.

Different Playing Field from Premiere Pro or CapCut

Let's clarify the comparison. Usually, we think of video editing software like Premiere Pro, Filmora, or CapCut.

These three have very different personalities. Premiere Pro is the professional standard with high functionality, but it has a heavy learning cost and ongoing subscription fees. Filmora is a beginner staple with annual or one-time purchase options and intuitive operation. CapCut is free to start with abundant templates, though the more you use templates, the more generic the result looks, and advanced features are behind a paywall. However, these three share a critical commonality: they are tools where you manually touch the timeline. You are the one cutting clips, placing text, and worrying about export settings. No matter how much you pay for the software, it is your own hands that must improve. The frustration I mentioned earlier ultimately stems from this.

HyperFrames flips this premise. To begin with, there is no timeline to touch. When we give instructions in words, the agent writes the video's blueprint in HTML and CSS, which a headless Chrome browser then films accurately frame by frame, and a standard tool called FFmpeg packages it into an MP4. Imagine using the mechanism for displaying web pages as a filming studio. That's why Japanese subtitles never break, specified color codes don't shift by a single pixel, and the same instructions always return the same video. The developers call this property "deterministic rendering." You don't have to worry about the AI producing something different every time. Revisions are made with words, not a timeline. Since rendering happens on your own computer, there is zero additional cost no matter how many times you redo it.

However, I should be honest about the boundaries. Editing Vlogs that involve finely cutting and pasting filmed live-action footage is still the domain of traditional editing software. HyperFrames excels at videos that convey information: explainers, announcements, achievement reports, and motion graphics. And the videos we creators need daily are overwhelmingly the latter. You can take the time you would have spent practicing editing software and use it for actual content creation.

Chapter 2: The Identity of HyperFrames and the "Skills" Mechanism

0:00 / 0:30

Now that you have a sense of the excitement, let's talk about how it works. Understanding this will make all the applications in the second half much smoother.

The Mechanism Where HTML Becomes MP4

HyperFrames is an open-source video rendering framework released by HeyGen. In short, it's a system that converts screens written in HTML directly into video files.

A video is defined as a single HTML file. Timeline information, such as which element to display from what second to what second, is written directly as HTML attributes. For animation, you can use established web technologies like GSAP, CSS animations, Lottie, and Three.js. You can preview with a single command that launches a browser, and changes are reflected in the video the moment you save the code. Final rendering is also a single command, with headless Chrome and FFmpeg working behind the scenes to export the MP4. There are no tedious build steps; it's as easy as viewing an HTML file in a browser.

There is a predecessor tool with a similar concept called Remotion, and the developers admit they were influenced by it. However, Remotion uses React components, while HyperFrames bet on plain HTML. This choice is incredibly effective in the era of AI agents. This is because the markup language LLMs have learned most extensively is HTML. Writing a video in HTML is honestly a chore for humans, but for an agent, it's like writing in its native tongue. The loop of writing, previewing, and fixing rotates at high speed. It might be more accurate to say this is an invention that translates the job of video editing into the agent's specialty. Additionally, since a video becomes a text file, management and replacements are as easy as editing text. Changing only the color of last week's video and re-exporting it takes seconds.

The "Skills" that Turn Agents into Craftsmen

Another invention of HyperFrames is the combination with "Skills." Skills are instruction manuals you give the agent to read. By writing work rules, commands to use, and quality check procedures in a markdown file called SKILL.md, the agent reads it when necessary and acts as a craftsman in that field. If you've played with Claude's skill feature, it's the video version of that.

HyperFrames comes with 20 of these skills. The entry point is a skill called /hyperframes, which acts as a router. When it receives a request like "make this kind of video," it routes it to the appropriate specialized skill based on the content. If it's an explainer video, it goes to the explainer craftsman; if it's a music-sync video, it goes to the music-sync craftsman. The user doesn't need to memorize the list of skills. Moreover, since the skills are just markdown documents, you can open and read them yourself if you're curious. It's not a black box; the manuals are fully public.

Importantly, skills are not exclusive to a specific AI. The official documentation states they work with skill-compatible coding agents like Claude Code, Cursor, Gemini CLI, and Codex. A video production template you taught Claude Code can be used as-is even if you switch to Codex. It's a portable asset, not a tool-specific dependency. I included Claude Code in the title simply because it's my main environment, but Codex users can reproduce the steps almost exactly. You could say it's an investment that won't go to waste regardless of how the competition between agents turns out.

Free for Commercial Use: The Logic Behind It

After hearing all this, you might be wondering, "So, how much does it cost?" The conclusion is that HyperFrames itself is free. It is released under the Apache 2.0 license, which is very permissive, with no charges for rendering counts and no restrictions on commercial use. Since rendering happens inside your own computer, no costs are incurred no matter how many hundreds of videos you export. The fact that it stays local without sending data externally is also a point of security for business use.

In terms of reliability, it already has over 30,000 stars on GitHub, and the official repository even lists teams that have adopted it. It is a tool that is becoming mainstream, used by famous development teams overseas. It's different from a one-off experimental project. Updates are active, and as of my last check, skills were being added and improved. Since the value of this kind of OSS drops the moment development stops, the fact that a company is seriously pouring resources into it is reassuring.

So why does HeyGen give this away for free? Their main business is AI avatars. By capturing the standard for video production in the agent era, users who eventually need avatars or voices will naturally flow to their main service. In fact, only the avatar video workflow introduced in a later chapter is designed to link with a HeyGen account. In other words, it's not a free trap, but a healthy strategy of opening the entrance and collecting at the exit. As users, we can understand that for motion graphics and explainer videos, we can use it completely for free.

Chapter 3: Setup Procedure in 10 Minutes

This is the hands-on part. I will write this so that even those who are uncomfortable with the "black screen" of the terminal can finish it. In my experience, the only potential sticking point is the initial environment preparation; once you're past that, the rest is surprisingly easy.

All You Need is Node.js and FFmpeg

You only need two things: Node.js version 22 or higher and FFmpeg, a standard video processing tool. Both are free. If you've touched agent-based tools, you likely already have Node.js, so let's check first.

You can check if Node.js is installed by typing the following command in the terminal:

node -v

If a number v22 or higher is returned, proceed to the next step. If it's not installed or is old, the easiest way is to download the installer from the official Node.js website. For FFmpeg, if you're on Mac, it's one command with Homebrew:

brew install ffmpeg

Windows users can install it via winget or the official distribution.

Here's a trick for those who feel stuck: leave the environment setup to the agent. Open Claude Code and ask, "Set up Node.js 22+ and FFmpeg in this environment. Once finished, perform an operation check." It will suggest commands for your OS, execute them, and handle the verification. If an error occurs, just paste the error text back. Struggling with environment setup is a thing of the past; now, "delegating what you don't know" is the correct answer. Grasping this feeling will make all learning after HyperFrames much easier. Don't learn how to use the tool; learn how to ask the partner who knows the tool. Let's switch our mindset here. Note that the command examples in this article are based on Mac, but the flow is the same for Windows or Linux.

Installing Skills with One Command

Once the environment is ready, install the HyperFrames skills. Create a folder for your videos and run the following command inside it:

npx skills add heygen-com/hyperframes --full-depth

When you run this, a screen will appear asking which skills to install. Since you might not know which ones you need at first, it's fine to install them all. In that case, use this command:

npx skills add heygen-com/hyperframes --all --full-depth

The --full-depth option is specified to fetch the skills from the latest version of the repository. The official guide says that without this, you might get a copy that is a few hours old, so just include it.

After installation, when you reopen Claude Code, slash commands will be registered. Led by the commander /hyperframes, you have specialized craftsmen ready: /faceless-explainer for explainer videos, /music-to-video for music-sync, /motion-graphics for short graphics, /talking-head-recut for avatar videos, and /website-to-video for making videos from websites. If you use other agents like Codex, they will work similarly if you load the same skill set.

The only tip for using them is to always start by talking to /hyperframes. Since this is the router, it will listen to your request and guide you to the appropriate workflow. You don't need to remember which skill to use when. If you get stuck, check the official documentation at hyperframes.heygen.com for the latest procedures.

Exporting Your First Video

Now, let's make your commemorative first video. Send the following prompt to Claude Code:

Use /hyperframes to create a 10-second product introduction video. The composition should have a title fading in on a black background with subtle BGM. Please set the size to 1920x1080.

From here, it's the agent's show. It creates the project template, writes the HTML blueprint, adds animation, and runs quality checks. If you want to check the progress visually, the following command launches a preview:

npx hyperframes preview

The video plays in the browser, and changes to the code are reflected immediately. Once satisfied, perform the final rendering:

npx hyperframes render

This exports the MP4 file. The first time might take a while as it downloads browser components for rendering. Subsequent times will be much faster.

If it stops with an error, don't panic. Copy the red error message and paste it to the agent. It will identify the cause, fix it, and run the rendering again. Our job is not to decipher errors, but to give feedback on the resulting video. Even a 10-second video feels quite moving when it's completed just by your instructions. This small success becomes the foundation for everything else. By the way, the exported MP4 is a standard video file you can post directly to X or Note. No special conversion software is needed.

Chapter 4: Giving "Motion" to Your Brand with FRAME.md

Once you can export one video, the next step is making it look like "your video." This is the decisive difference from generic template tools. It takes about 10 minutes, so let's do it today.

The Source of the "Template Smell" is "Lack of Brand"

Have you ever thought about why AI-generated videos sometimes look cheap? It's not because the quality is low. It's because the agent doesn't know your brand, so it always outputs "something that looks like it" based on global averages. Colors, fonts, and movements are all average. That's why it feels generic. This is the exact same phenomenon as Canva templates becoming impersonal. Conversely, if you provide brand information beforehand, the AI will follow it with surprising obedience. The problem wasn't a lack of sense; it was just a lack of format to communicate it.

In the world of HyperFrames, we solve this with two files. The first is DESIGN.md, which describes your brand's colors, fonts, and tone of voice. The second is FRAME.md, which adds definitions for how things move. How do elements appear and disappear? Are scenes connected by cuts or fades? A sharp tech brand and a warm lifestyle brand should have different video movements, and you verbalize those differences.

By the way, the DESIGN.md format is not a HeyGen proprietary standard. It's a format becoming common in the AI design tool community, and there are even public galleries. This means the file you create here is a versatile asset that can be used for AI productions other than video. Once created, all subsequent videos will come out wearing your brand's uniform. The difference between those who did this 10-minute task and those who didn't becomes obvious by the third video.

Extracting DESIGN.md from Your Own Site

You don't have to write DESIGN.md by hand. If you have your own site or blog, it's faster and more accurate to have the agent extract it. I'll provide a Japanese version of the extraction prompt released by HeyGen; just swap the URL.

Create a DESIGN.md for my brand from https://your-site.com. Fetch the live HTML and the CSS files actually being loaded, and extract the hex codes for colors and font names exactly as they are in the CSS. Guessing colors from screenshots is prohibited. Report the fonts actually being loaded, not alternatives. Read 3-5 actual headings from the site and derive rules for voice and tone. Keep the content concise. 4-6 colors with roles and combinations, 2-3 text roles, values for spacing, border-radius, and shadows, and rules in the form of "Always do X" and "Never do Y." Do not make it a list of tokens. Finally, list the sources for where you found each color and font in the CSS, and delete items for which sources cannot be shown.

This prompt is actually very well-designed. It prohibits guessing, uses real data, and requires sources. It's structured to eliminate AI's vague assumptions, so-called hallucinations. This practice is useful in situations other than video, so it's worth remembering. Once the DESIGN.md is generated, verify the main colors with an eyedropper tool, and you're done.

If you don't have a site, don't give up. You can create a DESIGN.md by telling the agent your color codes, font names, and tone rules in text and having it summarize them in the same format. If Note and X are your main battlegrounds, using the colors from your header image or thumbnails as a base is sufficient.

Defining "How it Moves" with FRAME.md

Once DESIGN.md is ready, extend it for video. If you upload DESIGN.md to the official page at hyperframes.dev/design, it will convert it into a FRAME.md with added motion language. Imagine it reading your brand's personality and suggesting the right pacing, screen transition styles, and tempo. This prevents accidents like a calm educational brand having flashy movements.

The downloaded FRAME.md works just by placing it in the video project folder. From then on, the brand rules are automatically applied to all videos created in that folder. It's a purely asset-based setup that works forever once implemented.

If you want to check if it's working properly, a good way is to have it make a 20-second brand reel.

`/hyperframes

I am providing my FRAME.md.

Create a 20-second brand reel that embodies this in 1920x1080.

Start with the logo and color palette, show typography samples, assemble one UI card with this design system, and end with the logo.

All appearances, exits, and transitions must follow the motion language of FRAME.md.

This video is the visualization of FRAME.md itself.`

Watching those 20 seconds will show you exactly what your brand looks like in motion. If something feels off, just fix the relevant part of FRAME.md and remake it. At this point, your dedicated video production environment is complete. All subsequent recipes will run on this foundation. Note that if you have multiple brands, separate them into folders and place a FRAME.md in each to avoid mixing them.

Chapter 5: 5 Practical Recipes with Zero Assets

0:01 / 0:30

Now for the main event. Based on actual examples released by HeyGen, I'll introduce five ways to use it and prompts translated for us creators. Read these assuming you are running them in a folder with a FRAME.md.

Recipe 1: Explainer Videos Completed Just by Providing a Theme

The one you'll use most is /faceless-explainer. This is a workflow for creating explainer videos without showing your face, filming, or assets; you only provide the theme. It handles research, scriptwriting, narration voice, moving typography, diagrams, subtitles, BGM, sound effects, and the final rendering.

In HeyGen's public example, they completed a 45-second tech explainer video with one prompt. As mentioned in Chapter 1, the agent hit the GitHub API, chose a real project, understood it, and wrote the script. The fact that the numbers on the screen are real data is a huge point of reliability for creators. It structurally avoids the accident of making a video with wrong numbers and getting flamed later.

For us, a classic use is turning Note or X content into video.

Use /faceless-explainer to create a 45-second explainer video. The theme is [paste your article's claim or procedure here]. Please use web search to verify facts for numbers and proper nouns related to the content. The narration should be in Japanese, and the design should follow FRAME.md.

This turns past articles into video content, so you'll never run out of material. A system where one theme can be expanded into an article, a post, and a video is incredibly strong. You don't have to create something new; the knowledge you already have becomes a video. This recipe is most beneficial for those who have been doing stock-type content creation. The length isn't limited to 45 seconds; you can specify 60 or 90 seconds. However, starting short is recommended to practice giving revision instructions.

Recipe 2: Music-Sync Videos by Providing a Song

/music-to-video is a workflow that creates a video synchronized to the beat when you provide a music file. The agent first analyzes the song and creates a blueprint reading the BPM, beat positions, climax structure, and even drum fill locations. Then, it makes all cuts follow that blueprint. You get those satisfying music-sync videos where screen transitions snap perfectly to the beat. It's worth letting the machine handle it, especially if you're not confident in your musical sense.

In HeyGen's example, they provided one song and had it make a 30-second tech news summary video. They had it research this week's news via web search and switch one topic card every measure. The interesting part was the revision: in the first draft, some text overlapped, and the closing cards were redundant. The instructions given were just two sentences: "Move this text to the bottom line so it doesn't overlap" and "Cut the first closing card and stop with a banner at the end." Even so, the synchronization with the sound didn't break at all; cuts snapped back to the nearby drum sounds, and the overall length was perfectly adjusted. Zero knowledge of music editing software was required.

Use /music-to-video to create a 30-second announcement video from this song. The content is [information about the product or event you want to announce]. Synchronize all cuts to the beat, and match the main highlight with the climax of the song. The design should follow FRAME.md.

This is perfect for product launch teasers, event announcements, or monthly review videos. Since the choice of BGM directly affects the video quality, choose your audio carefully.

Recipe 3: One Number Becomes Motion Graphics

/motion-graphics is a workflow specialized for short clips under 10 seconds. No narration; the movement itself is the message. It creates number count-ups, graph animations, logo reveals, text cards, etc.

What's convenient about this is the incredibly low barrier to entry. In HeyGen's example, they completed a 5-second card where GitHub star counts count up with a single-sentence request. The agent fetched the real number for the day from the GitHub API and even stamped the date on the screen so you know when the number was from. In another example, when asked for an installation trend graph, the agent fetched the data and made a sincere correction: "An upward-trending headline doesn't match the data, so I will make the total count the main focus." You can trust an AI that doesn't inflate numbers.

For creators, achievement report cards are the classic use case.

Use /motion-graphics to create a 5-second achievement card. Have the number "10,000 followers achieved" count up from 0, and put the achievement date small at the bottom of the card. The design should follow FRAME.md.

The tip is not to specify effect names. You don't need to say "zoom" or "bounce." Just state the content you want to convey and the order you want to show it; the agent will decide the motion design. Since it can also export in formats with transparent backgrounds, you can use them as assets to overlay on existing videos. Posting this kind of card once a week will definitely change how you are perceived on the timeline. A subtle but effective use is putting dates or sources in the corner of the screen. It increases the transparency of the numbers, raising the reliability of your achievement reports by a level.

Recipe 4: Avatars Explaining with Zero Filming

/talking-head-recut is a workflow that automatically overlays diagrams or text synchronized with what a person is saying in a video. Numbers count up as they are spoken, or explanation cards are inserted the moment a proper noun is mentioned. It's like automating the elaborate editing of business-style YouTube videos.

Interestingly, in HeyGen's example, they didn't even film anything. They chose a person from their avatar library using the HeyGen CLI, had the agent research the latest news and write a script, and generated a lip-synced talking video from the terminal. Furthermore, they transcribed the video they just made and overlaid diagrams synchronized to the timing of individual words. The moment the speaker says a number, that number on the screen starts counting up. This level of detail now comes from just instructions.

To be honest, the avatar generation part requires a HeyGen account. This is the business collection point I mentioned in Chapter 2. However, if you use it to overlay diagrams on your own already-filmed explainer videos, it works without an avatar.

Use /talking-head-recut. Overlay diagram cards and text synchronized with the content being spoken in this video. Show important numbers with count-ups and place subtitles at the bottom of the screen. The design should follow FRAME.md.

For those who create content without showing their face, this can effectively become a clone system. It's also great for explanation parts of course content or service introduction videos for corporations. The impact of filming and editing costs disappearing simultaneously is more than you can imagine once you use it.

Recipe 5: GitHub PRs Become 60-Second Review Videos

The last recipe is more for engineers, but I'll introduce it because it can be a weapon for work. /pr-to-video is a workflow where you provide a GitHub Pull Request URL, and it creates a review video explaining the code changes.

The agent reads the PR title, description, code diff, commit history, and reviewer status to craft a video of a length appropriate for the scale of the change. What's amazing is that the code on the screen is not a screenshot but the actual diff. Deleted lines fold in red, and added lines land in green. The narration is in a tone like a colleague explaining it next to you, structured so the reviewer can grasp the big picture before opening the diff.

`/pr-to-video

[Paste PR URL here]

This PR is awaiting review.

Create a roughly 60-second briefing video for the reviewer with Japanese narration.`

In development settings, this is purely a tool to reduce review wait times. But from our perspective, it has another value: it's material for corporate proposals. You can show a company with a development team, "We can handle your code reviews with video," using a concrete example. It's 100 times more effective to actually make one for their repository than to explain with words or slides. It's a very good entry point for AI training or implementation support projects. Even non-engineers should know that having this kind of card in their hand changes the range of their proposals. Since almost no one is proposing with video in this area, the reaction from the other party is different the moment you show it.

If you're wondering which of the five recipes to try first, the achievement card in Recipe 3 is the shortest path. Since the input is just one sentence, it's closest to today's success experience.

Chapter 6: The "Video Agent" Backdoor—No Terminal Required

After reading this far, some of you might be thinking: "I get that it's amazing, but a black screen might be impossible for me." Don't worry, there's a backdoor provided officially for people like you: the Video Agent built into the HeyGen main site.

An Agent Living Inside Your Browser

Video Agent is a feature that ports the concepts we've been discussing directly into the browser. No CLI, no repository, no skill installation. When you open app.heygen.com, it's right there on the home screen.

mana|株式会社MakeAI CEO - inline image

All you do is explain the video you want to make in words. Then the agent writes the script, casts an avatar to stand in front of the camera, provides the voice, assembles the scene composition, chooses stock footage to play between graphics, decides the tempo and subtitles, and returns the finished video. Unlike traditional tools where you are given parts like a timeline and asset collection, it feels like hiring an entire production team.

And what's subtly impressive is that it doesn't start making it immediately. When you send a prompt, the agent first presents a production plan for each scene. You read it, give orders via chat, and only when you say "go ahead" does the rendering run. It's the same flow as a subordinate bringing a proposal first, so accidents where you have to redo everything after completion almost never happen.

There are only three initial settings: choose an avatar (your digital twin or a library person), choose a voice (the avatar's standard voice is automatically attached, just swap it if you like), and whether to turn on the brand system. If you turn it on, your colors, fonts, and logo are automatically applied to everything the agent makes. You can think of it as the browser version of the FRAME.md we did in Chapter 4.

One Style Paragraph Defines the Worldview

There is a template for Video Agent prompts that the developers recommend. It's a method of adding a short passage called a "style paragraph" to the description of the video you want to make. It's 5-6 sentences summarizing the look of the graphics, colors, energy, and movement, and the agent passes all visual judgments through this paragraph. Conversely, anything you don't write, the agent will decide on its own.

The content of the paragraph is templated, including the order: style name, accurate palette including hex codes, art direction, how things move, screen transition style, and finally a one-word atmosphere. I'll provide a template translated into Japanese; just swap the colors and words.

`Create a 45-second vertical video. The theme is [description of the product or project you want to announce].

Style: Minimal Night Mode.

Background #0F1115, main text #F5F7FA, accent #4C8DFF, sub #9AE6B4.

Modern sans-serif with wide spacing, thin lines, glass-style semi-transparent cards.

Numbers count up slowly, cards float up from the bottom, and graph lines grow themselves.

Transitions are soft crossfades and horizontal wipes.

Calm, intellectual, and reliable tone.`

To share an official example, there is a 30-second vertical video about the Austin, Texas real estate market update. An avatar named Ava speaks to the camera at the beginning and end, while in the middle, median home prices count up, a bar graph of inventory gradually drops, and a card for days on market overlays stock footage of a front door. For this video, they pasted a script with seconds for scenes 1 through 5 into the prompt and had it made exactly that way. If you have a script, just paste it; if you have slides, images, or logos, attach them and it will weave them in. Always specify the length in the prompt. If you write 30 seconds, it will adjust the overall tempo to fit. You can also choose the progress method: a way to refine via dialogue while checking the plan, or a way to let it run to the end at once. For the first few times, it's safer to run with plan confirmation.

Delegate 90%, Hand-Edit the Last 10%

The first draft is just a draft. There are two paths to bring it to postable quality.

The first is to continue the conversation. Even after rendering is finished, the chat remains active. In the official example, they didn't like the background of scene 2, so they told the agent to change it in the same chat. The agent then remade only scene 2 and returned it without touching the other approved scenes. It's the same feeling of one-sentence retakes we'll dive into in the next chapter.

The second is the path of putting your own hands in via AI Studio. If you send a copy to the editor, it switches to full manual mode. You can touch the script and text, avatar scenes, voice, timing, transitions, layout, asset replacement, music, and subtitle fine-tuning. The screen has a clear layout with the script on the left, video in the center, and asset/music panels on the right. Use the chat to get to 90%, then fix the last 10% that only human eyes can notice, like subtitles overlapping a face or a cut being half a beat late. The developers describe this way of working as "90% with prompts, 10% with editing."

So how do you choose between the terminal version and Video Agent? Here is my summary: if you want to mass-produce for free, integrate into automation, or strictly manage your brand with files, use the terminal version. If you want an avatar to speak, want one video right this second, or don't want to see a black screen, use Video Agent. Note that Video Agent is a HeyGen main feature, so account registration is required. This is exactly the exit point of the model I mentioned in Chapter 2. How much you can try for free depends on the plan, so check the official site for pricing. For those who want to learn more, an official prompt guide page (heygen.com/blog/video-agent-prompt-guide) is also available.

Chapter 7: One-Sentence Revision Operations and the Blueprint for Earning

In the final chapter, we'll talk about daily operations and money. Tools only become weapons when usage and application come together.

Revisions Go Through in "One Sentence"

The true value of HyperFrames appears more in the second video and beyond than in the first. That is, in the revision phase. If you look at the actual revision instructions sent in HeyGen's examples, you'll get a feel for it.

"Remove the subtitle frame and just use color changes. This text is overlapping the line above, so move it down. Combine the closing cards into one and stop with a green banner at the end. Move the diagram to the left third of the screen."

Did you notice? None of them use a single technical video term. No mention of easing or keyframes. They are just putting into words their dissatisfaction and the desired state as they see it. Even so, the agent understands the intent, fixes the relevant scene, re-verifies the layout, and returns it re-rendered while maintaining synchronization with the sound.

With traditional video outsourcing, this one round-trip usually involves days of waiting and additional costs. That's why we've endured revisions and put out videos with slight awkwardness. That endurance disappears entirely. An environment where you can fix things at no cost until satisfied definitely raises the ceiling of your output.

If I were to give one tip for direction, it's not to pack too many revisions into one instruction. One or two sentences per theme, then the next when it comes back—this rhythm is ultimately the fastest. And this "power to fix video with words" accumulates directly as direction ability. Unlike editing software operation skills, it's an ability that won't go stale even if tools change. In other words, what will hold value in future video production is not manual dexterity, but the eye to verbalize awkwardness. People who have polished their writing through content creation actually have a significant advantage here.

Three Routes to Connect to Branding and Revenue

I achieved 1 million yen in monthly revenue for 12 consecutive months through AI-related content and sales, and even experienced 10 million yen in a month, but throughout that process, I always felt the wall of video. There is a layer that text and images alone cannot reach. But if you get serious about video, either time or outsourcing fees melt away. I think HyperFrames is the current optimal solution to this dilemma.

There are three main ways to utilize it.

The first is promo videos for your own products or articles. Note launch announcements, project teasers, achievement reports. Just adding a 15-second brand video to a text-only post changes how people stop on the timeline. Since the worldview is unified with FRAME.md, the more you put out, the more you build recognition as "the person with that style of video."

The second is a mass-production system for SNS videos. Since you can specify the 9:16 vertical format, it fits directly into short video formats. Weekly AI news summaries, video versions of past articles, achievement cards. Once you create a prompt template, it becomes a routine of just swapping content. The fact that consistency is guaranteed by a system is the biggest difference from template operations.

The third is production contracting and corporate proposals. What's important here is not to accept work cheaply as a video editor. What you are selling is not the work of editing, but the implementation of a system where videos continue to be mass-produced. If you propose a set including FRAME.md design, prompt templating, and training for the person in charge, you can compete on a completely different level than one-off editing projects. To begin with, there are almost no people who can explain the content of this article in Japanese at this point. Regardless of which route you choose, the moment you can reproduce the procedure, you are on a very rare side. One warning: just getting the tool won't generate sales. It only functions when combined with a design of whose trouble you are reducing and how you deliver it. Conversely, for those who have thought that through, there are few amplifiers as strong as this.

Three Things to Do Today

Thank you for reading this long article to the end. Finally, I'll narrow down what to do today to three things.

  1. Install Node.js and FFmpeg. 2. Install the skills. 3. Render one video, even if it's only 10 seconds.

That's it. FRAME.md can wait until tomorrow. Choosing between recipes can wait until next week. Today, focus entirely on exporting one rough video.

The reason is simple: in this field, the speed at which the gap opens between those who touched it and those who just watched is abnormal. A person who exports one video gets used to revision instructions by the second, has branding on by the fifth, and has their own template by the tenth. Those who just watch will still be saying three months later, "I was curious about that, by the way." I have seen this scene many times in the AI wave. The difference is not talent, but the speed of starting.

Besides, the first video can be bad. Or rather, if you don't put out a bad first video, you won't have a practice subject for revision instructions. Since the true strength of HyperFrames lies in the loop of fixing, the speed of putting out a draft becomes your growth speed. Please let your perfectionism take a day off today.

Moreover, HyperFrames is free, and all you need is the Claude Code or Codex you already have. It's a rare type of opportunity where you can't use initial investment as an excuse. If an error occurs, throw the error to the agent. If you get lost, come back to this article. I wrote it so you can finish it with just that. If you really don't get along with the black screen, it's fine to start by making one video with Video Agent in Chapter 6. The important thing is not the method, but exporting one video today. I look forward to your first MP4 being exported tonight.

Summary

Finally, here are the key points of this article.

Video has changed from something you film and edit to something you write and render. HyperFrames is free open-source and works with Claude Code and Codex. You can make explainer videos, music-sync videos, and motion graphics with zero assets; if you set up FRAME.md, everything is output with your brand's look, and revisions go through in one sentence. For those who dislike the terminal, the Video Agent entry point is also available. Whether or not you have editing skills is no longer a barrier to entry for video content creation. This is what I wanted to convey most in this article. Of course, the first video won't be perfect. But in a world where revisions take one sentence, a rough first draft is the strongest starting point.

And there are still almost no people who can explain this method in Japanese. This is a phase where those who move first will get weapons for content creation and materials for work proposals. I hope this article becomes the trigger for your first video.

I will continue to post follow-up information on successful settings, improved prompt versions, and HyperFrames-related updates below. If you have questions, I'll pick up what I can and answer them in future projects.

https://x.com/MakeAI_CEO/status/2027682940847898770?s=20

YouMind में रीमिक्स करें

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
क्रिएटर्स के लिए

अपने Markdown को एक साफ़-सुथरे 𝕏 आर्टिकल में बदलें

जब आप अपना लंबा कंटेंट पब्लिश करते हैं, तो इमेज, टेबल और कोड ब्लॉक को 𝕏 के लिए फ़ॉर्मेट करना मुश्किल होता है। YouMind पूरे Markdown ड्राफ़्ट को एक साफ़-सुथरे, पोस्ट के लिए तैयार 𝕏 आर्टिकल में बदल देता है।

Markdown से 𝕏 आज़माएँ

समझने के लिए और पैटर्न

हाल के वायरल लेख

और वायरल लेख देखें