클로드 디자인 초보자도 완벽하게 잘 쓰는 방법 — 99%가 ‘시스템’ 없이 접근합니다
Key Insight
Claude Design의 핵심 경쟁력은 디자인 시스템을 하네스로 활용하는 데 있다. Figma 커뮤니티의 디자인 시스템 파일을 업로드하면 일관된 고품질 프로토타입이 자동 생성되며, Claude Code로 핸드오프까지 이어진다.
출처: YouTube — 빌더 조쉬 Builder Josh 채널: 빌더-조쉬 업로드: 2026-04-29 유효일: 2026-05-07
핵심 Takeaway
- 디자인 시스템 = 디자이너의 하네스 — 사전 세팅이 출력 품질을 결정
- Claude Design 워크플로우: PRD 작성 → 디자인 시스템 선택 → 프로토타입 생성 → Claude Code 핸드오프
- Figma 커뮤니티의 공개 디자인 시스템(.fig 파일)을 직접 업로드해 Claude Design에 적용 가능
- Share → “Handoff to Claude Code” 기능으로 프로토타입 코드를 Claude Code로 바로 이전
- 현재 한계: 크레딧 소모량 큼(프로 계정도 빠르게 소진), Desktop 앱 미지원
상세 요약
Claude Design이란
anthropic이 출시한 AI 기반 UI/프로토타입 디자인 도구. claude.ai 웹에서만 제공(2026-04 기준 Desktop 앱 미탑재). 출시 이후 Figma 주가가 1년 내 83% 하락했다는 언급이 있음.
Dated Claim
Figma 주가 -83% 수치는 2026-04-29 기준. 변동 가능.
Claude Design을 만든 핵심 디자이너는 Figma 출신이며, 하루 업무의 50%는 코드, 30%는 Figma, 20%는 커뮤니케이션에 할애한다고 알려져 있다.
핵심 활용법: 디자인 시스템 먼저 세팅
디자인 시스템은 폰트·컬러·버튼 등 컴포넌트를 사전 정의한 키트. 이를 Claude Design에 업로드하면 AI가 가이드라인을 읽어 일관된 디자인을 자동 생성한다.
추천 공개 디자인 시스템:
- Apple iOS Design System — 인기 1위, figma.com/community에서 다운로드
- Google Material 3 Design Kit — 안드로이드 표준
- 원티드 디자인 시스템 — 한국 서비스에 최적화, 프리텐다드 폰트 기반
업로드 절차:
- figma.com → Community → UI Kits에서 원하는 디자인 시스템 선택
- “Open Figma” → “Make a copy” → File → Save Local Copy (.fig 다운로드)
- Claude Design → Design Systems → Create → Upload Figma File
PRD → 프로토타입 → Claude Code 핸드오프 워크플로우
1. Claude(claude.ai)에서 PRD 작성
예: "시니어들이 이용할 수 있는 택시 앱의 PRD를 만들어 주세요"
2. Claude Design에서 New Prototype 생성
- 디자인 시스템 선택 (원티드/Material 3 등)
- PRD 내용 붙여넣기 + 가설 시나리오 요청
3. 결과: 3가지 시안(A/B/C안) + 인터랙티브 프로토타입
- 각 시안은 클릭 가능한 인터랙티브 형태
- 텍스트·위치 에디트 모드 지원 (피그마 대비 편집 범위 제한적)
4. Share → "Handoff to Claude Code" → 코드 복사 → Claude Code에 붙여넣기
현재 한계 (2026-04 기준)
- 크레딧 소모량 큼: 디자인 시스템 1개 생성 후 프로 계정 빠르게 소진
- 편집 범위 제한: 피그마 수준의 자유도 없음 (컴포넌트 위치·색상 변경 정도)
- 아이콘 등 일부 요소 별도 제작 필요
대안: 디자인 시스템 파일 + design.md 형태로 Claude Code 컨텍스트에 넣어두면 Claude Design 없이도 동일 스타일 활용 가능.
연결되는 노트
- 빌더-조쉬 — 영상 제작 채널
- harness-engineering — 디자인 시스템 = 디자이너의 하네스 개념 연결
- claude-code — 핸드오프 대상 도구
- anthropic — Claude Design 개발사