claude.ai/design에 Codebase context 기능이 추가됐습니다. GitHub 레포를 연결하면 Claude Design이 레포 안의 디자인 가이드와 색상 토큰을 읽어 화면을 생성해줍니다. 기존에는 프롬프트마다 "우리 브랜드 색상은 이렇습니다"를 설명해야 했는데, 이제는 레포에 정의해두면 자동으로 반영됩니다.
이번 업데이트에서 혼란스러웠던 부분이 하나 있습니다. Claude Design에는 비슷해 보이는 기능이 두 개 있습니다. DesignSync와 Codebase context인데, 문서를 보면 같이 언급됩니다. 직접 써보면 완전히 다른 시스템이라는 게 드러납니다.
DesignSync는 Claude Code(코딩 에이전트)가 쓰는 컴포넌트 라이브러리입니다. 버튼·카드 같은 UI 요소를 샘플 HTML로 등록해두면 코드 생성 시 패턴을 참조합니다. Codebase context는 다른 경로. GitHub 레포를 claude.ai/design에 연결하면 Claude Design이 화면을 생성할 때 레포를 읽어 디자인 시스템에 맞게 만들어줍니다. 코드를 짜는 쪽과 화면을 그리는 쪽이 각각 별도 연결이 필요합니다.
연결 전과 후
Codebase context를 붙이기 전에는 Claude Design이 일반적인 파란색 계열을 썼습니다. 브랜드 색상이 전혀 없는 화면. 연결 후에는 달랐습니다. 랜딩 페이지를 요청하면서 레포나 디자인 가이드 URL을 따로 언급하지 않았는데, 레포에 정의해둔 색상과 폰트가 그대로 반영됐습니다.
설정은 간단합니다. GitHub에 레포를 올리고, claude.ai/design에서 Settings → Codebase → GitHub 연동으로 연결하면 됩니다. 연결 직후부터 Claude Design이 레포를 읽기 시작합니다. 어떤 파일을 읽을지 따로 지정하지 않아도 됩니다. 프로젝트 설명 파일·디자인 가이드·색상 토큰 정의를 알아서 인덱싱합니다.
결과물은 HTML 파일로 나옵니다. 이걸 React 컴포넌트로 옮기는 작업이 남아 있습니다. HTML에 하드코딩된 색상값을 토큰 변수로 바꾸고, backdrop-filter 같은 특수 효과는 별도 CSS 파일로 분리합니다. 나중에 브랜드 색상이 바뀌어도 토큰 파일 하나만 수정하면 전체에 적용되는 구조를 만드는 작업입니다.
주의할 점
화면 생성 자체는 웹 UI에서만 됩니다. 터미널에서 직접 트리거하는 API는 2026년 6월 기준 없습니다. DesignSync에 등록한 컴포넌트가 코드 생성에 자동으로 반영되는지는 아직 확인하지 못했습니다. 등록은 됩니다. 코드를 짤 때 자동으로 참조하는지는 명시적으로 지정하지 않으면 불분명합니다.
Codebase context는 더 확실히 동작합니다. GitHub 레포 하나를 연결하는 것으로 Claude Design이 프로젝트를 이해하고 화면을 만들어줍니다. 디자인 결정이 에이전트와의 대화가 아니라 파일에 있게 되는 구조. 화면이 늘어나도 디자인 시스템에서 벗어나지 않는 루프가 생깁니다.
