OpenBrand 是做什麼的？
從任何網站網址提取品牌資產 — 標誌、顏色、背景圖片和品牌名稱。
設定
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 工具搭配網址來取得結構化的品牌資料。
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"
提取的資產
| 資產 | 來源 |
|---|---|
| 標誌 | Favicon、apple-touch-icon、頁首/導覽列標誌、inline SVG（含尺寸探測） |
| 品牌顏色 | theme-color meta 標籤、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
- 生成品牌風格指南或設計 token
- 製作品牌化電子郵件範本或行銷素材
- 在 CMS 或設計工具中填入品牌欄位
- 任何需要從網站取得標誌、顏色或圖像的任務