AIエージェントと作る

FrameScript はテキストで動画を書くツールなので、Codex CLI / Claude Code / Gemini CLI のような コーディングエージェントと相性が抜群にいい。AIにどこまで任せて、どこから自分でやるかの指針。

基本の流れ

1. 普通にプロジェクトを作る（npm init @frame-script/latest）。
2. そのディレクトリでエディタを開く。
3. 同じディレクトリでターミナルからコーディングエージェントを起動する。
4. 最初に AGENTS.md を読ませる（これだけで src/ を編集しないルールが伝わる）。
5. 具体的に「何の動画を、どう作りたいか」を順に指示していく。

まずは AGENTS.md を読んでプロジェクトの概観を把握してください。

ここでは動画を作成したいです。
まずは <やりたいこと> をしてください。
- スタイルは <...>
- 長さは <...> 秒
- アセットは assets/<...> を使ってください

AIに任せるとうまくいくこと

• テキストアニメ（フェード、スライド、スタガー、スウィープ）。
• 立ち絵の配置と簡単な動き（位置・スケール・口パクのつなぎ込み）。
• 集中線のような既製エフェクトの呼び出し。
• シーン構造の骨組み（Clip と Scene を割って並べる）。
• 定型的なリファクタ（同じ書き方を繰り返している部分の関数化）。

AIに任せると微妙なこと

• 細かい位置決め（中央寄せの px 微調整、画像の余白カット）。 AIは実際のプレビューを見られないので「だいたい中央」までしか持っていけない。
• 動画のカット編集（ここからここまでを切り出して使う、の判断）。 見て決めるしかないので自分でやったほうが早い。
• テンポの最終調整。0.1 秒ずらすのは見て決めるべき。

避けたいプロンプトパターン

• 「いい感じに」 — 見られないAIには曖昧すぎる。「3秒で右からフェードイン」のように具体化する。
• 長尺一発 — 30秒の動画を一度に頼まず、「Scene1 を 5 秒分」のように区切って依頼する。
• FrameScriptの仕様を前提にしないお願い — 「requestAnimationFrame でループして」のような書き方を提案されたら、 このノートの アニメーション ページを根拠に useAnimation ベースに直してもらう。

困ったときに渡したい情報

AIが詰まったら、以下を抜粋して貼り付けると一気に通ることが多い:

• AGENTS.md（編集ルール）
• project/project.tsx（現在の構成）
• sample/Scene1.tsx 等（動くお手本）
• このノートの アニメーション と 基本コンポーネント の URL