1仕組みと動作原理
アニメーション前にまずビジュアルシステムを確立する：背景とライティング、メインカラーとニュートラルカラー、フォントとタイプスケール、コンポーネントの質感、シャドウのスタイル、モーション言語、禁止アピアランス――作業前にこの7項目を定義必須とする。
skills/motion-design-systems/SKILL.md
Define these before animating:
ここでの目的：「ビジュアルディレクション」を実行可能なシステムチェックリストへと落とし込み、アニメーションを作りながら色やフォントサイズを変更することによる手戻りの頻発を防ぐ。
ブランドシステムが存在しない場合は保守的なデフォルトセット（ウォームホワイト背景、黒の本文、単一のアクセントカラー、ソフトシャドウ、控えめな角丸、十分な余白、直接ラベリング、最小限の装飾）を提示し、別のデフォルトセット（青紫グラデーション、ネオンライン、ダーク系のSF風ダッシュボード）を明示的に禁止する。
skills/motion-design-systems/SKILL.md
Do not default to blue/purple gradients, neon lines, or dark sci-fi dashboards.
ここでの目的：本スキルにおいて最も「センスの判定基準」となる部分――「AI特有のデフォルトの見た目」を禁止リストに登録し、曖昧な「センス良く」という指示を具体的なネガティブリストで置き換える。
モーションの語彙を小さく抑えて反復させ（カメラプッシュ/ワイプ、パス描画、マテリアルのスケール、ブラーからクリアへの遷移、スペキュラスイープ、微光、パーティクルドリフト、軽快なホールド）、同一の語彙を使い回すことで複数シーンの一貫性を生み出す。
skills/motion-design-systems/SKILL.md
Repeating a small motion vocabulary makes multi-scene videos feel coherent.
ここでの目的：複数シーンの一貫性を単一カットの技巧ではなく語彙の再利用に帰属させ、シリーズ動画のトーン＆マナーを統一する工学的アプローチを取る。
ユーザーからの明示的な要求がない限り、イージングのホワイトリスト（power2.out / power3.out / expo.out / sine.inOut）と禁止リスト（bounce/rebound、ネオン、SF風HUD、汎用SaaS解説のお決まりパターン）を併せて適用する。
skills/motion-design-systems/SKILL.md
- Use ease curves that settle naturally: `power2.out`, `power3.out`, `expo.out`, `sine.inOut`.
ここでの目的：「高級感・洗練さ」を具体的なイージング関数の選定と禁止事項に落とし込む。references/premium-motion.md にて「失敗しがちな実装」をさらに解説。
チャートストーリーテリングには固定の展開順序を持たせる：軸とラベルで先に枠を確立 → ラインを左から右へ描画 → プロット点は曲線が到達した瞬間にのみ出現 → ラベルは対象要素に近接配置（要求がない限り凡例は不使用） → ギャップの塗りつぶしは両方の曲線によって差分が成立した後にのみ表示。
skills/motion-design-systems/SKILL.md
- Points appear only when the line reaches them.
ここでの目的：データストーリーの時間的順序を厳格に固定し、プロットの先行表示やフライング気味の塗りつぶし、後付けの凡例など、視聴者を置き去りにする典型的な失敗を防ぐ（referencesのFailure Modesに1対1で対応）。
テーマの変更は単一変数の書き換えではなく検索エンジニアリングである：CSS変数、生hex値、RGB/RGBA、SVG fill/stroke、canvas/WebGL定数、インラインスタイル、複製された開始/キャリーオーバーフレームを網羅的に走査し、ロゴ、製品画面録画、実製品スクリーンショット、ユーザー参考画像は変更対象外とする。
skills/motion-design-systems/SKILL.md
Do not recolor logos or product-demo footage unless explicitly requested.
ここでの目的：テーマ整理の検索対象を網羅的にリストアップし、同時に色を変えてはならない対象を明確に分離する――ブランド動画制作において最も事故が起きやすい工程への対策。
「洗練されていない」原因の特定には順序を設ける：スケール → 余白/スペーシング → 色の一貫性 → モーションのタイミング → 最後にフォントの順で調査し、結論ベースの判定を直接提示する。
skills/motion-design-systems/SKILL.md
Most "not premium" complaints come from oversized elements, too many colors, or uncontrolled motion.
ここでの目的：主観的な不満をトラブルシューティング可能なチェックリストと優先順位へ変換し、「洗練されていない」と言われた際に安易にフォント変更へと走る事態を防ぐ。
2コア機能
01再利用可能なコンポーネントライブラリパターン：ガラス調カード/パネル、ロゴ列、CTA固定表示、テーブル枠、チャートの軸・ライン・ラベル・ノード・ギャップ塗りつぶし、球体/リング/パーティクル/キャラクタタグ。ハードコードによる使い捨ての色指定を避け、CSSカスタムプロパティまたはJS定数でパラメータ化
02テーマトークンと整理チェックリスト：即座に利用可能な :root トークンサンプル（ウォームホワイト背景 #f7f3ec、インクブラック #111111、アクセントオレンジ #ef6f22、ガラスの塗りつぶしとストローク）を提示し、検索対象および除外対象を整理
03参考画像アライメントチェックリスト（10項目）：オブジェクト数、相対位置、スケール、フォントウェイト、線幅、角丸、背景の温かみ、シャドウの柔らかさ、ラベル位置、最終フレームの可読性
04カードとレイアウトのサイズ規律：寸法の明示的定義、タイトル階層とカード階層の分離、直感よりも小さめのカード設計、字幕領域の確保、最終フレームでの字幕入り再検証、カードの多重ネストの回避、凡例なしでは理解できないチャートラベルの排除
05チャートストーリーテリングリファレンス（展開順序、曲線に近接配置するラベリング規則、5つの失敗パターン、および必須でキャプチャすべき6つの証明フレーム）
06上質モーションリファレンス：効果的な手法（低速カメラドリフト、前景・背景のパララックス、マテリアルの浮現、パス描画、メインアニメーション収束後の微光、生きているようなホールドフレーム）と失敗しがちな手法（物理的オブジェクトの単純な不透明度出現、汎用SaaSパネル、暗色ネオンHUD、ストーリーと無関係な巨大な装飾）
07ビジュアルインテークチェックリスト（ターゲット層とコンテキスト、ブランドカラーと禁止色、動画タイプ：製品デモ/発表動画/UGC/広告/企業向け解説、参考画像が厳密な最終フレームか雰囲気参考か、抑制されたトーンかハイエナジーか、フォントが既存ブランドと完全一致必須か）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | GSAP 缓动函数名（power2.out / power3.out / expo.out / sine.inOut）——本件把缓动选择写成判据，实现落在 GSAP 生态；除此外不点名任何 CLI、端点或远程包 |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: （本skillディレクトリ内にスクリプトは存在しません）ドキュメントに基づき、ホストがプロジェクト内のコンポーネント/コンポジションファイルおよびテーマトークンを変更し、証明フレームを抽出します。具体的なコマンドは hyperframes-scene 側で実行されます。
- 本地工作目录: ファイルの読み書きと成果物の出力: プロジェクト内のコンポーネント/コンポジションファイルの変更（CSSカスタムプロパティ、トークン、SVG fill/stroke、グラデーション、シャドウ）。
監査ノート： skill ディレクトリ内には SKILL.md と 3 つのリファレンスのみが存在し（純粋な命令指示書、実行ファイルなし）、動作範囲はローカルの読み書き（プロジェクト内コンポーネント/コンポジション/テーマトークンの変更、証明フレームの抽出）および参考画像のビジュアル判定に限定されており、CLIの呼び出し、ネットワーク接続、認証情報の読み込みは行わないため、青判定の「ローカル読み書きのみ」に合致します。**外部サービスへの素材送信なし**：本skillディレクトリ全体のスキャンにより、http(s):// エンドポイント、fetch/requests、token/env の読み取りは一切含まれていません。同ファミリーの中でも唯一CLIやエンドポイントの記述が存在しないskillです（登場するライブラリ用語はGSAPのイージング関数名のみ）。同ファミリー9件のスキルと一貫した基準により、ディレクトリ内は SKILL.md（+ リファレンス）のみで、動作はローカル読み書きとローカルCLIに留まり、エンドポイント、認証情報、素材の外部送信は存在しません。
5二重目の独立検証
- [ok] 「零外部依赖」是否成立 — 目录扫描无 URL、无 CLI 名、无包名引用（仅出现 GSAP 缓动函数名，属实现建议而非调用）。这是本族唯一连本地 CLI 都不点名的 skill。
- [ok] 默认视觉系统与禁止项是否都可判定 — 默认值是具体对象（暖白底、黑主文字、单强调色、柔和阴影、保守圆角、大量负空间、直接标注），禁止项是具体风格（蓝紫渐变、霓虹线、暗色科幻仪表盘、卡片套卡片、需要图例的标签）——可勾选，不依赖主观裁量。
- [ok] 缓动白名单是否与 GSAP 实际函数名一致 — power2.out / power3.out / expo.out / sine.inOut 均为 GSAP 标准 ease 名称（格式为 <ease>.<type>），可原样传给 ease 参数。
- [ok] 三份 references 是否都被 SKILL.md 点名且存在 — SKILL.md 点名 references/premium-motion.md 与 references/theme-tokens.md 以及 references/chart-storytelling.md；三份文件在 pin 内均存在，无悬空引用、无未点名文件。
- [discrepancy] 「用 proof frame 验证主题变更」是否有可执行支撑 — SKILL.md 只要求用受影响场景与下一场景承载帧的 proof frame 验证，未点名抽帧工具；实际抽帧在仓库层 scripts/extract_proof_frames.py 与同族 render-qa-and-surgical-changes 里。只加载本件时验证动作缺少具体命令（设计层与工具层分离的必然结果，非缺陷但需注意）。
- [ok] 与 hyperframes-scene-builder 是否有重复或冲突判据 — 本件的规则全部是视觉与动效语言层面（色、材质、缓动、图表揭示顺序、尺寸），未涉及组合根、时间线注册、渲染命令等实现契约；scene-builder 也只提共享设计 token 放在文件顶部，二者互补不冲突。
6結論
最適な用途： 最適：単に「レンダリングできる」だけでなく「ビジュアルディレクション」が求められる場面――ビジュアルシステムやトークンの設定、グラスモーフィズムや上質なモーションの実装、チャートやデータストーリーテリングの作成、CTA・ロゴ列・テーブル枠コンポーネントの構築、テーマカラーの整理、参考画像に合わせた最終フレームの調整、複数シーン間でのブランド一貫性の維持。製品発表動画、企業向け解説動画、デモ動画の美的基準としても適しています。
不向きな用途： 不向き：① 具体的な実装コントラクトやレンダリングコマンドを求める場合（hyperframes-scene-builder を使用してください）；② 参考画像やブランドの制約がなく、単に素早く下書きを作成したい場面（本件は事前のインテークコストが比較的高めです）；③ ダーク系、ネオン、SF風HUD、またはテンポの速い高エネルギーなカット割りを必要とする動画タイプ――デフォルト方針の明示的な上書きが必要です；④ 「ワンクリックでのテーマ変更」のような全自動化を期待する場合（本件は判定基準と検索リストを提供するものであり、実際の走査と置換はリポジトリのスクリプトと手動確認に依存します）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload motion-design-systems.tar.gz
sha256:
Option B · Copy Guide for Agent39a1199550b8d94b…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit f6b043d9fd.