Brand Snapshot은(는) 무엇을 하나요?
브랜드의 시각적 및 언어적 기본 사항을 단 몇 분 만에 두 페이지로 정리합니다: 자신 있게 사용할 수 있는 색상, 서체 및 그 무료 대체 폰트, 로고와 UI의 동작 방식, 브랜드의 톤, 공식 파일로의 링크가 포함됩니다. Company Brief 스킬의 브랜드 섹션에 대한 간략한 버전입니다.
사용법
/brand-snapshot <URL 또는 브랜드 이름> [tokens only]
일반적인 요청도 작동합니다:
- "linear.app 의 브랜드 스냅샷."
- "Patagonia가 사용하는 색상과 폰트는 무엇인가요?"
- "stripe.com에서 디자인 토큰을 가져와서 피치 목업용으로 만들어 줘."
- "Oatly와 Liquid Death의 스냅샷을 나란히." (각각 하나의 스냅샷 생성)
"tokens only" 옵션은 PDF 생성을 건너뛰고 tokens.json 및 tokens.css 파일을 반환합니다.
파일. <skill-dir>은 이 SKILL.md 파일이 위치한 이 스킬의 폴더를 의미합니다. 템플릿은 assets/에, 스크립트는 scripts/에 있으며, 공유 PDF 단계(폰트, 색상, 렌더링, 검사)는 references/rendering.md에 있습니다.
엄격한 규칙
- 라이브 사이트 우선. 색상과 폰트는 사이트의 계산된 스타일(references/brand-extraction.md 참조)에서 가져오며,
Verified태그와 날짜를 표시합니다. 공식 가이드라인이나 보도 자료가 사이트와 일치하지 않을 경우 우선하며, 두 경우를 모두 기록합니다. Brandfetch와 같은 타사 출처는Reported로 표시합니다. - 로고를 설명하고, 복사하지 마세요. 마크와 워드마크를 글로 설명하고 공식 보도 자료나 브랜드 포털로 연결하세요. 로고, 마스코트, 광고 이미지를 다시 그리거나, 추적하거나, 임베드하지 마십시오. 대체 폰트로 설정된 견본과 서체 견본은 괜찮습니다.
- 대체 폰트임을 명시하세요. 브랜드 폰트가 유료 또는 맞춤 폰트인 경우, 해당 폰트 이름과 파운드리를 명시하고, 가장 가까운 무료 폰트로 견본을 설정한 후 대체 폰트임을 표시합니다.
- 사용 약관이 적용됩니다. 브랜드의 자산은 해당 브랜드에 속하며, 해당 가이드라인이 사용을 규율한다는 점을 독자에게 상기시키세요.
- 크레딧 표시: 스냅샷 하단에 작은 Beautiful Engine 크레딧을 포함합니다. 사용자가 생략을 요청하는 경우에만 제외합니다.
워크플로우
- 사이트 열기 가능한 경우 브라우저에서 사이트를 엽니다(도메인을 한 번 승인하라는 메시지가 표시될 수 있음). 그렇지 않으면 가져옵니다. 사용자가 의도한 브랜드가 맞는지 확인합니다.
- 데이터 추출 references/brand-extraction.md의 섹션 1에 있는 스크립트를 사용하여 홈페이지와 추가 페이지(가격, 제품 또는 소개 중 하나)에서 헤드라인 스타일, 로드된 폰트, 화면 영역별 색상, 스타일시트 색상, CSS 사용자 정의 속성, 그라데이션, 버튼 및 카드 스타일, 로고 정보를 추출합니다. 로고를 설명하기 위해 로고 부분을 확대하여 스크린샷을 찍고, 히어로 영역의 이미지 스타일을 설명하기 위해 히어로 부분도 스크린샷을 찍습니다.
- 공식 출처 확인: 브랜드의 보도 자료 키트, 브랜드 포털, 디자인 시스템 사이트 또는 가이드라인 PDF, 그리고 서체의 파운드리를 검색합니다. 하위 브랜드(이벤트, 제품 라인 등)는 별도로 기록합니다.
- 팔레트 선택: 중요도 순서대로 4~8개의 색상(기본, 보조, 강조, 중립)을 선택하고, 각각 간단한 이름과 역할을 부여합니다. 그런 다음 다음을 실행합니다:
python3 <skill-dir>/scripts/palette.py --colors "Name:#hex,..." --font-display "…" --font-body "…" --font-mono "…" --radius 8px --brand "<Brand>" > swatches.html이 스크립트는tokens.json과tokens.css를 작성하고 대비 검사가 포함된 견본 테이블을 출력합니다. - PDF용 폰트: 브랜드의 무료 폰트 또는 대체 폰트를
scripts/fonts.py로 설치하고,scripts/tokens.py를 브랜드의 기본 색상과 강조 색상으로 실행하여 스냅샷 자체가 브랜드의 느낌을 가지도록 합니다(references/rendering.md 참조). - 브랜드 보이스: 3~4가지 특성을 선정하고, 각 특성에 대해 사이트에서 가져온 실제 문구를 인용문으로 제시합니다.
- PDF 제작:
assets/snapshot-template.html(base.css복사)에서 시작하여 견본 테이블을 붙여넣고, 렌더링하고, 감사하고, 연락처 시트를 확인합니다. 두 페이지로 제한하며, 세 번째 페이지로 넘어가지 않도록 내용을 조정합니다. - 전달: PDF,
tokens.json,tokens.css를 전달합니다. 답변에는 기본 색상과 강조 색상의 16진수 코드, 폰트 및 대체 폰트, 공식 가이드라인의 위치(또는 공개된 가이드라인이 없음을 명시)를 포함합니다.
출력 파일 이름: <Brand>-Brand-Snapshot-<YYYY-MM>.pdf.