Claude Design은 제품 발굴의 두 가지 핵심 단계를 획기적으로 단축한다:
| 단계 | 기존 방식 | Claude Design |
|---|---|---|
| 아이디어 → 프로토타입 | 전담 디자이너와 며칠~수 주 | 같은 날 오후, 채팅으로 수 시간 만에 반복 |
| 승인된 디자인 → 프로덕션 코드 | 수 주 (Figma 핸드오프 → 재구현 → 정렬 확인) | 며칠 (프로토타입에서 Claude Code로 바로 이어서) |
단순히 Figma를 대체하는 속도 문제가 아니다. 핵심 지표는 학습까지의 시간(Time to Learn) — “X를 시도해봐야겠다”에서 “작동하거나 실패했다는 증거를 얻었다”까지의 시간이다.
단계 1: 디자인 시스템 설정
https://claude.ai/design > Design systems > Create에서 시작한다.
활용 가능한 소스:
- 기존 Figma 라이브러리 또는 Storybook
- 코드베이스 (GitHub URL 제공)
- 스케치, 스크린샷, 사진, 폰트, 로고
- 브랜드 텍스트 설명
소스 선택 기준:
| 소스 | 충실도 | 권장 시점 |
|---|---|---|
| 코드베이스 | 높음 | 기존 프로덕션 코드가 있을 때 |
| Figma 파일 | 높음 | 완성된 디자인 시스템이 있을 때 |
| DESIGN.md | 낮음 (규칙만) | 처음 시작할 때 빠른 씨앗으로 |
Claude Design은 3가지 아티팩트를 생성한다:
- Design System: UI 킷, 타입, 색상, 간격, 컴포넌트
- Design Files: 미리보기 가능한 에셋, HTML, 이미지, 스타일시트
- Skill.md: 디자인 시스템을 Claude Code·Codex 등 다른 에이전트에 전달할 수 있는 스킬 파일
팁: 아직 시스템이 없다면 Ferrari, Apple, Linear 같은 기존 브랜드를 클론해서 반복적으로 자신의 브랜드로 다듬어가는 방식도 유효하다. 무드보드보다 빠르다.
단계 2: 프로토타입 컨텍스트 정의
New prototype > Create에서 디자인 시스템을 선택하고 컨텍스트를 제공한다.
PM이 에이전트에게 제공해야 할 핵심 정보:
| 요소 | 설명 |
|---|---|
| Objective | 왜 중요한지, 성공 지표 |
| Persona | 실제 사용자 (구매자가 아닌 화면 속의 사람) |
| Value Proposition | 이 화면이 전달해야 할 것 |
| Job to Be Done | 사용자가 완료하려는 태스크 |
| Common Actions | 가장 자주 수행하는 행동 (제품 분석 데이터 우선) |
Claude Design은 컨텍스트가 불충분할 경우 실행 전에 인터뷰를 진행한다.
단계 3: 반복과 협업
프로토타입 생성(5~10분) 후 4가지 정제 도구를 활용한다:
| 도구 | 용도 |
|---|---|
| Chat | 자연어로 수정 (“빈 상태를 더 친근하게 만들어”) |
| Comments | Figma 스타일 스레드 코멘트, 팀 공유 가능 |
| Sketch | 프로토타입에 직접 그려서 위치 지정 |
| Tweaks | 같은 캔버스에 여러 변형을 병렬 생성 |
빠른 수정(카피 수정, 버튼 위치, 빈 상태 등)은 디자이너를 거치지 않고 PM이 직접 처리할 수 있다.
채팅에서 빠른 모델(Sonnet)로 전환하면 반복이 수 초로 단축된다.
단계 4: Claude Code로 핸드오프
가장 큰 워크플로우 변화가 일어나는 단계다. 프로토타입이 엔지니어가 재구현해야 할 산출물이 아니라, 이어서 작업하는 출발점이 된다.
엔지니어는 Figma 명세를 코드로 재해석하는 대신, Claude Code로 프로토타입과 디자인 시스템에서 이어서 구현한다. 구현 드리프트가 발생하지 않는다.
디자인 시스템을 .zip으로 내보내면 Claude Code, Codex, Cursor 등 모든 에이전트에 스킬로 전달할 수 있다.
프로덕트 트리오 활용 패턴
- PM: 컨텍스트 제공, 프로토타입 반복, 소규모 수정 직접 처리
- 디자이너: 핸드오프 품질 향상, 더 많은 시간을 디자인 판단력이 필요한 작업에
- 엔지니어: 프로토타입에서 이어서 구현, Figma 재해석 없음
같은 디자인 시스템으로 슬라이드 덱, 모션 비디오, 마케팅 템플릿도 생성 가능하다.
관련 문서
- claude-design — Claude Design 개요
참고 자료
- From Weeks to Hours: How Claude Design Compresses Product Discovery — The Product Compass (2026-05-04)