text-to-lottie

テキストから Lottie を作成

公式のローカル Skia Skottie プレイヤー向けに、本番環境で使える Lottie JSON を作成します。 納品物は、JSON 単体ではなく、プレイヤーでレンダリングできるシーンです。

運用モデル

• 公式のプレイヤープロジェクトを使用し、Skia Skottie で検証してください。独自のビューアーを一から作成したり、検証に別のレンダラーへ切り替えたりしないでください。
• Agent Skills クライアント間でスキルを移植可能にしてください。スキルの指示では、ホスト固有のコマンド、コマンドモード、オーケストレーションの慣習は避けてください。
• 質問はできるだけ減らし、妥当な既定値を優先してください。透明背景か全画面背景か、ブランド上の制約、対象形式、提供されたソースアセットなど、判断によって出力が大きく変わる場合に限って質問してください。
• プロンプトの文面をそのまま満たすだけでなく、洗練された、意図の明確な、プロフェッショナルなモーションを優先してください。

リファレンスの読み込み

この SKILL.md は最小限の制御プレーンです。タスクに該当する、1 階層下のリファレンスだけを読み込んでください。リファレンスライブラリ全体を開かないでください。

シーンの作成、編集、修正、検証を行う前に、必ず references/player-contract.md を読んでください。振り分けられたリファレンスが利用できない場合は、このファイル内のインラインルールに従って続行してください。

ユーザーの意図	該当する場合に読むリファレンス
Lottie シーンの新規作成／編集／修正	references/player-contract.md
JSON 構造、キーフレーム、スロット、シェイプ、アセット	references/lottie-spec-map.md
ロゴアニメーション	references/recipe-logo.md、references/motion-taste.md、references/design-taste.md
タイポグラフィ、タイトル、引用、テキストの表示アニメーション	references/recipe-typography.md、references/design-taste.md、references/motion-taste.md
ローワーサード、ネームタグ、キャプションバー、オーバーレイ	references/recipe-lower-thirds.md、references/design-taste.md、references/motion-taste.md
ローダー、アイコン、スピナー、バッジのアニメーション	references/recipe-loaders-icons.md、references/motion-taste.md
成功、エラー、警告、完了、空の状態	references/recipe-loaders-icons.md、references/design-taste.md、references/motion-taste.md
UI のマイクロインタラクション	references/recipe-ui-microinteractions.md、references/design-taste.md、references/motion-taste.md
汎用的な「この SVG をアニメーション化」または SVG から Lottie への変換	references/recipe-svg-animation.md、references/svg-compatibility.md、references/motion-taste.md
カメラ追従、パン、ズーム、視差、シーンのモーション	references/recipe-camera-scene-motion.md、references/design-taste.md、references/motion-taste.md
図、技術的な線のアニメーション、コールアウト、フロートレース	references/recipe-diagram-technical.md、references/design-taste.md、references/motion-taste.md
データ、統計、KPI、チャート、メトリクス、ダッシュボードの数値	references/recipe-data-stats.md、references/design-taste.md、references/motion-taste.md
製品ローンチ、機能発表、ソーシャルプロモーション	references/recipe-product-promo.md、references/design-taste.md、references/motion-taste.md
長文、複数のアイデア、リスト／機能／手順、タイムライン、ビフォー／アフター、問題／解決策、引用＋根拠、まとめ／ストーリー、製品のウォークスルー、多言語のバリエーション、チャプター、複数ビートのシーケンス、エピソード、ジャンプカット／ハードカット、トランジションの文法	references/chapterization-transition-grammar.md、references/motion-taste.md
グロー、ガラス、金属、グラデーション、塗りつぶし、バブル／バースト効果	references/recipe-visual-effects.md、references/design-taste.md、references/motion-taste.md
ロゴ／アイコン／UI／ローワーサードの作業に SVG 入力を使用	タスクのレシピと references/svg-compatibility.md
スターターブリーフまたは再利用可能なプロジェクトの方向性	references/recipe-starter-projects.md、references/design-taste.md、references/motion-taste.md
「premium」「clean」「minimal」「modern」「sleek」「polished」のいずれかの修飾語	references/design-taste.md（控えめなデザインのデフォルト設定）に加えて、該当するレシピ

複合的なプロンプトでは、主な成果物に基づいて主要なレシピを 1 つ選び、入力形式やビジュアル処理に応じたリファレンスを追加してください。例：グローを伴う SVG ロゴでは、ロゴを主要レシピとし、SVG 互換性とビジュアルエフェクトを追加します。パン／ズームを伴う製品ローンチでは、製品プロモーションに加えてカメラのシーンモーションを使います。技術的な SVG 図のトレースでは、図／技術に加えて SVG 互換性を使います。ガラスのスイープを伴うキネティックタイトルでは、タイポグラフィに加えてビジュアルエフェクトを使います。

ワークフロー

1. 上の表を使ってタスクを振り分けます。存在する関連リファレンスのみを読みます。
2. 正式なプレイヤープロジェクトを特定し、以下のターゲット優先順位に従って対象シーンを解決します。編集する前に、解決されたパスが public/projects/<project>/<scene-N>/lottie.json であることを確認してください。UI がスロットの編集内容をソースに書き戻す場合があるため、上書きの直前に現在のファイルを読み直してください。
3. 作成を始める前に、背景の方針を決めます。
4. public/projects/<project>/<scene-N>/lottie.json を作成または更新し、必要に応じて controls.json も更新します。
5. JSON を検証し、開発サーバーを起動するか既存のものを再利用して、?frame=N で正確なフレームを確認します。完了する前に、レンダリング、デザイン、モーションの問題を修正してください。

インラインルール

デザインの基本方針（常に適用）

以下の基本方針はすべてのデザインシーンに適用され、例外はありません。特に「プレミアム」「クリーン」「ミニマル」「モダン」「カード」といったプロンプトの場合は、その根拠も含めて全体を把握するために references/design-taste.md を読み込んでください。

• プレミアムとは、足すことではなく、引くことです。プロンプトに「プレミアム」「クリーン」「ミニマル」「モダン」「洗練された」とある場合は、まず抑制を基本とします。追加するより先に装飾を取り除いてください。プレミアム感は、サイズ、太さ、明るさ、余白、タイミングによって生み出されるものであり、カード、枠線、区切り線、シャドウ、グロー、色合いの重ね合わせによるものではありません。
• 装飾やコンテナの予算は、デフォルトで 0 です。余白と整列では実現できない役割がない限り、フレームとなるカード、コンテナ、枠線、区切り線を追加しないでください。グリッドやカラムは、まずネガティブスペースと整列で、次に細い線1本で区切ります。塗りつぶしや枠線のあるカードは最後の手段とし、明確な必要性がある場合にのみ使用してください。
• 表面の色調は1つにします。背景の色調は1つだけ使用してください。「表面」を見せるために、黒に近い色調や白に近い色調を2つ重ねないでください。濁った印象になります。カードの表面色を背景と変える必要がある場合は、明確な目的を持たせ、意図的に一段階だけ変えてください。
• 区切り線の表現と色は1種類にします。区切り線が本当に必要な場合は、タイトルの罫線やカラムの罫線も含め、すべて同じ太さと色を使用してください。区切り線ごとに色や太さをわずかに変えることは避けてください。

シーンのルール

• シーンファイルは public/projects/<project>/<scene-N>/lottie.json に配置します。
• 対象シーンは、次の優先順位で決定します。明示されたファイルパスが最優先です。次に、/<project>/<scene> のようなブラウザー URL のルートが優先されます。その次に、タスクですでに判明しているプロジェクト／シーンが優先されます。それ以外の場合は、新しい安全なシーンを作成します。/__context は、探索、検証、または再生状態の確認に限って使用します。ただし、タスクで現在画面に表示されている内容の編集が明示されており、より具体的な対象がない場合はこの限りではありません。既知のファイルパス、URL、またはプロジェクト／シーンよりも /__context.live を優先しないでください。main-project/scene-1 を上書きするのは、変更されていないプレースホルダーのままである場合に限ります。それ以外の場合は新しいシーンを作成します。
• フレーム全体を使う単独のコンポジションには、bgColor スロットと controls.json のエントリーを備えた、視認できる背景レイヤーを含めます。
• ロゴ、アイコン、ローダー、オーバーレイ、ローワーサード、SVG 由来のアセットは、ユーザーが背景を求めない限り、デフォルトで透明にします。
• トップレベルに v、fr、ip、op、w、h、nm、assets、layers を含めます。op は排他的な値として扱います。
• 意図に沿ったイージングと演出を使用します。デフォルトで線形モーションを使わないでください。動きの特性に基づく motion-taste.md の基準からイージングを選びます（動きの特性を基準に選び、主要な要素を最も強調します）。すべてのレイヤーに同じイージングを適用しないでください。
• 重要な編集可能値にはスロットを使用し、プロパティパネルの改善につながる場合は controls.json にラベルと範囲を追加します。
• SVG 入力では、viewBox を保持し、スタイルを正規化して、塗りつぶしルールと交差部分に注意し、Skottie で結果を検証します。
• ネイティブ Lottie テキスト／テキストスロット（ty:5）は、このプレーヤーでレンダリングできます。シーンにフォントを同梱し、.ttf／.otf／.ttc を lottie.json と同じディレクトリに配置し、埋め込みフォントのファミリー名と一致する fFamily を fonts.list に宣言して、テキストドキュメントから参照します。ローダーはシーンのすべてのフォントを Skottie に渡します。ネイティブテキストを優先し、ベクター／シェイプテキストは、意図的なパス効果（線の描画、グリフの変形、手書き風表現）に限って使用してください。「Native Text」のプレーヤー契約リファレンスを参照してください。

検証

完了する前に、次の項目を確認してください。

1. 対象のファイルパスが public/projects/<project>/<scene-N>/lottie.json であることを確認します。

2. JSON を検証します。

   node -e "JSON.parse(require('fs').readFileSync('public/projects/<project>/<scene-N>/lottie.json','utf8'))"
   

3. 公式プレーヤーが実行中であり、シーンが GET /__context に表示されることを確認します。

4. ブラウザーで固定フレームを確認します。新しいシーンでは、フレーム 0、中間フレーム、op - 1 を確認します。

5. 背景の方針が用途に合っていることを確認します。

6. 空白のキャンバス、アセットの欠落、スタイルの適用されていないシェイプ、レイヤー順の誤り、不適切なイージング、不自然なタイミング、コンテンツの切り抜き、テキストのはみ出し、目に見える SVG のアーティファクトがないか確認します。

7. アニメーションがきれいにレンダリングされ、意図が感じられる場合にのみ完了とします。

メンテナンス評価

通常のアニメーション作業中は、評価ファイルを読まないでください。このスキルをテストまたは変更する場合に限り使用してください。

• evals/trigger-prompts.json
• evals/routing-prompts.json
• evals/reference-loading-prompts.json
• evals/output-rubric.md