Communitygithub.com

tin-computer/tin

実在する製品をスマホサイズでキャプチャし、ナレーション付きの9:16デモ動画を生成します。

tin とは?

このスキルは、製品のWebページから直接、縦型のプロモーションビデオ(9:16)を自動生成するためのものです。`tin-studio`というCLIツールを使用して、スクリプト作成、キーフレームのキャプチャ、音声の生成、そして最終的な動画のレンダリングまでを一貫して行います。Developerにとっての利点は、製品デモをスクリーンキャプチャなしで滑らかなアニメーションとして合成できる点です。対応プラットフォームはCLI環境であり、Claude CodeやCodexなどのエージェントがこのスキルを利用して、製品のランディングページやドキュメントから自動でデモ動画を生成できます。ワークフローは、まず製品ページを解析してストーリーボードを作成し、各ステップのキーフレームをキャプチャ、その後音声を合成し、最後にキャプションや背景、オプションのキャラクターとともに動画をレンダリングします。重要なのは、実際の画面録画ではなく、静的キーフレームからスクロールやタップなどの動きをシミュレートする点で、これにより非常に滑らかなデモ動画が生成されます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tin-computer/tin/tree/HEAD/codex_procedures/creative.product_demo/skills/product-demo-video

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

プロダクトデモ動画の手順

すべての操作は tin-studio を通じて行われます(tin-studio help を実行)。ランタイムが提供するStudio用ワークディレクトリで作業します(これをWORKと呼びます。API実行時は /home/tin-work/studio、従来のOAuth実行時は /home/user/.tin-lite/studio)。完成したMP4ファイルのみをプロジェクトのチェックアウト先に配置します。リアルタイムの画面録画は行いません。キャプチャした静的なキーフレームから、レンダラーがスクロール、タップ、ズーム、キャプションの動きを合成するため、結果は滑らかになります。

1. ストーリーの計画

  1. wiki/INDEX.md を読む(## Product、機能マップ、ポジショニング)。angle と notes を読む。
  2. tin-studio inspect <product_url> WORK/inspect を実行する。JSONを読む:headings(scrollY を含む)、actions(既製の selector を含む。ナビゲーションでは inHeader: true のものを優先)、text、docHeight。画像ビューアで WORK/inspect/inspect.png と WORK/inspect/inspect-full.png を開き、各画面に何が表示されているかを確認する。必要に応じて(ドキュメント、料金ページなど)、あと1~2ページ追加で検査する。
  3. script-format.md で説明されている形式を決定する:最大7語の1つのフック(angle が指定されていればそれを痛みとして命名)、次に5~7ステップ。各ステップは1つの可視的な瞬間であり、最大14語の1つの音声ラインと、最大5語の1つのキャプションを持つ。キャプションとフック内に、正確に1つの *word* をマークする。最後のステップは、ページが実際に提供する(トライアル、料金、インストールなどの)行動喚起に [warm] ラインを使って着地する。合計スピーチは最大75語。
  4. 主張はページテキストまたはプロジェクトメモリから取得する。数値は、それを述べるステップで画面上に表示されていなければならない。
  5. すべてのラインを、クリエイターが視聴者に話しかける形で書く:現在形、二人称、モノそのものについて。ページについてナレーションしない(「ページは~を示している」「このセクションは~を一覧表示している」「サイトの例は~」)。それが視聴者にとって何を意味するかを述べる(「あなたのエージェントは固有の番号を取得する」)。金額やカウントは単語で書き、ブランド名は完全な文の中に保持する。

2. スクリプト作成とキャプチャ

  1. WORK に script.json を script-format.md の形式で作成する。
  2. tin-studio capture WORK/script.json WORK/out を実行する。画像ビューアで WORK/out/frames/kNNN.png をすべて開き、以下の点を確認する:ページが読み込まれていること(空白、エラー、インタースティシャルがないこと);クッキーバナーやポップアップがコンテンツを覆っていないこと(表示される場合は、その閉じるボタンをクリックする早期の click ステップを追加するか、そのようなページを避ける);各スクロールがキャプションの期待する位置に着地していること;各クリックが意図した要素をヒットしていること(click キーフレームに新しいページが表示されていること)。間違ったキーフレームはスクリプトの修正が必要です:インスペクトからより適切な selector、scrollTo、より大きな settleMs、または別のページを試す。すべてのキーフレームが適切になるまで再キャプチャする。

3. 音声

  1. tin-studio voice WORK/out --voice <voice> --language "<language>" を実行する。フック行には [excited] を、最後の行には [warm] を追加する。それ以外はプレーンな文にする。実行のたびにステップごとのクリップ長が表示される。クリップが5秒より長い場合は、その行を短くする。
  2. 音声は1回の実行あたり上限がある(24行、3000文字)。再実行しても変更されていない行はそのまま保持されるため、WORK/script.json の行を編集し、再キャプチャは不要で、voice を再度実行する。
  3. プロバイダーが拒否した行は、理由とともに REFUSED として報告され、他の行は保持される。content_policy_violation はプロバイダーの不透明なテキストチェッカーが誤作動した場合である:まず、自分で --style を指定せずに voice を再度実行する(デフォルトのスタイルは通過することがわかっている)。次に、その1行だけをより平易な表現に書き換えて、voice を再度実行する。拒否された変更していない行を再送してはならず、1行に2回以上の書き換えを費やしてはならない。その行を削除し、キャプションにステップを任せる。

4. プレビュー、レンダリング、確認

  1. キャラクター:character が設定されている場合、ファイルは /home/user/project/characters/<character>.svg にある。最初に tin-studio check を実行する。存在しないか拒否された場合は、キャラクターなしでレンダリングし、その旨をメッセージで伝える。
  2. フルレンダリングの前に3つのフレームをプレビューする(フック、スクロールの中間、最後のステップ):tin-studio frame WORK/out WORK/p1.png --at 1.5 --bg <backdrop> [--character <svg>]、合計時間の約半分の位置でもう一度、最後にもう一度。以下の点を確認する:キャプションが読めて中央に配置されている、キャラクターの顔が見えていてキャプションを覆っていない、フォンカードが正しい画面を表示している、背景が邪魔になっていない。
  3. レンダリング:tin-studio render WORK/out WORK/<slug>.mp4 --bg <backdrop> [--character <svg>]。実行時間が表示される。次に tin-studio check WORK/<slug>.mp4 で OK が表示されること、tin-studio probe で1080x1920で音声ストリームがあることが示されること。
  4. 40秒より長い場合:1ステップを削除するかラインを短くし、voice を再実行し、再度レンダリングする。

5. 納品

確認済みのMP4を宣言された出力パスにコピーし、それ以外は何もコピーしない。最終メッセージはストーリーボードである:フック、次にステップごとにキャプション、音声ライン、画面に表示されるもの、合計時間、使用した音声、背景、キャラクター、そしてページがサポートしていなかったために弱めた主張があればそれを含める。

ルール

サインアップ、ログイン、フォームへの記入、購入、送信、削除、招待、連絡ボタンの押下を行わないこと。アカウントを一切使用しないこと。ログインが必要なページをキャプチャしないこと。状態を偽装するためにページのDOMを編集しないこと。宣言された出力以外のファイルをプロジェクトチェックアウトに作成しないこと。

関連スキル