claudekit / updates / claude-design-stays-on-brand
[ NEW · ]

Claude Design, 디자인 시스템 임포트와 Claude Code 연동 강화

Claude Design이 디자인 시스템을 GitHub 리포, 디자인 파일, 업로드에서 임포트해 그 컴포넌트로 빌드하고 시스템 규칙에 맞는지 검증합니다. 새 /design-sync, /design 명령으로 Claude Code와 연동되고, 에디터에 드래그, 리사이즈, 정렬 레이아웃 컨트롤과 수백 건의 안정성 수정이 들어왔으며, 사용 한도가 chat, Claude Cowork, Claude Code와 공유됩니다. 커넥터도 Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, Wix로 확장됐습니다.

공식 발표 →

이 글은 공식 문서를 바탕으로 요약·정리한 내용입니다.

핵심 요약

Claude Design이 임의의 스크린샷이나 즉흥 컴포넌트가 아니라 팀의 디자인 시스템을 임포트해 그 컴포넌트로 빌드하도록 바뀌었습니다. 디자인 시스템을 Claude Code로 끌어오는 /design-sync, 터미널에서 디자인 프로젝트를 다루는 /design 명령이 추가되고, 에디터 안정화, 사용 한도 공유, 커넥터 확장이 함께 들어왔습니다.

주요 기능

  • 디자인 시스템 임포트

    기존에는 Claude가 팀의 디자인 시스템을 인식하지 못해 스크린샷이나 즉흥적으로 만든 컴포넌트로 작업이 흘러갔습니다. 이제 GitHub 리포, 디자인 파일, 직접 업로드에서 디자인 시스템을 임포트하면, Claude가 그 컴포넌트로 빌드하고 시스템 규칙에 맞는지 검증합니다. 팀 단위로 잠글 수 있는 admin 역할도 새로 추가됐습니다.

  • /design-sync — 디자인 시스템을 Claude Code로

    Claude Code에서 화면을 만들 때 스크린샷을 단서로 삼다 보니 기존 컴포넌트를 그대로 재사용하기 어려웠습니다. /design-sync로 디자인 시스템을 Claude Code에 가져오면, 빌드가 스크린샷이 아니라 이미 존재하는 컴포넌트에서 시작됩니다.

  • /design — 터미널에서 디자인 프로젝트 작업

    디자인 프로젝트를 다루려면 터미널을 떠나 별도 화면으로 이동해야 했습니다. /design 명령으로 Claude Code 안에서 디자인 프로젝트를 생성, 편집, 동기화할 수 있고, 디자인을 코드베이스로 임포트하거나 코드를 라이브 프로토타입으로 바꿀 수 있습니다.

  • 에디터와 캔버스 개선

    에디터의 요소 제어가 거칠어 세밀한 조정이 어려웠습니다. 이제 드래그, 리사이즈, 정렬을 위한 레이아웃 컨트롤로 요소를 직접 세밀하게 다룰 수 있고, 수백 건의 안정성 수정으로 동작 신뢰성이 높아졌습니다.

  • 사용 한도 공유

    Claude Design이 별도의 사용 한도를 써서 한도에 먼저 걸리거나 오류가 나기 쉬웠습니다. 이제 chat, Claude Cowork, Claude Code와 한도를 공유해 여유가 늘고 오류율이 줄었습니다.

  • 커넥터 확장

    완성한 작업물을 다른 도구로 옮기는 과정이 번거로웠습니다. 이번 업데이트로 Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, Wix 커넥터가 추가되고, PDF와 PowerPoint 내보내기도 함께 제공됩니다.

알아두면 좋은 점

  • 베타 제공 범위 — Claude Pro, Max, Team, Enterprise 플랜에서 베타로 사용할 수 있습니다.
  • 접근 경로 — claude.ai/design에서 열거나, 데스크톱 앱의 사이드바에서 접근합니다.
  • Enterprise는 기본 비활성 — Enterprise에서는 기본적으로 꺼져 있으며, admin이 설정에서 활성화해야 사용할 수 있습니다.
§ 4

자주 묻는 질문

자주 묻는 질문
§ 4.1
이번 업데이트의 핵심은 무엇인가요?
Claude Design이 디자인 시스템을 임포트해 그 컴포넌트로 빌드하고 시스템 규칙에 맞는지 검증하도록 바뀌었습니다. /design-sync, /design 명령으로 Claude Code와 연동되고, 에디터 레이아웃 컨트롤, 사용 한도 공유, 커넥터 확장이 함께 들어왔습니다.
§ 4.2
어떤 요금제에서 사용할 수 있나요?
Claude Pro, Max, Team, Enterprise 플랜에서 베타로 제공됩니다. Enterprise는 기본적으로 꺼져 있고, admin이 설정에서 활성화합니다.
§ 4.3
어디서 접근하나요?
claude.ai/design에서 접근하거나, 데스크톱 앱의 사이드바에서 열 수 있습니다.
§ 4.4
Claude Code와는 어떻게 연동되나요?
/design-sync로 디자인 시스템을 Claude Code로 가져와 스크린샷이 아니라 기존 컴포넌트에서 빌드를 시작합니다. /design 명령으로는 터미널을 떠나지 않고 디자인 프로젝트를 생성, 편집, 동기화할 수 있습니다.
§ 4.5
어떤 커넥터를 지원하나요?
Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, Wix 커넥터를 지원하며, PDF와 PowerPoint 내보내기도 제공합니다.
§ 4.6
공식 발표 자료는 어디서 볼 수 있나요?
Claude 블로그의 'Claude Design now stays on brand for daily work' 발표문(claude.com/blog/claude-design-stays-on-brand-for-daily-work)에서 확인할 수 있습니다.