OpenBrand 是做什么的？
从任何网站URL提取品牌资产——Logo、颜色、背景图像和品牌名称。
设置
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"
提取内容
| 资产 | 来源 |
|---|---|
| Logo | Favicon、Apple Touch Icon、页眉/导航栏 Logo、内联 SVG（带尺寸探测） |
| 品牌颜色 | theme-color 元标签、manifest.json、Logo 图像的主导色 |
| 背景图像 | og:image、CSS 背景、英雄/横幅图像 |
| 品牌名称 | og:site_name、application-name、Logo alt 文本、页面标题 |
响应格式
{
"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 或设计工具中填写品牌字段
- 任何需要从网站获取 Logo、颜色或图像的任务