Crée un site web cinématique piloté au scroll avec l'IA

Télécharge et installe Claude Desktop

Télécharger Claude Desktop

https://claude.com/download

Crée un dossier de projet vide

Ouvre le dossier dans Claude Desktop

Claude Desktop Code Local Select the project folder Open Trust Workspace

Installe la skill Scroll World

Scroll World

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

Connecte Higgsfield à Claude

Ouvrir la page Higgsfield MCP

https://higgsfield.ai/mcp

Copie l'URL du connecteur.

Claude Desktop Customize Connectors Add custom connector

Nomme-le « Higgsfield », colle l'URL, puis connecte-toi et authentifie-toi.

Ouvre Hostinger et prépare ton compte

Ouvrir Hostinger

Configure l'hébergement pour un déploiement direct depuis Claude.

https://www.hostg.xyz/SHJoR

Connecte Hostinger à Claude Code

Colle cette commande dans le Terminal et appuie sur Entrée.

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

Termine la connexion dans le navigateur

Retourne dans Claude Code et utilise la connexion Hostinger. Connecte-toi et autorise l'accès à l'ouverture du navigateur.

Personnalise le projet de site web

Construis le site web cinématique au 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.

Nom du projet ou de la marque

Le nom du projet ou de la marque

Niche

La catégorie de l'entreprise, du produit ou du portfolio

Objectif principal du site web

L'action principale du visiteur

Contexte du projet

Le lieu ou l'arrière-plan important

Source visuelle principale

Choisis une option

Direction visuelle

La direction artistique et graphique souhaitée

Nombre de scènes principales

Le nombre de scènes visuelles principales

Parcours des scènes

Choisis une option

Stratégie visuelle mobile

Choisis une option

Appel à l'action principal

Le texte final de l'appel à l'action

Instructions supplémentaires

Facultatif — toute contrainte de style ou de contenu à respecter

Ajoute des ressources de référence si nécessaire

Si tu as choisi d'utiliser tes propres médias, ajoute-les ici avant d'envoyer le prompt.

Project folder reference-assets

Ajoute des images, vidéos, logos, rendus et documents de marque.

Envoie le prompt généré à Claude Code

Vérifie et valide le plan de production

Vérifie l'ordre des scènes, la cohérence visuelle, les mouvements de caméra, la stratégie mobile et le coût de génération estimé, puis valide le plan.

Ouvre l'aperçu local

Ouvre l'adresse d'aperçu fournie par Claude une fois la génération terminée.

Inspecte les transitions entre les scènes

Repère les flashs, les sauts, les changements brusques de direction, les images incohérentes ou les coupures visibles.

Vérifie le rythme et le contenu

Vérifie la vitesse de défilement, le placement du texte, les sections de contenu, les boutons et l'appel à l'action final.

Teste la mise en page mobile

Vérifie que les visuels, le texte et les boutons s'affichent correctement sur un écran étroit.

Demande les corrections finales

Demander des corrections ciblées

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.

Déploie le site web sur Hostinger

Déployer le site web sur 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.

Vérifie le site web en ligne

Vérifie la séquence cinématique, le contenu, les boutons, l'appel à l'action et la mise en page mobile.

Connecte le domaine final

Une fois le site validé, demande à Claude de connecter le domaine choisi via Hostinger.

Publie les mises à jour futures

Décris la modification, puis demande à Claude de reconstruire et republier le site web.