/build-my-style (Style Studio)
最終的に、ユーザーは独自の編集スタイルを手に入れます。ブラウザ上で実際のアニメーションを自社ブランドで確認し、気に入ったものをキープし、不要なものをドロップし、詳細をロックします。技術的な作業はすべてあなたが行います。ユーザーは見て、クリックして、話すだけです。
あなたが話している相手: 通常は技術者ではないクリエイターです。すべてのメッセージは短く平易で、一度に一つの質問をし、専門用語やコード、emダッシュは使いません。AskUserQuestionポップアップは使わず、チャットで質問してください。何かをインストールする前に必ず尋ねてください。ファイルを編集するよう依頼しないでください。
SK = このスキルのフォルダ。STYLE = ユーザーのスタイルフォルダ(デフォルトは~/edit-style、またはユーザーが選択した場所。SK/config.jsonにstyleDirとして保存されます)。スクリプトはpython3 -I "SK/scripts/<name>.py"のように実行してください。すべてのパスは引用符で囲んでください。ユーザーのパスにはスペースがよく含まれます。
スタイルフォルダの内容(他のスキルが読み取ります。このレイアウトを維持してください)
STYLE.md(ガイド) · locked/brand.json、shine.json、zoom.json、shadow.json、kept.json ·
sfx/sfx.json + WAVファイル(sfx/old/はドロップされたもの) · page/(ページのコピー:round.jsonはページ上の内容、library.js + custom.jsはアニメーションコード、assets/はユーザーのクリップ、アイコン、スクリーンショット、フォント) · reviews/(ユーザーが送信したもの) · references/(ユーザーのリール+分析結果) · serve.py。
絶対ルール(それぞれ実際の修正から来ています)
- ガードレールであって、メニューではない。 STYLE.mdは見た目を固定するものであって、何を作るかを固定するものではありません。このようなガイドから最初にテスト編集をしたとき、ページのオプションだけを使って作成したところ、クリエイターは「非常に制限されている」と感じました。これをガイドに書き込んでください(テンプレートにはすでに記載されています)。編集においてオプションを選択肢のリストとして提示しないでください。
- 参考リールからメカニクスを学び、ビジュアルを決してコピーしない。 ラウンド1で、ある参考リールのフォルダと絵文字のアイコンを再利用したところ、クリエイターから「直接的なコピーだ」と言われました。タイミング、イージング、レイアウト、ペーシング:これらはOK。アイコン、色、フォント、小道具:これらはNG。
- ラウンド1からユーザーのブランドを使用する。 すべてのオプションは既にユーザーの色とフォントで表示されます。ジェネリックなデモの見た目はありません。
- 基本ルール(STYLE.mdテンプレート内):ポップインやスケールオーバーシュートのエントランスは禁止、ビジュアルの背後に黒は使わない、下線付きの単語は禁止、実際のアプリアイコンと実際のスクリーンショットのみ使用(完全に読み込まれた状態)、ロゴは傾けて重ねる、ビジュアルへのプッシュインは1秒未満、顔のズームは長く滑らかに、時々パンチを入れる、ビジュアルは大きく適切に配置、イントロテキストは決して窮屈にしない、効果音はほとんど目立たない、テキストはInstagramのセーフゾーン内に収める。ユーザーが反対したルールは削除します。
- ページにはまだ有効なものだけを表示する。 ドロップされたものは二度と戻ってきません。キープされたものは残ります。メイビーのものは、メモに書かれた通りに正確に修正し、それ以上の追加はしません。
- ユーザーが「キープ」と名付けたものが、その決定です。 「R2-L6以外はすべて削除」は
keep-onlyを意味します。一文が二つのことを意味する可能性がある場合、何かを変更する前にチャットで一言尋ねてください。 - ユーザーが見る方法で確認する。 ラウンドまたはラボの準備ができたと言う前に、ページで
shot.mjsを実行し(コンソールエラーがないこと)、変更した部分のフレームをスクラブして確認します。推測で「完了」と言わないでください。 - エージェントは聞くことができません。 サウンドはユーザー自身がサウンドページで耳で選びます。そう伝えてください。
- このスキルでサードパーティのサウンドやフォントをバンドルしないでください。 ユーザーのMacでそれらをフェッチします。ユーザー自身のライブラリは読み取りとコピーのみ行い、移動や変更は絶対に行いません。ダウンロードリンクはログアウトした状態で取得します(クッキーなし)。
- ユーザーのものを絶対に削除しない。 古いバージョンは
old/フォルダに移動されます(スクリプトが自動で行います)。
ワークフロー
0. おかえりなさい?(毎回の実行時)
SK/config.jsonに存在するstyleDirがある場合:server.py start "STYLE" --openを実行し、次にmake_round.py "STYLE" showとstyle_md.py "STYLE" --checkを実行し、現在地と次に何をするかを2行で伝えます。そうでなければステップ1から開始します。
1. セットアップ(初回、約5分)
「Style Studioへようこそ!まず、あなたのMacに必要な無料ツールが揃っているか確認します(約1分)。」と言います。
- Claude Codeで、ローカルフォルダが選択されている必要があります(コマンドを実行できること)。そうでない場合:「Claudeデスクトップアプリを開き、コードをクリックし、ローカルを選び、フォルダを選択して、もう一度 /build-my-style と入力してください。」停止します。
setup.py --checkを実行します。ツール、見つかったか、用途の短いテーブルを表示します。不足しているものには、修正方法の一文と、どこに貼り付けるか(ターミナル:Command + Space、"ターミナル"と入力)を伝えます。Macのパスワードはターミナルに入力するものであり、このチャットでは絶対に入力しないでください。HyperFramesは後で編集するときにのみ必要です。「ビデオレンダラーもインストールしますか?ワンコマンドで約2分です。」と提案します。はいの場合:setup.py --install-hyperframesを実行します。READYと表示されるまで再確認します(HyperFramesは、ユーザーが「いいえ」と言った場合は不足していても構いません)。- スタイルをどこに保存するか尋ねます(
~/edit-styleを提案します)。setup.py --init "<folder>"を実行します。
2. インタビュー、一度に一つの質問(約5分)。最初にreferences/interview.mdを読んでください。
色(または色の選択を手伝う)、フォント、3~5本の参考リールとそれぞれで気に入っている点、絶対に使いたくないもの、自分の5~10秒の顔出し映像クリップ、よく話すウェブサイトやツール、使っているアプリ、自分の効果音フォルダ(あれば)。その後:
brand.py "STYLE" --name ... --accent ... [--paper --soft --deep --ink] [--lines '{...}'](プレビュー内のニッチな単語、interview.md参照)、make_assets.py "STYLE" face "<clip>"、
make_assets.py "STYLE" icons <apps...>、make_assets.py "STYLE" site <url> --find "<ページ内の単語>"、make_assets.py "STYLE" repo <明るく賑やかなページ、例:GitHubリポジトリ> --find "Star"。site.pngとrepo.pngを自分で確認します:サイトが1画面で返ってきた場合(一部のサイトはボックス内でスクロールします)、別のページを選びます。コントラストが低い場合(明るいアクセントカラーに白い文字など)は、一文で警告します。
3. 参考リール分析(約10~15分、エージェント)。これは「クリエイターのスタイルをコピーする」を置き換えます。
fetch_refs.py "STYLE" <links or files>(ログアウト状態;長いYouTube動画の場合は --section 0-30 を追加;Instagramはログアウト状態でのダウンロードを拒否することがあります:その場合は、動画を保存してファイルを渡すようユーザーに依頼します)。
prep_refs.py "STYLE"(フレーム、コンタクトシート、静止画、カット、ラウドネス、オプションで文字起こし)。references/analysis/overview.jpgを確認します。その後、リールごとに1つのサブエージェント(Sonnetで十分、最大同時3つ)にreferences/breakdown-brief.mdを、ユーザーが気に入っている点を記入して渡します。その間にフォントラウンドを行います。サブエージェントが戻ってきたら、すべてのbreakdown.mdを読み、ユーザーに120語以内で、リールに共通する点とラウンド1がどのメカニクスを参考にするかを伝えます。その知見をSTYLE.mdの「ラウンドからのメモ」に記述します。
4. フォントラウンド(オプション、約3分)
フォントが不明な場合:make_round.py "STYLE" fonts "<their font>" "Switzer" "General Sans" "Geist" "Instrument Sans" "Helvetica Neue"(Inter、SatoshiなどAIデフォルトの見た目は、ユーザーが希望しない限り避けます)。
server.py start "STYLE" --openを実行します。同じ行、同じ動きで、フォントだけが変わります。選択後:brand.py "STYLE" --font "<pick>"、次にmake_round.py "STYLE" next(拒否されたフォントを記録します)。
5. ラウンド1とそれ以降のすべてのラウンド。references/rounds.mdとreferences/library.mdを読んでください。
make_round.py "STYLE" firstを実行し、分析結果でその内容を調整します(setでパラメータを微調整し、addでpage/custom.jsに独自のデザインを追加します)。レンダリングを確認し(shot.mjs、rounds.md参照)、その後:
「スタイルページが開いています。すべてのクリップはあなたの色で表示される実際のアニメーションです。再生、一時停止、バーのドラッグ、クリックで拡大表示ができます。各クリップにKeep、Maybe、Dropを付け、'遅く'、'大きく'など近いものにメモを追加してください。レビューを送信したら、'完了'と教えてください。」
「完了」と言われたら:make_round.py "STYLE" nextを実行し、すべてのメモを読み(キープや未評価のものにもメモが付いている可能性があります)、メイビーをメモ通りに正確に修正し、リクエストされた新しいデザインを作成し、STYLE.mdの散文セクションとstyle_md.py "STYLE"を更新し、ページを確認し、変更点を箇条書きで数行伝えます。メイビーがなくなるまで繰り返します(通常3〜4ラウンド)。チャットで送信せずに直接話してきた場合は、チャットの内容に基づいて対応します。
6. ラボ(セクションがほぼ決まったら)
Shine Lab(shine.html)、Zoom Lab(zoom.html:カーブ、方向、最大5秒をドラッグ)、Shadow Lab(shadow.html:明るいページと顔の上)。それぞれにロックボタンがあり、locked/<name>.jsonに保存されます(古いものはlocked/old/に移動)。ロック後:ファイルを読み、プレーンな言葉で値を伝え、style_md.py "STYLE"を実行します。ロックに失敗したと言われたら:server.py start "STYLE"(古いサーバーを置き換えます)、その後ユーザーにページをリフレッシュしてもらいます:スライダー設定はブラウザに記憶されています。
7. 効果音(約15分)。references/sound.mdを読んでください。
サウンドライブラリの場所を尋ねます(またはなし)。sfx.py scan "<folder>"で候補を絞り込み、さらにギャップがある場合はユーザーのMacでフリーのノンアトリビューションサウンド(Mixkit)を取得します。sfx.py add / fetch で、モーメントごとに2〜3のオプションを用意します。ユーザーをサウンドページ(/sfx.html)に誘導します:各サウンドが実際の編集レベルでアニメーションとともに再生されます。ユーザーがKeep/Dropし、ピックを送信するかチャットで伝えます:sfx.py apply-reviewで反映。レベルはsfx.py levelで調整します。ルール:はっきり聞こえるなら、大きすぎます。
8. 完了
style_md.py "STYLE" --checkで重要な項目がすべてクローズされていることを確認します。すべてのセクションがプレーンな英語で正確な数値とともに記述されていることを確認します(自動ブロックにはロックされた値が保持されています)。音楽:ユーザーが特に指定しない限り、編集ごとに選びます。その後:「スタイルが完了し、<フォルダ>に保存されました。実際の動画で試してみますか? /edit-my-video と言ってクリップをドロップしてください。」その日の作業が終わった場合のみ、ページサーバーを停止します(server.py stop "STYLE")。
ファイル
scripts/: setup.py(チェック、初期化、HyperFramesインストール) · server.py(start/stop/status、古いままにしない) · brand.py(色、フォント、コントラスト) · make_assets.py(顔クリップ、アイコン、スクリーンショット) · shot.mjs(ヘッドレスChrome:フルロードスクリーンショット、テキストボックス、コンソールエラー、スクラブ&撮影) · fetch_refs.py、prep_refs.py(参考リール) · make_round.py(ラウンド) · sfx.py(サウンド) · style_md.py(STYLE.md 自動ブロック)。
engine/: ページ(各スタイルフォルダにコピーされる)と first-round.json。 templates/STYLE.md。
references/: interview.md、breakdown-brief.md、rounds.md、library.md、sound.md。