Crea un sito web cinematografico controllato dallo scroll con l'IA

Scarica e installa Claude Desktop

Scarica Claude Desktop

https://claude.com/download

Crea una cartella di progetto vuota

Apri la cartella in Claude Desktop

Claude Desktop Code Local Select the project folder Open Trust Workspace

Installa la skill Scroll World

Scroll World

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

Collega Higgsfield a Claude

Apri la pagina di Higgsfield MCP

https://higgsfield.ai/mcp

Copia l'URL del connettore.

Claude Desktop Customize Connectors Add custom connector

Chiamalo “Higgsfield”, incolla l'URL, poi collega e accedi.

Apri Hostinger e prepara il tuo account

Apri Hostinger

Configura l'hosting per il deploy diretto da Claude.

https://www.hostg.xyz/SHJoR

Collega Hostinger a Claude Code

Incolla questo comando nel Terminal e premi Invio.

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

Completa l'accesso nel browser

Torna in Claude Code e usa la connessione a Hostinger. Accedi e approva l'accesso quando si apre il browser.

Personalizza il progetto del sito web

Crea il sito web cinematografico con 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.

Nome del progetto o del brand

Il nome del progetto o del brand

Nicchia

La categoria dell'attività, del prodotto o del portfolio

Obiettivo principale del sito web

L'azione principale del visitatore

Contesto del progetto

Il luogo o lo sfondo importante

Fonte visiva principale

Scegli un'opzione

Direzione visiva

La direzione artistica e di design desiderata

Numero di scene principali

Il numero di scene visive principali

Percorso delle scene

Scegli un'opzione

Strategia visiva per mobile

Scegli un'opzione

Call to action principale

Il testo finale della call to action

Istruzioni aggiuntive

Facoltativo — eventuali vincoli di stile o contenuto

Aggiungi materiali di riferimento se necessario

Se hai scelto di usare i tuoi file, aggiungili qui prima di inviare il prompt.

Project folder reference-assets

Aggiungi immagini, video, logo, render e documenti del brand.

Invia il prompt generato a Claude Code

Rivedi e approva il piano di produzione

Controlla l'ordine delle scene, la coerenza visiva, il movimento di camera, la strategia mobile e il costo di generazione stimato, poi approva il piano.

Apri l'anteprima locale

Apri l'indirizzo di anteprima fornito da Claude quando la build è completata.

Esamina le transizioni tra le scene

Cerca lampi, salti, cambi di direzione improvvisi, fotogrammi incoerenti o stacchi visibili.

Rivedi il ritmo e i contenuti

Controlla la velocità dello scroll, la posizione dei testi, le sezioni di contenuto, i pulsanti e la call to action finale.

Testa il layout mobile

Conferma che immagini, testo e pulsanti vengano visualizzati correttamente su uno schermo stretto.

Richiedi le correzioni finali

Richiedi correzioni mirate

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.

Distribuisci il sito web su Hostinger

Distribuisci il sito web su 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.

Rivedi il sito web online

Controlla la sequenza cinematografica, i contenuti, i pulsanti, la call to action e il layout mobile.

Collega il dominio definitivo

Una volta approvato il sito, chiedi a Claude di collegare il dominio scelto tramite Hostinger.

Pubblica gli aggiornamenti futuri

Descrivi la modifica, poi chiedi a Claude di ricostruire e ripubblicare il sito web.