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

Hubungkan Higgsfield ke Claude

Dengan ini Claude bisa membuat gambar dan video untuk situs web Anda.

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.

Sesuaikan situs web Anda

Pilih beberapa opsi. Yang terpenting adalah Konsep Scroll Khas Anda — apa yang terjadi saat pengunjung melakukan scroll. Biarkan pada “Let Claude Recommend” untuk mendapatkan tiga ide pilihan.

Bangun Situs Web Sinematik Berbasis Scroll

Pilih beberapa opsi, lalu salin satu prompt. Claude mengusulkan konsep, menunjukkan rencana singkat, membuat visual, dan membangun situs web Anda.

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.

Biarkan seperti apa adanya jika Anda ragu.

Nama Proyek atau Merek

mis. Ember Coffee

Niche

Pilih niche

Tujuan Utama Situs Web

Pilih tujuan

Sumber Visual Utama

Pilih opsi

Arah Visual

Pilih opsi

Konsep Scroll Khas

Pilih opsi

Inspirasi (Opsional)

Tautan situs web atau catatan singkat

Call to Action Utama

Pilih opsi

Pengalaman Seluler

Pilih opsi

Instruksi Tambahan

Opsional — apa pun yang harus disertakan atau dihindari Claude

Tambahkan file Anda (opsional)

Hanya jika Anda memilih media sendiri atau punya gambar yang Anda sukai sebagai inspirasi.

Project folder reference-assets

Foto, video, logo, dan dokumen merek asli Anda. Claude memperlakukannya sebagai kebenaran tentang bisnis Anda.

Project folder inspiration

Tangkapan layar atau gambar yang Anda sukai, hanya untuk gaya. Claude tidak pernah menyalinnya.

Kirim prompt ke Claude

Tempel ke Claude di folder proyek Anda, lalu kirim.

Pilih konsep dan setujui rencananya

Pilih salah satu konsep dari Claude (atau pertahankan konsep Anda), lalu baca rencana singkatnya dan setujui. Tidak ada yang berbayar dibuat sebelum Anda menyetujuinya.

Tinjau visual sinematik

Claude membuat visual utama dengan Higgsfield dan menunjukkannya kepada Anda. Balas “Use It” untuk melanjutkan, atau “Change It” dan jelaskan apa yang harus berbeda.

Biarkan Claude membangun situs web

Claude membangun situs web lengkap di sekitar visual yang disetujui. Ini bisa memakan waktu — Anda tidak perlu melakukan apa pun.

Buka pratinjau lokal

Buka alamat pratinjau yang diberikan Claude saat situs web sudah siap.

Periksa efek scroll

Scroll perlahan dari atas ke bawah. Visual harus terlihat tajam dan bergerak mulus, tanpa kilatan, lompatan, potongan kasar, atau perubahan aneh.

Periksa tempo dan konten

Pastikan efeknya tidak terlalu cepat atau terlalu lambat, teksnya mudah dibaca, kontennya sesuai dengan bisnis Anda, dan semua tombol serta ajakan bertindak terakhir berfungsi.

Periksa desktop dan ponsel

Lihat situs web dalam lebar penuh di komputer, lalu di ponsel. Visual, teks, dan tombol harus pas dan tetap mudah digunakan di keduanya.

Minta koreksi

Minta Koreksi yang Ditargetkan

Klik Sesuaikan prompt, jelaskan apa yang perlu diperbaiki, lalu salin prompt-nya.

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.

Yang Perlu Diperbaiki

mis. Perlambat efek scroll dan perbesar judul di ponsel

Dapatkan hosting Hostinger

Situs web Anda sudah siap. Sekarang situs ini perlu rumah online.

Dapatkan Hosting Hostinger

Paket rekomendasi: Unlimited (sebelumnya Business)

USED IN TUTORIAL

Sudah punya hosting Hostinger? Lanjutkan di bawah.

Hubungkan Hostinger ke Claude

Sudah menghubungkan Hostinger ke Claude? Lanjut ke tugas berikutnya.

Tetap di Claude Desktop, di sesi Code untuk proyek ini. Klik + di samping kotak pesan, lalu buka plugin:

+ Plugins Add plugin

Cari Hostinger di daftar plugin, lalu instal. Saat Claude pertama kali menggunakan Hostinger, masuk ke akun Hostinger Anda di jendela browser yang terbuka dan izinkan aksesnya.

Tidak perlu token API atau file pengaturan — Anda cukup masuk.

Lakukan deployment situs web

Kirim prompt ini ke Claude di sesi Code yang sama. Claude menanyakan situs web Hostinger mana yang dipakai, menyiapkan situs web Anda, lalu menayangkannya.

Deploy Situs Web ke Hostinger

Publikasikan situs web yang sudah disetujui ke Hostinger dan dapatkan URL live-nya.

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.

Memublikasikan akan mengganti semua isi situs web Hostinger yang Anda pilih. Gunakan situs web baru, atau situs yang memang ingin Anda ganti.

Tinjau situs web versi live

Buka URL live dan periksa efek scroll sinematik, gambar dan video, konten, setiap tombol, dan ajakan bertindak utama — di komputer dan di ponsel.

Hubungkan domain Anda

Opsional. Sudah punya domain? Claude bisa menghubungkannya ke situs web untuk Anda — tambahkan di sini lalu kirim prompt-nya.

Hubungkan Domain Saya

Klik Sesuaikan prompt, tambahkan domain Anda, lalu salin prompt-nya.

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.

Domain Anda

mis. mybrand.com

Publikasikan pembaruan berikutnya

Jelaskan perubahan Anda lalu kirim prompt ini. Claude membuat perubahannya dan menunjukkan pratinjau lokal terlebih dahulu. Jika sudah sesuai, balas “Publish” — baru setelah itu Claude memublikasikannya ke situs web Hostinger Anda.

Publikasikan Pembaruan

Klik Sesuaikan prompt, jelaskan perubahan Anda, lalu salin prompt-nya.

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.

Perubahan Anda

mis. Ubah judul menjadi “Dipanggang Segar Setiap Pagi”