Communitygithub.com

브랜드 수립 또는 감사

제품의 브랜드 아이덴티티를 수립하거나 기존 브랜드를 감사 및 확장하여, 팩토리가 생성하는 UI가 템플릿처럼 보이지 않도록 합니다. BRAND.md와 토큰 파일을 생성합니다.

브랜드 수립 또는 감사란 무엇인가요?

이 스킬은 AI 에이전트(예: Claude Code)가 제품의 시각적 및 언어적 아이덴티티를 정의하거나, 기존 브랜드를 분석하고 확장할 수 있도록 설계되었습니다. 팩토리가 UI를 구축하기 전에 디자인 기반이 필요할 때, 또는 '브랜드 생성', '디자인 시스템 정의'와 같은 티켓이 요청될 때 호출됩니다. 이 스킬은 브랜드 방향, 색상 팔레트, 타이포그래피 페어링, 음성을 포함한 구체적인 아이덴티티를 수립하고, 이를 BRAND.md와 함께 DTCG JSON 또는 CSS 사용자 정의 속성 형태의 토큰 파일로 문서화합니다. 기존 브랜드가 있는 경우 이를 감사하고 확장하며, 없을 경우 제품과 사용자에 적합한 하나의 명확한 방향으로 결정을 내립니다. 또한, 모든 색상 대비가 WCAG 기준을 충족하는지 확인하고, 브랜드가 제공해야 할 UI 품질 목록(예: 스케일 계층, 간격 리듬, 의미론적 색상) 중 최소 4가지를 충족하도록 합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tmj-90/gaffer/tree/HEAD/runner/skills/brand

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

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

문서

브랜드 수립 또는 감사은(는) 무엇을 하나요?

브랜드 없이 UI를 제공하는 팩토리는 템플릿을 제공하는 것과 같습니다. 이 스킬은 제품에 구체적인 시각적 및 언어적 아이덴티티를 부여하거나, 기존 아이덴티티를 감사하고 확장하여, 전달 에이전트가 사용할 수 있는 형태(BRAND.md 및 토큰)로 기록합니다. 이 스킬은 아이덴티티(방향, 팔레트, 타이포그래피 페어링, 음성)를 소유합니다. 토큰 구조는 design-system 스킬에, 표면 실행은 frontend-design 스킬에 속합니다.

깊이참조
팔레트 계층, oklch 토큰, 대비, 타이포그래피 페어링 및 유동적 스케일references/color-and-typography.md
음성 스펙트럼, 특성, 메시징 계층 구조, 일관성 체크리스트references/voice-and-messaging.md

단계

  1. 감지. search_lore를 호출하여 브랜드, 포지셔닝, 음성 및 디자인 ADR을 찾습니다. 저장소에서 BRAND.md, DESIGN.md, 토큰 파일(*.tokens.json, tokens.css, theme.ts), 사용자 정의 속성의 :root 블록, 로고 자산 및 마케팅 카피를 찾습니다. 제품의 README와 티켓을 읽어 대상 사용자와 목적을 파악합니다. 결정: 브랜드가 존재합니까?

  2. 브랜드가 존재함 → 해당 관용구에 맞게 감사 및 확장. 자신의 취향으로 대체하지 마십시오.

    • 필수 품질(4단계) 및 아래 금지 목록과 비교하여 점수를 매기고, 각 격차를 파일과 값과 함께 명시합니다.
    • 브랜드가 사용하는 모든 텍스트/배경 쌍을 모든 테마에서 WCAG 대비(본문 4.5:1, 큰 텍스트 및 UI 3:1)에 대해 측정합니다. 비율을 계산하십시오. oklch 명도는 대비 비율이 아닙니다. 텍스트로 실패하는 브랜드 색상은 더 어두운 텍스트 안전 변형을 받습니다. 면제는 없습니다.
    • 기존 방향의 격차를 채웁니다: 호버/활성 단계, 누락된 표면 계층, 어두운 변형, 텍스트 안전 강조, 누락된 의미론적 역할.
  3. 브랜드 없음 → 하나의 방향으로 결정하고 이것이 이 제품과 사용자에게 적합한 이유를 작성합니다: 편집/매거진, 스위스/인터내셔널, 네오-브루탈리즘, 벤토, 실제 깊이가 있는 글래스모피즘, 라이트 또는 다크 럭셔리, 레트로-퓨처리즘. "클린 미니멀"은 방향이 아닙니다. 다크 모드는 습관이 아닌 사용자를 위해 선택됩니다. 그런 다음 정의합니다:

    • 팔레트를 작업이 명시된 oklch 토큰으로: 표면(최소 두 계층), 텍스트(기본, 희미한), 강조, 그리고 성공/경고/위험/정보 의미론적 역할 — 각각 채우기 색상이 텍스트로 실패할 경우 텍스트 안전 변형 포함.
    • 타이포그래피 페어링 — 디스플레이 + 텍스트 패밀리(이유 포함, 제품이 코드나 데이터를 표시하는 경우 모노 포함), clamp() 유동적 스케일, 로딩 계획: 자체 호스팅, 서브셋, 하나의 중요한 가중치 사전 로드, 메트릭 일치 폴백.
    • 음성 — 사용자, 한 줄 약속, 각각 "말하는 것 / 말하지 않는 것" 쌍이 있는 3~5개의 음성 특성, 오류 및 빈 상태에서 음성이 어떻게 변하는지.
  4. 필수 품질 확인. 브랜드는 제공된 UI가 frontend-design 스킬에 나열된 10가지 품질 중 최소 4가지를 보여줄 수 있도록 해야 합니다(스케일 계층, 간격 리듬, 깊이, 타이포그래피 특성, 의미론적 색상, 설계된 상태, 구성, 분위기, 명확화 동작, 시스템 내 데이터 시각화). BRAND.md에 4가지 이상을 명시합니다.

  5. 산출물 작성. BRAND.md: 방향 및 근거, 팔레트 표(토큰, 값, 작업, 대비 결과), 타이포그래피 페어링 및 스케일, 음성, 제공된 품질, 미해결 질문. 작업이 시각적인 경우, 저장소 형식의 토큰 파일(DTCG JSON 또는 CSS 사용자 정의 속성 — design-system 스킬 참조), 예:

    :root {
      --color-surface: oklch(98% 0.01 95);
      --color-text: oklch(22% 0.02 265);
      --color-accent: oklch(64% 0.19 28); /* 채우기 전용; 텍스트는 --color-accent-text 사용 */
      --color-accent-text: oklch(50% 0.19 28);
      --text-display: clamp(2.5rem, 1rem + 6vw, 6rem);
      --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    }
    
  6. 알 수 없는 전략은 표시하고 발명하지 마십시오. 포지셔닝이나 사용자가 실제로 결정되지 않았고 티켓이 이를 해결하지 않는다면, 임의로 만들어 내지 마십시오. 전달 스킬로서 mark_ticket_blocked를 특정 질문과 함께 사용하고, 지식 시드로서 미해결 질문을 명시한 브랜드를 suggest_lore 합니다.

  7. 적용. 전달 스킬(티켓의 작업 트리 브랜치에 있음 — git branch --show-current로 확인)로서 커밋하고, record-evidence 스킬로 증거(AT당)(BRAND.md diff, 대비 표, 품질 목록)를 기록한 후 중단합니다. 실행기가 검토를 위해 제출합니다. 지식 시드로서 브랜드를 suggest_lore 합니다. 사람이 승인할 때까지 제안 상태로 유지됩니다.

금지 목록 (감사 시 반드시 발견해야 함)

  • 균일한 간격과 계층 구조가 없는 기본 카드 그리드.
  • 중앙 정렬 제목 + 일반 CTA가 있는 그라데이션 블롭 히어로.
  • 수정되지 않은 라이브러리/Tailwind/shadcn 기본값이 완성된 디자인으로 제공되는 경우.
  • 모든 컴포넌트에 동일한 모서리 둥글기, 간격 및 그림자.
  • 하나의 장식용 강조 색상이 있는 회색-배경 흰색.
  • 명시된 이유 없이 기본 글꼴 스택; 이유 없이 두 개 이상의 패밀리.
  • 4.5:1을 충족하지 못하는 본문 크기 텍스트에 강조 색상 사용.
  • 습관보다 적합성에 의해 선택된 반사적 다크 모드.

완료 조건

BRAND.md가 하나의 방향과 그 근거를 명시합니다. 모든 팔레트 쌍이 모든 테마에서 통과하는 측정된 대비 결과를 가지고 있습니다. 타이포그래피 페어링, 스케일 및 로딩 계획이 정의되었습니다. 음성에 예시가 있는 특성이 있습니다. 4개 이상의 필수 품질이 명시되었습니다. 미해결 전략적 질문이 추측보다는 나열되었습니다. 저장소 형식의 토큰이 존재합니다.

규칙

  • 방향을 결정하고 그 이유를 명시하십시오. 절대 "클린 미니멀"이 아닙니다.
  • 리터럴이 아닌 토큰을 사용하여 전달 에이전트가 재사용할 수 있도록 합니다.
  • 기존 브랜드를 해당 관용구로 확장하십시오. 선호도로 덮어쓰지 마십시오.
  • 모션 토큰은 transform/opacity용입니다. 레이아웃 바운드 애니메이션을 시스템에 절대 포함시키지 마십시오.
  • 알 수 없는 전략은 명명된 미해결 질문이며, 발명된 답변이 아닙니다.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

관련 스킬