Claude + Higgsfield MCP로 영화 같은 3D 사이트 만들기

Claude Desktop 다운로드 및 설치

Claude Desktop 다운로드하기

https://claude.com/download

빈 프로젝트 폴더 생성

Claude Desktop에서 폴더 열기

Claude Desktop Code New Local Select the project folder Open Trust Workspace

Higgsfield MCP 연결

Higgsfield MCP 열기

https://higgsfield.ai/mcp?tab=claude

Claude Desktop Account Menu Settings Connectors Add Add Custom Connector

Higgsfield MCP URL을 붙여넣고 계정을 연결 Higgsfield 권한을 Always Allow로 설정

웹사이트 프롬프트 커스터마이즈

아래 기본 항목을 입력하세요. 고급 옵션은 선택 사항입니다.

영화 같은 사이트 제작 도구

콘셉트와 스타일을 고른 뒤, Claude가 사이트를 만들고 Higgsfield로 비주얼을 생성하도록 완전한 프롬프트를 복사하세요.

You are a senior creative director and front-end developer working inside Claude Desktop, with the Higgsfield MCP connector enabled. Build a complete cinematic, scroll-driven website for the project below, in one pass. Work directly inside the local project folder that is already open and create every file there. Finish the whole site — design, copy, and generated visuals — rather than a rough draft I have to repair afterwards. PROJECT Brand or project name: {{BRAND_NAME}} Product or niche: {{PRODUCT_NICHE}} Main call-to-action: {{PRIMARY_CTA}} Do not reproduce a real company's logo, identity, imagery, copy, or layout. If the name resembles an existing brand, create an original interpretation of it instead. ART DIRECTION {{VISUAL_STYLE}} Commit to that direction and hold it everywhere: one color palette, one lighting language, one typographic system, one treatment for every image and video. The finished page should look like a single art-directed shoot, not a set of unrelated pictures. Treat this link as broad design inspiration only — study its layout rhythm, pacing, composition, and interaction feel, and never copy its text, images, brand, or main subject: {{REFERENCE_URL}} VISUAL SOURCE {{VISUAL_SOURCE}} PAGE STRUCTURE {{SECTIONS_PRESET}} Open with a cinematic hero that lands the product within the first screen, keep one continuous visual story running as the visitor scrolls, and close on the call-to-action and footer. Every section must earn its place: no filler blocks, and no two near-identical layouts in a row. VISUAL ASSETS — GENERATE THEM WITH HIGGSFIELD Use the Higgsfield MCP connector yourself to generate every image and video the design calls for, before you consider the site finished. Never ship placeholder images, grey boxes, hotlinked stock photos, or an empty image tag. {{ASSET_MODE}} Write a specific, cinematic prompt for each asset — camera angle, lens feel, lighting, materials, background, mood — always describing the main subject exactly as established in VISUAL SOURCE, and carry the same palette through all of them. Any motion asset must show that same subject: never redesign it between the images and the video. Save the generated files inside the project folder and reference them with local relative paths. Generate the images with the {{IMAGE_MODEL}} model. If you generate any motion asset, use the {{VIDEO_MODEL}} model for it. MOTION {{ANIMATION_LEVEL}} Animate with transform and opacity so scrolling stays smooth, honour prefers-reduced-motion, and never let an animation block reading or tapping. COPY {{COPY_TONE}} Write finished, specific copy for every section: hero headline and subheadline, section headings, body text, feature or benefit lines, and button labels. Name concrete details of the product instead of generic marketing filler. No lorem ipsum, no TODO, no empty sentences. Use the main call-to-action above as the wording of the primary button, in the hero and again near the end of the page. QUALITY BAR - Fully responsive: check desktop, tablet, and mobile, including the hero, the type scale, and any full-bleed media. - Every link, button, and navigation item works, and tap targets are comfortable on a phone. - Media is optimized: correctly sized, lazy-loaded below the fold, with a poster frame on video and no sound playing automatically. - Basic SEO: honest page title, meta description, a single H1, descriptive section headings, alt text on every image, and Open Graph title, description, and image. No keyword stuffing. LOCAL PROJECT Keep everything static and self-contained inside the open project folder: index.html at its root, CSS, JavaScript, images, and videos in clearly named folders, relative paths throughout, and any library loaded from a CDN. No backend, no build step, no npm install. FINAL CHECK Before you tell me it is done, confirm the main subject looks like the same product in every image and video, no section is empty or unfinished, and every button and link works at desktop and mobile widths. Then tell me how to open it in my browser and list the assets you generated.

비주얼, 페이지 레이아웃, 모션, AI 모델에 대한 선택 설정입니다. 확실하지 않으면 그대로 두세요.

Claude 열기

브랜드 또는 프로젝트 이름

예: AURION X

상품 또는 분야

항목을 선택하세요

메인 이미지 소스

항목을 선택하세요

비주얼 스타일

항목을 선택하세요

메인 행동 유도 문구

항목을 선택하세요

비주얼 생성 수준

항목을 선택하세요

페이지 구성

항목을 선택하세요

애니메이션 강도

항목을 선택하세요

글쓰기 스타일

항목을 선택하세요

이미지 모델 (선택)

항목을 선택하세요

영상 모델 (선택)

항목을 선택하세요

참고 링크 (선택)

선택 — 시각적 참고용으로만 쓰이며, 그대로 복사하지 않습니다

프롬프트를 전송해 웹사이트 빌드

참고 이미지를 골랐다면 프롬프트를 보내기 전에 첨부하세요.

첫 로컬 미리보기 열기

웹사이트를 검토하고 필요한 변경 사항 적용

데스크톱과 모바일 레이아웃을 확인한 뒤, 변경할 점을 설명하거나 필요하면 스크린샷을 첨부하세요.

사이트 게시 준비하기

사이트를 배포할 준비하기

승인된 디자인을 바꾸지 않고 배포 가능한 최종 버전을 만드세요.

Prepare the current website for deployment without redesigning it or changing the visual direction. Make sure every required file is included in the local project. Download and store any required Higgsfield-generated images or videos locally inside the project, and replace temporary or remote media URLs with reliable relative local paths. Optimize the final images and videos where possible without noticeably reducing their quality. Remove unnecessary development files from the final deployment version. Create a folder named "deploy" containing the complete static website ready to upload to a web host. The deploy folder must have index.html directly at its root, along with every required asset, stylesheet, script, font reference, image, and video. Verify that the website works correctly from the deploy folder, including the layout, navigation, animations, responsive behavior, images, and videos. Do not redesign the website. Only prepare, optimize, and package the approved version for publishing.

Claude 열기

Hostinger 열기

Hostinger 열기

이용 가능한 플랜과 각 플랜에 포함된 내용을 보려면 Hostinger 호스팅 페이지를 엽니다.

USED IN TUTORIAL

https://www.hostg.xyz/SHJjW

호스팅 플랜 선택 및 계정 생성

웹사이트 마이그레이션 설정

Hostinger Migrate an Existing Site Upload Backup Files

사용할 도메인을 선택하거나 연결하거나 등록하세요.

웹사이트 ZIP 업로드

Project folder deploy

deploy 폴더를 열고 그 안의 모든 항목을 선택한 뒤, 선택한 파일을 ZIP으로 압축해 그 ZIP을 업로드하세요.

운영 중인 웹사이트 열기

선택한 도메인을 열고 웹사이트, 비주얼, 애니메이션, 레이아웃이 온라인에서 정상 작동하는지 확인하세요.

완성된 웹사이트를 포트폴리오 데모, 클라이언트 제안, 프리미엄 랜딩 페이지 상품으로 활용하세요.

서비스로 만드는 방법

포트폴리오 데모

AI로 만들 수 있는 시네마틱 경험의 증거로 운영 중인 웹사이트를 보여주세요.

프리미엄 랜딩 페이지

시네마틱한 런칭 페이지, 캠페인 사이트, 비주얼 브랜드 경험을 제안하세요.

웹사이트 리디자인

현재 웹사이트가 얼마나 더 현대적이고 고급스러워질 수 있는지 기업에 보여주세요.

클라이언트 제안용 데모

AI 웹사이트 제작 서비스를 제안할 때 운영 중인 웹사이트를 보여주세요.

강한 비주얼이 체감 가치를 높이는 분야에서 가장 효과적입니다.