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

> # 🎨 Claude Design 온보딩 가이드 v1.0 > **목적**: 비즈스프링 `design-dna-studio`를 Claude Design에 연결하여 전사 UI 산출물 자동화 > **작성일**: 2026-04-24 > **대상**: 찰스 (PO) > **예상 소요**: 30~

## 핵심 요약


# 🎨 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

---

## 전제 조건 체크리스트

| # | 확인 항목 | 상태 | 확인 방법 |
|---|----------|------|----------|
| 1 | Claude **Max/Team/Enterprise** 플랜 | ✅ (찰스 Max) | claude.ai → 설정 → 요금제 |
| 2 | design-dna-studio repo **공개 상태** | ✅ (04-24) | github.com/bizspring-inc/design-dna-studio |
| 3 | 비즈스프링 **브랜드 자산 파일** | 🟡 확인 필요 | 로고(SVG/PNG), Pretendard 폰트 파일 |

### 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. 추가 자산 업로드

| 자산 | 필수 | 업로드 방법 |
|------|------|------------|
| 비즈스프링 로고 (SVG) | ✅ | Settings > Assets > Upload Logo |
| Pretendard 폰트 파일 | 🟡 (CDN 로드 중) | Settings > Assets > Upload Font |
| 브랜드 가이드 PDF | 🟡 | Settings > Brand Docs |
| 제품 스크린샷 | 🟡 | Settings > Reference Images |

### 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

| 상황 | 추가 Instruction |
|------|-----------------|
| 의료/헬스케어 (GEOcare) | "Use calming, trustworthy tone. Avoid aggressive red." |
| 영업/제안 (SALES) | "Use confident, data-driven layout with clear KPIs." |
| 관리자 대시보드 (GP 상담사) | "Dense information, high signal-to-noise ratio." |
| 고객사 프리미엄 (PREMIUM_GEO) | "Minimalist, elegant, more whitespace." |

---

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

### Workspace 구조 권장

| Workspace | 멤버 | 용도 |
|-----------|------|------|
| **BizSpring Master** | 찰스 + 주요 리드 | 디자인 시스템 관리 |
| **GEOcare.AI** | GEOcare 팀 | 제품 프로토타입 |
| **Sales & Proposals** | 영업팀 + 옥경화 상무 | 고객 제안서 |
| **Internal Tools** | 개발팀 | 관리자 화면 |

모든 워크스페이스 **동일한 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 미세 조정

---

## 📚 관련 문서

| 문서 | 위치 |
|------|------|
| AP-36 초안 | KHub: `7153353a-2394-437c-b3dc-86a329c2bf97` |
| Molecules 확장 스펙 | KHub: `d44126fd-0485-4796-ae8c-45a73c0d92df` |
| design-dna-studio repo | https://github.com/bizspring-inc/design-dna-studio |
| Claude Design 공지 | https://www.anthropic.com/news/claude-design-anthropic-labs |

---

> 💡 **핵심 교훈**:
> "도구가 아무리 좋아도 디자인 시스템이 없으면 생성할 때마다 스타일이 달라진다.
>  반대로 디자인 시스템이 견고하면, AI는 그것을 완벽하게 복제할 수 있다.
>  design-dna-studio 구축 = Claude Design 활용의 전제 조건."


## FAQ


---
출처: https://bizspring.ai/kb/ref/khub/common-claude-design-온보딩-가이드-v1-0-design-dna-studio-연동 · 최종 갱신 2026-08-24T11:53:44.809175+00:00