Claude Code Kills Canva & Figma For Web Design (Google Stitch)

원본 영상: Claude Code Kills Canva & Figma For Web Design (Google Stitch)

한 줄 요약

Google Stitch(무료)로 레퍼런스 디자인을 캡처하고, Claude Code로 픽셀 단위 복제 사이트를 빌드한 뒤 GitHub→Vercel로 배포하는 풀 워크플로.

핵심 내용

Stitch로 디자인 초안 생성 — 경쟁사 URL·Dribbble 이미지·GitHub awesome-design 패키지 중 하나를 입력하면 5페이지 분량 디자인 일체(색상·폰트·레이아웃 포함)를 60초 내 생성.
Claude Code로 메가 프롬프트 작성 — Stitch에 붙이기 전, Claude Code에서 브리프를 확장 프롬프트로 변환해 품질을 높임.
Stitch의 한계 인식 — 첫 라운드 초안에는 강하지만, 세부 수정(이미지 교체 등) 반복 지시에는 성능 저하. 세부 수정은 Claude Code로 전환.
Claude Code에서 사이트 빌드 — Stitch 내보낸 zip을 Antigravity/VS Code 프로젝트 폴더에 드래그, claude.md 명령 매뉴얼 추가 후 단일 프롬프트로 픽셀 복제 사이트 생성.
전환율 최적화(CRO) 요소 추가 — Claude Code 추가 프롬프트로 소셜 증명·CTA 등 삽입.
배포 — GitHub(Private repo) → Vercel(Next.js preset)로 무료 라이브 배포. 커스텀 도메인은 GoDaddy·Namecheap 연결 또는 Vercel 직구매.

전술·요소

웹사이트 디자인 소스 3가지

방법	소스	방법
경쟁사 복제	구글 검색 → URL 복사	Stitch에 URL 입력
디자인 템플릿	Dribbble 검색	이미지 저장 → Stitch 업로드
유명 사이트 클론	GitHub awesome-design.md	패키지 클론 후 Stitch 활용

전환율 최적화 체크리스트

협업 브랜드 로고 1행 배치 (신뢰 신호)
실적 수치(프로젝트 수, 별점, 업력 등) 아이콘 배지
영상 후기(video testimonials) — 텍스트 후기보다 신뢰도 대폭 높음
텍스트 후기 + 영상 후기 병행으로 진성 입증
모든 섹션마다 CTA(문의 폼 유도) 배치
30초 VSL(Video Sales Letter): 대표자 얼굴·목소리로 신뢰 구축

수치·사례

(본인 실측) 광고비 누적 $160,000 집행, 최고 전환율 20% 달성
(본인 실측) 웨딩 사업에서 영상 후기 9개 추가 후 리드 획득 비용 $200 → $30 (7배 절감)
(본인 실측) 30초 VSL 추가 후 전환율 10% → 15% (+5%p)

도구·워크플로

Claude Code (메가 프롬프트 생성)
    ↓ 프롬프트 복사
Google Stitch (레퍼런스 URL or 이미지 입력)
    ↓ 5페이지 디자인 생성 → zip 내보내기
Antigravity 또는 VS Code (zip 드래그 → 폴더 구성)
    ↓ claude.md 명령 매뉴얼 추가
Claude Code (단일 프롬프트: "pixel for pixel 복제")
    ↓ localhost:3000 미리보기 → 수정 프롬프트
Claude Code (CRO 요소 추가 프롬프트)
    ↓
GitHub Private Repo (파일 업로드)
    ↓
Vercel (GitHub 연결 → Next.js preset → Deploy)
    ↓ 라이브 URL 생성

Antigravity — VS Code 대안 코딩 워크스테이션 (무료)
플러그인 — “Claude Code for VS Code” (VS Code·Antigravity 동일 플러그인명)
배포 — GitHub(파일 스토리지 역할) + Vercel(호스팅) 모두 무료 티어 사용