Erstelle mit KI eine cinematische Scroll-Website

Claude Desktop herunterladen und installieren

Claude Desktop herunterladen

https://claude.com/download

Leeren Projektordner erstellen

Ordner in Claude Desktop öffnen

Claude Desktop Code Local Select the project folder Open Trust Workspace

Scroll-World-Skill installieren

Scroll World

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

Higgsfield mit Claude verbinden

Higgsfield-MCP-Seite öffnen

https://higgsfield.ai/mcp

Kopiere die Connector-URL.

Claude Desktop Customize Connectors Add custom connector

Nenne ihn „Higgsfield“, füge die URL ein, verbinde dich und melde dich an.

Hostinger öffnen und Konto vorbereiten

Öffne Hostinger

Richte das Hosting für ein direktes Deployment aus Claude ein.

https://www.hostg.xyz/SHJoR

Hostinger mit Claude Code verbinden

Füge diesen Befehl im Terminal ein und drücke Enter.

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

Anmeldung im Browser abschließen

Kehre zu Claude Code zurück und nutze die Hostinger-Verbindung. Melde dich an und bestätige den Zugriff, sobald der Browser öffnet.

Website-Projekt anpassen

Die cinematische Scroll-Website erstellen

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.

Projekt- oder Markenname

Der Projekt- oder Markenname

Nische

Die Kategorie des Unternehmens, Produkts oder Portfolios

Hauptziel der Website

Die wichtigste Besucheraktion

Projektkontext

Der Ort oder wichtige Hintergrund

Haupt-Bildquelle

Wähle eine Option

Visuelle Ausrichtung

Die gewünschte Art- und Design-Richtung

Anzahl der Hauptszenen

Die Anzahl der visuellen Hauptszenen

Szenenverlauf

Wähle eine Option

Visuelle Strategie für Mobilgeräte

Wähle eine Option

Haupt-Call-to-Action

Der finale Call-to-Action-Text

Zusätzliche Anweisungen

Optional – etwaige Vorgaben zu Stil oder Inhalt

Bei Bedarf Referenzmaterial hinzufügen

Wenn du eigene Medien ausgewählt hast, füge sie hier hinzu, bevor du den Prompt sendest.

Project folder reference-assets

Füge Bilder, Videos, Logos, Renderings und Markendokumente hinzu.

Generierten Prompt an Claude Code senden

Produktionsplan prüfen und freigeben

Prüfe Szenenreihenfolge, visuelle Konsistenz, Kameraführung, Mobil-Strategie und geschätzte Generierungskosten und gib den Plan anschließend frei.

Lokale Vorschau öffnen

Öffne die von Claude bereitgestellte Vorschau-Adresse, sobald der Build abgeschlossen ist.

Szenenübergänge prüfen

Achte auf Blitzer, Sprünge, abrupte Richtungswechsel, inkonsistente Frames oder sichtbare Schnitte.

Tempo und Inhalte prüfen

Prüfe Scrollgeschwindigkeit, Textplatzierung, Inhaltsbereiche, Buttons und den finalen Call-to-Action.

Mobil-Layout testen

Prüfe, ob Visuals, Text und Buttons auf einem schmalen Bildschirm korrekt dargestellt werden.

Letzte Korrekturen anfordern

Gezielte Korrekturen anfordern

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.

Website auf Hostinger deployen

Die Website auf Hostinger deployen

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.

Live-Website prüfen

Prüfe die cinematische Sequenz, die Inhalte, die Buttons, den Call-to-Action und das Mobil-Layout.

Finale Domain verbinden

Sobald die Website freigegeben ist, bitte Claude, die ausgewählte Domain über Hostinger zu verbinden.

Künftige Updates veröffentlichen

Beschreibe die Änderung und bitte Claude dann, die Website neu zu bauen und erneut zu veröffentlichen.