スキル自身の言葉で
hyperframes-coreによる技術的な契約が整った後に使用する、HyperFrames動画のためのアニメーション以外のクリエイティブディレクションです。デザイン仕様の解析（frontmatterをブランドの真実とするframe.md / design.md）、パレット、タイポグラフィ、ナレーション、ビート計画、オーディオリアクティブなビジュアル、コンポジションパターン、ブランドに関する判断を扱います。
重要度の高い作業では、2つのリファレンスがWebの直感を上書きします。house-style.mdはプロンプトの解釈方法と、背景/前景レイヤーのレシピによる実コンテンツの生成方法を説明します。一方、video-composition.mdは、空虚なWebページレイアウトを避けるために、動画メディアのスケール、奥行き、前景ディテールを定義します。原子的なモーションパターン、シーンのブループリント、トランジション、CSSマーカーエフェクトについては、代わりにhyperframes-animationを使用してください。
生成されるもの
- 動画メディアのスケール、奥行きパターン、ブランドに一貫した色とタイポグラフィを用いたHTMLコンポジション
- レンダリングされたフレームのアクセシビリティを検査するcontrast-report.mjsによるコントラストレポート
- オーディオリアクティブなコンポジションのための、extract-audio-data.pyによるオーディオバンドデータファイル
仕組み
- 01まずデザイン仕様を読む
プロジェクトにframe.md、design.md、またはDESIGN.mdがある場合は、まずそれを読み、frontmatterのトークンを色、フォント、間隔、トーン、制約に関するブランドの真実として扱ってください。
- 02ビジュアルディレクションのルートを選ぶ
デザイン仕様が存在しない場合は、frame-presets/ の既成フレームプリセットを採用するか、visual-styles.md から名前付きスタイルを選択するか、house-style.md の高速デフォルトを使用するか、design-picker.md による対話形式の選択を実行してください。
- 03HTMLを書く前にビートを計画する
複数シーンの作業では、HTMLを書く前に beat-direction.md を参照してリズムとタイミングを計画してください。シーン遷移については hyperframes-animation/transitions/ を参照してください。
- 04モーションのガードレールを適用する
モーションが多い作業では、まず motion-principles.md を読んで高レベルのガードレールを確認し、その後 hyperframes-animation でアトミックなモーションルールに進んでください。