How do I install the Openbrand skill?

Run npx skillmds@latest add tomevault-io/openbrand in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Openbrand safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Openbrand?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Openbrand free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Openbrand?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Openbrand by tomevault-io — Agent Skill

Name: Openbrand
Author: tomevault-io

Openbrand

Extract brand assets (logos, colors, backdrop images, brand name) from any website URL. Use when building branded interfaces, generating style guides, or needing brand identity data from a URL. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

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

Source: tight-studio/OpenBrand — distributed by TomeVault.

---name: openbranddescription: Extract brand assets (logos, colors, backdrop images, brand name) from any website URL. Use when building branded interfaces, generating style guides, or needing brand identity data from a URL. Use when this capability is needed.---# OpenBrandExtract brand assets from any website URL — logos, colors, backdrop images, and brand name.## Setup### MCP Server (recommended for Claude Code / Cursor)```bashclaude 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](https://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)```bashnpm add openbrand``````typescriptimport { 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```bashcurl "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```json{ "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---> Source: [tight-studio/OpenBrand](https://github.com/tight-studio/OpenBrand) — distributed by [TomeVault](https://tomevault.io).

Frequently asked questions