1仕組みと動作原理
7段階のパイプラインで構成され、各ステップで手動または自動のゲートファイルを生成しないと次のステップに進めない設計になっています。
.claude/skills/website-to-hyperframes/SKILL.md
The workflow has 7 steps. Each produces an artifact that gates the next.
ここで行われていること：「プロモーション動画の作成」を、サイトキャプチャ→DESIGN→SCRIPT→STORYBOARD→VO+タイミング調整→ビルド→検証の7段階に分割しています。各段階にゲートが設けられています（Step 1はサイト概要の出力、Step 2はDESIGN.mdの存在、Step 5はナレーション＋transcript.jsonおよびSTORYBOARDの尺更新、Step 7はlint/validateでエラーゼロであることを要求）。
サイトキャプチャ自体にはAPIキーが一切不要です：`hyperframes capture`がデザインのトークン、スクリーンショット、フォント、アセットを一度に取得し、DOMコンテキストを含む説明を自動生成します。
.claude/skills/website-to-hyperframes/references/step-1-capture.md
npx hyperframes capture <URL> -o captures/<project-name> … No API keys required. The capture extracts design tokens, screenshots, fonts, and assets with DOM-context descriptions automatically.
ここで行われていること：「ウェブサイトを読み込む」処理を、オフラインで再利用可能なcaptures/内のローカル素材に変換します。同セクションでは画像確認の順序（スクロールスクリーンショットを最初に見る）や大量キャプチャ（30枚以上）時の対応指針も示されています。
Geminiによる視覚的説明の追加（任意）：リポジトリルートの.envにGEMINI_API_KEYまたはGOOGLE_API_KEYを設定することで、Gemini 2.5 Flashによる詳細な画像説明を生成できます（無料枠の上限あり）。
.claude/skills/website-to-hyperframes/references/step-1-capture.md
**Optional:** Set `GEMINI_API_KEY` (or `GOOGLE_API_KEY`) in a `.env` file at the repo root for richer AI-powered image descriptions via Gemini 2.5 Flash vision.
ここで行われていること：本スキルで認証情報が関与する唯一の箇所であり、明確に任意設定となっています。設定するとページスクリーンショットがGoogleのビジョンモデルへ送信されます。未設定の場合でもキャプチャは通常通り動作し、AIによる説明生成のみが省略されます。
DESIGN.mdはクリエイティブな企画書ではなく「クイックリファレンス」として限定され、企画内容はStep 4のSTORYBOARD.mdに委ねられます。
.claude/skills/website-to-hyperframes/SKILL.md
Write a simple brand reference for the captured website. 6 sections, ~90 lines. … This is a cheat sheet, not the creative plan — that comes in Step 4.
ここで行われていること：ブランドの参照基準と演出意図が単一の文書に混ざるのを防ぎます。Step 2では「このサイトがどのような見た目か」のみを定義し、Step 4で「各カットをどう演出するか」を定義します。
映像よりもナレーションを先行：脚本をストーリーの骨格とし、シーンの尺は推測ではなくナレーションの実測値に基づきます。
.claude/skills/website-to-hyperframes/SKILL.md
Write the narration script. The story backbone. Scene durations come from the narration, not from guessing.
ここで行われていること：TTS出力の実測長に尺を紐付けます（Step 5でtranscribeを実行して単語レベルのタイムスタンプを取得し、STORYBOARDの実時間に反映）。
TTSは3つのルートがあり、デフォルトは完全ローカルかつ無料です：KokoroによるローカルCPU生成（キー不要）、ElevenLabsのMCPツール利用（最高音質だがタイムスタンプ非対応のため別途文字起こしが必要）。
.claude/skills/website-to-hyperframes/references/step-5-vo.md
- **Kokoro** (try first — free, no API key) — `npx hyperframes tts SCRIPT.md --voice af_nova --output narration.wav`. Runs locally on CPU. … - **ElevenLabs** (best voice quality, widest selection) — `mcp__elevenlabs__search_voices` to browse, `mcp__elevenlabs__text_to_speech` to generate. Does not return timestamps — transcribe separately after.
ここで行われていること：音声合成のコストとプライバシーを選択可能にしています。その後`npx hyperframes transcribe`を用いて単語単位のタイムスタンプを取得し、ビートを実際の音声タイミングに同期させます。
Step 6のビルドでは独自のアニメーション規約を設けず、必ず/hyperframesスキルを実際に呼び出す必要があります。
.claude/skills/website-to-hyperframes/SKILL.md
**Read:** The `/hyperframes` skill (invoke it — every rule matters)
ここで行われていること：レンダリングの規約（タイムラインの一時停止、クリップ層、決定論的動作）を信頼できるスキルに委託し、本スキルは「各カットの演出内容」のみに集中します。Step 6のゲートは自己評価式（レイアウト/アセット/静止画の有無のセルフチェック）です。
納品前にエラーゼロの二重検証を実施し、セッションを跨いだ作業継続のためにHANDOFF.mdを残します。
.claude/skills/website-to-hyperframes/SKILL.md
Lint, validate, preview. Create a HANDOFF.md for multi-session continuity. … `npx hyperframes lint` and `npx hyperframes validate` pass with zero errors.
ここで行われていること：「納品可能」の定義を、lint/validateの通過および引き継ぎ文書の存在とし、セッション中断による作業停止を防ぎます。
2コア機能
01ウェブサイトのキャプチャと素材化：URL → captures/<project>（デザイントークン、スクリーンショット、フォント、アセット ＋ DOMコンテキスト付き説明）
02ブランドリファレンス文書（DESIGN.md、6セクション、約90行）とナレーション脚本（SCRIPT.md）
03カットごとのクリエイティブ演出（STORYBOARD.md）：トーン、カメラ、アニメーション、トランジション、アセット、被写界深度レイヤー、効果音（SFX）＋アセット監査表
04音声合成とタイミング調整：TTS（ローカルKokoro / ElevenLabs MCP）→ 文字起こしによる単語レベルのタイムスタンプ取得 → 各カットの実時間への反映
05動画タイプ・アスペクト比のリファレンス（SNS広告 10〜15秒、製品デモ 30〜60秒など、1920x1080 / 1080x1920 / 1080x1080）
06Step 4およびStep 6で使用する10種類の視覚技法リファレンス（SVG描画、Canvas 2D、3D、タイポグラフィ、Lottie、動画、タイプライター、バリアブルフォント、MotionPath、トランジション）
07納品検証と引き継ぎ：`hyperframes lint` + `validate` エラーゼロ、HANDOFF.md
08「URLのみの送信」もトリガー対象：descriptionの4項目めおよび本文の両方で、リンク共有のみで本ワークフローを開始可能と明記
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames CLI：capture / tts / transcribe / lint / validate |
| api | Gemini 2.5 Flash 视觉描述（可选，需 GEMINI_API_KEY / GOOGLE_API_KEY，写在仓库根 .env） |
| api | ElevenLabs 语音（经 MCP 工具 mcp__elevenlabs__*，可选；不返回时间戳需另行转写） |
| network | 被捕获的目标网站自身（URL 由用户提供） |
| package | 兄弟 skill：/hyperframes（Step 6 必须调用） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: （本スキルのディレクトリ内にスクリプトは存在せず、SKILL.mdで指定された実行エントリポイントはすべてHyperFrames CLIです）
- 网络端点: 外部ネットワークアクセスの宣言: キャプチャ対象となるウェブサイトへのHTTP(S)リクエスト（ユーザーから提供されたURL）
- 本地工作目录: ファイルの読み書きと成果物出力: captures/<project>/: キャプチャ成果物（スクリーンショット、フォント、アセット、抽出されたトークンおよび説明）
監査ノート： 本スキル自体のディレクトリは9つのMarkdownファイル（SKILL.md + references/内の8ファイル）のみで構成されており、スクリプト、実行可能コード、ハードコードされたエンドポイントは存在しません。オレンジ判定となった要因は、SKILL.mdおよびreferencesで宣言されている以下の実行経路によるものです：① **認証情報の読み込みと素材の外部送信**——step-1-capture.mdでGEMINI_API_KEY（またはGOOGLE_API_KEY）をリポジトリルートの.envに設定し、取得したスクリーンショットをGemini 2.5 Flashに送信して高度な画像説明を生成する手順（無料枠5 RPMの注意喚起あり）が記載されており、キャプチャされた画像やアセットがローカル環境外へ送信されます；② **外部音声サービス**——step-5-vo.mdではElevenLabsのMCP連携（アカウント制サービス）を記載しつつ、完全ローカルで無料のKokoroを**最優先**として明記しており、明確なフォールバック先が用意されています。また、キャプチャ対象自体はユーザーから提供される任意のURLです（通信先は想定内ですがユーザー入力に依存します）。セキュリティ低下（TLS無効化、--no-verifyなど）、ボット対策の回避、任意コード実行の余地は確認されていません。本スキル自体にはスクリプトが含まれず、実行面は実質的にHyperFrames CLIおよびホスト環境側が担っています。
5二重目の独立検証
- [ok] Gemini key 与截图外发是否真实存在于文档（橙档关键证据） — references/step-1-capture.md 原文两处：抓站命令与 'No API keys required.'，紧接着 '**Optional:** Set `GEMINI_API_KEY` (or `GOOGLE_API_KEY`) in a `.env` file at the repo root for richer AI-powered image descriptions via Gemini 2.5 Flash vision. Free tier: 5 RPM; paid tier removes the bottleneck.' 即外发可选，且降级路径（不做 AI 描述）同段说明。
- [ok] 本 skill 是否夹带脚本或隐藏执行面 — find 目录只返回 .md；无 package.json、无 scripts/。SKILL.md 与 references 内的命令都是 npx hyperframes / 外部工具类，由宿主执行。
- [ok] ElevenLabs 路径是否把「免费本地」选项挤掉（隐私判断） — step-5-vo.md 把 Kokoro 列为首选并注明 'try first — free, no API key' 与 'Runs locally on CPU'，ElevenLabs 列第二且如实标注 'Does not return timestamps — transcribe separately after'。默认路径不出网（除抓站与 npx 拉取），付费服务是显式选项。
- [discrepancy] 「7 步每步一门禁」是否真的每步都有可判定 gate — ［判定：轻微］Step 1–5、7 的 gate 都是可机械判定的文件存在或 CLI 零错误；但 Step 6 的 gate 是自评式的——'**Gate:** Every composition has been self-reviewed. No overlapping elements, no misplaced assets, no static images without motion.' 由 agent 自查，无脚本或人工签字支撑。属文档自认的软门禁，已在 traits 与 risks 中标注。
- [ok] 触发面声明是否与内容相符（只丢 URL 就用它） — frontmatter 第 4 条与正文 Quick Reference 都覆盖用户分享链接的情形；SKILL.md 的 Users say things like 三条示例（25s launch video、15s IG 广告、30s 产品 tour）方向一致。
6結論
最適な用途： 手元にあるウェブサイト（自社プロダクトサイト、クライアントサイト、LPなど）からプロモーション動画を作りたい方に最適です（15秒のSNS広告、25〜30秒の製品ローンチ/ツアー、30〜60秒の機能デモなど）。「キャプチャ → ブランド参照 → ナレーション → カット演出 → 音声タイミング合わせ → HyperFramesビルド → 検証」という検証可能なフローを求め、最終的なレンダリング規約を/hyperframesスキルに委ねる運用を受け入れられる環境に適しています。
不向きな用途： 非推奨のケース：① キャプチャ対象のサイトがなく、ゼロから構想して動画を制作したい場合（本スキルは既存サイトの入力を前提とします）；② ログインが必要なサイトや、スクレイピング防止対策が施されたサイトのキャプチャ；③ ページのスクリーンショットを外部の画像認識APIに送信したくないユーザー（任意のGemini連携をスキップする必要があります）；④ 中間文書を省略してすぐに動画を出力したいユーザー（7段階のゲート設計が本スキルの核となります）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload website-to-hyperframes.tar.gz
sha256:
Option B · Copy Guide for Agent689a696415fb5f9d…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 0d30152a82.