Brand-conscious video teams
Organizations producing many motion assets that need consistent type, color, spacing, composition, and behavior.
Independent tool overview
Frame.md at a glance
Frame.md is HyperFrames' machine-readable design specification for translating brand systems into consistent, video-first composition, motion, typography, color, and pacing rules.
Visit the official Frame.md site ↗
- Product type
- Video design specification format
- Works with
- HeyGen HyperFrames
- File name
- frame.md, always lowercase
- Structure
- YAML frontmatter plus Markdown guidance
- Price
- Free
- Framework license
- Apache 2.0
Overview
What Frame.md is
Frame.md is a project file used by HeyGen's open-source HyperFrames framework. It describes how a brand should behave inside a video frame: composition, scale, typography, color, spacing, pacing, dwell time, motion, and reusable visual components.
The file is not a video generator by itself. It acts as the design source of truth that an AI coding agent and the HyperFrames workflow read while creating editable HTML-based video compositions. Machine-readable YAML frontmatter holds exact tokens, while the Markdown body explains intent and judgment that cannot be reduced to raw values.
The public Frame.md tool can translate an existing design.md specification into a 16:9 video-oriented version or provide a premade frame style to refine. The resulting lowercase frame.md file is placed in a HyperFrames project, where it takes precedence over design.md and DESIGN.md.
Use cases
Who Frame.md is best for
The strongest fit depends on the job you need the product to complete, not the size of its feature list.
AI-assisted motion designers
Creators using coding agents to generate HyperFrames compositions from a durable design system rather than one-off prompts.
Design-system owners
Teams adapting an existing web-focused design.md file into rules that account for time, pacing, and the 16:9 frame.
Automated content pipelines
Developers who need machine-readable brand constraints for repeatable, editable, programmatic video generation.
Capabilities
Core Frame.md features
Machine-readable design tokens
YAML frontmatter stores normative values for colors, typography, spacing, and components so an agent can reproduce them precisely.
Video-specific composition rules
The Markdown guidance covers how the brand behaves in a frame, including scale, safe areas, hierarchy, density, dwell, pacing, and motion.
design.md conversion
The public converter accepts a design.md specification and reframes it for 16:9 motion design instead of simply copying web-layout rules.
Premade frame styles
A gallery of presets provides starting directions ranging from editorial and corporate systems to neobrutalist and poster-like visual languages.
Project-level precedence
HyperFrames resolves frame.md before design.md or DESIGN.md, making it the preferred design specification for video projects.
Agent-readable workflow
The file gives coding agents a persistent reference that can be reused across storyboarding, authoring, editing, and design-adherence checks.
Process
How the Frame.md workflow works
Step 1
Start from the brand
Gather approved logos, color values, typefaces, spacing rules, visual references, motion principles, and accessibility requirements.
Step 2
Convert or choose a preset
Paste or upload an existing design.md file, or select a premade frame style as the initial direction.
Step 3
Review exact tokens
Verify every frontmatter value, especially color codes, font families, weights, spacing, and component names; these are normative inputs.
Step 4
Refine motion guidance
Describe composition, pacing, dwell, transitions, hierarchy, density, and when visual treatments should or should not appear.
Step 5
Add frame.md to the project
Save the approved file in the HyperFrames project root using the exact lowercase name frame.md.
Step 6
Preview and enforce
Generate representative compositions, inspect them in HyperFrames Studio, lint the project, and update the spec when repeated visual errors appear.
Cost
Frame.md pricing and free plan
The Frame.md converter, format, presets, and open-source HyperFrames framework are available without a subscription fee. HyperFrames is currently licensed under Apache 2.0. Teams still pay for their own design work, AI model usage, media assets, fonts, local or cloud rendering infrastructure, storage, and any connected voice or video services.
Frame.md converter
Free
Convert design.md input or start from a premade frame style in the public design tool.
- No public subscription required
- Outputs a project-ready frame.md specification
- Showcase preview is not the final rendered video
HyperFrames framework
Free and open source
Use the HTML-based video framework and command-line tools under the project's current Apache 2.0 license.
- Local preview, lint, and render tools
- Open-source Studio, player, engine, and adapters
- Review the repository license before redistribution
Production costs
Variable
Budget for the external resources used to create and render finished video.
- AI agent or model usage
- Compute, storage, fonts, media, and music licenses
- Optional voice, avatar, or third-party production services
Pricing checked . Check current pricing at the source ↗
Assessment
Frame.md strengths and limitations
Where it stands out
- Separates durable brand rules from one-off prompting
- Combines exact machine-readable tokens with human-readable design intent
- Accounts for motion, pacing, dwell, and frame composition rather than only static web design
- Can translate an existing design.md system into a video-oriented starting point
- Works inside an editable, open-source HTML video workflow
What to consider
- Frame.md does not generate or render a video on its own
- The format is designed specifically for HyperFrames rather than being a universal industry standard
- A generated spec still requires human review of brand accuracy, motion judgment, and accessibility
- The public converter is oriented around a 16:9 frame, so vertical and square outputs need deliberate adaptation
- Precise typography depends on font availability and licensing in the rendering environment
- Teams need a technical HyperFrames toolchain, including Node.js, FFmpeg, and browser-based rendering, for final production
Compare
Frame.md alternatives
The right alternative depends on the specific output, workflow, controls and budget your project requires.
Content Creator
Remotion
Choose Remotion when your team prefers a React-based programmatic video framework and its component ecosystem.
Explore Remotion →Design
Canva AI (Magic Studio)
Choose Canva Magic Studio when nontechnical users need a hosted visual editor rather than a file-based agent workflow.
Explore Canva AI (Magic Studio) →Content Creator
LTX Studio
Choose LTX Studio when the priority is AI-assisted storyboarding and video creation in a managed creative environment.
Explore LTX Studio →Questions
Frame.md FAQs
What is Frame.md?
Frame.md is the video-first design specification used by HyperFrames. It stores exact visual tokens and contextual guidance for composition, typography, color, spacing, motion, pacing, and reusable components.
Is Frame.md an AI video generator?
No. It is a design-system file. HyperFrames and an AI coding agent use it while authoring and rendering editable HTML-based video compositions.
What is the difference between frame.md and design.md?
design.md describes a general brand or web design system. frame.md adapts that system to time-based video frames, including composition, scale, dwell, pacing, and motion.
What goes inside frame.md?
The file uses YAML frontmatter for normative colors, typography, spacing, and components, followed by Markdown sections that explain intent, rules, constraints, and usage judgment.
Does the file name need to be lowercase?
Yes. HyperFrames documentation specifies frame.md in lowercase. It is resolved before design.md and DESIGN.md when more than one specification exists.
Is Frame.md free?
Yes. The public converter and the Frame.md format are free, and the current HyperFrames repository is licensed under Apache 2.0. External AI, media, and rendering costs may still apply.
Can Frame.md be used for vertical video?
The public converter is presented around a 16:9 frame, but the underlying design guidance can be adapted for vertical or square compositions. Safe areas, type scale, density, and layout rules should be reviewed for each aspect ratio.
Bottom line
Our Frame.md verdict
Frame.md is useful when a team wants AI-generated video to look like a coherent brand system instead of a sequence of loosely related prompts. Its value comes from careful human refinement and consistent use across HyperFrames projects—not from the converter alone.
Visit Frame.md website ↗Similar Design Tools
View all Design AI tools →
Reve 2.0
Reve 2.0 - Reve's new 4K AI image model with new layout-based editing for more granular control
Firefly Studio
Firefly Studio - Adobe's upgraded all-in-one platform to generate and edit with AI
Ideogram 4.0
Ideogram 4.0 - Ideogram's new top-rated open-weight image model
Muse Image
Muse Image - Meta’s new in-house AI image generator
AI training for the future of work.
Get access to all our AI courses, hundreds of real-world AI use cases, live expert-led workshops, an exclusive network of AI early adopters, and more.
AI Courses
Get unlimited access to all of our current & upcoming industry-specific AI courses for the duration of your subscription.
Daily Guides
To keep up with the rapid pace of AI, our team publishes AI implementation guides daily. Our library contains 300+ practical use cases to automate real-world work.
Workshops
Join weekly, live, interactive sessions with industry leaders who are at the forefront of AI for hands-on implementation guidance and exclusive insights.
Community
Network with an exclusive community of AI-first professionals who are working smarter with AI. Learn how early adopters are using AI in their work and businesses.