클로드 디자인 어떻게 쓰는지 하나씩 살펴봅시다. (Claude Design Full Tutorial)
클로드 디자인(Claude Design)이 최근 크게 바뀐 내용을 하나씩 정리했습니다. Usage가 통합되어 별도 제한이 사라졌고, Claude Design MCP를 설정하면 클로드 코드에서 직접 디자인 프로젝트를 생성하고 수정할 수 있습니다.
MCP 연동으로 클로드 코드와 클로드 디자인을 핑퐁하듯 오가며 작업하는 법, Canva·GitHub 커넥터 활용, 마크업·코멘트·에딧·트윅으로 디자인을 다듬는 법, 프레젠트 발표 모드, 그리고 디자인 결과물을 다시 클로드 코드로 가져오는 Share 기능까지 실제 화면으로 살펴봅니다. 핵심은 Claude Design MCP를 통해 로컬의 클로드 코드에서 손쉽게 디자인할 수 있다는 점입니다.
📖 하네스 엔지니어링을 다룬 제 책 「요즘 바이브 코딩 하네스 with 클로드 코드」 (골든래빗)
예스24: https://www.yes24.com/product/goods/190806231
교보문고: https://product.kyobobook.co.kr/detail/S000220119542
⏱ 챕터
00:00:00 Intro
00:00:19 Usage 통합
00:00:32 Claude Design MCP 설정
00:00:56 MCP로 프로젝트 생성·앱 구현
00:02:00 /design 스킬과 환경변수
00:03:15 클로드 코드로 파일·디자인 관리
00:05:13 Canva 커넥터로 이미지 생성
00:06:17 GitHub 레포에서 디자인 생성
00:07:04 마크업·코멘트·에딧 수정
00:10:29 트윅으로 스타일 변형
00:11:24 프레젠트 발표 모드
00:11:48 클로드 코드로 보내기
00:12:45 채팅 첨부·스킬·모델
00:14:56 마무리
디스코드 참여하기 : https://discord.gg/fPqpD5wvza