4 Claude Code Hacks To Make Any Website Look 10/10 (Steal These)

원본 영상: 4 Claude Code Hacks To Make Any Website Look 10/10 (Steal These)

한 줄 요약

코딩 지식 없이 Claude Code + 4가지 그래픽/영상 도구로 $10,000짜리처럼 보이는 랜딩페이지를 빠르게 제작한다.

핵심 내용

Three.js 3D 배경 애니메이션 — threejs.org 또는 “153 three.js examples” 페이지에서 원하는 이펙트 코드를 복사해 Claude Code 프롬프트에 붙여넣는다. Netflix 클론 사이트 예시: 정적 히어로 이미지 대신 “peacock” 예제의 스타워즈식 롤링 크레딧 애니메이션을 배경으로 삽입.
Spline 3D 그래픽 — Spline 커뮤니티에서 그래픽을 remix → UI 텍스트/버튼 삭제 → export URL 복사 → Claude Code에 NPM Spline 패키지와 함께 전달. “made with Spline” 로고는 black→transparent 그라디언트로 덮어 숨긴다.
Higgsfield + Kling 3.0 — Before/After AI 영상 — Claude.ai로 before/after 이미지용 mega prompt 생성 → Google Gemini로 이미지 생성 → Higgsfield의 Kling 3.0 모델에서 두 이미지 간 전환 영상 제작 → Claude Code로 히어로 섹션 아래에 영상 삽입.
Higgsfield + Seedance 2 — 시네마틱 배경 영상 — Claude.ai로 “우주→지구→도시→펜트하우스” 원테이크 시나리오 mega prompt 생성 → Seedance 2로 영상 생성 → Claude Code에서 배경 영상 + 블랙 오버레이로 프리미엄 랜딩페이지 구성.
배포 — GitHub(private repo)에 파일 업로드 후 Vercel에서 Next.js 프리셋으로 배포. 둘 다 무료.

전술·요소

항목	내용
Claude Code 환경	Antigravity 또는 VS Code + Claude Code 확장($17/월)
CLAUDE.md	프로젝트 루트에 행동 지침 파일 추가 (채널 무료 커뮤니티에서 제공)
`/plugins` 명령	`front-end-design` 플러그인 설치 → 디자인 품질 즉시 향상
디자인 레퍼런스	Dribbble에서 “SaaS website dark”, “reno website” 등으로 검색 후 스크린샷 업로드
이미지 압축	5MB 초과 시 compresspng.com에서 압축
영상 압축	MP4가 7MB+ → Veed 등으로 1MB대로 압축해 페이지 로드 속도 확보
Before/After 이미지 생성 순서	완성본(예쁜 상태) 먼저 생성 후 열화 버전 생성 — 반대 방향이 더 어렵기 때문
Spline 로고 제거	`black → transparent` 그라디언트로 우하단 커버

수치·사례

랜딩페이지 제작 시간: 약 10분 (본인 시연 기준)
AI 영상 파일 크기 예시: 7.4MB → 압축 후 ~1MB (본인 실측)
Higgsfield 요금: $15/월~, 초기 무료 크레딧 약 10개 (본인 확인)
AI 영상 품질 비교 (같은 입력 이미지·프롬프트, 자동차 360° 회전 요청 기준, 본인 테스트):
- Sora: 애니메이션 사진 수준, 회전 미완성
- VEO 3: 양호하나 360° 미완성 + 픽셀 열화
- Kling: 영상 jitter 심함
- Seedance 2: 요청 완전 수행, 최고 품질

도구·워크플로

[디자인 레퍼런스]        [3D/영상 에셋]
Dribbble 스크린샷   +   Three.js 코드 / Spline URL / Higgsfield 영상
        ↓
  Claude Code (Antigravity or VS Code)
  - CLAUDE.md 지침 파일
  - front-end-design 플러그인
  - 프롬프트: 레퍼런스 이미지 + 에셋 동시 첨부
        ↓
  Next.js 랜딩페이지 생성 (localhost 미리보기)
        ↓
  GitHub(private) → Vercel 배포

Mega prompt 패턴 (Claude.ai 경유):

Higgsfield용: “우주→지구→도시→펜트하우스 원테이크 영상 mega prompt 작성해줘”
Gemini 이미지용: “before/after 이미지 생성을 위한 Gemini 프롬프트 작성해줘” → Claude.ai에서 프롬프트 생성 → 해당 도구에 그대로 붙여넣기