브랜드 수립 또는 감사은(는) 무엇을 하나요?
브랜드 없이 UI를 제공하는 팩토리는 템플릿을 제공하는 것과 같습니다. 이 스킬은 제품에 구체적인 시각적 및 언어적 아이덴티티를 부여하거나, 기존 아이덴티티를 감사하고 확장하여, 전달 에이전트가 사용할 수 있는 형태(BRAND.md 및 토큰)로 기록합니다. 이 스킬은 아이덴티티(방향, 팔레트, 타이포그래피 페어링, 음성)를 소유합니다. 토큰 구조는 design-system 스킬에, 표면 실행은 frontend-design 스킬에 속합니다.
| 깊이 | 참조 |
|---|---|
팔레트 계층, oklch 토큰, 대비, 타이포그래피 페어링 및 유동적 스케일 | references/color-and-typography.md |
| 음성 스펙트럼, 특성, 메시징 계층 구조, 일관성 체크리스트 | references/voice-and-messaging.md |
단계
-
감지.
search_lore를 호출하여 브랜드, 포지셔닝, 음성 및 디자인 ADR을 찾습니다. 저장소에서BRAND.md,DESIGN.md, 토큰 파일(*.tokens.json,tokens.css,theme.ts), 사용자 정의 속성의:root블록, 로고 자산 및 마케팅 카피를 찾습니다. 제품의 README와 티켓을 읽어 대상 사용자와 목적을 파악합니다. 결정: 브랜드가 존재합니까? -
브랜드가 존재함 → 해당 관용구에 맞게 감사 및 확장. 자신의 취향으로 대체하지 마십시오.
- 필수 품질(4단계) 및 아래 금지 목록과 비교하여 점수를 매기고, 각 격차를 파일과 값과 함께 명시합니다.
- 브랜드가 사용하는 모든 텍스트/배경 쌍을 모든 테마에서 WCAG 대비(본문 4.5:1, 큰 텍스트 및 UI 3:1)에 대해 측정합니다. 비율을 계산하십시오.
oklch명도는 대비 비율이 아닙니다. 텍스트로 실패하는 브랜드 색상은 더 어두운 텍스트 안전 변형을 받습니다. 면제는 없습니다. - 기존 방향의 격차를 채웁니다: 호버/활성 단계, 누락된 표면 계층, 어두운 변형, 텍스트 안전 강조, 누락된 의미론적 역할.
-
브랜드 없음 → 하나의 방향으로 결정하고 이것이 이 제품과 사용자에게 적합한 이유를 작성합니다: 편집/매거진, 스위스/인터내셔널, 네오-브루탈리즘, 벤토, 실제 깊이가 있는 글래스모피즘, 라이트 또는 다크 럭셔리, 레트로-퓨처리즘. "클린 미니멀"은 방향이 아닙니다. 다크 모드는 습관이 아닌 사용자를 위해 선택됩니다. 그런 다음 정의합니다:
- 팔레트를 작업이 명시된
oklch토큰으로: 표면(최소 두 계층), 텍스트(기본, 희미한), 강조, 그리고 성공/경고/위험/정보 의미론적 역할 — 각각 채우기 색상이 텍스트로 실패할 경우 텍스트 안전 변형 포함. - 타이포그래피 페어링 — 디스플레이 + 텍스트 패밀리(이유 포함, 제품이 코드나 데이터를 표시하는 경우 모노 포함),
clamp()유동적 스케일, 로딩 계획: 자체 호스팅, 서브셋, 하나의 중요한 가중치 사전 로드, 메트릭 일치 폴백. - 음성 — 사용자, 한 줄 약속, 각각 "말하는 것 / 말하지 않는 것" 쌍이 있는 3~5개의 음성 특성, 오류 및 빈 상태에서 음성이 어떻게 변하는지.
- 팔레트를 작업이 명시된
-
필수 품질 확인. 브랜드는 제공된 UI가
frontend-design스킬에 나열된 10가지 품질 중 최소 4가지를 보여줄 수 있도록 해야 합니다(스케일 계층, 간격 리듬, 깊이, 타이포그래피 특성, 의미론적 색상, 설계된 상태, 구성, 분위기, 명확화 동작, 시스템 내 데이터 시각화).BRAND.md에 4가지 이상을 명시합니다. -
산출물 작성.
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); } -
알 수 없는 전략은 표시하고 발명하지 마십시오. 포지셔닝이나 사용자가 실제로 결정되지 않았고 티켓이 이를 해결하지 않는다면, 임의로 만들어 내지 마십시오. 전달 스킬로서
mark_ticket_blocked를 특정 질문과 함께 사용하고, 지식 시드로서 미해결 질문을 명시한 브랜드를suggest_lore합니다. -
적용. 전달 스킬(티켓의 작업 트리 브랜치에 있음 —
git branch --show-current로 확인)로서 커밋하고,record-evidence스킬로 증거(AT당)(BRAND.mddiff, 대비 표, 품질 목록)를 기록한 후 중단합니다. 실행기가 검토를 위해 제출합니다. 지식 시드로서 브랜드를suggest_lore합니다. 사람이 승인할 때까지 제안 상태로 유지됩니다.
금지 목록 (감사 시 반드시 발견해야 함)
- 균일한 간격과 계층 구조가 없는 기본 카드 그리드.
- 중앙 정렬 제목 + 일반 CTA가 있는 그라데이션 블롭 히어로.
- 수정되지 않은 라이브러리/Tailwind/shadcn 기본값이 완성된 디자인으로 제공되는 경우.
- 모든 컴포넌트에 동일한 모서리 둥글기, 간격 및 그림자.
- 하나의 장식용 강조 색상이 있는 회색-배경 흰색.
- 명시된 이유 없이 기본 글꼴 스택; 이유 없이 두 개 이상의 패밀리.
- 4.5:1을 충족하지 못하는 본문 크기 텍스트에 강조 색상 사용.
- 습관보다 적합성에 의해 선택된 반사적 다크 모드.
완료 조건
BRAND.md가 하나의 방향과 그 근거를 명시합니다. 모든 팔레트 쌍이 모든 테마에서 통과하는 측정된 대비 결과를 가지고 있습니다. 타이포그래피 페어링, 스케일 및 로딩 계획이 정의되었습니다. 음성에 예시가 있는 특성이 있습니다. 4개 이상의 필수 품질이 명시되었습니다. 미해결 전략적 질문이 추측보다는 나열되었습니다. 저장소 형식의 토큰이 존재합니다.
규칙
- 방향을 결정하고 그 이유를 명시하십시오. 절대 "클린 미니멀"이 아닙니다.
- 리터럴이 아닌 토큰을 사용하여 전달 에이전트가 재사용할 수 있도록 합니다.
- 기존 브랜드를 해당 관용구로 확장하십시오. 선호도로 덮어쓰지 마십시오.
- 모션 토큰은
transform/opacity용입니다. 레이아웃 바운드 애니메이션을 시스템에 절대 포함시키지 마십시오. - 알 수 없는 전략은 명명된 미해결 질문이며, 발명된 답변이 아닙니다.