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

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

Cài đặt skill Scroll World

Scroll World

/plugin marketplace add oso95/scroll-world /plugin install scroll-world@scroll-world

Kết nối Higgsfield với Claude

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.

Mở Hostinger và chuẩn bị tài khoản của bạn

Mở Hostinger

Thiết lập hosting để triển khai trực tiếp từ Claude.

https://www.hostg.xyz/SHJoR

Kết nối Hostinger với Claude Code

Dán lệnh này vào Terminal rồi nhấn Enter.

claude mcp add hostinger -- npx -y hostinger-api-mcp

Hoàn tất đăng nhập trên trình duyệt

Quay lại Claude Code và dùng kết nối Hostinger. Đăng nhập và chấp thuận quyền truy cập khi trình duyệt mở ra.

Tùy chỉnh dự án website

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

Use the installed Scroll World skill to plan and build a cinematic scroll-controlled website for {{PROJECT_NAME}}. Use the connected Higgsfield MCP for visual generation. Before beginning the production workflow, inspect the installed Scroll World skill and handle only the local dependencies that are genuinely required for this project. Do not ask the user to install optional tools or duplicate Higgsfield integrations. If a local CLI is absolutely required for a specific Scroll World operation that cannot be completed through the connected MCP, explain the reason before installing or using it. PROJECT - Niche: {{NICHE}} - Main visitor goal: {{PRIMARY_GOAL}} - Context or location: {{PROJECT_CONTEXT}} - Visual direction: {{VISUAL_DIRECTION}} - Number of main scenes: {{SCENE_COUNT}} - Scene journey: {{SCENE_JOURNEY}} - Main call to action: {{MAIN_CTA}} - Additional instructions: {{ADDITIONAL_INSTRUCTIONS}} VISUAL SOURCE {{VISUAL_SOURCE}} MOBILE {{MOBILE_STRATEGY}} Everything you decide — the scene ideas, the content sections, the wording, and the call to action — must fit this niche and move the visitor toward that one goal. Keep the real identity of any property, product, architecture, or brand exactly as it appears in the material I give you, and never present an invented room, feature, specification, or business claim as factual. FIRST, PRODUCE A PRODUCTION PLAN — do not generate any paid asset yet. Cover: 1. The art direction, and how you will hold visual consistency across every scene. 2. The ordered scene journey and the camera movement for each scene. 3. The transition strategy between neighbouring scenes. 4. The desktop assets, and the mobile assets if a dedicated sequence is required. 5. The estimated Higgsfield generation usage and cost. 6. The website content and the call to action. Stop there and wait for my explicit approval. AFTER I APPROVE Generate the scene images and camera clips through the authenticated Higgsfield account connected to Claude, and save or download every generated asset into the project as the website workflow requires. Extract or create the boundary frames and the connectors between neighbouring scenes, then integrate the finished sequence into the Scroll World website engine. Build the website around it with content this niche actually needs, working navigation and buttons, and a final call to action that matches the goal above. Then run the site locally and give me the preview address.

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

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

Ngách

Danh mục doanh nghiệp, sản phẩm hoặc portfolio

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

Hành động chính của khách truy cập

Bối cảnh dự án

Địa điểm hoặc bối cảnh quan trọng

Nguồn hình ảnh chính

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

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

Định hướng nghệ thuật và thiết kế mong muốn

Số lượng cảnh chính

Số lượng cảnh hình ảnh chính

Hành trình các cảnh

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

Chiến lược hình ảnh trên điện thoại

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

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

Nội dung lời kêu gọi hành động cuối cùng

Hướng dẫn bổ sung

Không bắt buộc — mọi ràng buộc về phong cách hoặc nội dung

Thêm tài nguyên tham khảo nếu cần

Nếu bạn chọn dùng media của riêng mình, hãy thêm vào đây trước khi gửi prompt.

Project folder reference-assets

Thêm hình ảnh, video, logo, bản render và tài liệu thương hiệu.

Gửi prompt đã tạo tới Claude Code

Xem lại và phê duyệt kế hoạch sản xuất

Kiểm tra thứ tự cảnh, tính nhất quán hình ảnh, chuyển động máy quay, chiến lược cho điện thoại và chi phí tạo ước tính, sau đó phê duyệt kế hoạch.

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

Mở địa chỉ xem trước do Claude cung cấp khi quá trình dựng hoàn tất.

Kiểm tra các chuyển cảnh

Tìm các đoạn nhấp nháy, giật, đổi hướng đột ngột, khung hình không nhất quán hoặc vết cắt lộ rõ.

Xem lại nhịp độ và nội dung

Kiểm tra tốc độ cuộn, vị trí văn bản, các mục nội dung, nút bấm và lời kêu gọi hành động cuối cùng.

Kiểm tra bố cục trên điện thoại

Xác nhận hình ảnh, văn bản và nút bấm hiển thị đúng trên màn hình hẹp.

Yêu cầu chỉnh sửa cuối cùng

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

Apply only these corrections: [YOUR_CORRECTIONS] Change nothing else. Keep every unrelated scene, approved visual asset, transition, and content section exactly as it is, including anything I did not mention, and keep the responsive behaviour unchanged. Then run the website locally again and tell me precisely what changed.

Triển khai website lên Hostinger

Triển khai website lên Hostinger

Deploy this project to my connected Hostinger account. Preserve the approved cinematic experience exactly as it is, and do not regenerate any approved visual asset. First confirm that every required asset exists and that the desktop and mobile asset references resolve correctly. Then optimize the site for production, run the production build, and inspect and fix any build error that would block deployment. Choose the deployment method that fits this project through the connected Hostinger account, and publish to a temporary live URL first when that is supported. Report the build result, the deployment result, and the live URL.

Xem lại website đang chạy

Kiểm tra chuỗi cảnh điện ảnh, nội dung, nút bấm, lời kêu gọi hành động và bố cục trên điện thoại.

Kết nối tên miền chính thức

Sau khi website được duyệt, hãy yêu cầu Claude kết nối tên miền bạn đã chọn thông qua Hostinger.

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

Mô tả thay đổi, sau đó yêu cầu Claude dựng lại và xuất bản lại website.