How I Built INSANE Claude Design Websites In 10 Minutes

원본 영상: How I Built INSANE Claude Design Websites In 10 Minutes

한 줄 요약

Claude Design에서 브랜드 키트·구조 레퍼런스를 조합해 고품질 프로토타입을 생성하고, Claude Code로 Next.js 사이트로 변환 + GSAP 애니메이션을 자동 적용, GitHub → Vercel로 배포까지 원스톱으로 완성하는 방법.

핵심 내용

디자인 시스템 생성: Claude Design → Design Systems 탭에서 신규 시스템 생성. getdesign.md 에서 원하는 브랜드(Airbnb·Apple·Claude 등 68개) 키트를 복사해 Additional Notes에 붙여넣으면 색상·폰트·버튼·아이콘 포함 전체 브랜드 수트가 약 5분 내 생성된다.
프로토타입 생성: Home → Prototype 생성 시 디자인 수준을 Wireframe이 아닌 High Fidelity로 선택. 디자인 시스템 지정 후, durable.com 같은 디자인 라이브러리에서 원하는 페이지 구조를 스크린샷으로 저장해 함께 첨부한다.
프롬프트 작성: 원하는 페이지 수(예: 홈·서비스·연락처·소개·케이스스터디 5페이지)와 “Claude design system으로 브랜딩, 첨부 스크린샷으로 구조 적용”을 명시해 전송.
Claude Code로 내보내기: Claude Design에서 Export → Handoff to Claude Code로 코드 복사. VS Code 또는 Google Antigravity에서 빈 폴더 열기 후 붙여넣기.
원샷 빌드 프롬프트: 복사한 코드에 Next.js + GSAP 애니메이션 지시문과 claude.md 파일 참조 명령 추가 후 실행.
배포: GitHub 리포지토리 생성 → Claude Code에 업로드 명령 → Vercel에서 GitHub 연동 후 Next.js 프리셋 선택 → 배포.

전술·요소

단계	도구	핵심 액션
브랜드 키트	getdesign.md	68개 브랜드 중 선택, dark/light 토글 가능
구조 레퍼런스	durable.com	원하는 레이아웃 스크린샷 저장
디자인 품질	Claude Design	Wireframe 대신 High Fidelity 선택
애니메이션	GSAP (greensock.com)	프롬프트에 라이브러리 명시, demos.greensock.com에서 데모 참고
지시 파일	claude.md	빌드 전 프로젝트 폴더에 배치 (일종의 시스템 프롬프트)
호스팅	GitHub + Vercel	둘 다 무료 계정으로 가능, Vercel 도메인 커스텀은 GoDaddy·Namecheap·Vercel 직접 구매

요소 교체: 플레이스홀더 이미지나 텍스트는 Comment 기능으로 페이지 요소 선택 후 교체 지시
세밀 편집: Draw(그리기) 버튼으로 특정 영역을 원으로 표시하고 변경 내용 입력
모션 그래픽: Claude Design 내에서 애니메이션 영상도 생성 가능 — Claude에서 먼저 메가 프롬프트를 생성한 뒤 입력하면 품질 향상

도구·워크플로

getdesign.md (브랜드 키트)
    ↓ 복사
Claude Design (Design Systems)
    ↓ 디자인 시스템 생성 (~5분)
durable.com (구조 스크린샷)
    ↓ 함께 첨부
Claude Design (Prototype, High Fidelity)
    ↓ Export → Handoff to Claude Code
VS Code / Google Antigravity
    + claude.md 파일 배치
    + 프롬프트: Next.js + GSAP + claude.md 참조
    ↓ 원샷 빌드
localhost 미리보기 확인
    ↓ GitHub 리포지토리 업로드 (Claude Code 명령)
Vercel (Next.js 프리셋 → Deploy)
    ↓
라이브 URL (커스텀 도메인 연결 가능)

핵심 프롬프트 패턴:

“Can you please build this Claude design website using Next.js, and can you use the library GSAP to add animations wherever appropriate? Add as many beautiful stunning animations as possible without it looking cheesy. Read the claude.md file and build this out in one go.”