OpenBrand は何をしますか？
任意のWebサイトURLからブランドアセット（ロゴ、カラー、背景画像、ブランド名）を抽出します。
セットアップ
MCPサーバー（推奨：Claude Code / Cursor）
claude mcp add --transport stdio \
--env OPENBRAND_API_KEY=your_api_key \
openbrand -- npx -y openbrand-mcp
無料のAPIキーは openbrand.sh/dashboard から取得できます。
設定後、URLを指定して extract_brand_assets ツールを使用すると、構造化されたブランドデータを取得できます。
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"
抽出されるもの
| アセット | ソース |
|---|---|
| ロゴ | ファビコン、アップルタッチアイコン、ヘッダー/ナビゲーションロゴ、インラインSVG（寸法調査あり） |
| ブランドカラー | テーマカラーメタタグ、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やデザインツールのブランドフィールドを入力するとき
- Webサイトからロゴ、カラー、画像が必要なあらゆるタスク