{
  "id": "04d90ee0-6c12-4380-a996-7225e1af717c",
  "slug": "ref/khub/common-claude-design-온보딩-가이드-v1-0-design-dna-studio-연동",
  "doc_type": "ref",
  "title": "🎨 Claude Design 온보딩 가이드 v1.0 — design-dna-studio 연동",
  "title_en": null,
  "one_liner": "# 🎨 Claude Design 온보딩 가이드 v1.0 > **목적**: 비즈스프링 `design-dna-studio`를 Claude Design에 연결하여 전사 UI 산출물 자동화 > **작성일**: 2026-04-24 > **대상**: 찰스 (PO) > **예상 소요**: 30~",
  "summary_bullets": [],
  "body_md": "# 🎨 Claude Design 온보딩 가이드 v1.0\n\n> **목적**: 비즈스프링 `design-dna-studio`를 Claude Design에 연결하여 전사 UI 산출물 자동화\n> **작성일**: 2026-04-24\n> **대상**: 찰스 (PO)\n> **예상 소요**: 30~60분 (최초 1회)\n> **Claude Design 출시일**: 2026-04-17 (Opus 4.7, Public Preview)\n> **관련 AP**: AP-36 (UI 표준 준수)\n> **관련 리포**: https://github.com/bizspring-inc/design-dna-studio\n\n---\n\n## 전제 조건 체크리스트\n\n| # | 확인 항목 | 상태 | 확인 방법 |\n|---|----------|------|----------|\n| 1 | Claude **Max/Team/Enterprise** 플랜 | ✅ (찰스 Max) | claude.ai → 설정 → 요금제 |\n| 2 | design-dna-studio repo **공개 상태** | ✅ (04-24) | github.com/bizspring-inc/design-dna-studio |\n| 3 | 비즈스프링 **브랜드 자산 파일** | 🟡 확인 필요 | 로고(SVG/PNG), Pretendard 폰트 파일 |\n\n### Max vs Team vs Enterprise 차이\n\n- **Max**: 개인 사용 가능, 팀 공유 제한 (현재 찰스)\n- **Team**: 팀 내 디자인 시스템 공유 가능 ← 비즈스프링 권장 (확장 시)\n- **Enterprise**: usage-based 과금, 대규모 팀용\n\nClaude Design은 별도 주간 한도로 운영되며 기존 챗/Claude Code 한도와 분리.\n\n> 💡 **권장 전략**: 찰스 Max로 먼저 PoC → 성공 확인 후 Team 플랜 전환 (팀 전체 공유)\n\n---\n\n## Phase 1: 최초 접근 (5분)\n\n### Step 1-1. Claude Design 활성화\n\n1. https://claude.ai 로그인\n2. 좌측 사이드바에서 **🎨 팔레트 아이콘** 찾기\n3. 클릭 → Claude Design 초기 화면 진입\n\n> 🔴 **못 찾을 경우**: 아직 gradual rollout 중일 수 있음. 대기 또는 Settings > Feature Previews 확인.\n\n### Step 1-2. 계정 설정\n- 조직(Organization) 선택\n- Claude Design 사용 약관 동의\n- 일회성 크레딧 확인 (Enterprise는 20 프롬프트 상당)\n\n---\n\n## Phase 2: 비즈스프링 디자인 시스템 연결 (15분)\n\n### Step 2-1. 새 프로젝트 생성\n\n우상단 `+ New Project` 클릭. 이름: `BizSpring Growth Platform`\n\n### Step 2-2. Design System 온보딩 마법사\n\n프로젝트 생성 시 마법사가 뜸. 없으면:\n**Settings > Design System > Add Source**\n\n### Step 2-3. GitHub Repository 연결\n\n```\n소스 유형: GitHub\nURL: https://github.com/bizspring-inc/design-dna-studio\nBranch: main\n```\n\n연결 후 Claude Design이 자동으로:\n- `src/index.css` 파싱 → 140+ CSS 변수 추출\n- `tailwind.config.ts` 파싱 → 토큰 매핑 인식\n- `src/components/design-system/registry.ts` 파싱 → 26 Atoms + 1 Molecule 목록 획득\n- 자동 디자인 시스템 가이드 생성\n\n**예상 파싱 결과**:\n```\nPrimary: #41b3f9 (Sky Blue)\nSecondary: #7460ee (Purple)\nTertiary: #24c9a5 (Teal)\nTypography: Pretendard, Korean optimized (letter-spacing: -0.02em)\nSpacing: 2, 4, 8, 16, 24, 32, 48, 64px\nRadius: 3, 4, 8, 12, 16px\nComponents: 26 atoms, 1 molecule\n```\n\n### Step 2-4. 추가 자산 업로드\n\n| 자산 | 필수 | 업로드 방법 |\n|------|------|------------|\n| 비즈스프링 로고 (SVG) | ✅ | Settings > Assets > Upload Logo |\n| Pretendard 폰트 파일 | 🟡 (CDN 로드 중) | Settings > Assets > Upload Font |\n| 브랜드 가이드 PDF | 🟡 | Settings > Brand Docs |\n| 제품 스크린샷 | 🟡 | Settings > Reference Images |\n\n### Step 2-5. 연결 테스트\n\n테스트 프롬프트:\n\n```\n비즈스프링 Growth Platform의 대시보드 카드 1개를 만들어줘.\n- 타이틀: \"오늘의 방문자\"\n- 숫자: 3,245\n- 전일 대비: +12.5%\n- 비즈스프링 브랜드 적용\n```\n\n**성공 기준**:\n- ✅ Sky Blue (#41b3f9) 계열 색상\n- ✅ Pretendard 폰트\n- ✅ `gray-150` 또는 `surface-body` 배경\n- ✅ `rounded-md` (8px) 라운드\n\nTailwind 기본 `blue-500`이나 `#3b82f6`이 나오면 → 연결 실패. Phase 2-3 재실행.\n\n---\n\n## Phase 3: 첫 실전 프로젝트 (15분)\n\n### Step 3-1. GEOcare.AI 소개 1페이지\n\n```\nGEOcare.AI 제품 소개 1페이지 랜딩을 만들어줘.\n\n섹션 구성:\n1. Hero (타이틀 + 서브타이틀 + CTA 버튼)\n2. 3가지 핵심 기능 카드\n3. 사용 프로세스 (4단계)\n4. 고객 로고 리스트\n5. 최종 CTA + 문의 폼\n\n브랜드 톤: 의료 AI, 신뢰감 있으면서도 친근함\n비즈스프링 디자인 시스템 엄수\n반응형 (모바일, 태블릿, 데스크톱)\n```\n\n### Step 3-2. 결과 검토\n\n- [ ] Primary 색상 `#41b3f9`?\n- [ ] Secondary/Tertiary = Purple/Teal?\n- [ ] 폰트 Pretendard?\n- [ ] Breakpoint sm=992px부터? (일반 웹사이트는 640px)\n- [ ] Card 스타일 `border + rounded-md`?\n- [ ] 버튼 Sky 배경 + 흰 글씨?\n\n### Step 3-3. Refinement\n- **Inline comment**: 특정 요소에 직접 코멘트로 수정 요청\n- **Direct edit**: 텍스트 클릭 후 바로 수정\n- **Custom sliders**: Claude가 상황에 맞는 슬라이더 생성\n\n---\n\n## Phase 4: Custom Instructions (옵션)\n\n**Settings > Design System > Custom Instructions**:\n\n```\nYou are designing UI for BizSpring Inc., a Korean B2B SaaS company.\n\nMUST follow:\n1. Use ONLY the semantic tokens from design-dna-studio\n2. Font: Pretendard only (Korean optimization)\n3. Letter-spacing: -0.02em globally\n4. Breakpoints: sm=992px, md=1170px, lg=1528px, xl=1920px\n5. Spacing: 2, 4, 8, 16, 24, 32, 48, 64px only\n6. Border radius: 3, 4, 8, 12, 16px only\n\nMUST NOT:\n- Use Tailwind default palette (blue-500, gray-700, etc.)\n- Use raw hex/rgb values\n- Use non-Pretendard fonts\n- Use breakpoints smaller than 992px\n\nComponents priority:\n1. Atoms from src/components/atoms/\n2. Molecules from src/components/molecules/\n3. shadcn/ui primitives from src/components/ui/\n4. Custom composition (last resort)\n```\n\n### 상황별 추가 Instructions\n\n| 상황 | 추가 Instruction |\n|------|-----------------|\n| 의료/헬스케어 (GEOcare) | \"Use calming, trustworthy tone. Avoid aggressive red.\" |\n| 영업/제안 (SALES) | \"Use confident, data-driven layout with clear KPIs.\" |\n| 관리자 대시보드 (GP 상담사) | \"Dense information, high signal-to-noise ratio.\" |\n| 고객사 프리미엄 (PREMIUM_GEO) | \"Minimalist, elegant, more whitespace.\" |\n\n---\n\n## Phase 5: 팀 협업 (Team/Enterprise 시)\n\n### Workspace 구조 권장\n\n| Workspace | 멤버 | 용도 |\n|-----------|------|------|\n| **BizSpring Master** | 찰스 + 주요 리드 | 디자인 시스템 관리 |\n| **GEOcare.AI** | GEOcare 팀 | 제품 프로토타입 |\n| **Sales & Proposals** | 영업팀 + 옥경화 상무 | 고객 제안서 |\n| **Internal Tools** | 개발팀 | 관리자 화면 |\n\n모든 워크스페이스 **동일한 design-dna-studio 소스 공유** → 일관성.\n\n---\n\n## Phase 6: Claude Code Handoff\n\n### Step 6-1. Handoff bundle 생성\n\nClaude Design 우상단 **`Handoff to Claude Code`** 클릭.\n\n자동 생성:\n- 디자인 토큰 맵핑 명세서\n- 컴포넌트 구조 트리\n- 인터랙션 정의\n- Asset 리스트\n\n### Step 6-2. Claude Code 구현\n\n```\n이 handoff bundle을 기반으로 src/pages/geocare-landing.tsx를 구현해.\n\n요구사항:\n1. design-dna-studio의 registry 컴포넌트만 사용\n2. 커스텀 HTML 최소화\n3. TypeScript strict mode\n4. 반응형 (sm=992부터)\n5. 완성 후 bun run build로 빌드 검증\n```\n\n---\n\n## Phase 7: 운영 (상시)\n\n### 사용량 모니터링\n- **매주 금요일**: Settings > Usage > Claude Design\n- 주간 소진율 80% 넘으면 다음 주 계획 조정\n\n### design-dna-studio 업데이트 반영\n- 새 프로젝트 생성 시 자동 최신 버전 반영\n- 진행 중 프로젝트는 **Settings > Design System > Refresh** 수동 필요\n\n### 피드백 루프\n- 부족 컴포넌트 발견 → GitHub Issue 생성\n- 디자이너 추가 → main 머지\n- Claude Design이 다음 세션에서 자동 인식\n\n---\n\n## 🚨 트러블슈팅\n\n### Q1. Sky Blue 대신 일반 Blue가 나와요\n**원인**: Custom instruction 누락 또는 GitHub 연결 실패\n**해결**: Settings > Design System 연결 상태 확인 + Phase 4 Custom Instruction 추가\n\n### Q2. 한글이 깨져요\n**원인**: Pretendard 로드 실패\n**해결**: 결과 HTML `<head>`에 Pretendard CDN 링크 확인. 없으면 폰트 파일 직접 업로드\n\n### Q3. 생성된 컴포넌트가 registry에 없어요\n**원인**: Molecules 부족으로 Claude가 임의 조립\n**해결**: Molecules 확장 스펙 따라 디자이너와 협의, 추가 후 재생성\n\n### Q4. 사용량이 너무 빨리 소진돼요\n**해결**:\n- 초기 프롬프트 상세 작성 → 재생성 감소\n- Refinement는 inline comment 사용 (전체 재생성보다 효율)\n- Tweaks/sliders 적극 활용\n\n### Q5. 디자인 시스템을 무시해요\n**해결**:\n- 새 프로젝트 시작 (세션 누적 오염 해소)\n- 프롬프트에 명시: \"Must use design-dna-studio tokens\"\n\n---\n\n## 📊 성공 지표\n\n### 1주 내\n- [ ] 1개 프로젝트 완성 (GEOcare 랜딩 or 유사)\n- [ ] 디자인 시스템 자동 적용률 80%+\n- [ ] Claude Code handoff 1회 이상 성공\n\n### 1개월 내\n- [ ] 10개+ 프로젝트\n- [ ] Molecules 5개+ 추가 → 자동 적용률 95%+\n- [ ] 팀 멤버 3명+ 활용\n- [ ] 평균 제안서 제작 시간 50% 단축\n\n### 3개월 내\n- [ ] 전사 UI 산출물의 90%+가 design-dna-studio 기반\n- [ ] 외부 고객 피드백: \"브랜드가 통일되어 보인다\"\n- [ ] ROI 측정: 디자인 리소스 절감 X시간/월\n\n---\n\n## 🎬 오늘 당장 할 일 (30분)\n\n1. ⏱️ **3분**: claude.ai 로그인 → 팔레트 아이콘 확인\n2. ⏱️ **5분**: New Project → GitHub URL 연결 (Phase 2-3)\n3. ⏱️ **2분**: 비즈스프링 로고 파일 업로드\n4. ⏱️ **5분**: Step 2-5 테스트 프롬프트 실행\n5. ⏱️ **15분**: Step 3-1 GEOcare 랜딩 생성\n6. ⏱️ **피드백**: 결과 스크린샷 → Claude 공유 → AP-36 미세 조정\n\n---\n\n## 📚 관련 문서\n\n| 문서 | 위치 |\n|------|------|\n| AP-36 초안 | KHub: `7153353a-2394-437c-b3dc-86a329c2bf97` |\n| Molecules 확장 스펙 | KHub: `d44126fd-0485-4796-ae8c-45a73c0d92df` |\n| design-dna-studio repo | https://github.com/bizspring-inc/design-dna-studio |\n| Claude Design 공지 | https://www.anthropic.com/news/claude-design-anthropic-labs |\n\n---\n\n> 💡 **핵심 교훈**:\n> \"도구가 아무리 좋아도 디자인 시스템이 없으면 생성할 때마다 스타일이 달라진다.\n>  반대로 디자인 시스템이 견고하면, AI는 그것을 완벽하게 복제할 수 있다.\n>  design-dna-studio 구축 = Claude Design 활용의 전제 조건.\"\n",
  "related_slugs": [],
  "faq": [],
  "jsonld": null,
  "keywords": [],
  "source_id": "02a8a23d-e75e-495b-844b-0961bc329980",
  "video_url": null,
  "duration_sec": null,
  "thumbnail_url": null,
  "image_url": null,
  "caption": null,
  "solution_slug": null,
  "captured_at": null,
  "width": null,
  "height": null,
  "created_at": "2026-08-24T11:53:44.809175+00:00",
  "updated_at": "2026-08-24T11:53:44.809175+00:00",
  "visibility": "public",
  "source_stage": "1",
  "anonymized": true,
  "source_key": "legacy-khub",
  "origin": "ingest",
  "locked": false,
  "locked_by": null,
  "locked_at": null,
  "gate_state": {
    "g1": {
      "hits": [],
      "pass": true
    },
    "g2": {
      "pass": true,
      "total": 53,
      "issues": [
        "핵심 요약 불릿이 3개 미만입니다",
        "Q&A 쌍이 3개 미만입니다"
      ],
      "applies": true
    },
    "g3": {
      "pass": true,
      "required": false
    },
    "stage": "1",
    "decided_at": "2026-08-24T11:53:44.334Z"
  },
  "raw_id": "d8c4630f-9a7c-4a8c-ad65-6a5a82760126",
  "search_text": "🎨 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\n\n> **목적**: 비즈스프링 `design-dna-studio`를 Claude Design에 연결하여 전사 UI 산출물 자동화\n> **작성일**: 2026-04-24\n> **대상**: 찰스 (PO)\n> **예상 소요**: 30~60분 (최초 1회)\n> **Claude Design 출시일**: 2026-04-17 (Opus 4.7, Public Preview)\n> **관련 AP**: AP-36 (UI 표준 준수)\n> **관련 리포**: https://github.com/bizspring-inc/design-dna-studio\n\n---\n\n## 전제 조건 체크리스트\n\n| # | 확인 항목 | 상태 | 확인 방법 |\n|---|----------|------|----------|\n| 1 | Claude **Max/Team/Enterprise** 플랜 | ✅ (찰스 Max) | claude.ai → 설정 → 요금제 |\n| 2 | design-dna-studio repo **공개 상태** | ✅ (04-24) | github.com/bizspring-inc/design-dna-studio |\n| 3 | 비즈스프링 **브랜드 자산 파일** | 🟡 확인 필요 | 로고(SVG/PNG), Pretendard 폰트 파일 |\n\n### Max vs Team vs Enterprise 차이\n\n- **Max**: 개인 사용 가능, 팀 공유 제한 (현재 찰스)\n- **Team**: 팀 내 디자인 시스템 공유 가능 ← 비즈스프링 권장 (확장 시)\n- **Enterprise**: usage-based 과금, 대규모 팀용\n\nClaude Design은 별도 주간 한도로 운영되며 기존 챗/Claude Code 한도와 분리.\n\n> 💡 **권장 전략**: 찰스 Max로 먼저 PoC → 성공 확인 후 Team 플랜 전환 (팀 전체 공유)\n\n---\n\n## Phase 1: 최초 접근 (5분)\n\n### Step 1-1. Claude Design 활성화\n\n1. https://claude.ai 로그인\n2. 좌측 사이드바에서 **🎨 팔레트 아이콘** 찾기\n3. 클릭 → Claude Design 초기 화면 진입\n\n> 🔴 **못 찾을 경우**: 아직 gradual rollout 중일 수 있음. 대기 또는 Settings > Feature Previews 확인.\n\n### Step 1-2. 계정 설정\n- 조직(Organization) 선택\n- Claude Design 사용 약관 동의\n- 일회성 크레딧 확인 (Enterprise는 20 프롬프트 상당)\n\n---\n\n## Phase 2: 비즈스프링 디자인 시스템 연결 (15분)\n\n### Step 2-1. 새 프로젝트 생성\n\n우상단 `+ New Project` 클릭. 이름: `BizSpring Growth Platform`\n\n### Step 2-2. Design System 온보딩 마법사\n\n프로젝트 생성 시 마법사가 뜸. 없으면:\n**Settings > Design System > Add Source**\n\n### Step 2-3. GitHub Repository 연결\n\n```\n소스 유형: GitHub\nURL: https://github.com/bizspring-inc/design-dna-studio\nBranch: main\n```\n\n연결 후 Claude Design이 자동으로:\n- `src/index.css` 파싱 → 140+ CSS 변수 추출\n- `tailwind.config.ts` 파싱 → 토큰 매핑 인식\n- `src/components/design-system/registry.ts` 파싱 → 26 Atoms + 1 Molecule 목록 획득\n- 자동 디자인 시스템 가이드 생성\n\n**예상 파싱 결과**:\n```\nPrimary: #41b3f9 (Sky Blue)\nSecondary: #7460ee (Purple)\nTertiary: #24c9a5 (Teal)\nTypography: Pretendard, Korean optimized (letter-spacing: -0.02em)\nSpacing: 2, 4, 8, 16, 24, 32, 48, 64px\nRadius: 3, 4, 8, 12, 16px\nComponents: 26 atoms, 1 molecule\n```\n\n### Step 2-4. 추가 자산 업로드\n\n| 자산 | 필수 | 업로드 방법 |\n|------|------|------------|\n| 비즈스프링 로고 (SVG) | ✅ | Settings > Assets > Upload Logo |\n| Pretendard 폰트 파일 | 🟡 (CDN 로드 중) | Settings > Assets > Upload Font |\n| 브랜드 가이드 PDF | 🟡 | Settings > Brand Docs |\n| 제품 스크린샷 | 🟡 | Settings > Reference Images |\n\n### Step 2-5. 연결 테스트\n\n테스트 프롬프트:\n\n```\n비즈스프링 Growth Platform의 대시보드 카드 1개를 만들어줘.\n- 타이틀: \"오늘의 방문자\"\n- 숫자: 3,245\n- 전일 대비: +12.5%\n- 비즈스프링 브랜드 적용\n```\n\n**성공 기준**:\n- ✅ Sky Blue (#41b3f9) 계열 색상\n- ✅ Pretendard 폰트\n- ✅ `gray-150` 또는 `surface-body` 배경\n- ✅ `rounded-md` (8px) 라운드\n\nTailwind 기본 `blue-500`이나 `#3b82f6`이 나오면 → 연결 실패. Phase 2-3 재실행.\n\n---\n\n## Phase 3: 첫 실전 프로젝트 (15분)\n\n### Step 3-1. GEOcare.AI 소개 1페이지\n\n```\nGEOcare.AI 제품 소개 1페이지 랜딩을 만들어줘.\n\n섹션 구성:\n1. Hero (타이틀 + 서브타이틀 + CTA 버튼)\n2. 3가지 핵심 기능 카드\n3. 사용 프로세스 (4단계)\n4. 고객 로고 리스트\n5. 최종 CTA + 문의 폼\n\n브랜드 톤: 의료 AI, 신뢰감 있으면서도 친근함\n비즈스프링 디자인 시스템 엄수\n반응형 (모바일, 태블릿, 데스크톱)\n```\n\n### Step 3-2. 결과 검토\n\n- [ ] Primary 색상 `#41b3f9`?\n- [ ] Secondary/Tertiary = Purple/Teal?\n- [ ] 폰트 Pretendard?\n- [ ] Breakpoint sm=992px부터? (일반 웹사이트는 640px)\n- [ ] Card 스타일 `border + rounded-md`?\n- [ ] 버튼 Sky 배경 + 흰 글씨?\n\n### Step 3-3. Refinement\n- **Inline comment**: 특정 요소에 직접 코멘트로 수정 요청\n- **Direct edit**: 텍스트 클릭 후 바로 수정\n- **Custom sliders**: Claude가 상황에 맞는 슬라이더 생성\n\n---\n\n## Phase 4: Custom Instructions (옵션)\n\n**Settings > Design System > Custom Instructions**:\n\n```\nYou are designing UI for BizSpring Inc., a Korean B2B SaaS company.\n\nMUST follow:\n1. Use ONLY the semantic tokens from design-dna-studio\n2. Font: Pretendard only (Korean optimization)\n3. Letter-spacing: -0.02em globally\n4. Breakpoints: sm=992px, md=1170px, lg=1528px, xl=1920px\n5. Spacing: 2, 4, 8, 16, 24, 32, 48, 64px only\n6. Border radius: 3, 4, 8, 12, 16px only\n\nMUST NOT:\n- Use Tailwind default palette (blue-500, gray-700, etc.)\n- Use raw hex/rgb values\n- Use non-Pretendard fonts\n- Use breakpoints smaller than 992px\n\nComponents priority:\n1. Atoms from src/components/atoms/\n2. Molecules from src/components/molecules/\n3. shadcn/ui primitives from src/components/ui/\n4. Custom composition (last resort)\n```\n\n### 상황별 추가 Instructions\n\n| 상황 | 추가 Instruction |\n|------|-----------------|\n| 의료/헬스케어 (GEOcare) | \"Use calming, trustworthy tone. Avoid aggressive red.\" |\n| 영업/제안 (SALES) | \"Use confident, data-driven layout with clear KPIs.\" |\n| 관리자 대시보드 (GP 상담사) | \"Dense information, high signal-to-noise ratio.\" |\n| 고객사 프리미엄 (PREMIUM_GEO) | \"Minimalist, elegant, more whitespace.\" |\n\n---\n\n## Phase 5: 팀 협업 (Team/Enterprise 시)\n\n### Workspace 구조 권장\n\n| Workspace | 멤버 | 용도 |\n|-----------|------|------|\n| **BizSpring Master** | 찰스 + 주요 리드 | 디자인 시스템 관리 |\n| **GEOcare.AI** | GEOcare 팀 | 제품 프로토타입 |\n| **Sales & Proposals** | 영업팀 + 옥경화 상무 | 고객 제안서 |\n| **Internal Tools** | 개발팀 | 관리자 화면 |\n\n모든 워크스페이스 **동일한 design-dna-studio 소스 공유** → 일관성.\n\n---\n\n## Phase 6: Claude Code Handoff\n\n### Step 6-1. Handoff bundle 생성\n\nClaude Design 우상단 **`Handoff to Claude Code`** 클릭.\n\n자동 생성:\n- 디자인 토큰 맵핑 명세서\n- 컴포넌트 구조 트리\n- 인터랙션 정의\n- Asset 리스트\n\n### Step 6-2. Claude Code 구현\n\n```\n이 handoff bundle을 기반으로 src/pages/geocare-landing.tsx를 구현해.\n\n요구사항:\n1. design-dna-studio의 registry 컴포넌트만 사용\n2. 커스텀 HTML 최소화\n3. TypeScript strict mode\n4. 반응형 (sm=992부터)\n5. 완성 후 bun run build로 빌드 검증\n```\n\n---\n\n## Phase 7: 운영 (상시)\n\n### 사용량 모니터링\n- **매주 금요일**: Settings > Usage > Claude Design\n- 주간 소진율 80% 넘으면 다음 주 계획 조정\n\n### design-dna-studio 업데이트 반영\n- 새 프로젝트 생성 시 자동 최신 버전 반영\n- 진행 중 프로젝트는 **Settings > Design System > Refresh** 수동 필요\n\n### 피드백 루프\n- 부족 컴포넌트 발견 → GitHub Issue 생성\n- 디자이너 추가 → main 머지\n- Claude Design이 다음 세션에서 자동 인식\n\n---\n\n## 🚨 트러블슈팅\n\n### Q1. Sky Blue 대신 일반 Blue가 나와요\n**원인**: Custom instruction 누락 또는 GitHub 연결 실패\n**해결**: Settings > Design System 연결 상태 확인 + Phase 4 Custom Instruction 추가\n\n### Q2. 한글이 깨져요\n**원인**: Pretendard 로드 실패\n**해결**: 결과 HTML `<head>`에 Pretendard CDN 링크 확인. 없으면 폰트 파일 직접 업로드\n\n### Q3. 생성된 컴포넌트가 registry에 없어요\n**원인**: Molecules 부족으로 Claude가 임의 조립\n**해결**: Molecules 확장 스펙 따라 디자이너와 협의, 추가 후 재생성\n\n### Q4. 사용량이 너무 빨리 소진돼요\n**해결**:\n- 초기 프롬프트 상세 작성 → 재생성 감소\n- Refinement는 inline comment 사용 (전체 재생성보다 효율)\n- Tweaks/sliders 적극 활용\n\n### Q5. 디자인 시스템을 무시해요\n**해결**:\n- 새 프로젝트 시작 (세션 누적 오염 해소)\n- 프롬프트에 명시: \"Must use design-dna-studio tokens\"\n\n---\n\n## 📊 성공 지표\n\n### 1주 내\n- [ ] 1개 프로젝트 완성 (GEOcare 랜딩 or 유사)\n- [ ] 디자인 시스템 자동 적용률 80%+\n- [ ] Claude Code handoff 1회 이상 성공\n\n### 1개월 내\n- [ ] 10개+ 프로젝트\n- [ ] Molecules 5개+ 추가 → 자동 적용률 95%+\n- [ ] 팀 멤버 3명+ 활용\n- [ ] 평균 제안서 제작 시간 50% 단축\n\n### 3개월 내\n- [ ] 전사 UI 산출물의 90%+가 design-dna-studio 기반\n- [ ] 외부 고객 피드백: \"브랜드가 통일되어 보인다\"\n- [ ] ROI 측정: 디자인 리소스 절감 X시간/월\n\n---\n\n## 🎬 오늘 당장 할 일 (30분)\n\n1. ⏱️ **3분**: claude.ai 로그인 → 팔레트 아이콘 확인\n2. ⏱️ **5분**: New Project → GitHub URL 연결 (Phase 2-3)\n3. ⏱️ **2분**: 비즈스프링 로고 파일 업로드\n4. ⏱️ **5분**: Step 2-5 테스트 프롬프트 실행\n5. ⏱️ **15분**: Step 3-1 GEOcare 랜딩 생성\n6. ⏱️ **피드백**: 결과 스크린샷 → Claude 공유 → AP-36 미세 조정\n\n---\n\n## 📚 관련 문서\n\n| 문서 | 위치 |\n|------|------|\n| AP-36 초안 | KHub: `7153353a-2394-437c-b3dc-86a329c2bf97` |\n| Molecules 확장 스펙 | KHub: `d44126fd-0485-4796-ae8c-45a73c0d92df` |\n| design-dna-studio repo | https://github.com/bizspring-inc/design-dna-studio |\n| Claude Design 공지 | https://www.anthropic.com/news/claude-design-anthropic-labs |\n\n---\n\n> 💡 **핵심 교훈**:\n> \"도구가 아무리 좋아도 디자인 시스템이 없으면 생성할 때마다 스타일이 달라진다.\n>  반대로 디자인 시스템이 견고하면, AI는 그것을 완벽하게 복제할 수 있다.\n>  design-dna-studio 구축 = Claude Design 활용의 전제 조건.\"\n",
  "embedding": null,
  "embedded_at": null,
  "embedding_hash": null,
  "backlinks": [],
  "html_url": "https://bizspring.ai/kb/ref/khub/common-claude-design-온보딩-가이드-v1-0-design-dna-studio-연동",
  "markdown_url": "https://bizspring.ai/kb/ref/khub/common-claude-design-온보딩-가이드-v1-0-design-dna-studio-연동.md"
}