プロジェクト設定
目標: クローンしただけの状態から、その人のスタイルで動画を編集するパイプラインに変えること。彼/彼女が何を好むのかを理解し、サービスを接続し、将来の動画のフレームを表示します。ユーザーの言語で、簡潔かつ人間らしく話します。
プロジェクトには独自のスタイルはありません。 動画の見た目に関するすべて(パレット、フォント、字幕、カード、ステッカー、ポスター、テンポ、パンチイン、グレード、サウンド)は、ユーザーが選択するか、ユーザーのリファレンスから取得します。あなたは「標準的」や「人気」なオプションを提案したり、自分の好みを代入したり、プロジェクトに既にあるもの(harness.config.json のプレースホルダーやデモはスタイルではなく、空の領域です)を何も使いません。
インタビューのルール
- 1ブロック=1メッセージ。ブロックを絶対に結合しないでください。 2つのブロックを1つの
AskUserQuestionフォームに入れないでください。質問をまとめると、人は最初の選択肢でスルーしてしまいます。ブロック4(サービス)、6(パレット)、7(フォント)、8(編集スタイル)は、複数のメッセージにわたる会話です。 - 味覚に関する「(推奨)」は禁止。 このマークは、ブロック3(文字起こし方法)のような純粋に技術的な選択にのみ許可されます。色、フォント、スタイル、サービス、およびユーザーに関する質問にはありません。各オプションが何をもたらすかを中立的に説明してください。
- 選択肢はユーザーの回答とリファレンスから提供します。 回答もリファレンスもない場合は、その人のテーマとトーンに合った、明らかに異なる2〜3のオプションを集め、フレームで表示します。選択はユーザーに委ねます。
- 説明ではなく表示: パレット、フォント、編集スタイルは、
video/scripts/variants.pyを使用して実際のフレームで表示します。 - ブロックをスキップする(「スキップ」)のは、ユーザーが明示的に言った場合のみです。その場合、プロファイルには中立的なプレースホルダーが残り、その旨を明示します:「後で設定できます。「字幕を設定して」と言ってください。」
- ユーザーについて推測しないでください。 ブランド、名前、テーマ、オーディエンス、トーンは、ユーザーの回答からのみ取得します。アカウントのメール、システムのユーザー名、フォルダ名、リポジトリのURLからは取得しません。リポジトリリンクのアカウント名はテンプレート作成者であり、ユーザーではありません。
- インタビューで技術的な話はしないでください: セーフゾーン、クリップの切り落とし防止、2パス loudnorm、カット編集でのパンチインの仕組みなどは、味覚ではなく、パイプラインの動作方法です(
CLAUDE.md、「メカニクス」)。 - キーは決してチャットを経由して渡さないでください。 ユーザーは自分で
video/.envに記入します。あなたはdoctor.shでアクセスを確認しますが、何も表示しません。キーがチャットで送られてきたら、使用せず、無効にして新しいものを作成するようアドバイスしてください。 brew/pipでインストールするものやサイズが大きいものは、最初に「何とサイズ」を説明し、その後「インストールしますか?」と尋ねます。
ステップ 0. 挨拶(1メッセージ)
2〜3行:これは Claude Code + Remotion を使った縦型「トーキングヘッド」動画編集プロジェクトです。プロジェクトに独自のスタイルはありません。これからあなたに合わせてすべてを設定します:自分自身について教えてください。好きなリールを約10個送ってください。色、フォント、編集スタイルを選択します(私はフレームでオプションを表示します)。必要なサービスを接続します。すぐにステップ1に進みます。
ステップ 1. 環境
cd video && ( [ -d node_modules ] || npm install ) && bash scripts/doctor.sh
結果を短いテーブルで表示します。各 MISSING に対して、出力からのコマンドを提案し、同意を得て実行します:
- Remotion スキル(必須):プロジェクトルートから
npx -y skills add remotion-dev/skills --skill '*' --agent claude-code -yを実行。 ffmpeg、node、python3、yt-dlp(リファレンス用)—brew install …(macOS);Linux はパッケージマネージャー;Windows は WSL。- whisper / rembg — ステップ3の回答に基づいて必要な場合。
brew がない場合:https://brew.sh へのリンクを提供し、待機します(インストールはパスワードを要求します。ユーザーが自身で行います)。
ステップ 2. インタビュー
ブロック 1 — あなたは誰ですか
ブランド / チャンネル名;誰が画面に映るか;動画の内容;プラットフォームとハンドル(Reels、TikTok、Shorts、Telegram…);オーディエンス;トーン;動画の言語;最後のコールトゥアクション。
自由に質問してください。自分の言葉で、1つのメッセージで答えてもらって構いません。オプションを提供する場合(トーンやコールトゥアクションなど)は、中立的で、すべての人に同じであり、テーマやニッチを当てはめないようにします。
ブロック 2 — リファレンス(約10個のリール)
依頼:「編集が気に入っているリールのリンクを約10個送ってください — Instagram、TikTok、または Shorts。できれば、あなたが似せたいと思うものを。それらから、あなたの好みを理解します:テンポ、字幕、グラフィック、色、フォント。」 5個未満の場合は、さらに依頼します:3つの動画からは共通の好みを抽出できません。リファレンスがない場合、ブロック6〜8でより詳細に質問する必要があることを説明します。
リンクを受け取ったら — すぐにバックグラウンドで解析を開始し、ブロック3に進みます:
cd video && python3 scripts/refs.py "URL1" "URL2" … > ../takes/refs.log 2>&1 # run_in_background
スクリプトは takes/refs/ にダウンロードし(gitには含まれません)、以下を測定します:長さ、カットの頻度、フックでのカット、音量、話す速度、最初のフレーズ、鮮やかな色(palette.png);NN-sheet.jpg(動画あたり24フレーム)と NN-hook.jpg(最初の3秒)を生成します。一部のリンクがログイン要求で FAILED になった場合:SERVICES.md → 「Instagram」のオプション:COOKIES_FROM=chrome で再実行(明示的な「はい」があった場合のみ)、またはユーザーが自分でダウンロードして mp4 を takes/refs/ に配置してもらいます(その場合は、リンクの代わりにパスを渡します)。
ブロック 3 — 音声文字起こし
- whisper.cpp ローカル(Mac 推奨): 無料、オフライン;
brew install whisper-cpp+ large-v3-turbo モデル 1.6 GB。 - ElevenLabs Scribe: 有料(クレジット)、インストール不要、どのシステムでも動作;キーが必要(ブロック4)。
ブロック 4 — サービス(サービスごとに1メッセージ)
「何を接続しますか?」と1つの質問で尋ねないでください。サービスを1つずつ順に進めてください — サービスごとに1メッセージ:それが編集で何をもたらすか(1〜2行で例を含めて)、費用、ユーザーに必要なもの、所要時間。質問:「今接続する / 後で / 不要」。
| サービス | 編集での利点 | アクセス | 時間 |
|---|---|---|---|
| ElevenLabs | Scribe での文字起こし;あなたの好みに合わせたサウンドアクセント;ナレーション | APIキー | ~3分 |
| Higgsfield | 短い動画挿入(Bロール)、表示できるものについて話すとき | ブラウザ経由のログイン | ~2分 + 再起動後 |
| 21st.dev | 新しいグラフィックのベースとなる、すぐに使える React コンポーネント | APIキー | ~3分 |
| Buffer | Reels / TikTok / Shorts への下書き投稿 | ブラウザ経由のログイン + Buffer 内のチャンネル | ~5分 |
順序:ElevenLabs → Higgsfield → 21st.dev → Buffer。ブロック3で Scribe が選択された場合、ElevenLabs は必須です。そのように伝えてください。「後で」や「不要」は正常な回答です。
「今」と回答された各サービスについて、SERVICES.md のセクションに従って手順を進めます:リンクと手順を自分の言葉で説明し、「準備完了」を待ち、自分の部分を設定し、確認します:
- キー(ElevenLabs、21st.dev):
video/.envがない場合 —cp video/.env.example video/.env;ユーザーが自分でキーを記入します(open -e video/.env)。確認 —bash video/scripts/doctor.sh、accessセクション。拒否された場合 — おそらく完全にコピーされていないか、必要な権限がありません。新しいものを作成するように依頼してください。 - 21st.dev: キー確認後、サーバーをローカルに追加します(キーは
.envからシェル内で直接読み取られます):cd video && set -a && . ./.env && set +a && cd .. && claude mcp add --transport http 21st https://21st.dev/api/mcp --header "x-api-key: $TWENTYFIRST_API_KEY" --scope localclaudeが PATH にない場合 — ユーザーにターミナルでこのコマンドを実行してもらいます。 - OAuth(Higgsfield、Buffer、オプションで ElevenLabs MCP): 選択されたサーバーをルートの
.mcp.jsonに追加します:ブラウザ経由のログイン — Claude Code の再起動後({ "mcpServers": { "higgsfield": { "type": "http", "url": "https://mcp.higgsfield.ai/mcp" }, "buffer": { "type": "http", "url": "https://mcp.buffer.com/mcp" }, "elevenlabs": { "type": "http", "url": "https://api.elevenlabs.io/v1/mcp" } } }/mcp→ サーバー → Authenticate):今すぐ伝え、ステップ5でも忘れずに伝えます。Buffer の場合は、事前に Buffer 自体でチャンネルを接続するよう依頼します(Instagram — プロフェッショナルアカウント)。
接続されたものを integrations に記録します。サービスで15分以上詰まった場合 — 延期を提案します:「後で接続します — 「Bufferを接続して」と言ってください。」
ブロック 5 — あなたの好み(リファレンスから)
解析が終了するのを待ち(ps -axo command | grep "[r]efs.py")、takes/refs/refs.json を読み込み、各 NN-hook.jpg、NN-sheet.jpg、palette.png を確認します。各動画について、数字だけでは見えない点をメモします:字幕(位置、サイズ、大文字小文字、太さ、色、単語の強調、背景)、グラフィック(カードとその種類、ステッカー、スクリーンショット、Bロール、絵文字)、ショットのサイズとパンチイン、素の顔の割合、グラフィックのパレット、フォント、フック(テキストポスター、質問、アクション)、エンディング。
「味覚プロファイル」にまとめます:少なくとも半分の動画に存在する5〜7の傾向を、数字(refs.py からの中央値)とともに示します。1つのメッセージで表示し、質問します:「これはあなたの好みに合っていますか?このうちどれを自分の動画に取り入れたいですか、どれを取り入れたくないですか?」 承認されたものは、ブロック6〜8での提案になります。そこで、他のオプションと一緒にフレームで表示し、黙って適用することはありません。設定に反映できないもの(絵文字ステッカー、グリーンスクリーンなど)は、プロファイルに要望として記録します。
ブロック 6 — パレット(2〜3メッセージ)
6.1 質問 — 1メッセージで、自由形式で:
- ブランドカラー(ロゴ、ウェブサイト、チャンネルのデザイン、サムネイル)はありますか?hex、サイトへのリンクを送るか、ロゴ / スクリーンショットを
takes/brand/に配置してください。 - 動画内で色で強調すべきものは何ですか:数字、キーワード、コールトゥアクション?
- どのような印象を与えたいですか:厳格、温かみ、鮮やか、落ち着いた?
- 絶対に使いたくない色はありますか?
画像が送られてきた場合 — 主要な色を抽出します:
python3 -c "
from PIL import Image; import sys
im = Image.open(sys.argv[1]).convert('RGB').resize((200, 200)).quantize(6)
pal = im.getpalette(); cnt = sorted(im.getcolors(), reverse=True)
print([('#%02X%02X%02X' % tuple(pal[i*3:i*3+3]), round(100*n/40000)) for n, i in cnt])
" takes/brand/logo.png
サイトへのリンクの場合 — 開いて主要な色(ロゴ、ボタン、CSS変数)を見つけます。
6.2 候補 — 2〜3のパレット。4つの役割に従います:dark(プレート、画面全体)、light(テキスト)、accent(強調)、pain(「これはダメ」なカード。必要な場合):
- リファレンスから —
refs.jsonのrecurring_coloursとpalette.png;ストーリーボードと照らし合わせて、その色がグラフィックやテキストのものであり、壁、被写体、肌の色でないことを確認します。 - ブランドカラーがあれば、それから。
- 6.1 の回答から — 印象と強調すべきもの。
可読性(テクニック、味覚ではない):プレート上およびフッテージ上のテキストは読みやすくなければなりません。各候補のコントラストを確認します(light on dark ≥ 7:1、accent on dark ≥ 3:1)。候補が基準を満たさない場合は、その旨を伝え、基準を満たす最も近いものを提案します:
python3 -c "
import sys
def L(h):
c=[int(h[i:i+2],16)/255 for i in (1,3,5)]
c=[x/12.92 if x<=0.03928 else ((x+0.055)/1.055)**2.4 for x in c]
return 0.2126*c[0]+0.7152*c[1]+0.0722*c[2]
a,b=sorted([L(sys.argv[1]),L(sys.argv[2])]); print(round((b+0.05)/(a+0.05),1))
" '#FFFFFF' '#141414'
6.3 フレームで表示:
cd video && python3 scripts/variants.py out/palette-options.png 70,368 \
'{"label":"A","colors":{"dark":"#…","light":"#…","accent":"#…","pain":"#…"}}' \
'{"label":"B","colors":{…}}' '{"label":"C","colors":{…}}'
シートを表示し(SendUserFile)、ラベルを付けます:「A — あなたのリファレンスから、B — ロゴから、C — 印象から」。修正(「Aだけどアクセントを暗く」)— 再度実行。選択されたものを colors に記録します。
ブロック 7 — フォント(2〜3メッセージ)
2つのフォント:テキスト(字幕とカード、ウェイト 500 / 600 / 700)とポスター(動画冒頭のタイトル。使用する場合)。両方とも、動画の言語のアルファベットをサポートする必要があります。
7.1 質問 — 1メッセージで:ブランドフォントはありますか(名前または takes/brand/ 内のファイル);どんな性格 — 厳格、友好的、テクノロジー系、エディトリアル;字幕は軽いか濃いか。
ブロック2があった場合 — ストーリーボードで字幕とタイトルを確認し、見たものを伝えます:タイプ(幾何学的グロテスク、ネオグロテスク、細字、丸み、セリフ)、太さ、大文字小文字。画像から正確な名前を推測しないでください — 似たようなフリーフォントを選びます。
7.2 候補 — 2〜3の「テキスト + ポスター」のペアを、@fontsource から、必要なアルファベットを持ち、性格が異なり、彼/彼女の回答とリファレンスに合うものを選びます。ロシア語の場合はキリル文字を確認します;Bebas Neue はラテン文字のみ。購入したブランドフォントの場合 — video/src/fonts/ に置き + 手動で @font-face を font-display: block で追加;リポジトリが公開されている場合はライセンスについて注意します。
7.3 フレームで表示:
cd video && npm i @fontsource/<a> @fontsource/<b> # 候補
ls node_modules/@fontsource/<a>/ | grep -c cyrillic # ru の場合 > 0
ls node_modules/@fontsource/<a>/ | grep -E '^[0-9]+\.css$' # 利用可能なウェイト
grep -m1 font-family node_modules/@fontsource/<a>/400.css # 正確なファミリー名
video/src/index.css に候補のウェイトのインポートを追加します(@import "@fontsource/<a>/600.css"; …)。その後:
python3 scripts/variants.py out/font-options.png 70,368 \
'{"label":"A","fonts":{"text":"…","poster":"…","posterWeight":700}}' '{"label":"B","fonts":{…}}'
表示し、ラベルを付けます。選択後、index.css には選択されたインポートのみを残し、不要なパッケージを削除します(npm un …)。
ブロック 8 — 編集スタイル(トピックごとに1メッセージ)
4つのトピック。それぞれを別々のメッセージで:質問、リファレンスで見られるもの(「10個中7個で字幕は中央、大きい」)、その後 variants.py を使用して2〜3のオプションをフレームで表示します(キー style.*、フレーム 70,270,368)。「推奨」はなし。
8.1 字幕 (style.captions):
- 位置:
cycle— フレーズがフレーム内を移動(左上 → 右上 → 下);rail— 常に下部;center— 中央; - サイズ
size: [通常の単語、強調された単語](px)(≈ 48 小、60 中、76 大); - 太さ
weight(500〜800);大文字小文字case:lower/asis/upper; - 強調
highlight:color(アクセントカラーでキーワード) /size(大きく) /both/none; - 背景
box:true— テキスト行の下にプレート、false— 影。
8.2 グラフィック:
- カード
style.cards:glass(半透明ガラス) /solid(不透明プレート) /none;頻度 —editing-taste.md§3 に言葉で。 - 間のステッカーアイコン
style.stickers:true/false; - 冒頭の頭の後ろのポスタータイトル
style.poster:enabled、大文字小文字case(upper/asis)、小さなサブタイトルkicker。有効な場合 — rembg が必要(動画あたり約30分バックグラウンド、モデル約1 GBを1回); - Bロール(Higgsfield が接続されている場合):必要かどうか、量 —
brand-kit.md§5 に言葉で。
8.3 動きと映像:
- テンポ… [以下、元のコンテンツが途中で切れているため、これ以上翻訳できません。]