Communitygithub.com

brand-kit

사용자의 제품을 위한 휴대용 brand-kit.json을 구축합니다 — 색상, 타이포그래피, 톤 등. 다른 스킬(비디오, 광고 크리에이티브, 랜딩 페이지)이 사용할 수 있습니다. 소스 코드 접근 여부와 관계없이 여러 경로를 통해 동작합니다.

brand-kit란 무엇인가요?

Brand Kit 스킬은 AI 에이전트가 사용자의 브랜드 정보를 구조화된 `brand-kit.json` 파일로 추출하여 다른 스킬(예: TikTok/Reddit/LinkedIn 런치 비디오, 랜딩 페이지 리뷰, 광고 카피 라이터)이 재사용할 수 있게 합니다. 개발자는 소스 코드 접근이 불가능한 경우, 라이브 사이트 URL, 로고 이미지, 또는 스크린샷을 통해 브랜드 키트를 생성할 수 있으며, 인터뷰 방식으로 수동 입력도 지원합니다. Tailwind CSS, CSS 커스텀 프로퍼티, manifest 파일, FFmpeg 색상 추출 등 다양한 기술을 활용하여 색상, 폰트, 톤(voice)을 자동으로 감지합니다. 결과물은 `.agents/`, `.claude/`, 또는 현재 디렉토리에 저장되며, 다른 Cogny 스킬이 일관된 브랜드 표현을 위해 읽어갑니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cognyai/claude-code-marketing-skills/tree/HEAD/skills/brand-kit
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Brand Kit

사용자의 제품을 설명하는 brand-kit.json을 구축하여 다른 스킬이 사용할 수 있도록 합니다 — 색상, 폰트, 톤(voice), do/dont 언어, 선택적 로고. 다른 Cogny 스킬(/tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video, /landing-page-review, /ad-copy-writer)은 이 파일이 존재하면 읽어갑니다.

이 스킬은 사용자가 항상 사이트의 소스 코드에 접근할 수 있는 것은 아니다라는 현실을 바탕으로 설계되었습니다. 키트를 만드는 6가지 경로가 있으며, 우선순위 순서로 시도합니다. 충분한 정보를 얻는 첫 번째 경로에서 멈춥니다.

사용법

/brand-kit https://example.com — 라이브 사이트에서 추출 /brand-kit ~/git/our-site — 로컬 저장소에서 추출 (Tailwind / CSS 변수) /brand-kit ~/Desktop/logo.png — 로고나 스크린샷에서 팔레트 추출 /brand-kit ~/Desktop/homepage.png logo.png — 사이트 스크린샷 + 로고 결합 /brand-kit — 사용자 인터뷰

출력

brand-kit.json이 다음 위치에 기록됩니다 (우선순위 순서, 사용자 설정에 적합한 경로):

  1. .agents/brand-kit.json (.agents/ 디렉토리가 존재하는 경우)
  2. .claude/brand-kit.json (.claude/ 디렉토리가 존재하는 경우)
  3. ./brand-kit.json (그 외 — 현재 작업 디렉토리)

항상 기록한 경로를 출력하여 사용자가 이동할 수 있도록 합니다.

스키마

{
  "name": "cogny",
  "site": "https://cogny.com",
  "logo": {
    "path": "./brand/logo-square.png",
    "use_in_video": false
  },
  "colors": {
    "background": "#1f1d1d",
    "foreground": "#ede8e3",
    "primary":    "#b09acd",
    "accent":     "#c9badf",
    "muted":      "#9a9494",
    "card":       "#282525",
    "fuchsia":    "#d4848a",
    "success":    "#7ec8a4",
    "amber":      "#d4a857"
  },
  "type": {
    "family":   "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
    "weight_display": 700,
    "weight_body":    500,
    "letter_spacing_display": "-0.02em"
  },
  "voice": {
    "register":   "기술적, 직접적, 전문 용어 지양, CLI 미학",
    "person":     "1인칭 복수 (우리 / 여러분)",
    "do":         ["구체적인 숫자", "트레이드오프 명시", "도구 이름 명시"],
    "dont":       ["레버리지", "잠금 해제", "혁명적", "차세대"]
  },
  "source": "repo: ~/git/cogny/tailwind.config.ts + src/index.css",
  "captured_at": "2026-04-25"
}

최소 구성 키트: colors.background, colors.foreground, colors.primary, type.family, voice.register. 이 다섯 가지 없이 배포하지 마세요.

경로 0 — Cogny MCP 컨텍스트 트리 (가장 저렴함, 연결되어 있으면 먼저 실행)

사용 조건: cogny MCP 서버가 .mcp.json에 있는 경우. 사용자는 이미 자신의 브랜드 — 톤(voice), 팔레트, 분위기 — 를 컨텍스트 트리에 문서화했을 수 있으며, 이 경우 스크래핑은 중복됩니다.

mcp__cogny__get_context_tree_overview              # 어떤 정보가 문서화되어 있는지 확인
mcp__cogny__search_context query="brand"           # 팔레트, 톤(voice), 디자인 토큰
mcp__cogny__search_context query="positioning"     # 톤(voice) + 레지스터가 여기에 있는 경우가 많음
mcp__cogny__read_context_node node_id="…"

트리가 브랜드/팔레트/톤(voice) 노드를 반환하면 해당 값으로 키트를 채웁니다. 특정 정보가 오래되었거나 모순되는 경우에만 경로 1 또는 3과 교차 확인합니다.

cogny MCP가 연결되어 있지 않거나 트리에 브랜드 관련 정보가 없으면 경로 1로 넘어갑니다.

경로 1 — Tailwind / CSS 변수가 있는 저장소 (최상의 신호)

사용 조건: 사용자가 사이트 소스 코드에 접근할 수 있는 경우.

다음 순서대로 찾습니다:

# Tailwind 구성 — 사용자 정의 색상 네임스페이스
fd -t f 'tailwind\.config\.(ts|js|mjs|cjs)$' <repo>
# CSS 사용자 정의 속성 (대부분의 최신 스택)
fd -t f '(globals|index|app|theme|variables)\.css$' <repo>
# 디자인 토큰
fd -t f '(design-tokens|tokens|theme)\.json$' <repo>

Tailwind 구성 파일을 찾으면 사용자 정의 색상 네임스페이스(일반적으로 브랜드 이름, 예: cogny: {...})를 찾습니다:

// tailwind.config.ts (cogny 예시)
colors: {
  cogny: { dark: "#1f1d1d", purple: "#b09acd", secondary: "#7E69AB", light: "#c9badf" }
}

CSS 파일을 찾으면 표준 사용자 정의 속성 이름을 grep합니다:

grep -E '^\s*--(background|foreground|primary|accent|muted|card)' <css-file>

값을 키트 스키마에 매핑합니다. --primary(HSL 또는 16진수)와 Tailwind 네임스페이스를 모두 찾은 경우, Tailwind 네임스페이스를 선호합니다 — 이는 shadcn 기본값보다 명시적인 브랜드 의도인 경우가 많습니다.

동일한 파일에서 폰트 감지:

grep -E "(font-family|fontFamily|--font-)" <repo>/src/**/*.{css,ts,tsx,js} 2>/dev/null | head

경로 2 — 라이브 사이트 URL (소스 접근 없이 동작)

사용 조건: 사용자가 공개 URL만 가지고 있는 경우.

단계:

  1. 홈페이지를 가져옵니다 WebFetch <url>을 사용하여 인라인 <style> 블록과 head의 스타일시트 링크를 추출합니다.
  2. 메인 스타일시트를 가져옵니다 (head에서 가장 큰 CSS 링크). curl -sL <css-url> | head -c 200000 정도로 충분합니다 — CSS 사용자 정의 속성(--primary, --background 등)과 @font-face 규칙을 찾습니다.
  3. 매니페스트를 찾습니다 /site.webmanifest, /manifest.json, 또는 /manifest.webmanifest에서. 매니페스트에는 theme_color, background_color, 아이콘 목록이 포함되어 있습니다 — 브랜드 키트에 매우 유용합니다.
  4. 파비콘과 고해상도 로고를 찾습니다: 
    curl -sL "<site>/favicon.ico" -o /tmp/favicon.ico
curl -sL "<site>/apple-touch-icon.png" -o /tmp/touch.png
# 또는 홈페이지 HTML에서 <link rel="icon"> 추출
    사이트에서 가장 큰 PNG 아이콘(Apple touch 아이콘, 매니페스트 아이콘)이 브랜드 마크입니다.
  5. 타이포그래피 감지: body, html, 또는 h1에 대한 font-family 선언을 인라인 CSS에서 검색합니다. <head>에 Google Fonts 링크가 보이면, 폰트 패밀리 이름이 URL에 바로 있습니다.

사이트가 정적 프론트엔드(Next.js 등)를 제공하는 경우, 번들된 CSS에는 개발 소스와 동일한 사용자 정의 속성이 포함되어 있는 경우가 많습니다 — 따라서 저장소 접근 없이도 전체 브랜드 팔레트를 복구할 수 있습니다.

부분 정보만 얻은 경우(예: 매니페스트에서 theme_color는 얻었지만 전체 팔레트는 없는 경우), 경로 3으로 진행하여 로고/스크린샷에서 누락된 부분을 채웁니다.

경로 3 — 로고 또는 스크린샷 팔레트 추출 (항상 동작하는 대체 방법)

사용 조건: 사용자가 로고 이미지, 홈페이지 스크린샷, 또는 브랜드 에셋 PNG/JPG를 업로드하는 경우.

사용자는 일반적으로 어떤 이미지를 가지고 있습니다 — 데스크톱의 로고, Slack 아바타, 웹사이트 스크린샷. FFmpeg를 사용하여 팔레트를 직접 추출합니다:

# 모든 이미지에서 작은 팔레트 이미지(최대 6개의 고유 색상) 생성
ffmpeg -y -i <input.png> \
  -vf "palettegen=max_colors=6:reserve_transparent=0:stats_mode=single" \
  -frames:v 1 -update 1 /tmp/_palette.png

# 해당 팔레트 색상을 16진수로 읽어옴. PPM 헤더는
#   P6\n<W> <H>\n255\n  → 표준 16x16 팔레트의 경우 13바이트
ffmpeg -y -i /tmp/_palette.png -c:v ppm -f image2 -update 1 - 2>/dev/null \
  | tail -c +14 \
  | xxd -c 3 -p \
  | awk '!seen[$0]++' \
  | head -8 \
  | awk '{print "#" toupper($1)}'

cogny 로고(어두운 따뜻한 배경의 그라데이션 C)의 출력:

#1D1B1B   ← 배경
#5F4953   ← 진한 자두색
#BB93B9   ← 라벤더 (기본 브랜드 색상)
#CA8B9D   ← 코랄-핑크
#D2858C   ← 코랄 (강조 색상)

매핑 규칙 — 팔레트는 빈도순으로 정렬되지만, 역할 할당은 사용자의 몫입니다:

  • 가장 어두운 색상 → colors.background (픽셀의 40% 이상을 차지하는 경우)
  • 가장 밝은 비흰색 → colors.foreground (흰색에 가까운 색상이 없으면 기본값 #fafafa)
  • 가장 채도가 높은 색상 → colors.primary
  • 두 번째로 채도가 높은 색상 → colors.accent

원본 이미지를 한 번 확인하여 확인합니다 — 알고리즘 역할 할당은 약 70%의 경우 정확합니다.

스크린샷의 타이포그래피: 이미지 기반 폰트 감지는 신뢰할 수 없습니다. 다음 중 하나를 수행합니다:

  • 사용자에게 묻기 ("이 이미지의 제목 폰트는 무엇인가요…?"), 또는
  • WhatTheFont 또는 Fontspring Matcherator 같은 무료 도구 사용 — 사용자에게 URL을 보여주고, 프로그래밍 방식으로 시도하지 마세요.

선택 사항: node-vibrant를 통한 의미론적 팔레트 (npm 설치 한 번으로 vibrant/muted/dark-vibrant/light-vibrant 카테고리 제공 — primary/accent 역할 매핑에 더 유용함):

npm install -g node-vibrant
node -e "
  const Vibrant = require('node-vibrant');
  Vibrant.from(process.argv[1]).getPalette().then(p => {
    const out = {};
    for (const k of ['Vibrant','Muted','DarkVibrant','LightVibrant','DarkMuted','LightMuted']) {
      if (p[k]) out[k] = p[k].hex;
    }
    console.log(JSON.stringify(out, null, 2));
  });
" <input.png>

사용 가능한 도구를 사용합니다. FFmpeg는 이미 비디오 스킬과 함께 제공되므로 기본값입니다.

경로 4 — 색상 선택기 / 수동 입력 (항상 사용 가능)

사용 조건: 다른 방법이 모두 실패했거나, 사용자가 키트를 명시적으로 재정의하려는 경우.

다음 순서로 질문하고, 부분적인 답변도 수용합니다:

  1. 배경 16진수 색상은? (사용자가 가장 많이 보는 페이지 배경)
  2. 전경 16진수 색상은? (본문 텍스트 색상)
  3. 기본 브랜드 16진수 색상은? (버튼이나 링크에 사용되는 색상)
  4. 강조 16진수 색상은? (선택 사항 — 두 번째 브랜드 색상이 있는 경우)
  5. 폰트 패밀리는? ("Inter 같은 산세리프", "JetBrains Mono" 등 — 최선의 추정, 시스템 대체 폰트도 괜찮습니다)

세 가지 색상과 폰트 하나면 배포하기에 충분합니다.

경로 5 — 톤(voice) 추출 (색상 경로와 관계없이 항상 실행)

톤(voice)은 복사-붙여넣기 도구가 잊어버리는 브랜드 키트의 부분입니다. 비디오가 어떤 비트를 작성할지, 광고 카피 스킬이 어떤 헤드라인을 생성할지를 결정합니다.

톤(voice)의 출처: 홈페이지 히어로 + 1~2개의 더 깊은 페이지(소개, 가격, 블로그).

단계:

  1. 홈페이지 히어로 텍스트를 가져옵니다 (h1, h2, 히어로 CTA 다음의 첫 번째 단락).
  2. 깊은 페이지 하나를 가져옵니다 (일반적으로 /about 또는 /pricing).
  3. 카피를 읽고 세 가지 필드를 생성합니다:
"voice": {
  "register": "<한 줄 설명>",
  "do":   ["패턴 1", "패턴 2", "패턴 3"],
  "dont": ["금지 단어 1", "금지 단어 2"]
}

예시 (실제 각 회사 홈페이지에서 파생됨):

브랜드registerdodont
cogny"기술적, 직접적, 전문 용어 지양, CLI 미학"구체적인 숫자, 트레이드오프 명시, 도구 이름 명시레버리지, 잠금 해제, 혁명적, 차세대
Linear"운영자, 독단적, 빠름"2인칭, 간결한, 빌드-모드 언어엔터프라이즈, 시너지, 강력한
Mailchimp"따뜻한, 대화체, 평이한 영어"1인칭, 친근한 축약형, 명확한 CTA활용하다, 패러다임, 레버리지

페이지에서 톤(voice)을 추론할 수 없는 경우(예: 매우 얇은 홈페이지), 사용자에게 어떻게 들리고 싶은지 한 문장으로 설명해 달라고 요청하세요. 만들지 마세요.

단계 (실제 흐름)

  1. 사용자가 제공한 입력을 감지합니다:

    • URL → 경로 2 → 필요한 경우 경로 3 / 5로 넘어감
    • 저장소 경로 → 경로 1 → 경로 5로 넘어감
    • 이미지 경로 → 경로 3 + 톤(voice)을 위해 사이트 URL 또는 저장소 요청 (경로 5)
    • 입력 없음 → 경로 4 + 추출할 로고가 있는지 질문

  2. 키트를 점진적으로 구축합니다. 각 단계 후 부분 상태를 출력하여 사용자가 개입할 수 있도록 합니다:

    ◆ 브랜드 키트 (cogny)
✓ 색상    bg=#1f1d1d  fg=#ede8e3  primary=#b09acd  accent=#c9badf
✓ 폰트    JetBrains Mono / mono
◇ 톤(voice)     대기 중 — /about 페이지를 가져와 분석 중…

  3. 파일을 기록하기 전에 사용자에게 결과를 보여줍니다. 사용자는 색상 역할 할당(배경 vs 기본 등)을 승인해야 합니다 — 이는 영향력이 큰 결정입니다.

  4. brand-kit.json을 가장 적절한 위치에 기록합니다 (출력 섹션 참조). 이미 키트가 존재하는 경우, diff를 보여주고 덮어쓰기 전에 질문합니다.

  5. 소비 스킬을 위한 한 줄 설치 힌트를 출력합니다:

    저장됨 → .agents/brand-kit.json
다음에서 사용: /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video,
         /ad-copy-writer, /landing-page-review

일반적인 실수

  1. 단일 16진수 색상을 브랜드로 취급 — 대부분의 브랜드는 기본 색상 + 강조 색상 + 배경-전경 쌍을 가지고 있습니다. 최소 세 가지 색상.
  2. 톤(voice) 없이 배포 — 색상은 브랜드의 30%를 전달하고, 톤(voice)은 70%를 전달합니다. 경로 5를 건너뛰지 마세요.
  3. shadcn 기본값을 브랜드로 사용 — 사용자의 CSS 파일에 --primary: 240 5.9% 10%가 문자 그대로 있다면, 이는 자리 표시자일 뿐 브랜드가 아닙니다. 홈페이지 스크린샷과 교차 확인하세요.
  4. 로고 그라데이션 아티팩트로 키트를 과포화 — 그라데이션 로고에서 팔레트를 추출하면 4~5개의 전이 색상이 반환됩니다. 끝점(기본 색상 + 강조 색상)을 선택하고 중간 색상은 제거하세요.
  5. LinkedIn-파랑 / Twitter-파랑 / TikTok-분홍이 키트에 스며드는 것 허용 — 이는 스크린샷에 번져 들어가는 플랫폼 UI 색상이지 브랜드 색상이 아닙니다.
  6. theme-color를 맹목적으로 신뢰 — 사이트에서 모바일 Safari의 주소 표시줄과 일치하도록 theme-color를 설정하는 경우가 있는데, 이는 장식용이며 실제 브랜드 기본 색상과 일치하지 않을 수 있습니다.

관련 스킬

  • /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video — 키트를 소비함
  • /ad-copy-writer — 톤(voice) 규칙을 사용하여 플랫폼에 적합한 카피를 작성
  • /landing-page-review — 랜딩 페이지와 브랜드 키트 간의 일관성을 확인
  • /non-commodity-content — 톤(voice) 추출이 이 스킬의 인터뷰 단계와 중복됨

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community