밤티 화면에서 벗어나는 Claude Design 사용법

추석 AI 부트캠프 하루 6시간 만에
AI 기초부터 나만의
서비스까지 완성 이번 연휴를 기회로 삼으세요일정 보기 ↗

Quick Start

Claude Design 은 앤트로픽 Anthropic Labs 가 낸 디자인 작업판입니다. 프롬프트로 화면·프로토타입·슬라이드·원페이저를 캔버스에 만들고, 결과를 Claude Code 로 넘기거나 파일로 내보냅니다.

1. STEP 1에서 요금제와 진입 경로를 확인합니다.
2. STEP 2에서 디자인 시스템을 먼저 붙입니다.
3. STEP 3~4에서 레퍼런스를 넣어 요청하고 고칩니다.
4. STEP 5에서 Claude Code 로 핸드오프하거나 파일로 내보냅니다.

STEP 1 · 1분요금제와 들어가는 길을 확인한다

이 단계에서는 쓸 수 있는 계정인지부터 봅니다. Claude Design 은 Pro·Max·Team·Enterprise 요금제에서 쓸 수 있고 Free 에서는 쓸 수 없습니다. Pro·Max·Team 은 기본으로 켜져 있고 Enterprise 는 관리자가 켜야 합니다.

따로 결제하는 한도는 없습니다. 평소 클로드 사용량을 같이 쓰며, 넘치면 extra usage 로 이어서 쓸 수 있습니다. 들어가는 길은 세 가지입니다 — 대화 안, Artifacts 탭, 그리고 주소 claude.ai/design 입니다.

claude.ai/design

성공하면 새 디자인을 시작하는 화면과 디자인 시스템 설정 메뉴가 보입니다.

STEP 2 · 5분디자인 시스템부터 붙인다

이 단계에서는 화면을 만들기 전에 기준을 먼저 만듭니다. 코드베이스나 디자인 파일을 지정하면 Claude Design 이 읽고 색·폰트·컴포넌트를 팀 디자인 시스템으로 정리하며, 이후 프로젝트에 자동으로 적용합니다. GitHub 저장소를 가져와 검증하는 기능도 있습니다.

이 저장소의 색, 폰트, 버튼·카드·입력창 컴포넌트를 읽어서 디자인 시스템으로 정리해줘. 앞으로 만드는 화면은 이 시스템만 써줘.

성공하면 색 목록, 글꼴, 컴포넌트가 나뉜 디자인 시스템이 만들어지고, 새 화면에 그 값이 그대로 쓰입니다.

STEP 3 · 3분레퍼런스 스크린샷을 넣고 만들 화면을 말한다

이 단계에서는 말로만 설명하지 않고 참고 이미지를 같이 줍니다. 입력으로 텍스트, 이미지, DOCX·PPTX·XLSX 문서, 코드베이스, 웹 캡처 도구를 쓸 수 있습니다.

[레퍼런스 스크린샷 첨부]
이 스크린샷의 여백, 글자 크기 위계, 정렬 방식만 참고해줘. 색과 폰트는 우리 디자인 시스템을 그대로 쓰고, 보라색 그라데이션과 똑같은 카드 세 개 배열은 쓰지 마.
만들 화면: 카페 원두 구독 랜딩 페이지. 첫 화면에 제목 한 줄, 원두 사진 자리, 구독 버튼 하나.

성공하면 레퍼런스의 배치 감각을 따르되 우리 색·폰트로 만든 화면이 캔버스에 뜹니다.

STEP 4 · 5분댓글과 조절 노브로 고친다

이 단계에서는 전체를 다시 요청하지 않고 필요한 곳만 고칩니다. 채팅, 요소에 다는 인라인 댓글, 텍스트 직접 편집, 간격·색·레이아웃을 바꾸는 조절 노브, 드래그·리사이즈·정렬을 쓸 수 있습니다.

이 버튼만 지금보다 크게, 위쪽 여백은 두 배로.

성공하면 댓글을 단 요소만 바뀌고 나머지 화면은 그대로 남습니다.

STEP 5 · 3분Claude Code 로 핸드오프하거나 파일로 내보낸다

이 단계에서는 완성한 디자인을 실제 결과물로 옮깁니다. 핸드오프를 고르면 handoff bundle 이 한 번에 Claude Code 로 넘어가고, 그 디자인대로 사이트를 만들 수 있습니다. 파일로는 .zip·PDF·PPTX·standalone HTML 로 내보낼 수 있고, Canva·Figma·Adobe·Miro·Vercel 등으로도 보낼 수 있습니다.

넘어온 handoff bundle 의 디자인을 그대로 구현해줘. 색·폰트·간격은 번들 값을 바꾸지 말고, 먼저 첫 화면 하나만 만들어서 보여줘.

성공하면 Claude Code 가 번들을 읽고 같은 디자인의 화면을 코드로 만들며, 브라우저에서 확인할 수 있습니다.

알아 둘 한계

• Free 요금제에서는 쓸 수 없습니다.
• 사용량은 평소 클로드와 같이 줄어듭니다. 디자인 작업을 많이 하면 채팅에 쓸 양도 줄어듭니다.
• 제품은 beta 입니다. 메뉴 이름과 기능은 바뀔 수 있으며, 이 글은 2026년 9월 22일 기준입니다.
• 영상 속 화면은 설명용으로 재구성한 예시이며 실제 Claude Design 화면이 아닙니다.

FAQ

Free 계정은 방법이 없나요? 현재 공식 안내상 Pro 이상 요금제에서만 쓸 수 있습니다.

디자인 시스템 없이 바로 써도 되나요? 됩니다. 다만 기준 없이 만들면 매번 다른 스타일이 나오기 쉬워 디자인 시스템부터 붙이는 편이 낫습니다.

Claude Code 없이도 쓸 수 있나요? 됩니다. PDF·PPTX·HTML 로 내보내거나 조직 내부 URL 로 공유할 수 있습니다.

공식 참고 자료

• Anthropic 공식 발표 — Claude Design
• Claude 공식 고객센터 — Get started with Claude Design
• Claude 공식 블로그 — Claude Design stays on brand

요금제 조건과 내보내기 형식은 위 공식 문서를 2026년 9월 22일에 직접 열어 대조 확인한 내용입니다.