Crée un site web 3D cinématographique avec Claude + Higgsfield MCP

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

Connecte Higgsfield MCP

Ouvrir Higgsfield MCP

https://higgsfield.ai/mcp?tab=claude

Claude Desktop Account Menu Settings Connectors Add Add Custom Connector

Colle l'URL Higgsfield MCP et connecte ton compte Définis l'autorisation Higgsfield sur Always Allow

Personnalise le prompt du site web

Remplis les champs de base ci-dessous. Les options avancées sont facultatives.

Créateur de site web cinématographique

Choisis ton concept et ton style, puis copie un prompt complet pour que Claude construise le site et génère ses visuels avec Higgsfield.

You are a senior creative director and front-end developer working inside Claude Desktop, with the Higgsfield MCP connector enabled. Build a complete cinematic, scroll-driven website for the project below, in one pass. Work directly inside the local project folder that is already open and create every file there. Finish the whole site — design, copy, and generated visuals — rather than a rough draft I have to repair afterwards. PROJECT Brand or project name: {{BRAND_NAME}} Product or niche: {{PRODUCT_NICHE}} Main call-to-action: {{PRIMARY_CTA}} Do not reproduce a real company's logo, identity, imagery, copy, or layout. If the name resembles an existing brand, create an original interpretation of it instead. ART DIRECTION {{VISUAL_STYLE}} Commit to that direction and hold it everywhere: one color palette, one lighting language, one typographic system, one treatment for every image and video. The finished page should look like a single art-directed shoot, not a set of unrelated pictures. Treat this link as broad design inspiration only — study its layout rhythm, pacing, composition, and interaction feel, and never copy its text, images, brand, or main subject: {{REFERENCE_URL}} VISUAL SOURCE {{VISUAL_SOURCE}} PAGE STRUCTURE {{SECTIONS_PRESET}} Open with a cinematic hero that lands the product within the first screen, keep one continuous visual story running as the visitor scrolls, and close on the call-to-action and footer. Every section must earn its place: no filler blocks, and no two near-identical layouts in a row. VISUAL ASSETS — GENERATE THEM WITH HIGGSFIELD Use the Higgsfield MCP connector yourself to generate every image and video the design calls for, before you consider the site finished. Never ship placeholder images, grey boxes, hotlinked stock photos, or an empty image tag. {{ASSET_MODE}} Write a specific, cinematic prompt for each asset — camera angle, lens feel, lighting, materials, background, mood — always describing the main subject exactly as established in VISUAL SOURCE, and carry the same palette through all of them. Any motion asset must show that same subject: never redesign it between the images and the video. Save the generated files inside the project folder and reference them with local relative paths. Generate the images with the {{IMAGE_MODEL}} model. If you generate any motion asset, use the {{VIDEO_MODEL}} model for it. MOTION {{ANIMATION_LEVEL}} Animate with transform and opacity so scrolling stays smooth, honour prefers-reduced-motion, and never let an animation block reading or tapping. COPY {{COPY_TONE}} Write finished, specific copy for every section: hero headline and subheadline, section headings, body text, feature or benefit lines, and button labels. Name concrete details of the product instead of generic marketing filler. No lorem ipsum, no TODO, no empty sentences. Use the main call-to-action above as the wording of the primary button, in the hero and again near the end of the page. QUALITY BAR - Fully responsive: check desktop, tablet, and mobile, including the hero, the type scale, and any full-bleed media. - Every link, button, and navigation item works, and tap targets are comfortable on a phone. - Media is optimized: correctly sized, lazy-loaded below the fold, with a poster frame on video and no sound playing automatically. - Basic SEO: honest page title, meta description, a single H1, descriptive section headings, alt text on every image, and Open Graph title, description, and image. No keyword stuffing. LOCAL PROJECT Keep everything static and self-contained inside the open project folder: index.html at its root, CSS, JavaScript, images, and videos in clearly named folders, relative paths throughout, and any library loaded from a CDN. No backend, no build step, no npm install. FINAL CHECK Before you tell me it is done, confirm the main subject looks like the same product in every image and video, no section is empty or unfinished, and every button and link works at desktop and mobile widths. Then tell me how to open it in my browser and list the assets you generated.

Réglages facultatifs pour les visuels, la mise en page, le mouvement et les modèles d'IA. Laisse-les tels quels si tu n'es pas sûr.

Ouvrir Claude

Nom de la marque ou du projet

p. ex. AURION X

Produit ou niche

Choisis une option

Source visuelle principale

Choisis une option

Style visuel

Choisis une option

Appel à l'action principal

Choisis une option

Niveau de génération visuelle

Choisis une option

Structure de la page

Choisis une option

Niveau d'animation

Choisis une option

Style de rédaction

Choisis une option

Modèle d'image (facultatif)

Choisis une option

Modèle de vidéo (facultatif)

Choisis une option

Lien d'inspiration (facultatif)

Facultatif — utilisé uniquement comme inspiration visuelle, jamais copié

Envoie le prompt et construis le site web

Si tu as sélectionné une image de référence, joins-la avant d'envoyer le prompt.

Ouvre le premier aperçu local

Passe en revue le site web et apporte les changements nécessaires

Vérifie les mises en page desktop et mobile, puis décris tout changement ou joins une capture d'écran si nécessaire.

Préparez le site web pour la publication

Prépare le site web pour le déploiement

Crée une version finale prête au déploiement sans modifier le design validé.

Prepare the current website for deployment without redesigning it or changing the visual direction. Make sure every required file is included in the local project. Download and store any required Higgsfield-generated images or videos locally inside the project, and replace temporary or remote media URLs with reliable relative local paths. Optimize the final images and videos where possible without noticeably reducing their quality. Remove unnecessary development files from the final deployment version. Create a folder named "deploy" containing the complete static website ready to upload to a web host. The deploy folder must have index.html directly at its root, along with every required asset, stylesheet, script, font reference, image, and video. Verify that the website works correctly from the deploy folder, including the layout, navigation, animations, responsive behavior, images, and videos. Do not redesign the website. Only prepare, optimize, and package the approved version for publishing.

Ouvrir Claude

Ouvrir Hostinger

Ouvrir Hostinger

Ouvre la page d'hébergement de Hostinger pour voir les offres disponibles et ce que chacune inclut.

USED IN TUTORIAL

https://www.hostg.xyz/SHJjW

Choisis un plan d'hébergement et crée ton compte

Configure la migration du site web

Hostinger Migrate an Existing Site Upload Backup Files

Choisis, connecte ou revendique le domaine que tu souhaites utiliser.

Envoie le ZIP du site web

Project folder deploy

Ouvre le dossier deploy, sélectionne tout ce qu'il contient, compresse les fichiers sélectionnés dans une archive ZIP, puis envoie ce ZIP.

Ouvre le site web en ligne

Ouvre le domaine choisi et vérifie que le site, les visuels, les animations et la mise en page fonctionnent correctement en ligne.

Utilise le site terminé comme démo de portfolio, présentation client ou offre de landing page premium.

Façons de le présenter

Démo de portfolio

Montre le site en ligne comme preuve des expériences cinématiques que tu peux créer avec l'IA.

Landing page premium

Propose des pages de lancement cinématiques, des sites de campagne ou des expériences de marque visuelles.

Refonte de site web

Montre aux entreprises à quoi leur site actuel pourrait ressembler en plus moderne et plus premium.

Démo pour présentation client

Partage le site en ligne lorsque tu présentes ton service de création de sites web par IA.

Cela fonctionne particulièrement bien dans les niches où des visuels plus forts augmentent la valeur perçue.