지식센터 / 레퍼런스

🎨 Claude Design 온보딩 가이드 v1.0 — design-dna-studio 연동

# 🎨 Claude Design 온보딩 가이드 v1.0

> 목적: 비즈스프링 design-dna-studio를 Claude Design에 연결하여 전사 UI 산출물 자동화

> 작성일: 2026-04-24

> 대상: 찰스 (PO)

> 예상 소요: 30~60분 (최초 1회)

> Claude Design 출시일: 2026-04-17 (Opus 4.7, Public Preview)

> 관련 AP: AP-36 (UI 표준 준수)

> 관련 리포: https://github.com/bizspring-inc/design-dna-studio

---

전제 조건 체크리스트

Max vs Team vs Enterprise 차이

• Max: 개인 사용 가능, 팀 공유 제한 (현재 찰스)
• Team: 팀 내 디자인 시스템 공유 가능 ← 비즈스프링 권장 (확장 시)
• Enterprise: usage-based 과금, 대규모 팀용

Claude Design은 별도 주간 한도로 운영되며 기존 챗/Claude Code 한도와 분리.

> 💡 권장 전략: 찰스 Max로 먼저 PoC → 성공 확인 후 Team 플랜 전환 (팀 전체 공유)

---

Phase 1: 최초 접근 (5분)

Step 1-1. Claude Design 활성화

1. https://claude.ai 로그인
2. 좌측 사이드바에서 🎨 팔레트 아이콘 찾기
3. 클릭 → Claude Design 초기 화면 진입

> 🔴 못 찾을 경우: 아직 gradual rollout 중일 수 있음. 대기 또는 Settings > Feature Previews 확인.

Step 1-2. 계정 설정

• 조직(Organization) 선택
• Claude Design 사용 약관 동의
• 일회성 크레딧 확인 (Enterprise는 20 프롬프트 상당)

---

Phase 2: 비즈스프링 디자인 시스템 연결 (15분)

Step 2-1. 새 프로젝트 생성

우상단 + New Project 클릭. 이름: BizSpring Growth Platform

Step 2-2. Design System 온보딩 마법사

프로젝트 생성 시 마법사가 뜸. 없으면:

Settings > Design System > Add Source

Step 2-3. GitHub Repository 연결

소스 유형: GitHub
URL: https://github.com/bizspring-inc/design-dna-studio
Branch: main

연결 후 Claude Design이 자동으로:

• src/index.css 파싱 → 140+ CSS 변수 추출
• tailwind.config.ts 파싱 → 토큰 매핑 인식
• src/components/design-system/registry.ts 파싱 → 26 Atoms + 1 Molecule 목록 획득
• 자동 디자인 시스템 가이드 생성

예상 파싱 결과:

Primary: #41b3f9 (Sky Blue)
Secondary: #7460ee (Purple)
Tertiary: #24c9a5 (Teal)
Typography: Pretendard, Korean optimized (letter-spacing: -0.02em)
Spacing: 2, 4, 8, 16, 24, 32, 48, 64px
Radius: 3, 4, 8, 12, 16px
Components: 26 atoms, 1 molecule

Step 2-4. 추가 자산 업로드

Step 2-5. 연결 테스트

테스트 프롬프트:

비즈스프링 Growth Platform의 대시보드 카드 1개를 만들어줘.
- 타이틀: "오늘의 방문자"
- 숫자: 3,245
- 전일 대비: +12.5%
- 비즈스프링 브랜드 적용

성공 기준:

• ✅ Sky Blue (#41b3f9) 계열 색상
• ✅ Pretendard 폰트
• ✅ gray-150 또는 surface-body 배경
• ✅ rounded-md (8px) 라운드

Tailwind 기본 blue-500이나 #3b82f6이 나오면 → 연결 실패. Phase 2-3 재실행.

---

Phase 3: 첫 실전 프로젝트 (15분)

Step 3-1. GEOcare.AI 소개 1페이지

GEOcare.AI 제품 소개 1페이지 랜딩을 만들어줘.

섹션 구성:
1. Hero (타이틀 + 서브타이틀 + CTA 버튼)
2. 3가지 핵심 기능 카드
3. 사용 프로세스 (4단계)
4. 고객 로고 리스트
5. 최종 CTA + 문의 폼

브랜드 톤: 의료 AI, 신뢰감 있으면서도 친근함
비즈스프링 디자인 시스템 엄수
반응형 (모바일, 태블릿, 데스크톱)

Step 3-2. 결과 검토

• [ ] Primary 색상 #41b3f9?
• [ ] Secondary/Tertiary = Purple/Teal?
• [ ] 폰트 Pretendard?
• [ ] Breakpoint sm=992px부터? (일반 웹사이트는 640px)
• [ ] Card 스타일 border + rounded-md?
• [ ] 버튼 Sky 배경 + 흰 글씨?

Step 3-3. Refinement

• Inline comment: 특정 요소에 직접 코멘트로 수정 요청
• Direct edit: 텍스트 클릭 후 바로 수정
• Custom sliders: Claude가 상황에 맞는 슬라이더 생성

---

Phase 4: Custom Instructions (옵션)

Settings > Design System > Custom Instructions:

You are designing UI for BizSpring Inc., a Korean B2B SaaS company.

MUST follow:
1. Use ONLY the semantic tokens from design-dna-studio
2. Font: Pretendard only (Korean optimization)
3. Letter-spacing: -0.02em globally
4. Breakpoints: sm=992px, md=1170px, lg=1528px, xl=1920px
5. Spacing: 2, 4, 8, 16, 24, 32, 48, 64px only
6. Border radius: 3, 4, 8, 12, 16px only

MUST NOT:
- Use Tailwind default palette (blue-500, gray-700, etc.)
- Use raw hex/rgb values
- Use non-Pretendard fonts
- Use breakpoints smaller than 992px

Components priority:
1. Atoms from src/components/atoms/
2. Molecules from src/components/molecules/
3. shadcn/ui primitives from src/components/ui/
4. Custom composition (last resort)

상황별 추가 Instructions

---

Phase 5: 팀 협업 (Team/Enterprise 시)

Workspace 구조 권장

모든 워크스페이스 동일한 design-dna-studio 소스 공유 → 일관성.

---

Phase 6: Claude Code Handoff

Step 6-1. Handoff bundle 생성

Claude Design 우상단 Handoff to Claude Code 클릭.

자동 생성:

• 디자인 토큰 맵핑 명세서
• 컴포넌트 구조 트리
• 인터랙션 정의
• Asset 리스트

Step 6-2. Claude Code 구현

이 handoff bundle을 기반으로 src/pages/geocare-landing.tsx를 구현해.

요구사항:
1. design-dna-studio의 registry 컴포넌트만 사용
2. 커스텀 HTML 최소화
3. TypeScript strict mode
4. 반응형 (sm=992부터)
5. 완성 후 bun run build로 빌드 검증

---

Phase 7: 운영 (상시)

사용량 모니터링

• 매주 금요일: Settings > Usage > Claude Design
• 주간 소진율 80% 넘으면 다음 주 계획 조정

design-dna-studio 업데이트 반영

• 새 프로젝트 생성 시 자동 최신 버전 반영
• 진행 중 프로젝트는 Settings > Design System > Refresh 수동 필요

피드백 루프

• 부족 컴포넌트 발견 → GitHub Issue 생성
• 디자이너 추가 → main 머지
• Claude Design이 다음 세션에서 자동 인식

---

🚨 트러블슈팅

Q1. Sky Blue 대신 일반 Blue가 나와요

원인: Custom instruction 누락 또는 GitHub 연결 실패

해결: Settings > Design System 연결 상태 확인 + Phase 4 Custom Instruction 추가

Q2. 한글이 깨져요

원인: Pretendard 로드 실패

해결: 결과 HTML <head>에 Pretendard CDN 링크 확인. 없으면 폰트 파일 직접 업로드

Q3. 생성된 컴포넌트가 registry에 없어요

원인: Molecules 부족으로 Claude가 임의 조립

해결: Molecules 확장 스펙 따라 디자이너와 협의, 추가 후 재생성

Q4. 사용량이 너무 빨리 소진돼요

해결:

• 초기 프롬프트 상세 작성 → 재생성 감소
• Refinement는 inline comment 사용 (전체 재생성보다 효율)
• Tweaks/sliders 적극 활용

Q5. 디자인 시스템을 무시해요

해결:

• 새 프로젝트 시작 (세션 누적 오염 해소)
• 프롬프트에 명시: "Must use design-dna-studio tokens"

---

📊 성공 지표

1주 내

• [ ] 1개 프로젝트 완성 (GEOcare 랜딩 or 유사)
• [ ] 디자인 시스템 자동 적용률 80%+
• [ ] Claude Code handoff 1회 이상 성공

1개월 내

• [ ] 10개+ 프로젝트
• [ ] Molecules 5개+ 추가 → 자동 적용률 95%+
• [ ] 팀 멤버 3명+ 활용
• [ ] 평균 제안서 제작 시간 50% 단축

3개월 내

• [ ] 전사 UI 산출물의 90%+가 design-dna-studio 기반
• [ ] 외부 고객 피드백: "브랜드가 통일되어 보인다"
• [ ] ROI 측정: 디자인 리소스 절감 X시간/월

---

🎬 오늘 당장 할 일 (30분)

1. ⏱️ 3분: claude.ai 로그인 → 팔레트 아이콘 확인
2. ⏱️ 5분: New Project → GitHub URL 연결 (Phase 2-3)
3. ⏱️ 2분: 비즈스프링 로고 파일 업로드
4. ⏱️ 5분: Step 2-5 테스트 프롬프트 실행
5. ⏱️ 15분: Step 3-1 GEOcare 랜딩 생성
6. ⏱️ 피드백: 결과 스크린샷 → Claude 공유 → AP-36 미세 조정

---

📚 관련 문서

---

> 💡 핵심 교훈:

> "도구가 아무리 좋아도 디자인 시스템이 없으면 생성할 때마다 스타일이 달라진다.

> 반대로 디자인 시스템이 견고하면, AI는 그것을 완벽하게 복제할 수 있다.

> design-dna-studio 구축 = Claude Design 활용의 전제 조건."

관련 문서

이 문서를 참조하는 문서 (역링크)

• 없음

다른 표현: Markdown · JSON · 최종 갱신 2026-08-24