OpenBrand

任意のウェブサイト URL からブランドアセットを抽出します — ロゴ、色、背景画像、ブランド名。

セットアップ

MCP サーバー(Claude Code / Cursor に推奨)

claude mcp add --transport stdio \
  --env OPENBRAND_API_KEY=your_api_key \
  openbrand -- npx -y openbrand-mcp

openbrand.sh/dashboard で無料の API キーを取得できます。

設定後、extract_brand_assets ツールを URL と共に使用して、構造化されたブランドデータを取得します。

npm パッケージ(API キー不要)

npm add openbrand

import { extractBrandAssets } from "openbrand";

const result = await extractBrandAssets("https://stripe.com");
if (result.ok) {
  // result.data.brand_name → "Stripe"
  // result.data.logos → LogoAsset[]
  // result.data.colors → ColorAsset[]
  // result.data.backdrop_images → BackdropAsset[]
}

API

curl "https://openbrand.sh/api/extract?url=https://stripe.com" \
  -H "Authorization: Bearer your_api_key"

抽出内容

アセット	ソース
ロゴ	ファビコン、apple-touch-icons、ヘッダー/ナビゲーションロゴ、インライン SVG(寸法プロービング付き)
ブランドカラー	theme-color メタタグ、manifest.json、ロゴ画像から抽出した支配的な色
背景画像	og:image、CSS 背景、ヒーロー/バナー画像
ブランド名	og:site_name、application-name、ロゴの代替テキスト、ページタイトル

レスポンス形式

{
  "brandName": "Stripe",
  "logos": [
    { "url": "https://...", "type": "favicon", "resolution": { "width": 32, "height": 32, "aspect_ratio": 1 } }
  ],
  "colors": [
    { "hex": "#635bff", "usage": "primary" },
    { "hex": "#0a2540", "usage": "secondary" }
  ],
  "backdrops": [
    { "url": "https://...", "description": "Hero image" }
  ]
}

このスキルを使用する場合

• クライアントのブランドに合わせたランディングページまたは UI を構築する場合
• ブランドスタイルガイドまたはデザイントークンを生成する場合
• ブランド化されたメールテンプレートまたはマーケティング資料を作成する場合
• CMS またはデザインツール内のブランドフィールドに入力する場合
• ウェブサイトからロゴ、色、または画像が必要なタスク全般