Claude Design 공식 빠른 시작

머릿속에 떠오른 화면이나 발표 자료를 직접 그리려면 디자인 도구를 배우고 한참 손을 움직여야 하죠. Claude Design은 그 과정을 “이런 느낌으로 만들어 줄 수 있나요?“라고 말로 부탁하는 일로 바꿔 줍니다. 마치 옆자리 디자이너에게 설명하면 그 자리에서 시안이 나오는 것처럼요.

Claude Design은 대화창과 캔버스가 함께 있는 화면에서 디자인, 클릭 가능한 프로토타입, 발표 자료를 만들고 다듬을 수 있는 기능입니다. 우리 회사의 디자인 시스템을 연결해 두면 회사 브랜드에 맞춰 결과물을 만들어 주고, 완성된 작업은 Claude Code로 그대로 넘길 수도 있습니다. 이 글에서는 시작하는 법과 디자인 시스템을 설정하는 법을 차례로 살펴봅니다.

먼저 내가 쓸 수 있는 환경인지 확인해 볼게요.

Note

Claude Design에서 작업한 양은 일반 채팅이나 Claude Code와 같은 사용 한도를 함께 씁니다. 디자인만 따로 더 쓸 수 있는 한도가 있는 건 아니에요.

대화로 디자인을 만들고 다듬은 뒤, 원하는 형식으로 내보내는 흐름입니다.

1. 프로젝트를 새로 만듭니다.
2. 디자인 시스템을 연결하거나 가져옵니다.
3. 참고 자료를 추가합니다(스크린샷, 코드베이스, 참고 파일 등).
4. 만들고 싶은 결과물을 대화창에 말로 설명합니다.
5. 캔버스에 생성된 결과를 살펴봅니다.
6. 결과를 다듬습니다(아래 표 참고).
7. 원하는 형식으로 내보내거나 공유하고, 필요하면 Claude Code로 넘깁니다.

• GitHub 저장소
• 디자인 파일
• 내 컴퓨터에 있는 코드베이스
• 스크린샷, 참고 이미지

작업이 끝나면 다양한 형식으로 가져갈 수 있습니다.

디자인 시스템이란 우리 회사의 색, 글꼴, 버튼 같은 구성 요소를 한곳에 모아 둔 규칙집입니다. 브랜드 자료를 올리면 Claude가 다시 쓸 수 있는 구성 요소를 자동으로 뽑아 정리해 줍니다. 이 기능은 현재 베타로 제공되며 Pro, Max, Team, Enterprise 요금제에서 쓸 수 있습니다(Enterprise는 기본 꺼짐).

1. Claude Design으로 들어가 왼쪽 아래 프로젝트 선택기에서 우리 조직으로 전환합니다.
2. 온보딩 과정에서 브랜드·제품 자료를 업로드합니다(코드베이스, 프로토타입, 발표 자료, 로고 등).
3. Claude가 만들어 준 디자인 시스템 구성 요소를 검토합니다.
4. 테스트 프로젝트로 디자인 시스템이 잘 적용되는지 확인합니다.
5. Published(게시) 토글을 켜서 팀 전체가 쓸 수 있게 합니다.

Tip

업로드한 자료가 다양할수록 추출 품질이 좋아집니다. 사양 설명서만 넣기보다 실제 디자인 예시를 함께 넣어 주세요.

게시하고 나면 이 디자인 시스템이 조직 전체 프로젝트에 자동으로 적용됩니다. Team·Enterprise에서는 관리자가 승인하거나 잠가서 디자인 시스템을 관리할 수 있습니다.

베타 단계인 만큼 아직 다듬어지는 부분이 있습니다.

Warning

다음과 같은 한계가 있을 수 있어요.

• 인라인 코멘트가 페이지에 보이지 않는 경우가 가끔 있습니다.
• 여러 명이 동시에 편집하는 기능은 아직 안정적이지 않습니다.
• 큰 저장소를 다루면 브라우저가 느려질 수 있습니다.
• 디자인 시스템을 가져올 때 품질은 원본 코드가 잘 정리되어 있는지에 따라 달라집니다.
• 대화 쪽에서 오류가 나면 새 프로젝트 탭을 열어야 할 수 있습니다.

처음 결과가 마음에 들지 않으면, 자료를 보완하거나 대화로 여러 번 다듬으면서 점점 원하는 방향에 맞춰 갈 수 있습니다.

• 디자인 시작하기 — Claude Design을 처음 다루는 분을 위한 안내
• 디자인 시스템 — 디자인 시스템 개념과 구성 살펴보기
• Code로 넘기기 — 완성된 디자인을 코드로 이어 가는 방법

• Get started with Claude Design
• Set up your design system in Claude Design