디자인 시스템은 색상, 타이포그래피, 컴포넌트, 레이아웃 패턴을 캡처하여 Claude가 모든 새로운 디자인과 덱에 적용하도록 합니다. Claude는 코드베이스, 슬라이드 덱 또는 기타 디자인 참고 자료와 같이 제공하는 자산에서 이를 추출합니다.
디자인 시스템은 Pro, Max, Team, Enterprise 플랜에서 베타로 사용 가능합니다. Pro, Max, Team 플랜에서는 기본적으로 켜져 있습니다. Enterprise 플랜에서는 소유자가 조직 설정 > 아티팩트에서 디자인 시스템을 켤 때까지 꺼져 있습니다. claude.ai/design의 독립형 Claude Design은 자체 별도 설정이 있습니다.
이 가이드는 디자인 시스템을 설정할 디자이너 또는 브랜드 소유자를 위한 것입니다. Team 및 Enterprise 플랜에서는 이를 한 번만 수행하면 되고, 그 후 모든 사람의 작업이 이를 적용합니다.
시작하기 전에
Team 및 Enterprise 플랜에서는 조직에 대해 디자인 시스템이 켜져 있어야 하며, 소유자가 게시하거나 기본값을 설정할 수 있는 사람을 제한할 수 있습니다.
소스 자료로 다음 중 하나 이상이 필요합니다:
디자인 시스템 또는 컴포넌트 라이브러리가 있는 코드베이스
시각적 정체성을 반영하는 슬라이드 덱 또는 문서
브랜드 가이드라인 자산(로고, 색상 팔레트, 타이포그래피 사양)
디자인 시스템 만들기
채팅에서
Claude에 연결된 앱, 업로드된 파일, Figma 파일, 덱, 로고, 글꼴에서 디자인 시스템을 구축하도록 요청합니다. 이는 글꼴, 색상, 가이드라인이 있는 브랜드 디자인 시스템에 가장 적합합니다.
Claude Code에서
디자인 시스템이 이미 React 컴포넌트로 존재하는 경우 Claude Code에서 /design-sync를 실행합니다. 토큰과 컴포넌트를 직접 읽으며, 코드의 제품 디자인 시스템에 가장 적합합니다.
claude.ai/design에서 디자인 시스템 가져오기
사이드바 하단의 "디자인" 탭을 엽니다.
배너에서 "팀 디자인 시스템 마이그레이션"을 클릭합니다.
각 디자인 시스템은 Claude Code를 포함한 모든 채팅에서 Claude가 사용할 수 있는 아티팩트가 됩니다. 마이그레이션된 디자인 시스템은 정리가 필요할 수 있으므로 각각 "Claude가 정리하도록 하기"를 클릭할 수 있는 배너가 표시되며, Claude가 가이드, 토큰, 컴포넌트를 정리합니다.
디자인 시스템 관리
설정 > 디자인 시스템에서 디자인 시스템을 관리합니다. Enterprise 플랜에서는 관리자가 특정 사용자에 대해 게시, 조직 기본값 설정, 디자인 시스템 삭제를 예약할 수 있습니다. Team 및 Enterprise 플랜용 아티팩트 관리자 가이드에서 자세히 알아보세요.
claude.ai/design에서 디자인 시스템 설정
이 단계는 독립형 Claude Design을 사용합니다.
조직 만들기 또는 전환
Claude Design을 엽니다.
프로젝트 선택기의 왼쪽 아래 모서리에서 현재 조직 이름을 클릭합니다.
조직을 선택하거나 새 조직을 만듭니다.
리디렉션되는 온보딩 흐름을 완료합니다.
브랜드 및 제품 자산 업로드
온보딩 중 또는 그 후 조직 설정에서 브랜드와 제품을 정의하는 자산을 업로드합니다. Claude가 이를 분석하고 재사용 가능한 디자인 시스템을 추출합니다.
코드베이스: 디자인 시스템이 React 컴포넌트 라이브러리와 같은 코드에 있는 경우 저장소를 연결하거나 업로드합니다. Claude가 컴포넌트와 스타일을 읽습니다.
프로토타입: 스크린샷, 웹 흐름, 기존 디자인 파일.
슬라이드 덱 또는 문서: 브랜드를 반영하는 잘 디자인된 PowerPoint 또는 PDF도 작동합니다. Claude가 색상, 레이아웃 패턴, 타이포그래피 선택을 추출합니다.
개별 자산: 로고, 색상 팔레트 파일, 타이포그래피 샘플.
시작하려면 하나의 소스만 필요하지만, 더 많은 소스가 Claude에 더 많은 정보를 제공합니다.
생성된 디자인 시스템 검토
업로드 후 Claude가 조직을 위한 디자인 시스템을 생성합니다. 일반적으로 다음을 포함합니다:
색상 팔레트: 자산에서 추출한 기본, 보조, 강조 색상.
타이포그래피: 글꼴 패밀리, 크기, 두께.
컴포넌트: 버튼, 카드, 네비게이션 요소 및 기타 재사용 가능한 UI 패턴.
레이아웃 패턴: 간격, 그리드 시스템, 페이지 구조.
검증하려면 테스트 프로젝트를 만들고 출력이 브랜드와 일치하는지 확인합니다. 다음과 같은 프롬프트를 시도해보세요:
"[제품]을 위한 랜딩 페이지를 만듭니다."
"[관련 지표]를 표시하는 대시보드를 디자인합니다."
"[팀이 일반적으로 발표하는 주제]에 대한 원페이저를 만듭니다."
팀에서 사용 가능하게 만들기
디자인 시스템에 만족하면 "게시됨" 토글을 켭니다. 게시 후 조직의 Claude Design 홈 화면에서 만든 프로젝트는 기본값 대신 디자인 시스템을 사용합니다.
디자인 시스템 업데이트
디자인 시스템이 변경되면 Claude Design 내에서 업데이트할 수 있습니다. Claude Design 조직 설정에서 편집하려는 디자인 시스템 옆의 "열기" 버튼을 클릭합니다. 창의 왼쪽에 있는 채팅 인터페이스를 열려면 오른쪽 위 모서리의 "리믹스" 버튼을 클릭합니다. 여기에서 Claude와 함께 디자인 시스템을 변경할 수 있습니다.
최상의 결과를 위한 팁
사양만이 아닌 실제 예제를 포함합니다. 완성된 랜딩 페이지 또는 마케팅 사이트는 색상 팔레트만으로는 Claude에 브랜드의 느낌에 대해 더 많은 정보를 제공합니다.
반복합니다. 첫 번째 추출이 브랜드를 잘 캡처하지 못하면 추가 또는 다른 자산을 업로드해 보세요.