OpenBrand은(는) 무엇을 하나요?
모든 웹사이트 URL에서 브랜드 자산(로고, 색상, 배경 이미지, 브랜드명)을 추출합니다.
설정
MCP 서버 (Claude Code / Cursor 권장)
claude mcp add --transport stdio \
--env OPENBRAND_API_KEY=your_api_key \
openbrand -- npx -y openbrand-mcp
무료 API 키는 openbrand.sh/dashboard에서 발급받으세요.
설정이 완료되면 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"
추출 항목
| 자산 | 출처 |
|---|---|
| 로고 | 파비콘, apple-touch-icon, 헤더/네비게이션 로고, 인라인 SVG (크기 측정 포함) |
| 브랜드 색상 | theme-color 메타 태그, manifest.json, 로고 이미지에서 추출한 주요 색상 |
| 배경 이미지 | og:image, CSS 배경, 히어로/배너 이미지 |
| 브랜드명 | og:site_name, application-name, 로고 대체 텍스트, 페이지 제목 |
응답 형식
{
"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 또는 디자인 도구의 브랜드 필드 채우기
- 웹사이트에서 로고, 색상, 이미지가 필요한 모든 작업