Was macht OpenBrand?
Extrahiere Marken-Assets von jeder Website-URL – Logos, Farben, Hintergrundbilder und Markenname.
Einrichtung
MCP-Server (empfohlen für Claude Code / Cursor)
claude mcp add --transport stdio \
--env OPENBRAND_API_KEY=dein_api_key \
openbrand -- npx -y openbrand-mcp
Hole dir deinen kostenlosen API-Schlüssel unter openbrand.sh/dashboard.
Nach der Konfiguration verwende das extract_brand_assets-Tool mit einer URL, um strukturierte Markendaten zu erhalten.
npm-Paket (kein API-Schlüssel erforderlich)
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 dein_api_key"
Was extrahiert wird
| Asset | Quellen |
|---|---|
| Logos | Favicons, Apple-Touch-Icons, Header-/Nav-Logos, Inline-SVGs (mit Dimensionsprüfung) |
| Markenfarben | theme-color-Meta-Tags, manifest.json, Dominantfarben aus Logobildern |
| Hintergrundbilder | og:image, CSS-Hintergründe, Hero-/Banner-Bilder |
| Markenname | og:site_name, application-name, Logo-Alt-Text, Seitentitel |
Antwortformat
{
"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-Bild" }
]
}
Wann diese Fähigkeit verwendet werden sollte
- Erstellen einer Landing Page oder UI, die zum Brand eines Kunden passt
- Generieren von Marken-Styleguides oder Design-Tokens
- Erstellen von gebrandeten E-Mail-Vorlagen oder Marketingmaterialien
- Befüllen von Markenfeldern in einem CMS oder Design-Tool
- Jegliche Aufgabe, bei der Logos, Farben oder Bilder von einer Website benötigt werden