HyperFrames デザイン
ブランド、ペーシング、スタイル、構図のディレクション。/hyperframes/core からの技術的契約が整った後に使用します。
モーションパターン、シーンブループリント、トランジション、CSS マーカーエフェクトには hyperframes-motion を使用してください — このスキルは意図的に非アニメーションです。
これら2つを最初に読んでください — 重要でない構図の場合はウェブの直感を無効にします:
references/house-style.md— 「プロンプトを解釈し、本物のコンテンツを生成する」、レイジーデフォルトリスト、背景/前景レイヤーレシピ。これは文字通りのリスタイルを コンセプト に変えるものです。references/video-composition.md— ビデオメディアの密度、スケール、前景メタデータ（「生成された」ではなく「制作された」ディテール: データバー、レジストレーションマーク、等幅フォントの読み出し、シーンあたり8〜10要素）。これらをスキップすることは、一般的でウェブページのような出力を生む最大の原因です。以下のルーティングテーブルではオプションの行ではありません — 1行の編集以外では、色を選んだりHTMLを書いたりする前に、両方を開いてください。
ワークフロー
- プロジェクトにデザイン仕様がある場合、最初にそれを読み、そのフロントマタートークンをブランドの真実（色、フォント、スペーシング、トーン、制約）として扱います。読み込むファイル（優先順位
frame.md→design.md→DESIGN.md）とその解析方法（フロントマター = 規範、散文 = コンテキスト）はreferences/design-spec.mdに一度だけ定義されています — そのドキュメントに従って解決およびロードします。 - デザイン仕様が存在せず、ユーザーがビジュアルディレクションを求めた場合、ルートを選択します:
- 既成のフレームプリセット（オプション）→
frame-presets/（FRAME.mdをframe.mdとして採用;references/design-spec.mdを参照） - 名前付きスタイルまたはムード →
references/visual-styles.md - 高速デフォルト →
references/house-style.md
- 既成のフレームプリセット（オプション）→
- マルチシーンワークの場合、HTMLを書く前にビートとリズムを計画 →
references/beat-direction.md。シーントランジションについては、hyperframes-motion/transitions/に移動します。 - モーションが多い作業の場合、
references/motion-principles.md（高レベルのガードレール）を読み、その後hyperframes-motionでアトミックルールに進みます。
ルーティング
| トピック | 読むドキュメント |
|---|---|
既成のフレームプリセットを frame.md として採用（オプション） | frame-presets/ · references/design-spec.md |
| デフォルトのパレット、モーション、タイポグラフィ、レイジーデフォルトへの質問 | references/house-style.md |
| 名前付きスタイルプリセット、ムードからスタイルへのルーティング | references/visual-styles.md |
| パレット固有のカラートークン | palettes/*.md |
| 構図パターン — PiP、テキスト背景、タイトルカード、スライドショー | references/composition-patterns.md |
| 統計/インフォグラフィック表示 | references/data-in-motion.md |
| オープンエンドなプロンプトのための構造化拡張 | references/prompt-expansion.md |
| ビデオメディアの密度、スケール、色、フレーム構図 | references/video-composition.md |
| ビートごとのディレクション、リズム計画、トランジションタイミング | references/beat-direction.md |
| 作成後の仕様検証（色、タイプ、コーナー、スペーシング、奥行き） | references/design-adherence.md |
| 高レベルのモーションガードレールとGSAP品質ルール | references/motion-principles.md |
| フォント選択、ペアリング、レンダリングビデオタイプのガードレール | references/typography.md |
スクリプト
scripts/contrast-report.mjs— レンダリングされたフレームからのコントラスト警告を検査します。scripts/package-loader.mjs— バンドルされたクリエイティブツールのサポートスクリプト。
リポジトリルートから明示的なパスで実行します。
アニメーション解析（animation-map.mjs）は hyperframes-motion/scripts/ にあります。
境界
/hyperframes/coreの技術ルールを上書きしないでください。- 最小限の技術的構成に対してデザインシステムを要求しないでください。
- リクエストに含まれていない場合、または最初に拡張を提案しない限り、シーン、キャプション、トランジションを追加しないでください。
- レシピ参照はタスク固有に保ち、簡単な編集のためにすべてのリファレンスを読まないでください。