HyperFrames

HeyGenのHyperFramesスキル。HTMLとデザインをエージェントから直接完成した動画に変えます。

エージェントスキル
エージェントスキル動画生成HTMLから動画AIエージェントHeyGenモーションデザイン
認証済み

インストール

npx skills add heygen-com/hyperframes
対応エージェント:Claude CodeCodexCursorGemini CLIIBM BobOpenCodeGitHub CopilotVS Code

スキルファイル (9)

  • skills/hyperframes/SKILL.md
  • skills/hyperframes-cli/SKILL.md
  • skills/hyperframes-registry/SKILL.md
  • skills/media-use/SKILL.md
  • skills/figma/SKILL.md
  • skills/slideshow/SKILL.md
  • skills/remotion-to-hyperframes/SKILL.md
  • skills/reverse-any-video/SKILL.md
  • skills/style-sampling/SKILL.md

品質とセキュリティ

ライセンス100
メンテナンス100
セキュリティ90
ドキュメント95
ライセンス: Apache-2.0
バージョン: v0.9.26
最終更新: 2026-11-09

料金

Free and open source (Apache 2.0). Renders locally; no per-render fees.

HyperFrames
HyperFrames
HyperFrames
HyperFrames

HyperFramesレビュー:HTMLをエージェントから完成した動画に変える

動画は作るのが最も高価なコンテンツです。モーションデザイナー、編集タイムライン、レンダーファーム、あるいは1つのクリップのために動画ツールを1週間学ぶことです。ほとんどのチームは動画を完全に避けます。あらゆるプラットフォームで最も成果が出る形式であるにもかかわらずです。

HyperFramesはHeyGenのエージェントスキルで、HTMLとデザインを完成した動画に変えます。2026年11月にリリースされたバージョン0.9.26は、コアレンダラー、コマンドライン、テンプレートレジストリ、メディア処理、Figmaインポート、スライドショー、動画変換をカバーする9つのスキルファイルを提供します。動画を説明すれば、エージェントがHTMLを書き、HyperFramesがヘッドレスブラウザでローカルにレンダリングし、FFmpegでエンコードします。APIキーも、1回ごとのレンダリング料金も、クラウドレンダリングの待ち時間もありません。

HyperFramesとは?

HyperFramesはHeyGenのオープンソースプロジェクトであり、エージェントスキルです。その考え方は、ウェブページはすでに動画の絵コンテだということです。レイアウト、タイポグラフィ、色、モーションはすべてHTMLとCSSが得意に記述するものです。HyperFramesはそのページを取り、ヘッドレスブラウザでアニメーションさせ、動画として記録します。

スキルは1つのコマンドでClaude Code、Codex、Cursor、Gemini CLIなど8つのエージェントにインストールできます。9つのスキルファイルがあります。コアスキル、コマンドラインスキル、テンプレート用レジストリスキル、メディアスキル、Figmaインポートスキル、スライドショースキル、Remotionプロジェクトからの変換スキル、任意の動画を逆変換するスキル、スタイルサンプリングスキルです。約450のデザインブロックとテンプレートのカタログがエージェントの出発点となり、空白のページから始めることはほとんどありません。

主な機能

1. HTMLを入れて動画を出す

エージェントがHTMLとCSSを書き、HyperFramesがそれをアニメーションさせて結果を記録します。ウェブページを説明できるなら、動画も説明でき、エージェントは両方を作れます。

2. 約450のデザインブロックのカタログ

約450の既製ブロックとテンプレートがタイトル、ローワーサード、製品紹介、ソーシャル形式をカバーします。エージェントはブロックを選び、コンテンツに合わせて調整し、レンダリングします。すべてのフレームをゼロからデザインする必要はありません。

3. Figmaインポートとスタイルサンプリング

Figmaデザインを直接インポートしたり、既存の動画からスタイルをサンプリングして新しい動画に適用したりできます。このスキルは、すでにあるデザインと欲しい動画の橋渡しをします。

4. スライドショー、逆変換、コンバージョン

スライドデッキを動画に変え、既存の動画を編集可能なフレームへ逆変換し、RemotionプロジェクトをHyperFramesに変換します。このスキルは1回のレンダリングだけでなく、動画ワークフロー全体をカバーします。

5. ローカルレンダリングで1回ごとのコストなし

レンダリングは自分のマシンでヘッドレスブラウザとFFmpegを使って行われます。管理するAPIキーはなく、動画ごとの料金もないため、反復は無料で高速です。

仕組み

1つのコマンドでスキルをエージェントにインストールし、欲しい動画を説明します。メッセージ、スタイル、長さです。エージェントはテンプレートを選ぶかHTMLを書き、フレームをプレビューして、ローカルで動画をレンダリングします。ソースがHTMLなので、言葉、色、タイミングを変えて数秒で再レンダリングできます。

コマンドラインはエージェントなしで同じレンダラーを使え、スクリプトや自動化に向いています。コアスキルがほとんどの人の出発点です。テンプレートやアセット処理が必要なときに、レジストリとメディアスキルが拡張します。

誰に向いているか

動画が必要だが動画チームを持たない開発者やマーケター、エディタを学ばずに製品トレーラーが欲しいインディーハッカー、すでにHTMLを書き、動画まで仕事を終えられるべきエージェントです。今日のコンテンツがテキストとデザインなら、これがそれをモーションに変えるスキルです。

料金

無料でオープンソース(Apache 2.0)です。ローカルでレンダリングし、1回ごとの料金はありません。

長所と短所

長所

  • 1つのコマンドでHTMLとデザインを完成した動画に変える
  • 450のデザインブロックとテンプレートに加え、Figmaインポートとスタイルサンプリング
  • APIキー不要、動画ごとの料金なしのローカルレンダリング
  • 非常に活発に保守されている。このレビューを書いた日に新リリースが出た

短所

  • 動画の品質はエージェントが作るHTMLとデザイン次第。テンプレートが弱ければ動画も弱い
  • ローカルレンダリングにはブラウザとFFmpegを入れたマシンが必要
  • スキルは新しく、エコシステムはまだ成長中。一部のワークフローは成熟した動画エディタほど磨かれていない

最終評価

ウェブページを説明できるなら、今や動画も説明できます。HyperFramesはエージェントにそれを可能にするスキルで、ローカルで、無料で、テンプレートカタログがエージェントの空白からの出発を防ぎます。インストールして製品トレーラーを頼み、フレームが返ってくるのを見てください。

GitHubでHyperFramesを試す