브랜드 키트은(는) 무엇을 하나요?

클라이언트당 하나의 재사용 가능한 키트를 studio/brands/<slug>/에 생성합니다:

studio/brands/<slug>/
├── brand.json     역할별 색상, 폰트, 로고, 음성, 사실, 팀, 제공 서비스, 사례 (+ 계산된 검증)
├── assets.json    자산 라이브러리 인덱스 (각 이미지가 보여주는 내용, 품질, 출처)
├── assets/        people/ offerings/ testimonials/ places/ work/ proof/
├── swatch.png     색상 검토용 이미지 한 장
├── logo/          실제 사용된 로고 파일
└── source/        원시 스캔 결과 (site.json, probe.json, candidates.json, contact sheets)

스토리보드와 렌더 스킬은 colors, fonts, logo 및 computed를 읽고; 작성 스킬은 voice와 facts를 읽습니다. 스키마 및 역할 규칙은 다음을 참조하세요: references/brand-schema.md.

스크립트는 측정을 수행하고; Claude는 판단을 수행합니다. 스크립트의 JSON 및 콘솔 요약을 읽고 — 색상을 찾기 위해 원시 HTML/CSS를 읽거나 전체 페이지 스크린샷을 찍지 마세요. 스튜디오 루트에서 스크립트를 실행하세요 (node .claude/skills/brand-kit/scripts/...).

단계 0 — 기존 키트 확인?

무언가를 생성하기 전에 기존 키트에서 브랜드를 찾으십시오: 사용자의 말을 각 studio/brands/*/brand.json의 slug, name, aka 및 sources의 웹사이트와 비교하십시오 (예: "Stargate", "Sanjay Aggarwal Classes", "stargate.net.in"은 동일한 키트입니다). 일치하는 것이 없을 때만 새 짧은 케밥 케이스 slug를 선택하십시오.

승인된 키트: brand.json에서 답변하고 swatch.png를 보여주세요 — 스캔이나 스크립트 없이. 단순한 질문("Stargate의 색상이 뭐야?")에는 그냥 답변하세요. 사용자가 새로고침이나 업데이트를 요청할 때만 재구축하세요.
초안 키트: 기존 스와치와 함께 7단계(승인)로 재개하세요; 다시 스캔하지 마세요.
자산 라이브러리가 없는 승인된 키트 (assets.json 없음): 5단계만 실행한 후 재승인하세요. 스토리보드는 이미지가 필요할 때 이를 요청합니다.
새로고침: 1단계부터 다시 실행하고, 사용자가 수동으로 설정한 항목(from: "user")은 유지하며 version을 올리세요.

단계 1 — 소스 수집

사용 가능한 모든 것을 사용하되, 다음 권위 순서를 따르세요:

사용자의 지시 ("우리 파란색은 #1F3C88입니다") — 항상 우선합니다.
사용자가 제공하거나 비디오의 assets/에 넣은 브랜드 가이드/로고 파일.
웹사이트.

결과를 바꿀 수 있고 사용할 수 없는 것이 있으면 한 번만 물어보세요 — 보통 "로고 파일이나 브랜드 가이드가 있나요? 없으면 웹사이트에서 가져오겠습니다." 정도입니다. 이것에 막히지 마세요.

단계 2 — 웹사이트 스캔

정적 스캔 (항상): node .claude/skills/brand-kit/scripts/site-extract.mjs <url> studio/brands/<slug>/source/site.json CSS 색상(사이트 vs 프레임워크 개수, 브랜드 CSS 변수), 폰트, 로고 후보, 메타 정보, 연락처, 제목을 제공합니다.
렌더링 프로브 (내장 브라우저를 사용할 수 있을 때 — 실제 화면에 표시되는 것을 측정하므로 더 정확합니다): 사이트를 열고, scripts/browser-probe.js의 내용을 javascript_tool로 실행하세요. 그 JSON을 source/probe.json에 저장하세요. 화면 영역별 배경색, 텍스트 양별 텍스트 색상, 버튼 색상, 제목 및 본문 폰트, 로고 이미지를 보고합니다.

정적 스크린에서 사이트 색상을 찾지 못했고(완전 JS 렌더링 사이트) 브라우저도 사용할 수 없는 경우, 로고에 의존하고 그렇게 말하세요.

단계 3 — 로고

가장 좋은 후보를 선택하세요 (score, alt, 크기, 프로브의 logos); SVG나 가장 큰 PNG를 선호하고, 다른 것이 없으면 파비콘을 피하세요. 그런 다음:

node .claude/skills/brand-kit/scripts/logo-palette.mjs studio/brands/<slug>/logo <logo-url-or-path> [...]

파일을 저장하고 각각의 실제 색상을 비율별(투명 픽셀 무시)과 톤(필요한 배경)으로 보고합니다. 로고가 아닌 것으로 판명된 다운로드 파일은 제거하세요. 파비콘이나 사진만 있는 경우 사용자에게 알리고 적절한 로고 파일을 요청하세요.

단계 4 — 역할 결정

brand.json을 채우세요(스키마 참조의 형식). 판단 규칙:

브랜드 색상은 브랜드에서 비롯되며, 플러그인에서 비롯되지 않습니다. framework 색상과 테마 기본값은 프로브가 페이지에서 정말로 지배적임을 보여주지 않는 한 무시하세요.
기본(Primary) = 로고의 주요 색상, 사이트(헤더, 큰 블록, 브랜드 변수)에서 확인됨. 로고와 사이트가 일치하지 않으면 로고를 선호하고 그 내용을 기록하세요.
강조(Accent) = 사이트의 주요 버튼/CTA 색상이 기본과 다른 경우; 그렇지 않으면 로고의 두 번째 색상; 또는 하나를 유도(보색 또는 따뜻한 대비)하고 derived로 표시하세요.
보조(Secondary) 브랜드가 명확하게 두 번째 색상을 사용하는 경우에만. 억지로 채우지 마세요.
배경(Background), 표면(Surface), 잉크(Ink), 흐림(Muted) 사이트의 실제 배경 및 텍스트 색상에서 가져오고, 화면에 맞게 조정: 순수 #000 텍스트 → 기본 색상으로 약간 색조가 있는 거의 검은색도 괜찮습니다.
하이라이트(Highlight) (선택 사항): 마커 스와이프용 밝고 채도 높은 색상, 브랜드에 있거나 자연스럽게 맞는 경우.
폰트 프로브(또는 정적 스캔)에서: 제목 = 제목이 사용하는 것, 본문 = 본문 텍스트.
음성 및 사실 사이트의 제목, 메타 및 연락처에서: 태그라인, 구어체 이름, 기본 CTA 및 연락처 정보, 톤 단어, 피해야 할 주장(증명할 수 없는 최상급, 사이트가 실제로 보여주지 않는 숫자). 모든 사실은 출처와 날짜가 있어야 합니다.

status: draft, version: 1(또는 증가), updated: <오늘>을 설정하세요.

단계 5 — 자산 라이브러리

브랜드 자체 이미지를 한 번 수집하여 모든 비디오에서 텍스트 전용 장면 대신 실제 인물, 제품 및 증거를 사용할 수 있도록 합니다. 모든 비즈니스에 적용 가능 — 종류는 일반적입니다:

종류	포함 내용
`people`	창업자, 팀, 직원, 전문가(의사, 셰프, 교수, 컨설턴트…)
`offering`	제품, 서비스, 강좌, 메뉴 항목, 패키지, 플랜
`testimonial`	고객 사진, 리뷰 스크린샷, 결과/성과 증명 이미지
`place`	건물, 매장, 클리닉, 교실, 사무실, 이벤트
`work`	포트폴리오, 갤러리, 프로젝트, 전/후
`proof`	수상, 인증서, 파트너/클라이언트 로고, 언론

node .claude/skills/brand-kit/scripts/collect-assets.mjs studio/brands/<slug> <site-url> (놓치지 말아야 할 페이지에 대해 --pages url1,url2 추가). 모든 종류의 페이지를 수집하고, 각 이미지의 가장 큰 버전을 다운로드하며, 아이콘/중복/작은 파일을 제거하고 source/candidates.json(크기, 품질, 추정 종류, alt, 주변 텍스트)과 한 장의 컨택 시트 source/candidates-sheet.png를 작성합니다.
시트를 한 번 보고; candidates.json 텍스트(이름, 인용구, 캡션)를 사용하여 대상을 식별하세요. 비디오가 실제로 사용할 수 있는 것을 유지하고; 자리 표시자, 다른 브랜드 자료, 거의 중복된 것은 건너뛰세요.
assets.json을 작성하세요(스키마 참조의 형식): 각 유지된 이미지에 대해 candidate id, 대상 file (<kind>/<descriptive-name>.jpg), kind, subject, 한 줄 description, bakedText(이미지에 텍스트/가격이 인쇄되어 있으면 true), 내장 레이블이나 테두리를 제거하기 위한 선택적 crop, 그리고 source. 시간에 민감한 내용(가격, 날짜)은 설명에 기록하세요.
node .claude/skills/brand-kit/scripts/finalize-assets.mjs studio/brands/<slug> — 선택된 파일을 assets/로 복사/자르고, 크기와 quality(full ≥ 700 px, card ≥ 300 px, avatar-only 그 이하)를 기록하고, 후보 파일을 제거합니다.
일치하는 텍스트 사실을 brand.json에 추가하세요(각각 출처 + 날짜 포함): team(이름, 역할, 자격 증명, 자산 ID), offerings(이름, 세부 정보, 자산 ID), testimonials(이름, 짧은 원문 인용문, 세부 정보, 자산 ID), proof(있는 경우). 저장하기 전에 페이지 텍스트와 비교하여 주장을 확인하세요 — 인용문은 원문 그대로입니다.

고객 사진 사용 권한을 클라이언트와 확인하라고 사용자에게 알리세요.

단계 6 — 구축 및 확인

node .claude/skills/brand-kit/scripts/build-kit.mjs studio/brands/<slug>

on-색상, 농담 스케일, 대비 확인, Google Font 사용 가능 여부를 계산하고, computed에 쓰고, swatch.png를 렌더링합니다. 수정 가능한 모든 경고를 수정하고( muted/ink 명도 조정, 폰트를 가장 가까운 Google Font로 교체하고 원본은 original에 유지) 깨끗해지거나 남은 것이 설명될 때까지 다시 실행하세요. 수정 대신 수락한 각 경고는 usage의 한 줄 규칙이 됩니다 (예: "accent는 채우기 색상; 흰색 위에 강조 텍스트를 사용하지 마세요"). 이렇게 하면 스토리보드 및 렌더링 단계가 이를 존중합니다. 그런 다음 swatch.png를 한 번 보세요 — 이 스킬이 보기 위해 필요한 유일한 이미지입니다.

단계 7 — 승인

사용자에게 스와치와 짧은 요약을 보여주세요:

각 역할 → 16진수, 색상 이름, 출처(derived 항목 플래그 지정)
폰트(및 대체 폰트)
사용된 로고 파일과 필요한 배경
태그라인, 기본 CTA, 연락처, 금지 목록
자산 라이브러리: 종류별 개수, 저해상도 또는 내장 가격이 있는 항목, 권리 고지
남아 있는 경고

사용자가 요청한 변경 사항을 적용하고(사용자 설정 값은 from: "user"로 표시), build-kit.mjs를 다시 실행하고, 승인되면 status: approved로 설정하고 스와치가 최종 상태를 표시하도록 한 번 더 다시 실행하세요.

핸드오프

키트가 승인되면 비디오가 진행 중인 경우 비디오의 brief.md에 brand: <slug>를 넣고, 어떤 단계에서 이를 사용할지 사용자에게 알리세요. 키트 경로, 기본/강조 16진수, 폰트 등 간략하게 마무리하세요.

브랜드 키트