GitHub 레포로 디자인시스템 가져오기

회사 디자인시스템을 Claude Design 안으로 옮기는 단계예요.

GitHub 레포 직접 연결

셋업 단계

1. Claude Design Settings → Design Systems 진입
2. Onboarding 흐름 시작
3. Connect GitHub 선택, GitHub 인증
4. 대상 레포 선택 (모노레포면 디렉토리도)
5. Claude가 분석 → UI 키트 자동 생성

잘 추출되는 코드 구조

다음 형태로 정의돼 있으면 추출 정확도가 높아요.

// design-tokens.ts
export const colors = {
  primary: "#0F1932",
  accent: "#9c3625",
};

export const spacing = {
  sm: "8px",
  md: "16px",
  lg: "24px",
};

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        navy: { dark: "#0F1932", muted: "#60657A" },
      },
    },
  },
};

/* global.css */
:root {
  --navy-dark: #0F1932;
  --line-gray: #E6E8EE;
}

CSS variables / Tailwind config / token JSON 어느 형태든 잘 읽혀요.

추출 후 점검

자동 생성된 UI 키트를 그대로 믿지 말고 항상 점검하세요.

• 색이 모두 추출됐나 (특히 dark mode 색)
• 타이포 단계가 다 들어왔나 (h1~h6, body, caption 등)
• 핵심 컴포넌트(버튼·카드·인풋·모달)가 인식됐나
• spacing 값이 맞나

빠진 게 있으면 자료를 추가 업로드하거나 채팅으로 시스템을 remix해요. "spacing을 더 느슨하게", "secondary 색을 덜 채도 높게" 같이 직접 명령 가능해요.

추출 후 검증

import가 끝났으면 빈 프로젝트 하나 만들어서 디자인시스템이 제대로 작동하는지 검증해요.

테스트 프롬프트 예시:

"지금 등록된 디자인시스템 그대로 사용해서 회원가입 페이지 만들어줘. 색·폰트·spacing 우리 시스템에서만 사용."

결과가 회사 룩앤필 안에 들어오면 OK. 다른 색이나 generic 컴포넌트가 섞여 있으면 다음 챕터(일관성 강제하기) 영역으로 넘어가요.

import는 끝났는데도 Claude가 다른 색·폰트를 쓰는 케이스가 남아요. 다음 챕터에서 그 부분을 잡아요.