Xây dựng website 3D phong cách điện ảnh với Claude + Higgsfield MCP

Tải xuống và cài đặt Claude Desktop

Tải Claude Desktop

https://claude.com/download

Tạo một thư mục dự án trống

Mở thư mục trong Claude Desktop

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

Kết nối Higgsfield MCP

Mở Higgsfield MCP

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

Claude Desktop Account Menu Settings Connectors Add Add Custom Connector

Dán URL Higgsfield MCP và kết nối tài khoản của bạn Đặt quyền của Higgsfield thành Always Allow

Tùy chỉnh prompt cho website

Điền các trường cơ bản bên dưới. Các tùy chọn nâng cao là không bắt buộc.

Trình tạo website phong cách điện ảnh

Chọn ý tưởng và phong cách, rồi sao chép một prompt hoàn chỉnh để Claude dựng website và tạo hình ảnh bằng 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.

Cài đặt tùy chọn cho hình ảnh, bố cục trang, chuyển động và các mô hình AI. Cứ để nguyên nếu bạn chưa chắc chắn.

Mở Claude

Tên thương hiệu hoặc dự án

ví dụ AURION X

Sản phẩm hoặc lĩnh vực

Chọn một tùy chọn

Nguồn hình ảnh chính

Chọn một tùy chọn

Phong cách hình ảnh

Chọn một tùy chọn

Lời kêu gọi hành động chính

Chọn một tùy chọn

Mức độ tạo hình ảnh

Chọn một tùy chọn

Cấu trúc trang

Chọn một tùy chọn

Mức độ hoạt ảnh

Chọn một tùy chọn

Phong cách viết

Chọn một tùy chọn

Mô hình tạo ảnh (tùy chọn)

Chọn một tùy chọn

Mô hình tạo video (tùy chọn)

Chọn một tùy chọn

Liên kết tham khảo (tùy chọn)

Tùy chọn — chỉ dùng làm cảm hứng hình ảnh, không bao giờ sao chép

Gửi prompt và dựng website

Nếu bạn đã chọn một ảnh tham chiếu, hãy đính kèm nó trước khi gửi prompt.

Mở bản xem trước cục bộ đầu tiên

Xem lại website và thực hiện các thay đổi cần thiết

Kiểm tra bố cục trên máy tính và điện thoại, sau đó mô tả bất kỳ thay đổi nào hoặc đính kèm ảnh chụp màn hình nếu cần.

Chuẩn bị website để xuất bản

Chuẩn bị website để deploy

Tạo phiên bản cuối sẵn sàng triển khai mà không thay đổi thiết kế đã duyệt.

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.

Mở Claude

Mở Hostinger

Mở Hostinger

Mở trang hosting của Hostinger để xem các gói hiện có và những gì mỗi gói bao gồm.

USED IN TUTORIAL

https://www.hostg.xyz/SHJjW

Chọn gói hosting và tạo tài khoản của bạn

Thiết lập việc chuyển website

Hostinger Migrate an Existing Site Upload Backup Files

Chọn, kết nối hoặc nhận tên miền bạn muốn sử dụng.

Tải lên tệp ZIP của website

Project folder deploy

Mở thư mục deploy, chọn toàn bộ nội dung bên trong, nén các tệp đã chọn thành một tệp ZIP rồi tải tệp ZIP đó lên.

Mở website đang chạy

Mở tên miền đã chọn và xác nhận website, hình ảnh, hiệu ứng động và bố cục hoạt động đúng trên môi trường thực tế.

Dùng website đã hoàn thiện làm bản demo portfolio, tài liệu chào khách hàng hoặc gói trang đích cao cấp.

Các cách đóng gói dịch vụ

Bản demo portfolio

Hiển thị website đang chạy như bằng chứng cho những trải nghiệm điện ảnh bạn có thể tạo bằng AI.

Trang đích cao cấp

Cung cấp trang ra mắt mang tính điện ảnh, website chiến dịch hoặc trải nghiệm thương hiệu bằng hình ảnh.

Thiết kế lại website

Cho doanh nghiệp thấy website hiện tại của họ có thể trông hiện đại và cao cấp hơn thế nào.

Bản demo để chào khách hàng

Chia sẻ website đang chạy khi bạn chào bán dịch vụ làm website bằng AI.

Cách này hiệu quả nhất với những ngách mà hình ảnh mạnh mẽ có thể làm tăng giá trị cảm nhận.