로고 하나로 AI 브랜드 에이전트 만들기 - Claude Design

1. 문제: AI는 내 브랜드를 모른다

"이 버튼 우리 브랜드 스타일로 만들어줘."

AI는 이 요청을 이해하지 못한다. 브랜드 컬러가 무엇인지, 버튼 모서리가 얼마나 둥근지, 어떤 폰트를 쓰는지 — 컨텍스트가 없으면 매번 추측한다. 결과물이 일관되지 않는 이유다.

Figma에서 토큰을 JSON으로 내보내도 문제는 남는다:

{ "color": { "primary": { "value": "#C15433" } } }

값은 있지만 의미가 없다. AI는 이 색이 버튼에 쓰이는지, 배경에 쓰이는지 추론해야 한다.

---

2. Claude Design이란

claude.ai/design은 로고를 업로드하면 브랜드 시스템을 자동으로 생성한다.
색상을 추출하고, 타이포그래피를 제안하고, 컴포넌트 스타일을 잡는다.
결과물은 스킬(Skill) 형태로 다운로드된다 — AI 에이전트가 직접 소비할 수 있는 포맷이다.

---

3. 스킬 안에 뭐가 있나

다운로드한 폴더 구조:

Design System/
  SKILL.md              — 스킬 정의 및 사용 지침
  README.md             — 전체 브랜드 규칙
  colors_and_type.css   — CSS 토큰
  assets/
    logo.svg
    logo-cream.svg
    mark.svg
  ui_kits/
    console/            — 대시보드 UI 킷
    marketing/          — 마케팅 사이트 UI 킷

README.md가 핵심이다. 색상과 타이포에서 그치지 않는다:

• Color — 의미 레이블이 붙은 토큰 (--ember: CTA, --paper: 기본 배경)
• Typography — 폰트 패밀리, 크기 계층, 자간, 줄간격
• Voice & Copy — 어휘 선택, 문장 톤, 금지 표현
• Motion — 이징 곡선, 지속시간, "바운스 없음" 같은 금지 규칙
• Iconography — 선 굵기, 크기 시스템, 에모지 금지
• Component rules — 버튼 상태, 카드 스타일, 호버 동작

---

4. 직접 해보기

1) 로고 업로드

claude.ai/design에서 로고 SVG를 업로드한다.
Claude가 로고의 색상·형태를 분석해 브랜드 시스템을 제안한다.

생성된 UI 킷 예시 — Console 대시보드:

2) 스킬 다운로드 및 설치

zip 파일을 다운로드하고 압축을 해제한 뒤 스킬로 설치한다:

unzip "Design System.zip"
claude install-skill "./Design System"

팀에서 사용한다면

필요한 파일만 Git 저장소에 복사해 공유한다. ui_kits/, fonts/, preview/는 제외해도 무방하다:

cp -r "./Design System/"{SKILL.md,README.md,colors_and_type.css,assets} ./your-repo/design/
git add design/ && git commit -m "add design system"

팀원은 저장소 클론 후 동일하게 설치한다:

claude install-skill "./design"

3) 브랜드 컨텍스트로 활용

설치 후 Claude Code에서 브랜드를 참조해 UI를 생성할 수 있다:

가격 플랜 카드 컴포넌트 3개 만들어줘.
Primary 색상을 CTA 버튼에, 기본 배경색을 카드 배경에 사용해.

생성 결과:

---

5. 마치며

Claude Design은 디자이너 없이 브랜드 일관성을 유지하는 현실적인 방법이다.
로고 하나에서 출발해 색상·타이포·Voice·Motion까지 포함한 브랜드 시스템을 만들고, AI 에이전트가 이것을 컨텍스트로 소비한다.

"우리 브랜드 스타일로"가 드디어 통하게 된다.

---

참조

• Claude Design — Anthropic, 로고 기반 디자인 시스템 생성