Claude Design Just Dropped - Full Tutorial (Slides, Websites, Designs)

원본 영상: Claude Design Just Dropped - Full Tutorial (Slides, Websites, Designs)

한 줄 요약

Claude Design(리서치 프리뷰)으로 슬라이드덱·랜딩페이지·와이어프레임을 원샷 생성하고, Canva·PowerPoint·Claude Code로 내보내는 전체 워크플로.

핵심 내용

1. claude.ai 사이드바 → Design 진입 (리서치 프리뷰, 순차 배포 중)
2. 프로젝트 유형 선택: Slide Deck 또는 Prototype
3. 품질 모드 선택: High Fidelity(완성본) vs Wireframing(구조 스케치)
4. 생성 전 Claude가 후속 질문으로 요구사항 명확화 → 첫 출력 품질 향상
5. 생성된 결과물을 주석·직접 편집·드로잉 세 가지 방식으로 수정
6. 완성 후 PowerPoint·Canva로 내보내거나 Claude Code로 핸드오프해 실사이트 배포

전술·요소

기능	방법
브랜드 테마 적용	기존 웹사이트 스크린샷을 레퍼런스 파일로 업로드
특정 요소 수정	Comment 툴로 요소 선택 → 텍스트로 지시
직접 편집	텍스트 선택 후 색상·크기·폰트·굵기 직접 변경
드로잉 마크업	캔버스에 직접 그린 뒤 Cmd/Ctrl+G로 채팅 지시
Canva 내보내기	Settings → Connectors → Canva 연동 후 쓰기 권한 활성화 필요
Google Slides 변환	PowerPoint 내보내기 → Google Slides에서 File → Import Slides
사이트 배포	Claude Code 핸드오프 → GitHub 업로드 → Vercel 정적 호스팅 (모두 무료)
디자인 시스템	회사명·설명·GitHub 링크·폰트·로고 입력 → 약 15분 생성 → 이후 모든 프로젝트에 적용

수치·사례

• 공개 직후 조회수 6.6M 돌파 (영상 내 실시간 관찰, 매 새로고침마다 약 +200,000)
• 데모 슬라이드: 조경 서비스 $2,000 패키지 영업용 클라이언트 프레젠테이션 원샷 생성
• 데모 랜딩페이지: “AI Content System Building, $10K one-time” 원페이저, 웹사이트 스크린샷 2장만 입력

도구·워크플로

• Claude Design — 슬라이드·프로토타입 생성 허브
• Figma / GitHub — 코드·디자인 파일 업로드 입력소스
• Canva — 슬라이드 후편집 (Connector 연동 필요)
• Claude Code — 디자인 → 실제 코드 변환 핸드오프 (export → hand off to Claude Code 커맨드 복사)
• GitHub + Vercel — 정적 사이트 배포 파이프라인
• Design System — 브랜드 일관성 유지용 공유 설정값, 프로젝트 생성 시 좌측 패널에서 선택 적용