Agent skill · design visual · aradotso
openbrand-asset-extraction
openbrand-asset-extraction — an agent skill for coding agents.
Why this skill is useful
Provides specific commands and patterns for extracting brand assets from websites that the AI wouldn't reliably generate on its own.
What it needs
Requires openbrand installed locally. About 5k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
bash npm add openbrand or bun add openbrand bash Without API key (uses local extraction) claude mcp add --transport stdio openbrand -- npx -y openbrand-mcp With API key (uses hosted API) claude mcp add --transport stdio \ --env OPENBRANDAPIKEY=$OPENBRANDAPIKEY \ openbrand -- npx -y openbrand-mcp json { "mcpServers": { "openbrand": { "command": "npx", "args": ["-y", "openbrand-mcp"], "env": { "OPENBRANDAPIKEY": "yourapikeyhere" } } } } bash npx skills add ethanjyx/openbrand bash git clone https://github.com/ethanjyx/openbrand.git cd openbrand bun install bun dev Open http://localhost:3000 typescript import { extractBrandAssets } from "openbrand"; const result = await extractBrandAssets("https://stripe.com"); if (result.ok) { const { brandname, logos, colors, backdropimages } = result.data; console.log("Brand name:", brandname); // "Stripe" console.log("Logos:", logos); // LogoAsset[] console.log("Colors:", colors); // ColorAsset[] console.log("Backdrops:", backdropimages); // BackdropAsset[] } else { console.error("Error code:", result.error.code); // "ACCESSBLOCKED" "NOTFOUND" "SERVERERROR" ... console.error("Error message:", result.error.message); // human-readable explanation } typescript import { extractBrandAssets } from "openbrand"; const result = await extractBrandAssets("https://github.com"); if (result.ok) { const { logos } = result.data; // Find the highest-resolution logo const best = logos.reduce((a, b) => (a.width ?? 0) (a.height ?? 0) >= (b.width ?? 0) (b.height ?? 0) ? a : b ); console.log("Best logo URL:", best.url); console.log("Dimensions:", best.width, "x", best.height); console.log("Format:", best.format); // "svg" "png" "ico" ... …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/openbrand-asset-extraction