brand-dev

Brand.dev スキル

brand.dev API からブランドデータを取得し、配信用にロゴをローカルに保存します。

Step 1: ドメインの取得

ユーザーの入力から対象のドメインを抽出します。プロトコルと末尾のスラッシュを削除します（例：「https://example.com/」→「example.com」）。

Step 2: ブランド情報の取得

# BRANDDEV_API_KEY must be set in your environment
curl -s "https://api.brand.dev/v1/brand/retrieve?domain=${DOMAIN}" \
  -H "Authorization: Bearer ${BRANDDEV_API_KEY}" \
  -H "Content-Type: application/json"

レスポンスから以下を抽出します。

• ブランド名（.brand.title または .brand.name）
• 説明（.brand.description）
• ロゴ URL（.brand.logos[] から）— カードレイアウトにはアイコン／正方形ロゴ、ヘッダーにはフルロゴを優先します
• 業界／カテゴリー（利用可能な場合）

Step 3: ロゴをローカルにダウンロード

配信用に、ロゴは必ずローカルにダウンロードしてください。本番コードで外部の media.brand.dev URL を参照しないでください。変更されたり、アクセスできなくなったりする可能性があります。

保存先

保存先はプロジェクトによって異なります。既存のパターンを確認してください。

• Next.js／静的サイト：public/logos/<context>/（/logos/<context>/ として配信）
• その他の Web プロジェクト：既存の static/、assets/、images/、public/ ディレクトリを確認します
• 規約がない場合：プロジェクトの静的アセットのルートに logos/ ディレクトリを作成します

命名規則

• <brand-slug>.<ext>。ここで：
  • <brand-slug> はブランド名を小文字にし、スペースをハイフンに置き換えたものです（例：miss_a ではなく miss-a）
  • <ext> は元のファイルの拡張子（png、webp、jpg、svg）と一致します
• プロジェクトに複数のロゴコレクションがある場合は、必要に応じてコンテキスト別のサブディレクトリ（例：partners/、customers/）に分類します

ダウンロードコマンド

mkdir -p <logo-dir>
curl -sL "<logo-url>" -o "<logo-dir>/<brand-slug>.<ext>"

ダウンロードの確認

ls -la <logo-dir>/<brand-slug>.<ext>

Step 4: 結果の返却

ユーザーに以下を提示します。

• ブランド名
• 説明
• 業界
• ローカルのロゴパス — コードで使用するパス（プロジェクトの静的ルートからの相対パス）
• 元のソース URL（参考用のみ）

重要なルール

1. 画像は必ずローカルに保存する — 本番コードで media.brand.dev URL を直接使用しないでください。
2. コードではローカルパスを使用する — プロジェクトの静的アセット配信ルートからの相対パスで参照してください。
3. カードレイアウトには正方形／アイコンロゴを優先する（グリッドカードにより適しています）。
4. ヘッダーとヒーローセクションにはフル／横長ロゴを優先する。
5. API レスポンスにブランドのロゴがない場合は、その旨を伝え、代替アイコンの使用を提案してください。