ブランドリファレンスパック

ブランドリファレンスパック は何をしますか？

パックはコンテキストであり、コンテンツではありません。 ブランドがすでに持っているもの（オーディエンス、ボイス、ビジュアルランゲージ、トークン、そして各主張の根拠となる画面やコピー）を記録します。これにより、後でフォーマット、スクリプト、デザインの判断をそれに基づいて行うことができます。パックにフック、スクリプト、シリーズは含めません。ソースがそれらを示唆する場合は、そのソースをメモし、決定はオープンのままにしておきます。

位置づけ:

上流（戦略） ──→ このスキル（観測されたブランド） ──→ 下流（フォーマット、スクリプト、リール）
ICP · VOC · ブランドボイス   サーフェスが表示/示すもの     スクリプト→リール、シェーダーラボ

このスキルはICP、顧客の声、ブランドボイスを確立しません。上流の成果物を見つけ、サーフェスをそれらと照合し、それぞれを確認済み / 推測 / 欠落としてマークします（パック§0）。ギャップは上流に戻します。ここでごまかさないでください。

ファイル:

• template.md: パックのセクション構造。
• scripts/: 汎用のキャプチャおよびレンダリングヘルパー。
• apps/<app>/: アプリごとのフォルダ。URL、フローレシピ、癖、プロダクションルール、PDFレイアウトを含みます。
  • 最初に apps/<app>/README.md を読んでください。 新しいアプリの場合は、インテイク時に作成します。

以下のコマンドはこのスキルフォルダ（.claude/skills/brand-reference-pack/）からの相対パスで記述されており、出力パスはコマンドを実行する場所からの相対パスです。プロジェクトルートから実行し、scripts/ の前にスキルパスを付けてください。pack_pdf.py はスキルからの相対パスで設定を解決します。

0. インテイク（AskUserQuestion 1回、新規アプリのみ）

以下を収集します:

• アプリ名
• WebサイトURL
• ソーシャルハンドル
• App Store IDと国（該当する場合はPlayパッケージID）
• アプリの実行方法：シミュレータービルド、TestFlight、ウェブアプリ、エミュレーター
• コードリポジトリのパス（ある場合）
• 既存のブランド、ICP、またはリサーチドキュメント
• コアとなるフロー
• プロダクションで禁止されていること
• 出力フォルダ

回答を apps/<app>/README.md に書き込みます。

1. 基盤チェック（ICP、VOC、ブランドボイス）

各基盤について、上流の成果物（wikiやdocsフォルダ、リサーチデッキ、ブランドブック）を探します。

• ICP: データまたはリサーチに裏付けられた、定義されたターゲット顧客。その確信度とサンプルサイズをメモします。
• 顧客の声: インタビュー、レビュー、サポート、コミュニティからの顧客自身の言葉。ブランド自身のサイトにある推薦文は弱い証拠としてのみカウントされます。これらは厳選されています。
• ブランドボイス: 文書化されたボイスガイドまたはコピールール。

それぞれをパックの§0テーブルに記録します。ステップ2～5を通じて、ライブサーフェスが成果物と一致するかを確認します。不一致は「未決定事項」に移動します。成果物が欠落している場合は、その旨を記載し、それを補完する上流の作業を指定します。サーフェスから基盤をでっち上げないでください。

2. 公開サーフェス（可能な限り並行して）

すべての主張には refs/ 内のファイルが必要です。

Webサイト:

node scripts/site.mjs <url> <brand>/refs/web

これにより、デスクトップとモバイルのフルスクリーンショットとヒーロースクリーンショット、さらに site-styles.json（フォント（フォントホストIDの背後にある実際の名前を含む）、色、画像、リンク、ページテキスト）が保存されます。フルページショットを約4つの部分に分割して読み取ります。

App Store:

node scripts/store.mjs <id> <brand>/refs/store [country]

これにより、掲載情報（公式のポジショニング）、ストアのスクリーンショット、および生のVOC素材としてのレビューが保存されます。

ソーシャル（内蔵ブラウザ内）:

• オプションのCookieは拒否します。
• グリッド：各投稿の画像 src と alt を収集し、キャンバスに描画してページを置き換え、スクリーンショットを撮ります。
• キャプション：各投稿ページの og:description を同一オリジンフェッチします。
• ログアウト状態では、約12投稿しか取得できません。その旨を記載し、リールが重要な場合は、ユーザーにログインまたはエクスポートを依頼します。
• リールを取得できる場合は、そのペース、キャプションスタイル、オーディオをメモします。
• すべてを refs/<platform>/ に書き込みます。

既存のドキュメント: Exploreサブエージェントを使用して、オーディエンス、約束、用語、ボイスルール、主張をファイル引用付きで統合します。

3. コードトークン（リポジトリがある場合）

Exploreサブエージェントを使用して、アプリが使用するフレームワークのテーマを見つけます:

• Flutter ThemeData と色定数
• Tailwind config
• CSS 変数
• iOS アセットカタログ
• Android colors.xml

また、フォント、半径、モーションの慣習、シェーダー、ロゴファイル、注目すべきUIコピーもカバーします。16進数は自分でスポットチェックします。色の役割、タイプスケール（1080×1920にスケーリング）、シェイプ、モーション、キャンバスを使用して tokens.json を書き込みます。

アプリ内コピー: UIコードからすべてのユーザー向け文字列を、ファイル:行とともにそのまま抽出し、ペルソナブレイン（ステップ7）に渡します:

python3 scripts/app_copy.py <src root> <persona>/raw/app-copy/app-copy-<date>.md <ui dirs/files…>

（Flutter: app/lib に pages widgets constants models enums main.dart; 他のスタックの場合は --ext=.tsx など。）ログ、キー、IDはフィルタリングされます。それでも、出力をざっと見て、ブレインに入る前に秘密情報がないか確認します。

4. ライブアプリウォーク

最も豊富な情報源です。ここで製品の実際のビジュアルおよびバーバル文法が現れます。

• 最初に同意を得る: ランニングがプロダクションに書き込むもの（アカウント、アセスメント回答、生成レポート、完了）を正確に述べ、同意を得ます。ユーザーはすべてのサインアップとログインを行います。決して認証情報を入力したり、購読したり、AIコーチにメッセージを送信したりしないでください。
• 監視と記録: シミュレーターパネル（mcp__Claude_Code_iOS_Simulator__control attach）をアタッチします。
  • バックグラウンドで xcrun simctl io <UDID> recordVideo --codec=h264 --force <file> を開始します。
  • サインイン中は停止し、その後新しいものを開始します。トリミングが不要になります。
  • pkill -INT -f recordVideo で停止します。
• 座標ではなくアクセシビリティラベルで操作する: UDID=… OUT=<brand>/refs/app scripts/ui.sh tree|shot|label|tap|swipe|hold。
  • 新しい画面ごとに、その見出しにちなんでショットを撮ります。
  • アニメーションとCMSコピーが落ち着いてから撮影します。行がレンダリングされていない場合は「キャプチャされていません」とします。
  • ステージごとにコンタクトシート（PIL、数行）を作成し、各PNGではなくそれを読み取ります。
• アプリのレシピ apps/<app>/README.md に従います。遭遇した新しい癖をそこに追加します。
• オーディオ: シミュレーター録画にはオーディオがありません。アプリに音声やオーディオがある場合は、ユーザーにソースファイルを依頼します。
• その後:
  • スクリーンショットをキャプチャ順に番号を付け直します。
  • refs/app-flow-sheet.jpg を構築します。
  • 録画を圧縮します: scale=540:-2,fps=30,crf 26。

5. パックを書く

template.md を <brand>/README.md に埋め込みます。

• 見たものだけを引用します。
• サーフェス間で不一致がある場合、最新のライブサーフェスが作業用のデフォルトとなり、不一致は「未決定事項」に移動します。
• §0はステップ1から来ます。

6. 検証

新しいサブエージェントに、あなたの結論ではなく、READMEと refs/ フォルダを渡します。引用されたすべての行、16進数、主張をファイルと照合し、ソースのないものをリストアップするように依頼します。ハンドバックの前に各項目を修正またはマークします。

7. 出力

• PDF: apps/<app>/pdf.json を書き込みます（GetAheadのものをコピー: カバー、フォント、アクセント、tokens.json を指すパレットグループ、見本行、スクリーンショットページ）。次に以下を実行します:

  python3 scripts/pack_pdf.py apps/<app>/pdf.json
  

  結果を pdftoppm -r 40 のコンタクトシートとして確認します。
• ドキュメント: プロジェクトにwikiやdocsがある場合は、パックを独自の規則に従ってそこに保存します（ページ、インデックス、ログ、それが置き換えるページの矛盾フラグ）。
• ペルソナブレイン: プロジェクトにペルソナブレインがある場合（例: persona/、スクリプト生成が話すブランド＝人ブレイン）、アプリウォークのキャプチャをその raw/app-run-<date>/ にコピーし、アプリ内コピーを raw/app-copy/ にコピーします（ユーザーの同意を得て: raw/ はユーザーのものです）。その後、ブレイン自身のインゲストワークフロー（その CLAUDE.md）を実行します: ソースページ、コンセプトページ、アプリの行をそのまま使用したカード再構築。パックはブランドの見た目を記録し、ブレインはその話し方を記録します。スクリプトはブレインを利用します。
• 送信: PDFとREADMEをSendUserFileで送信します。
• 報告:
  • プロダクションに書き込まれたもの
  • キャプチャされなかったもの
  • 基盤のステータス
  • 未決定事項