Tạo website điện ảnh điều khiển bằng cuộn trang với AI

Tải 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 Local Select the project folder Open Trust Workspace

Kết nối Higgsfield với Claude

Nhờ đó Claude có thể tạo hình ảnh và video cho website của bạn.

Mở trang Higgsfield MCP

https://higgsfield.ai/mcp

Sao chép URL của connector.

Claude Desktop Customize Connectors Add custom connector

Đặt tên là “Higgsfield”, dán URL vào, sau đó kết nối và đăng nhập.

Tùy chỉnh website của bạn

Chọn vài tùy chọn. Quan trọng nhất là Ý tưởng cuộn đặc trưng — điều xảy ra khi khách truy cập cuộn trang. Để ở “Let Claude Recommend” để nhận ba ý tưởng để chọn.

Dựng website điện ảnh điều khiển bằng cuộn trang

Chọn vài tùy chọn, rồi sao chép một prompt duy nhất. Claude đề xuất ý tưởng, trình bày kế hoạch ngắn, tạo hình ảnh và xây dựng website của bạn.

Build a premium cinematic scroll website in this project folder for {{PROJECT_NAME}}. Use the connected Higgsfield MCP for all image and video generation. Do not use Higgsfield's website builder or hosting — build the website here, in this folder. Do not ask me to install creative tools. If you need an ordinary local tool while building, set it up yourself, and only when it is genuinely necessary. PROJECT - Niche: {{NICHE}} - Main website goal: {{PRIMARY_GOAL}} - Main call to action: {{MAIN_CTA}} - Additional instructions: {{ADDITIONAL_INSTRUCTIONS}} CREATIVE DIRECTION - Visual direction: {{VISUAL_DIRECTION}} - Inspiration: {{INSPIRATION}} VISUAL SOURCE {{VISUAL_SOURCE}} MOBILE {{MOBILE_EXPERIENCE}} GROUND RULES - Treat any inspiration I give you — above, or images in an "inspiration" folder in this project — as direction only: mood, pacing, composition and feel. Never copy its text, images, branding, logos, proprietary assets or overall identity. - If this is a real business, property, product, place or service, keep its real identity exactly as it appears in my material. Never invent features, specifications, rooms, facilities, business claims or product capabilities. My own media is the source of truth. - Keep everything focused on this niche and on moving visitors toward the main goal. WORK IN THIS ORDER 1. SIGNATURE SCROLL CONCEPT — what happens as the visitor scrolls: one memorable cinematic idea, not a generic fade, zoom or parallax effect. {{SCROLL_CONCEPT}} 2. PLAN — once the concept is settled, and before any paid Higgsfield generation Show me a short, plain-language plan: - The Signature Scroll Concept - The visual direction - The main cinematic visual and what happens in it as I scroll - The website sections around it - The Higgsfield images and video you will create, and how you will use my own media, if any - The expected Higgsfield usage, and my current balance, if you can check them Keep it short and non-technical. Then stop and wait for my approval. 3. MAIN CINEMATIC VISUAL After I approve, use Higgsfield to create ONE strong main cinematic sequence for the scroll experience — not a series of separate videos — plus still images only where they clearly improve the website. Save everything in this project. Then show me the main visual and ask me: Use It or Change It? If I ask for a change, regenerate only what needs changing and keep everything I already approved. Do not build the rest of the website until I choose Use It. 4. BUILD THE WEBSITE Then build the complete website around the approved visual: - A strong homepage structure for this niche — a real premium website, not just a video demo - The cinematic visual as the centrepiece, moving smoothly with scroll progress - Useful sections with finished, specific copy — no placeholder text - Working navigation and buttons, ending on the main call to action - Fully responsive, with a great experience on phones - Fast loading Choose the implementation yourself and handle the technical details without asking me technical questions. Then run the website locally and give me the preview address.

Cứ để nguyên nếu bạn không chắc.

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

ví dụ: Ember Coffee

Ngách

Chọn ngách

Mục tiêu chính của website

Chọn mục tiêu

Nguồn hình ảnh chính

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

Định hướng hình ảnh

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

Ý tưởng cuộn đặc trưng

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

Nguồn cảm hứng (không bắt buộc)

Một đường dẫn website hoặc một ghi chú ngắn

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

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

Trải nghiệm trên điện thoại

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

Hướng dẫn bổ sung

Không bắt buộc — bất cứ điều gì Claude phải thêm vào hoặc tránh

Thêm tệp của bạn (không bắt buộc)

Chỉ khi bạn chọn dùng media của riêng mình, hoặc có những hình ảnh bạn thích để lấy cảm hứng.

Project folder reference-assets

Ảnh, video, logo và tài liệu thương hiệu thật của bạn. Claude coi chúng là sự thật về doanh nghiệp của bạn.

Project folder inspiration

Ảnh chụp màn hình hoặc hình ảnh bạn thích, chỉ để tham khảo phong cách. Claude không bao giờ sao chép chúng.

Gửi prompt cho Claude

Dán vào Claude trong thư mục dự án của bạn rồi gửi.

Chọn ý tưởng và phê duyệt kế hoạch

Chọn một trong các ý tưởng của Claude (hoặc giữ ý tưởng của bạn), rồi đọc kế hoạch ngắn và phê duyệt. Không có gì mất phí được tạo trước khi bạn phê duyệt.

Xem lại hình ảnh điện ảnh

Claude tạo hình ảnh chính bằng Higgsfield và cho bạn xem. Trả lời “Use It” để tiếp tục, hoặc “Change It” và nói điều cần thay đổi.

Để Claude xây dựng website

Claude xây dựng toàn bộ website xoay quanh hình ảnh đã được duyệt. Việc này có thể mất một lúc — bạn không cần làm gì cả.

Mở bản xem trước cục bộ

Mở địa chỉ xem trước mà Claude đưa cho bạn khi website đã sẵn sàng.

Kiểm tra hiệu ứng cuộn

Cuộn chậm từ trên xuống dưới. Hình ảnh phải sắc nét và chuyển động mượt mà, không nhấp nháy, giật, cắt cảnh đột ngột hay thay đổi lạ.

Kiểm tra nhịp độ và nội dung

Đảm bảo hiệu ứng không quá nhanh hay quá chậm, chữ dễ đọc, nội dung phù hợp với doanh nghiệp của bạn, và mọi nút cùng lời kêu gọi hành động cuối cùng đều hoạt động.

Kiểm tra trên máy tính và điện thoại

Xem website toàn màn hình trên máy tính, rồi trên điện thoại. Hình ảnh, chữ và các nút phải vừa vặn và dễ dùng trên cả hai.

Yêu cầu chỉnh sửa

Yêu cầu chỉnh sửa có mục tiêu

Nhấn Tùy chỉnh prompt, mô tả điều cần sửa, rồi sao chép prompt.

Apply only these corrections: {{CORRECTIONS}} Keep everything else exactly as I approved it. Do not regenerate approved Higgsfield images or video unless a correction genuinely requires it. If a correction needs a new paid Higgsfield generation, first tell me what needs to be regenerated and wait for my approval. Then run the website locally again and tell me exactly what changed.

Điều cần sửa

ví dụ: Làm hiệu ứng cuộn chậm lại và phóng to tiêu đề trên điện thoại

Đăng ký hosting Hostinger

Website của bạn đã sẵn sàng. Giờ nó cần một ngôi nhà trên mạng.

Đăng ký hosting Hostinger

Gói đề xuất: Unlimited (trước đây là Business)

USED IN TUTORIAL

Đã có hosting Hostinger? Hãy tiếp tục bên dưới.

Kết nối Hostinger với Claude

Đã kết nối Hostinger với Claude rồi? Hãy chuyển sang nhiệm vụ tiếp theo.

Ở lại trong Claude Desktop, trong phiên Code của dự án này. Nhấp vào + bên cạnh ô tin nhắn, rồi mở mục plugin:

+ Plugins Add plugin

Tìm Hostinger trong danh sách plugin và cài đặt. Lần đầu Claude dùng Hostinger, hãy đăng nhập tài khoản Hostinger trong cửa sổ trình duyệt vừa mở và cho phép truy cập.

Không cần API token hay tệp cấu hình — bạn chỉ cần đăng nhập.

Triển khai website

Gửi prompt này cho Claude trong cùng phiên Code. Claude sẽ hỏi bạn dùng website Hostinger nào, chuẩn bị website của bạn rồi đưa nó lên mạng.

Triển khai website lên Hostinger

Xuất bản website đã duyệt lên Hostinger và nhận URL trực tiếp.

Publish this approved cinematic website to my Hostinger account with the Hostinger tools. BEFORE PUBLISHING - Use the Hostinger tools from the Hostinger plugin. If they are not available, or I am not signed in to Hostinger, stop and tell me how to connect Hostinger. Never ask for my password, and never write a token or key into any file. - Inspect this project first: how it builds, and which folder holds the finished website. - If .hostinger/site.json exists in this project, publish to the website it names. - Otherwise, list my Hostinger websites and ask me which one to use, or offer to set up a new website on a free temporary Hostinger domain. Never guess. Tell me that publishing replaces everything on that website, and only continue once I have confirmed it. BUILD AND PACKAGE - Keep the website and all of its visuals exactly as I approved them. Do not regenerate any Higgsfield images or video, and do not redesign or rewrite anything. - Run the production build. If it fails, fix only the build error — never publish a website that does not build. - Check that the finished website includes every image, video and other media file it uses, and that none of them points to a file elsewhere on my computer or to a temporary link. - Package the CONTENTS of the finished website folder as one archive, with index.html at the top level — never the project source, node_modules, or any .env file. PUBLISH AND CHECK - This website runs in the browser, so deploy the archive to the confirmed website as a static website. If the project genuinely needs a server to run, stop and tell me before publishing. - Open the live address and check that it shows this cinematic website — its real content, main visual and scroll effect — not a placeholder page. - If the deployment fails or the live website is wrong, check the deployment details with the Hostinger tools, fix the cause in this project, build again, and ask me before publishing again. - Save the website's domain in .hostinger/site.json, so later updates go to the same website. Save only the domain — never a token or a key. When it is live, give me the live address and tell me about any change you had to make for deployment.

Việc xuất bản sẽ thay thế toàn bộ nội dung trên website Hostinger bạn chọn. Hãy dùng một website mới, hoặc website bạn muốn thay thế.

Xem lại website đang chạy

Mở URL trực tiếp và kiểm tra hiệu ứng cuộn điện ảnh, hình ảnh và video, nội dung, từng nút và lời kêu gọi hành động chính — trên máy tính và trên điện thoại.

Kết nối tên miền của bạn

Không bắt buộc. Đã có tên miền? Claude có thể kết nối nó với website giúp bạn — hãy thêm vào đây rồi gửi prompt.

Kết nối tên miền của tôi

Nhấn Tùy chỉnh prompt, thêm tên miền của bạn, rồi sao chép prompt.

Connect my domain {{DOMAIN}} to the website you just published, using the Hostinger tools. - The website is the one saved in .hostinger/site.json. If that file is missing, or you are not sure which domain I mean, ask me — never guess which website or domain to change. - First check that the domain is in my Hostinger account. If it is not, or the connection needs something only I can do, tell me exactly what to do and wait. - Change only what is needed to point the domain at this website. Leave the website itself unchanged, and do not touch any other domain settings, such as email records. - Only give me manual DNS steps if the Hostinger tools genuinely cannot make the change. - If the website's main domain changes, update .hostinger/site.json so later updates still go to this website. When finished, tell me whether the domain is connected, which address to open, and anything I still need to do, such as waiting for the change to take effect everywhere.

Tên miền của bạn

ví dụ: mybrand.com

Xuất bản các cập nhật sau này

Mô tả thay đổi của bạn và gửi prompt này. Claude thực hiện thay đổi và cho bạn xem bản xem trước cục bộ trước. Khi thấy ổn, hãy trả lời “Publish” — chỉ khi đó Claude mới xuất bản nó lên website Hostinger của bạn.

Xuất bản bản cập nhật

Nhấn Tùy chỉnh prompt, mô tả thay đổi của bạn, rồi sao chép prompt.

Update my website in three stages. Stop after stage 2 and wait for my approval. 1. CHANGE Make only this change: {{CHANGE}} Keep everything else exactly as it is, especially the approved cinematic visuals. Do not regenerate any Higgsfield images or video unless this change genuinely requires it. If it needs a new paid Higgsfield generation, tell me what you would regenerate and wait for my approval first. 2. LOCAL REVIEW - Run the production build and fix any error the change caused. - Run the website locally, give me the preview address, and tell me in one or two lines what you changed. - Then stop. Do not publish anything until I reply Publish. If I ask for adjustments instead, make them and show me the preview again. 3. APPROVED PUBLISH — only after I reply Publish - Publish to the same Hostinger website as before: the domain saved in .hostinger/site.json. If it is missing, ask me which website to use — never guess. - Publish exactly what I approved. Do not make any other change first. - Run the production build again. If it fails, stop and tell me why instead of publishing — never fix it on the way. - Check that the finished website includes every image, video and other media file it uses, then package the CONTENTS of the finished website folder as one archive, with index.html at the top level — never the project source, node_modules, or any .env file. - Deploy it to that website as a static website with the Hostinger tools. - Open the live address, check that it shows the approved change, and give me the live URL.

Thay đổi của bạn

ví dụ: Đổi tiêu đề thành “Rang mới mỗi sáng”