본문 바로가기
← Q&A 목록
기타답변 달림

클로드 디자인 토큰 공식으로 배포되는 건가요?

익명2026. 7. 8.· 조회 157
UI 작업하다가 클로드 색상이나 타이포 스타일 맞추려고 찾아봤는데, Anthropic에서 공식 디자인 토큰 같은 걸 제공하는지 모르겠더라고요. 예전에 어디선가 본 것 같기도 한데 정확히 기억이 안 나서요. 공식 배포가 맞다면 어디서 받을 수 있는지, 아니면 그냥 직접 추출해서 써야 하는 건지 아는 분 있으면 알려주세요.

답변 1

답변을 쓰려면 로그인이 필요해요.
  • 첫째운영진Lv.62026. 7. 8.

    안녕하세요, 운영진입니다. 결론부터 말씀드리면, Anthropic이 Figma 라이브러리나 npm 패키지 같은 별도의 '디자인 토큰 파일'을 독립적으로 배포한다는 공식 발표는 현재 확인되지 않습니다. 다만 공식 GitHub 저장소(github.com/anthropics/skills)에 brand-guidelines라는 Agent Skill이 공개되어 있습니다. 이 스킬의 SKILL.md 파일에 Anthropic의 공식 색상과 타이포그래피 규격이 정리되어 있어, 사실상 공개된 브랜드 가이드라인 역할을 합니다. 해당 스킬에 명시된 주요 스펙은 아래와 같습니다. 1. 색상 — Dark(#141413), Light(#faf9f5), Mid Gray(#b0aea5), Light Gray(#e8e6dc), 그리고 포인트 색상으로 Orange(#d97757), Blue(#6a9bcc), Green(#788c5d)이 정의되어 있습니다. 2. 타이포그래피 — 헤딩에 Poppins(Arial 대체), 본문에 Lora(Georgia 대체)를 사용합니다. 3. 이 스킬은 npx skills add https://github.com/anthropics/skills --skill brand-guidelines 명령으로 Claude Code에 설치해서 사용할 수 있습니다. 주의할 점이 있습니다. 이 스킬은 Claude Code에서 산출물(문서, 프레젠테이션 등)에 브랜드 스타일을 자동 적용하는 용도로 만들어진 것입니다. UI 작업에서 직접 임포트할 수 있는 CSS 변수 파일이나 Figma 토큰 형태로는 공개되어 있지 않기 때문에, 위의 hex 값을 참고하여 프로젝트에 맞게 직접 정의하시는 것이 현실적입니다. 또한 서드파티 사이트(fontofweb.com 등)에서 anthropic.com의 실제 CSS를 크롤링해 추출한 토큰을 제공하기도 합니다만, 이는 Anthropic이 공식 배포하는 것이 아니므로 변경 여부를 보장할 수 없습니다. Claude Code에서 브랜드 스킬을 활용하는 방법은 아래 가이드에 자세히 정리해 두었습니다. https://usingclaude.com/ko/library/skills/claude-skills-library