Claude Code Web Design: 10 Years Covered In 66 Minutes

한 줄 요약

Claude Design으로 브랜드 키트를 추출하고, Claude Code로 실제 웹사이트를 구축한 뒤 GitHub → Vercel로 배포하는 전 과정을 66분에 담은 마스터클래스.

레퍼런스 선정: 디자인 영감 소스를 먼저 결정한다. 영상에서는 Stripe를 사용.
브랜드 키트 추출 (Claude Design): 레퍼런스 사이트 스크린샷 또는 Get Design의 브랜드 MD 파일을 Claude Design에 업로드해 색상·타이포그래피·버튼·아이콘 등 전체 디자인 시스템을 자동 생성.
페이지 구조 선택: Stripe의 레이아웃 대신 Dribbble에서 서비스 업종에 맞는 구조 레퍼런스 이미지를 별도로 가져온다. 브랜드(Claude Design) + 구조(Dribbble)를 분리해 조합.
고충실도 프로토타입 생성: Claude Design에서 “high fidelity” 프로토타입 생성. 디자인 시스템 선택 후 5페이지(홈·어바웃·프라이싱·컨택·프로젝트)를 한 프롬프트로 빌드.
Claude Code로 이관: 메인 폴더에서 “Share → Hand off to Claude Code” 커맨드를 복사해 Claude Code에 붙여넣고, Next.js + Tailwind로 빌드 지시.
디자인 파인튜닝: 레이아웃, 타이포그래피, 비주얼, 배경, 호버/포커스 상태, 내비게이션 바, 다크모드 토글, 모션 그래픽, 3D 그래픽, AI 비디오 순서로 순차적으로 개선.
반응형 최적화: 단일 프롬프트로 데스크탑·태블릿·모바일 최적화 요청.
배포: GitHub 레포지터리 생성 → Claude Code로 푸시 → Vercel에서 Next.js 프리셋으로 배포 (약 60초 소요).

영역	구체적 기법
레이아웃	방향(수직/수평), 컬럼 비율(60:40 등), 컨테이너 너비, 섹션 리듬, padding/margin
타이포그래피	3종 텍스트 계층(캡션·헤딩·본문), 폰트 패밀리 혼용, line-height, 그라디언트 텍스트, 텍스트 음영
비주얼	Lucide 아이콘, Freepik 일러스트, Pixabay 로열티프리 이미지
배경	solid color, 이미지, 그라디언트(radial), 노이즈 텍스처, blob, 그리드 패턴, 글래스 효과
인터랙션	호버 시 색상 반전 + 10% 스케일 업 + 그림자 (300ms 트랜지션), 포커스 ring offset, 카드 lift
내비게이션	sticky + frosted glass 효과, 드롭다운 서브메뉴, 모바일 햄버거 슬라이드아웃
모션	스크롤 팝업 애니메이션, 브랜드 로고 자동 루프, 숫자 카운트업, shimmer, hover float
다크모드	토글 버튼으로 전체 색상 반전, 시간대 기반 자동 전환 연동 가능
3D	Spline 커뮤니티에서 리믹스 → 색상 교체 → export code → Claude Code에 삽입
AI 비디오	Higgsfield MCP 연동 후 Claude Code 내에서 직접 영상 생성 및 페이지 삽입

사용 도구

핵심 프롬프트 패턴

CLAUDE.md 역할: Claude Code에 “시니어 UI 디자이너 및 프론트엔드 개발자로서 프리미엄·모던·엘레건트 인터페이스를 구축하라”는 역할 지시를 사전 세팅해 출력 품질을 높인다.