brand-intake:本物のトークンから、brand.json へ
動画は製品のように見える必要があるため、トークンは製品から取得され、決して好みから取得されません。ソースの優先順位に従い、最初に値を生成できたソースで停止し、各値の出典元を記録します。
- ユーザーのリポジトリ(最善:正確なトークン、実際のフォント名、実際のロゴファイル)。
- ライブURL(計算済みスタイル、メタタグ、ヘッダーSVG)。
- ユーザーが提供するスクリーンショット(ピクセルサンプリング)。
- 不足しているものがあればユーザーに確認。決して推測しないでください。
出力(パスは launch-video/ からの相対パス):films/<slug>/brand.json、films/<slug>/BRAND-SOURCES.md、およびロゴファイルはそのまま public/films/<slug>/brand/ にコピー(シーンが staticFile() で読み込めるようにするため)。
抽出レシピ:references/sources.md。
フィールドマッピング、フォントフォールバック、コントラスト計算:references/brand-json.md。
手順
- プロダクトルートを見つける。
launch-video/がプロダクトリポジトリ内にある場合、リポジトリルートは1階層上です。そうでない場合は、URLとスクリーンショットを要求します。スタックをメモします:package.jsonの依存関係(tailwindcssバージョン、next、@fontsource/*、shadcn)。 - リポジトリから色を取得。 優先順位:CSS内のTailwind v4
@theme変数、Tailwind v3tailwind.config.{js,ts,cjs,mjs}のtheme.extend.colors、globals.css内のshadcnトークン(--background、--foreground、--primary、--muted、--card、--accent)、その他の:rootカスタムプロパティ。HSL/OKLCH/RGBを6桁の16進数に変換します。マーケティングサイトが使用するテーマ(ダークまたはライト)を使用し、両方を混在させないでください。 - リポジトリからフォントを取得。
next/font/googleまたはnext/font/localのインポート、@fontsource*の依存関係、@font-face、body/html/h1のfont-family、TailwindfontFamily。実際に使用されているファミリー名とウェイトを記録します。 - リポジトリからロゴを取得。 最初にSVGを探します:
public/logo*.svg、public/*mark*.svg、app/icon.svg、public/favicon.svg、src/assets/*logo*、src/components/*Logo*(インラインJSX SVG:<svg>を抽出)、次にPNG ≥ 512 px(apple-touch-icon.pngは180 px:マーク用の最終手段。ワードマークには使用しないでください)。変更せずにpublic/films/<slug>/brand/にコピーします。 - 角丸とテーマ。
--radiusまたはTailwindborderRadius;テーマ:背景の相対輝度 < 0.2 の場合はダーク。 - ライブURLからギャップを埋める(
references/sources.md§ ライブURL):theme-color meta、og:image、link rel=icon、ヘッダーのインラインSVG、body、プライマリボタン、h1の計算済みスタイル。 - スクリーンショットからギャップを埋める: 指定されたポイント(ページ背景、本文テキスト、プライマリボタン、カード)のピクセルをサンプリングします。ピクセル座標を BRAND-SOURCES.md に記述します。
- 名前、タグライン、URL:
package.jsonのname/description、サイトの<title>、ヒーローのh1、og:description、READMEの最初の行から取得します。ユーザー自身の言葉を使用し、ここで新しいタグラインを作成しないでください(ストーリーがコピーを担当します)。 - 出荷またはロードできないフォントを、役割に応じて出荷可能なOFLフォントにマッピング(brand-json.md § フォント)し、その旨を明記します。
- コントラストチェック(brand-json.md § コントラスト):背景上のfgは ≥ 4.5:1 必須(目標7:1)、背景上のアクセントは ≥ 3:1。数値を記述します。アクセントが基準を満たさない場合→形状にはそのまま使用し、その上のテキストには
fgを選択します。 brand.jsonを書き込み、次にschemas/brand.schema.jsonが存在する場合は検証します:npx -y -p ajv-cli@5 -p ajv-formats ajv validate --spec=draft2020 -c ajv-formats -s schemas/brand.schema.json -d films/<slug>/brand.jsonBRAND-SOURCES.mdを書き込み:値ごとに1行→出典元(ファイル:行、URL + セレクタ、またはスクリーンショット + x,y)。- ユーザーに 6行のサマリー(名前、テーマ、6色見本(16進数)、フォント、ロゴファイル、マッピングまたは確認したもの)を表示します。
ハードストップ(パイプラインを続行しない)
| 状況 | 対応 | 禁止事項 |
|---|---|---|
| リポジトリ、サイト、スクリーンショットのいずれにもロゴファイルがない | 「ロゴをSVG(推奨)または背景透過の512 px以上のPNGで送ってください」と依頼する | ロゴを描画、トレース、生成、または近似する |
| ロゴが小さなファビコンとしてのみ存在する | より大きなファイルを依頼する | 32 pxのファビコンをヒーローマークにアップスケールする |
| 色が取得できない(リポジトリにアクセス不可、サイトがブロックされている、スクリーンショットがない) | URLまたは2~3枚のスクリーンショット、あるいは16進数カラーコードを依頼する | 「素敵な」色やデフォルトパレットを選択する |
| パレットの競合(アプリ vs マーケティング) | 動画がどちらを使用すべきか確認し、デフォルトでマーケティングサイトを使用する | それらをブレンドする |
| ロゴが存在しないためユーザーがテキストワードマークを希望する | 明示的な「はい」がある場合のみ許可:表示フォントのプロダクト名、fg色 | それをロゴとして提示する |
ルール
- ロゴファイルはバイト単位でコピーしてください。ユーザーから依頼がない限り、ロゴの色を変更したり、トリミングしたり、「クリーンアップ」したりしないでください。
- ユーザーの確認なしに、他の会社のロゴやユーザーの顧客のロゴを使用しないでください。
- リポジトリへの再配布を禁止するライセンスのソース(Fontshare FFLフェースであるSatoshiやGeneral Sans、Apple SF Proなど)からフォントを取得しないでください:それらをマッピングします(brand-json.md § フォント)。
brand.jsonは、公開プロダクト名とURL以外の機密情報や個人データを保持しません。- 再実行時は、ソースが変更されたフィールドのみ上書きします。ユーザーが手動で編集したフィールドは保持します(最初に差分を確認)。
- 下流のスキルは
brand.jsonのみを読み取ります。シーン内にブランドの16進数値をハードコードしないでください[craft/06#grade-discipline]。