Crea un sitio web cinematográfico con scroll usando IA

Descarga e instala Claude Desktop

Descarga Claude Desktop

https://claude.com/download

Crea una carpeta de proyecto vacía

Abre la carpeta en Claude Desktop

Claude Desktop Code Local Select the project folder Open Trust Workspace

Instala la skill Scroll World

Scroll World

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

Conecta Higgsfield con Claude

Abrir la página de Higgsfield MCP

https://higgsfield.ai/mcp

Copia la URL del conector.

Claude Desktop Customize Connectors Add custom connector

Ponle el nombre “Higgsfield”, pega la URL y luego conecta e inicia sesión.

Abre Hostinger y prepara tu cuenta

Abrir Hostinger

Configura el alojamiento para desplegar directamente desde Claude.

https://www.hostg.xyz/SHJoR

Conecta Hostinger con Claude Code

Pega este comando en Terminal y pulsa Enter.

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

Completa el inicio de sesión en el navegador

Vuelve a Claude Code y usa la conexión de Hostinger. Inicia sesión y aprueba el acceso cuando se abra el navegador.

Personaliza el proyecto del sitio web

Construye el sitio web cinematográfico 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.

Nombre del proyecto o de la marca

El nombre del proyecto o de la marca

Nicho

La categoría del negocio, producto o portafolio

Objetivo principal del sitio web

La acción principal del visitante

Contexto del proyecto

La ubicación o el fondo importante

Fuente visual principal

Elige una opción

Dirección visual

La dirección artística y de diseño deseada

Número de escenas principales

El número de escenas visuales principales

Recorrido de escenas

Elige una opción

Estrategia visual para móvil

Elige una opción

Llamada a la acción principal

El texto final de la llamada a la acción

Instrucciones adicionales

Opcional — cualquier restricción necesaria de estilo o contenido

Añade recursos de referencia si es necesario

Si has elegido usar tus propios archivos, añádelos aquí antes de enviar el prompt.

Project folder reference-assets

Añade imágenes, vídeos, logotipos, renders y documentos de marca.

Envía el prompt generado a Claude Code

Revisa y aprueba el plan de producción

Revisa el orden de las escenas, la coherencia visual, el movimiento de cámara, la estrategia móvil y el coste estimado de generación, y luego aprueba el plan.

Abre la vista previa local

Abre la dirección de vista previa que proporciona Claude cuando termine la compilación.

Inspecciona las transiciones entre escenas

Busca destellos, saltos, cambios bruscos de dirección, fotogramas inconsistentes o cortes visibles.

Revisa el ritmo y el contenido

Revisa la velocidad de scroll, la colocación del texto, las secciones de contenido, los botones y la llamada a la acción final.

Prueba el diseño móvil

Confirma que los elementos visuales, el texto y los botones se muestran correctamente en una pantalla estrecha.

Solicita las correcciones finales

Solicita correcciones específicas

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.

Despliega el sitio web en Hostinger

Desplegar el sitio web en 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.

Revisa el sitio web en vivo

Revisa la secuencia cinematográfica, el contenido, los botones, la llamada a la acción y el diseño móvil.

Conecta el dominio definitivo

Una vez aprobado el sitio web, pide a Claude que conecte el dominio elegido a través de Hostinger.

Publica futuras actualizaciones

Describe el cambio y luego pide a Claude que reconstruya y vuelva a publicar el sitio web.