Claude Design 사용법 완벽 가이드: 대화로 프로토타입 만드는 법

TL;DR

Claude Design은 2026년 4월 Anthropic이 출시한 Chat-to-Design 도구 — 대화 한 줄로 프로토타입·슬라이드·원페이저를 만든다.
코드베이스를 업로드하면 브랜드 색상·타이포그래피를 자동 학습, 이후 모든 결과물에 일관되게 적용된다.
Pro 이상 플랜에 추가 비용 없이 포함, claude.ai/design에서 바로 접근 가능하다.

디자이너 없이 프로토타입을 만들어야 하는 상황

투자자 미팅 전날 밤, PM이 Figma를 열고 멈추는 건 한국 스타트업에서 흔한 장면이다. Gamma로 슬라이드, Lovable로 UI 프로토타입, Canva로 에셋 — 세 탭 사이를 오가다 새벽이 된다.

Claude Design이 노리는 지점이 정확히 여기다. Anthropic 공식 발표에서 “디자인 도구에서 시작하지 않고, 아이디어에서 시각 결과물까지 빠르게 가야 하는 사람들”을 위해 만들었다고 밝혔다.

2026년 4월 17일 Anthropic Labs에서 Research Preview로 출시됐다. Claude Opus 4.7이 백엔드이고, 비전 처리 해상도는 이전 Claude 모델 대비 3배인 최대 3.75M 픽셀이다.

접근 & 요금

claude.ai/design — 이 URL 하나로 접근한다. 별도 요금 없이 아래 플랜에 포함돼 있다.

플랜	접근 가능 여부
Free	✗
Pro / Max	✅ 즉시 접근
Team	✅ 즉시 접근
Enterprise	✅ 관리자 Admin Settings 활성화 후

Enterprise 조직은 관리자가 먼저 켜야 멤버들이 쓸 수 있다. 팀 전체 도입 전 IT 관리자 확인이 필수다.

첫 설정: 디자인 시스템 구성 (최초 1회)

처음 접속하면 브랜드 시스템 구성 화면이 나온다. 여기서 팀의 디자인 언어를 Claude에게 가르친다.

업로드 가능 소스:
GitHub 리포지토리 링크 (코드베이스 → 색상/컴포넌트 자동 추출)
.fig 파일 (Figma 파일 직접 임포트)
브랜드 가이드라인 PDF / DOCX
로고 이미지
웹사이트 URL 캡처

초기화에 약 15분 소요된다. 탭을 닫으면 처음부터 다시 시작하니 그대로 둬야 한다. 한 번 설정하면 이후 모든 프로젝트에 자동 적용된다. 소스가 없다면 텍스트로도 충분하다.

텍스트 입력 예시: "Minimalist and trustworthy B2B SaaS, primary color #0F4C81, font: Pretendard, 한국 시장 대상 HR SaaS"

인터페이스 구조

화면은 좌우 두 패널이다.

좌측 채팅 패널: 작업 요청, 진행 로그, 인라인 코멘트
우측 캔버스: 실시간 미리보기 (Claude Code와 달리 localhost 없이 바로 확인)

수정 방법도 두 가지다.

채팅 (구조적 변경):

"색 스킴을 어둡고 미니멀하게 바꿔줘" "지표들을 상단 행으로 재배치해줘" "레이아웃 대안 3가지 보여줘"

인라인 코멘트 (컴포넌트 단위 세밀 수정):

"이 버튼 패딩 더 크게" "라디오 버튼 대신 드롭다운으로 변경" "여기 primary 브랜드 컬러 적용"

슬라이더로 간격·색상을 직접 조정할 수도 있다. 관련 요소 전체에 자동으로 전파된다.

좋은 프롬프트 4요소

Anthropic 지원 문서에서 권장하는 구성이다.

요소	설명	예시
Goal	무엇을 만드는지	“모바일 온보딩 플로우”
Layout	요소 배치 방식	“4화면, 각 화면에 제목+설명+CTA”
Content	표시할 정보	“목표 선택 → 알림 설정 → 첫 세션 진입”
Audience	사용 대상	“명상 앱 첫 사용자, 20~40대”

짧아도 이 4요소가 들어가면 재작업이 크게 줄어든다.

실무 워크플로우

1. 투자자 피치덱 빠르게 만들기

"Series A 투자자 피치덱 만들어줘. 회사: B2B HR SaaS, 타깃: 50인 이하 스타트업 포함 섹션: 문제/솔루션/시장/팀/로드맵/Ask 슬라이드 10장 이내"

기존 PDF 자료가 있다면 올리면 된다. 50페이지 PDF를 19슬라이드 브랜드 프레젠테이션으로 자동 변환하는 기능이 있다. 카카오, 토스처럼 분기마다 내부 전략 자료를 리포맷해야 하는 팀에서 시간을 아낄 수 있다.

2. 모바일 온보딩 프로토타입

"모바일 앱 온보딩 플로우 4화면 디자인해줘. 앱: 명상/수면 트래킹 1화면: 웰컴 + CTA 2화면: 목표 선택 (수면/집중/스트레스 해소) 3화면: 알림 설정 4화면: 첫 세션 진입"

화면 전환 인터랙션까지 포함된 클릭 가능 프로토타입이 나온다. 기획서 없이 디자이너와 개발자에게 바로 보여줄 수 있는 수준이다.

3. 랜딩페이지 원페이저

"제품 랜딩페이지 만들어줘.
Hero: 메인 카피 + CTA 버튼
기능 소개 3가지 (아이콘 + 설명)
고객사 로고 배너
가격 플랜 표 (Free / Pro / Enterprise)
FAQ 섹션"

4. Claude Code로 핸드오프

프로토타입이 완성되면 Export → Hand off to Claude Code 버튼 하나로 설계 의도와 컴포넌트 구조가 번들로 넘어간다. Claude Code에서 바로 Next.js 구현으로 이어진다.

# Claude Code에서 이어받기 claude.ai/design 핸드오프 후 자동으로 컨텍스트 로드됨 "이 디자인을 Next.js + Tailwind CSS로 구현해줘"

익스포트 옵션

형식	주요 용도
ZIP	전체 에셋 일괄 다운로드
PDF	투자자/고객 배포
PPTX	기존 PowerPoint 워크플로우 유지
Canva 전송	Canva 내 추가 편집
독립 HTML	웹 배포, 개발자 레퍼런스
Claude Code 핸드오프	바로 개발 구현
공유 링크	view-only / comment / edit 3단계 권한

Claude Design vs 기존 도구들

기준	Claude Design	Figma	Gamma	Canva
대화형 생성	✅	Figma Make	✅	제한적
자동 디자인 시스템	✅ 코드베이스 기반	수동 설정	✗	✗
슬라이드 덱	✅	✗	✅	✅
클릭 가능 프로토타입	✅	✅	✗	✗
Claude Code 핸드오프	✅ 네이티브	Dev Mode	✗	✗
별도 구독	불필요 (Pro 포함)	필요	필요	필요

Anthropic 공식 포지션은 “Figma를 대체하는 것이 아니라 보완한다”는 것이다. 실무에서는 Claude Design으로 빠른 아이디어 탐색을 하고, 픽셀 퍼펙트 완성은 Figma로 넘기는 흐름이 자연스럽다.

주의사항

Research Preview 상태: 현재 연구 프리뷰 단계다. 느린 성능, 높은 RAM 사용, 간헐적 버그가 있다. 안정적인 프로덕션 작업보다 아이디어 탐색과 커뮤니케이션 도구로 활용하는 게 현실적이다.

알려진 버그:

인라인 코멘트가 처리 전 사라지는 경우 → 채팅에 직접 붙여넣기로 우회
컴팩트 뷰 레이아웃에서 저장 오류 발생 가능
대형 레포지토리 연결 시 브라우저 렉

Figma 직접 익스포트 없음: .fig 파일로 내보내기는 미지원. HTML/Zip 추출 후 Figma에서 수작업으로 가져와야 한다.

협업 한계: 동시 편집(멀티플레이어)은 미지원. 공유 링크 편집 권한은 가능하지만, Figma 수준의 실시간 협업은 아직 없다.

결론

Claude Design이 만드는 가장 큰 변화는 워크플로우 단순화다. Gamma, Lovable, Canva를 전전하던 흐름을 하나의 Claude 인터페이스로 통합했다.

PM이나 창업자 입장에서 실질적인 이점은 세 가지다.

빠른 PMF 검증: 디자이너 없이 프로토타입을 만들고 사용자 반응을 먼저 확인할 수 있다.
브랜드 일관성 자동 유지: 코드베이스에서 추출한 디자인 시스템이 모든 결과물에 자동 적용된다.
Claude Code까지 연결: 프로토타입에서 구현 코드까지 Anthropic 생태계 안에서 끊김 없이 이어진다.

아직 Research Preview인 만큼, 픽셀 퍼펙트 프로덕션 작업보다 빠른 아이디어 시각화와 팀 커뮤니케이션 도구로 접근하는 게 현재 단계에서 가장 실용적이다.

참고 자료