Bangun Situs Web Sinematik Berbasis Scroll dengan AI

Unduh dan instal Claude Desktop

Unduh Claude Desktop

https://claude.com/download

Buat folder proyek kosong

Buka folder di Claude Desktop

Claude Desktop Code Local Select the project folder Open Trust Workspace

Instal skill Scroll World

Scroll World

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

Hubungkan Higgsfield ke Claude

Buka halaman Higgsfield MCP

https://higgsfield.ai/mcp

Salin URL konektor.

Claude Desktop Customize Connectors Add custom connector

Beri nama “Higgsfield”, tempel URL-nya, lalu hubungkan dan masuk.

Buka Hostinger dan siapkan akun Anda

Buka Hostinger

Siapkan hosting untuk deployment langsung dari Claude.

https://www.hostg.xyz/SHJoR

Hubungkan Hostinger ke Claude Code

Tempel perintah ini ke Terminal lalu tekan Enter.

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

Selesaikan proses masuk di browser

Kembali ke Claude Code dan gunakan koneksi Hostinger. Masuk dan setujui akses saat browser terbuka.

Sesuaikan proyek situs web

Bangun Situs Web Sinematik Berbasis Scroll

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.

Nama Proyek atau Merek

Nama proyek atau merek

Niche

Kategori bisnis, produk, atau portofolio

Tujuan Utama Situs Web

Aksi utama yang dilakukan pengunjung

Konteks Proyek

Lokasi atau latar belakang yang penting

Sumber Visual Utama

Pilih opsi

Arah Visual

Arah seni dan desain yang diinginkan

Jumlah Adegan Utama

Jumlah adegan visual utama

Alur Adegan

Pilih opsi

Strategi Visual untuk Mobile

Pilih opsi

Call to Action Utama

Teks ajakan bertindak di bagian akhir

Instruksi Tambahan

Opsional — batasan gaya atau konten yang diperlukan

Tambahkan aset referensi jika diperlukan

Jika Anda memilih media sendiri, tambahkan di sini sebelum mengirim prompt.

Project folder reference-assets

Tambahkan gambar, video, logo, render, dan dokumen merek.

Kirim prompt yang dihasilkan ke Claude Code

Tinjau dan setujui rencana produksi

Periksa urutan adegan, konsistensi visual, alur kamera, strategi mobile, dan perkiraan biaya generasi, lalu setujui rencananya.

Buka pratinjau lokal

Buka alamat pratinjau yang diberikan Claude saat proses build selesai.

Periksa transisi antaradegan

Perhatikan kilatan, lompatan, perubahan arah mendadak, frame yang tidak konsisten, atau potongan yang terlihat.

Tinjau ritme dan kontennya

Periksa kecepatan scroll, penempatan teks, bagian konten, tombol, dan ajakan bertindak di akhir.

Uji tata letak mobile

Pastikan visual, teks, dan tombol tampil dengan benar di layar sempit.

Minta koreksi akhir

Minta Koreksi yang Ditargetkan

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.

Deploy situs web ke Hostinger

Deploy Situs Web ke 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.

Tinjau situs web versi live

Periksa urutan sinematik, konten, tombol, ajakan bertindak, dan tata letak mobile.

Hubungkan domain final

Setelah situs web disetujui, minta Claude menghubungkan domain pilihan Anda melalui Hostinger.

Publikasikan pembaruan berikutnya

Jelaskan perubahannya, lalu minta Claude membangun ulang dan mempublikasikan kembali situs web.