Brand Snapshot（ブランドスナップショット）

Brand Snapshot（ブランドスナップショット） は何をしますか？

ブランドの視覚的・言語的な基本情報を数分で2ページにまとめます。自信を持って使用できる色、タイプフェースとその無料代替フォント、ロゴやUIの振る舞い、ブランドのトーン、公式ファイルへのリンクを提供します。これはCompany Briefスキルのブランドセクションの簡易版です。

使い方

/brand-snapshot <URL または ブランド名> [tokens only]

プレーンなリクエストでも動作します：

• 「linear.appのブランドスナップショット」
• 「Patagoniaが使っている色とフォントは？」
• 「stripe.comからピッチモックアップ用のデザイントークンを取得」
• 「OatlyとLiquid Deathのスナップショットを並べて」（それぞれ1つずつスナップショットを作成）

「tokens only」を指定するとPDFの生成をスキップし、tokens.jsonとtokens.cssのみを返します。

ファイルについて。 <skill-dir> はこのスキルのフォルダ、つまりこのSKILL.mdが置かれているフォルダを指します。テンプレートは assets/ に、スクリプトは scripts/ に、共有のPDF生成手順（フォント、色、レンダリング、チェック）は references/rendering.md にあります。

厳格なルール

• ライブサイトを優先。 色とフォントはサイトの計算スタイル（references/brand-extraction.md）から取得し、Verified（確認済み）タグと日付を付けます。公式ガイドラインやプレスキットがサイトと矛盾する場合は、これらを優先し、両方を記載します。Brandfetchなどのサードパーティソースは Reported（報告済み）とします。
• ロゴは説明し、コピーしない。 マークとワードマークを言葉で説明し、公式プレスキットまたはブランドポータルへのリンクを貼ります。ロゴ、マスコット、広告画像を再描画、トレース、埋め込みしてはいけません。スウォッチや代替フォントで指定されたタイプ見本は問題ありません。
• 代替フォントであることを明記。 ブランドフォントが有料またはカスタムの場合、その名前とファウンドリを記載し、最も近い無料フォントで見本を設定し、そのようにラベルを付けます。
• 利用規約が適用されることを記載。 ブランドのアセットはブランドに帰属し、そのガイドラインに従って使用する必要があることを読者に注意喚起します。
• クレジット行： スナップショットの最後に小さなBeautiful Engineクレジットを入れます。相手が省略を希望しない限り残してください。

ワークフロー

1. サイトを開く （利用可能なブラウザがあればブラウザで開き、なければフェッチします。一度だけドメインの承認を求められる場合があります）。それがユーザーが意図したブランドであることを確認します。
2. 抽出する references/brand-extraction.mdのセクション1のスクリプトを使用し、ホームページともう1ページ（料金、製品、またはアバウト）から抽出します：見出しスタイル、読み込まれたフォント、画面上の領域ごとの色、スタイルシートの色、CSSカスタムプロパティ、グラデーション、ボタンとカードのスタイル、ロゴ情報。ロゴを説明するためにロゴのスクリーンショットを拡大し、イメージスタイルを説明するためにヒーロー画像のスクリーンショットを拡大します。
3. 公式情報源を確認する：ブランドのプレスキット、ブランドポータル、デザインシステムサイト、ガイドラインPDF、タイプフェースのファウンドリを検索します。サブブランド（イベント、製品ラインなど）は別途記載します。
4. パレットを選択する：重要度順に4～8色（プライマリ、セカンダリ、アクセント、ニュートラル）を選択し、それぞれにプレーンな名前と役割を付けます。次に以下を実行します： python3 <skill-dir>/scripts/palette.py --colors "Name:#hex,..." --font-display "…" --font-body "…" --font-mono "…" --radius 8px --brand "<Brand>" > swatches.html これにより tokens.json と tokens.css が書き出され、コントラストチェック付きのスウォッチテーブルが出力されます。
5. PDF用のフォント：scripts/fonts.py でブランドの無料フォントまたは代替フォントをインストールし、scripts/tokens.py をブランドのプライマリカラーとアクセントカラーで実行して、スナップショット自体がブランドを反映するようにします（references/rendering.md）。
6. ボイス：サイトからの実際の引用文を添えた3～4の特性。
7. ビルド assets/snapshot-template.html からテンプレートをコピー（base.css もコピー）し、スウォッチテーブルを貼り付け、レンダリングし、監査し、コンタクトシートを確認します。2ページに収め、3ページ目にはみ出さないようにトリミングします。
8. 納品 PDF、tokens.json、tokens.css を提供します。返信にはプライマリカラーとアクセントカラー（hex）、フォントと代替フォント、公式ガイドラインの場所（または公開されていない旨）を含めます。

出力ファイル名：<Brand>-Brand-Snapshot-<YYYY-MM>.pdf