OpenBrand 是做什麼的？
Extract brand assets from any website URL — logos, colors, backdrop images, and brand name.
Setup
MCP Server (recommended for Claude Code / Cursor)
claude mcp add --transport stdio \
--env OPENBRAND_API_KEY=your_api_key \
openbrand -- npx -y openbrand-mcp
Get your free API key at openbrand.sh/dashboard.
Once configured, use the extract_brand_assets tool with a URL to get structured brand data.
npm package (no API key needed)
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"
What it extracts
| Asset | Sources |
|---|---|
| Logos | Favicons, apple-touch-icons, header/nav logos, inline SVGs (with dimension probing) |
| Brand colors | theme-color meta tags, manifest.json, dominant colors from logo imagery |
| Backdrop images | og:image, CSS backgrounds, hero/banner images |
| Brand name | og:site_name, application-name, logo alt text, page title |
Response format
{
"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" }
]
}
When to use this skill
- Building a landing page or UI that matches a client's brand
- Generating brand style guides or design tokens
- Creating branded email templates or marketing materials
- Populating brand fields in a CMS or design tool
- Any task where you need logos, colors, or imagery from a website