ブランドキット
キャンバスフォルダには、あなたが構築したHTMLアートボードであるボードが保持されます。このスキルは同じフォルダに2つ目の種類の行（ボードではなく画像シェイプとして配置される、企業が公開した画像）を追加します。ロゴ、タイプフェイス見本、ストアのスクリーンショット、ソーシャル投稿、広告クリエイティブ、プレス写真などです。
ポイントは列方向の比較です。行はサーフェスであり、アセットタイプではありません。そのため、X上のアバターはInstagram上のアバターの上に、Instagram上のアバターはTikTok上のアバターの上に配置され、他のものと一致しないアバターは、探し回らなくても列の途切れとして視覚的にわかります。
収集を始める前に references/sources.md を読んでください。これはサーフェスごとのプレイブックであり、収集順とコールが記載されています。マニフェストの作成とジェネレータの接続を行うときは references/manifest.md を読んでください。スキーマ、検証スクリプト、gen.pyのルールが含まれています。
生成物
canvases/<slug>/
assets/brand/
manifest.json レコードのソース：行（正規順序）
identity/ social/ stores/ ads/ press/
gen.py マニフェストを読み込み、その行をlayout.jsonに追加
layout.json キャンバスとブランドページが実際にレンダリングするもの
assets/brand/ は、キャンバスがURLを提供する assets/ 内の唯一の部分です。ジェネレータは assets/ 以下の他のすべてをdata: URIとしてボードにインライン化するため、独自のシェイプである必要がある画像はここに配置する必要があります。
7つのステップ
最初にマニフェストを書いてはいけません。 マニフェスト内のすべてのファイルは、すでに検証に合格している必要があります。検証に失敗したファイルは削除され、注釈付きでマニフェストにエントリが残ることはありません。
- 完成したものを見る。 アプリには12個の完成例が付属しています。それらをリストアップし、1つの行を表示します：
KIT="$(sp root)" ls "$KIT"/canvases/*/assets/brand/manifest.json python3 -c 'import json,sys for r in json.load(open(sys.argv[1])): print(len(r["images"]), r["title"])' \ "$KIT/canvases/claude-ios/assets/brand/manifest.json"spが見つかりませんか？sh <sp-canvas skill dir>/scripts/install.sh（Windows：install.ps1）を実行し、そのスキルのreferences/install.mdに従ってください。標準エラー出力に[super-prototyping:notice]行があれば、それ自体がルールを持っています。そのステップを完了したら、その指示に従ってください。 - 企業自身のブランドまたはプレスキット。 フル解像度のロゴ、タイプフェイス、カラー値はここから取得するため、最初に確認します。
references/sources.mdを参照してください。 - ストア掲載情報。 最も信頼できる一括ソースであり、API がすべてのスクリーンショットを一度に返します。
- ソーシャル。 アバター、バナー、プラットフォームごとに4～8個の投稿ビジュアル。最初にすべてのハンドルを確認します（下記の「アカウントの確認、ハンドルではない」を参照）。
- マーケティングサイトとニュースルーム。 ヒーローアート、機能ページのイラスト、og:image カード、プレス写真。
- すべてのファイルを検証する。 バイト数、拡張子、寸法、サイズ、重複。
references/manifest.mdにスクリプトがあります。NO PROBLEMSと表示されなければなりません。 - マニフェストを書き、
gen.pyを接続し、再生成し、ブラウザで確認する。
行は固定された語彙
行のタイトルはこのリストから取得し、記述する行はこのリストの部分列として出現しなければなりません：この順序で、該当しないものはスキップします。
ロゴ＆ワードマーク · タイプフェイス · アートディレクション · 適用されたアイデンティティ ·
X · Instagram · TikTok · YouTube · LinkedIn ·
App Store · Google Play · Microsoft Store ·
発表カード · 有料広告 · プレス写真
アイデンティティが最初で、その後プラットフォームごとに1行です。これらのタイトルのうち2つは自明ではないため、付属のフォルダに合わせて：
- アートディレクション は、企業自身が公開するイメージスタイルです：イラストレーションシステム、ヒーローアート、写真処理、キャラクタースタディ、ガイドラインアート。
- 適用されたアイデンティティ は、ものに適用されたアイデンティティです：製品UI、ポスター、看板、イベントステージ、商品。
行タイトルを発明しないでください。この製品にサーフェスが存在しない場合は、それを省略します：存在しない行は正しく、空の行はバグであり、他の何かの素材の行は嘘です。
量
付属の12フォルダは50～144アセットで、ほとんどが70～120の間です。サーフェス間の幅がポイントであるため、ソーシャルプラットフォームごとに4～8個の投稿ビジュアルは、1つのストアからの40枚のスクリーンショットよりも優れています。ただし、ストアの行はストアが持っているすべてを取得します。これらのフォルダでは4～20です。
何を含めるかを決定する5つのルール
出所は2値であり、決して推測ではない
"theirs" は企業が公開したことを意味します。"archive" は厳選されたブランドアーカイブが公開したことを意味し、アーカイブは各アイテムの元のソースと日付を記載している場合にのみカウントされます。どちらも確認できない場合、そのアセットは含めません。 これがこのシートが存在するすべての理由です：画像はその出所を明記し、第三者によって厳選されたものは、企業が公開したものとして決して扱われません。
アカウントの確認、ハンドルではない
渡されたハンドル（仕様書に書かれているものを含む）を信頼しないでください。それが解決すること、検証が存在する場合は検証されていること、正しい企業であることを確認してください。乗っ取られた休眠状態のなりすましアカウントは一般的です：あるとき、X上の単なる @tiktok は無関係なローカルオファーアカウントであることが判明し、企業のものは @tiktok_us でした。
レポートで、使用したハンドルとストアID、および間違っていることが判明したものを明記してください。
200はページが存在する証拠ではない
マーケティングサイトやニュースルームは通常シングルページアプリケーションであり、任意のパス（でっち上げたものを含む）に対してHTTP 200を返します。代わりにレンダリングされた <title> を確認してください。実際の記事には独自のものがあります。でっち上げたスラッグはサイトの汎用タイトルを取得します：
curl -sL "$URL" | grep -o '<title>[^<]*</title>'
まず同じサイトの意図的に偽のスラッグに対してこれを実行し、汎用タイトルがどのように見えるかを把握してください。汎用タイトルを返すスラッグは存在しません：それを削除し、そこから取得したものもすべて削除します。
同じバイトが2回ある場合は1つのアセット
ダウンロードのバッチごとに、キャンバスフォルダから以下を実行：
find assets/brand -type f -exec md5 -r {} \; | sort | awk '{print $1}' | uniq -d
何も表示されてはいけません。ハッシュが衝突した場合は、新しいコピーを削除します。1つの画像の切り抜きやリサイズはバイト単位で同一ではなく、ここではそれをキャッチするツールはありません。それは目視で確認し、大きい方を保持します。
拡張子はバイトと一致しなければならない
file <path> が権威であり、ダウンロード元のURLではありません。.jpg として保存されたPNG、.png として保存されたWebP、.jpg として保存されたHTMLチャレンジページはすべて発生しています。一致するように名前を変更します。HEIFは名前変更ではなく変換されます。なぜなら、ここではどのブラウザもそれを描画しないからです：
sips -s format jpeg in.heic --out out.jpg
ファイルの保存場所
| グループ | 保持するもの |
|---|---|
identity | ロゴ、ワードマーク、タイプフェイス見本、カラー、アートディレクション、適用されたアイデンティティ |
social | X、Instagram、TikTok、YouTube、LinkedIn |
stores | App Store、Google Play、Microsoft Store |
ads | 有料広告クリエイティブ、発表カード |
press | プレス写真 |
これら5つの名前を使用し、並列のものを発明しないでください。ファイルには、それが何であるかを示す名前を付けます（x-avatar.jpg、appstore-iphone-03.jpg、wordmark-black.svg）。
一部のフォルダはすでに assets/brand/ の下に画像を保持しており、ジェネレータはそれを行として描画するのではなく、ボードにインライン化します（例えばモックアップが使用するプロフィール写真）。これらはブランド素材ではありません。そのままにしておき、マニフェストから除外します。開始する前にそれらを見つけてください：
git ls-files assets/brand/
表示されるすべてのパスを検証スクリプトの IGNORE セットに入れます。キャンバスフォルダからの相対パスで指定します。これがスクリプトの比較方法です。
接続
フォルダの他のディレクトリ定数の横に1つの定数：
BRAND_DIR = OUT / "assets" / "brand"
そして、そのフォルダが行リストを終了する場所に1行。ここのジェネレータには2つの形状があるため、目の前のものに合わせてください：
rows += json.loads((BRAND_DIR / "manifest.json").read_text()) # layout() 内
LAYOUT["rows"] += json.loads((BRAND_DIR / "manifest.json").read_text()) # モジュールレベルのLAYOUT
ブランド行はすべてのボード行の後に配置され、読み取りは無条件で、if BRAND_DIR.exists() はありません。マニフェストが存在する場合にのみ行を追加します。そうしないと、python3 gen.py が読み取り時に FileNotFoundError をスローします。
次に python3 gen.py を実行し、layout.json への差分が純粋な追加であることを確認します。行を削除する場合は、停止して references/manifest.md の「gen.py は no-op でなければならない」セクションを読んでください。実際のバグを見つけた可能性があり、再生成するとダメージをコミットしてしまいます。
これ以上変更しなくても、キャンバスはフォルダを取得します：行がレンダリングされ、「ブランドキット」ボタンがツールバーに表示され、フォルダがブランドページのスイッチャーに参加します。
報告前にブラウザで確認する
開発サーバー上でフォルダの両方のページを開きます：
http://127.0.0.1:<port>/?canvas=<slug> キャンバス
http://127.0.0.1:<port>/brand.html?canvas=<slug> ブランドキット
ブランドキットでこれを実行し、キャンバスでは実行しないでください。遅延読み込みにより、スクロールして表示されなかった画像は失敗も発生しないため、強制的に実行してカウントします：
const imgs = [...document.querySelectorAll("main img")];
for (const i of imgs) i.loading = "eager";
await Promise.allSettled(imgs.map((i) => i.decode()));
imgs.filter((i) => i.naturalWidth === 0).length; // 0 でなければならない
キャンバスはブランド行をtldrawシェイプとして描画し、画面外のものを削除するため、同じカウントは何も証明しません。代わりにズームしてフィットさせて見てください。
報告
- 検証スクリプトの完全な出力（行テーブルを含む）。
- 企業が正式なブランドキットまたはプレスキットを公開しているかどうか、およびそのURL。
- 使用し検証したアカウント、ハンドル、ストアID、および間違っている、休眠状態、乗っ取られている、または別の企業であることが判明したもの。
- 拒否したすべての候補とその理由：404、ブロック、ファーストパーティではない、小さすぎる、重複、間違った企業。
- 到達できなかったもの。存在しないものと、存在するがここからブロックされているものに分けてください。
ギャップを率直に述べることは、水増しされたマニフェストに勝ります。正直な「この製品にはMicrosoft Storeの掲載はありません」は、他の何かのスクリーンショットの行よりも価値があります。