Bevor du startest, stelle sicher, dass du deine Onepage MCP-Verbindung in Claude eingerichtet hast.
Weitere Informationen zur Verbindung von Claude und Onepage findest du im Artikel Claude mit Onepage MCP verbinden.
Durch die Kombination von Higgsfield AI, Claude (mit MCP) und Onepage kannst du statische Landingpages in immersive, visuelle Erlebnisse verwandeln.
Hier ist ein kurzer Überblick über die Tools in deinem neuen Tech-Stack und wie sie zusammenarbeiten:
Higgsfield AI MCP (Das visuelle Studio): Direkt in Claude eingebunden! Higgsfield ist ein KI-Videogenerator für kinoreife Bewegungen, 3D-Kamerafahrten und Animationen. Claude greift über das MCP direkt darauf zu, um Videos für dich zu generieren.
Claude (Der Webentwickler): Claude übernimmt das eigentliche Bauen. Über seine MCP-Verbindung (Model Context Protocol) zu Onepage kann Claude deine Website im Hintergrund direkt bearbeiten, strukturieren und aktualisieren.
Der Onepage Scroll-Skill (
skill.md): Das ist eine kleine Anweisungsdatei, die du bei Claude hochlädst. Sie gibt Claude die genauen Designregeln und Code-Baupläne an die Hand, die benötigt werden, um interaktive Scroll-Effekte auszulösen, wenn dein Higgsfield-Video eingefügt wird. Du kannst die Skill-Datei hier herunterladen.Onepage (Deine Website-Plattform): Das Zuhause deiner Landingpage, wo dein finales Layout und deine Video-Animationen live gehen.
Wie der Prozess funktioniert
Da sowohl Higgsfield als auch Onepage per MCP direkt mit Claude verbunden sind, läuft der gesamte Erstellungsprozess in einem einzigen Schritt ab:
Du gibst Claude einen einzigen Prompt.
Claude weist Higgsfield über das MCP an, ein Video zu generieren.
Claude liest deine
skill.mdund baut mit Onepage automatisch die fertige Seite inklusive Scroll-Effekt auf!
Lass uns deinen Workspace Schritt für Schritt einrichten, damit du direkt loslegen kannst.
Schritt-für-Schritt-Anleitung
Schritt 1: Füge den Onepage Scroll-Skill zu Claude hinzu (skill.md)
Damit Claude genau weiß, wie es spezifische Scroll-Effekte für deine Higgsfield-Videos anwenden soll, nutze unsere vorgefertigte Skill-Datei.
Skill herunterladen: Lade die Datei Onepage Higgsfield Skill (.zip) herunter und entpacke sie, um die
skill.mdzu erhalten.Claude öffnen: Gehe zu deinem Claude-Account.
Zu Project Knowledge hinzufügen:
Erstelle ein Neues Projekt in Claude (z. B. "Onepage Website Builder").
Klicke rechts im Projektbereich unter Dateien auf das
+-Symbol.Lade die entpackte Datei
skill.mdhoch.
Nachdem du die Datei hinzugefügt hast, sieht es so aus:
Wenn du möchtest, kannst du darauf klicken und den Inhalt ansehen:
Jetzt versteht Claude alle exakten Code-Regeln und Scroll-Mechaniken, die für Onepage erforderlich sind!
Schritt 2: Higgsfield MCP in Claude verbinden
Statt Videos manuell auf Higgsfield.ai zu erstellen, verbindest du Higgsfield einfach direkt als MCP-Connector in Claude:
Gehe in deinem Higgsfield-Account auf den Bereich MCP & CLI.
Kopiere die Higgsfield Connector URL:
https://mcp.higgsfield.ai/mcpÖffne Claude und gehe zu Einstellungen - Konnektoren.
Klicke auf "Hinzufügen" - "Benutzerdefinierte Connector hinzufügen"
Nenne den Connector Higgsfield und füge die URL ein.
Melde dich einmalig an, um die Verbindung herzustellen.
Sobald die Tools verbunden sind, sollte es so aussehen:
Achte darauf, die Berechtigungen zu aktivieren, damit Claude auf deine verbundenen Tools zugreifen kann.
Schritt 3: Der All-in-One Prompt in Claude
Kehre nun zu deinem Claude-Chat zurück (innerhalb des Projekts, in dem du die skill.md hochgeladen hast).
Du kannst Claude jetzt direkt anweisen, das Video zu generieren und die Seite in Onepage zu erstellen:
"Erstelle mir über Higgsfield ein Video [Videobeschreibung]. Baue anschließend eine neue Onepage-Seite [Seitenname] und binde das generierte Video im Hero-Bereich mit dem Scroll-Effekt aus der skill.md ein."
Schritt 4: Überprüfe deine Seite
Öffne deinen Onepage-Editor oder den Vorschau-Link, um deinen neuen animierten Higgsfield-Bereich live mit Scroll-Interaktion zu sehen!
Praxis: Vom Konzept zur live geschalteten Seite
Nachfolgend findest du zwei Beispiel-Prompts, die du in Claude verwenden kannst, um über MCP ein Video in Higgsfield zu erstellen. Die Prompts weisen Claude außerdem an, eine neue Sektion in Onepage zu erstellen und das generierte Video automatisch in diese Sektion zu integrieren.
Beispiel 1: Der "Apple-Style" interaktive Produkt-Reveal
Dieses Beispiel nutzt ein dynamisches 3D-Glas-Rendering, um einen eleganten, interaktiven Hero-Bereich zu erstellen, der beim Scrollen des Besuchers reagiert.
Der All-in-One Claude-Prompt:
Erstelle als Erstes über das Higgsfield MCP ein Video mit folgendem Prompt: "Cinematic slow-motion 3D render of a futuristic glass smartphone unfolding floating in zero gravity, glowing neon accents, dark obsidian background, octanerender, highly detailed, 8k resolution, smooth camera orbital motion".
Erstelle danach eine brandneue Onepage-Seite namens 'Quantum Device'. Baue einen eleganten Hero-Bereich im Dark Mode mit der Überschrift 'Die Zukunft der Telefonie', einer kurzen Unterüberschrift und einem primären CTA-Button 'Jetzt vorbestellen'. Verwende das gerade über Higgsfield generierte Video als Hero-Visual und wende den interaktiven Scroll-Reveal-Effekt aus der skill.md an, sodass sich das Gerät beim Herunterscrollen flüssig entfaltet.
Beispiel 2: Futuristischer AI SaaS Energie-Loop
Perfekt für moderne Tech-Tools, Agenturen oder Software-Plattformen, die beim ersten Aufruf direkt für einen Wow-Effekt sorgen wollen.
Der All-in-One Claude-Prompt:
Generiere zuerst über Higgsfield ein Video mit folgendem Prompt: "Abstract liquid gold and dark chrome waves pulsing to life, cinematic volumetric lighting, deep shadows, continuous seamless loop, smooth camera dolly forward, hyperrealistic 3d motion graphic".
Erstelle anschließend eine neue Onepage-Seite namens 'Nexus AI'. Baue einen neuen Feature-Spotlight-Bereich mit einer Überschrift, zwei Spalten mit Feature-Punkten in klarem weißem Text und verwende das generierte Higgsfield-Video als Hintergrund für den Bereich. Wende den in der skill.md definierten Parallax-Scroll-Effekt an, sodass der flüssige Hintergrund dezent auf das Scrollen der Seite reagiert.
💡 Tipp: Beziehe dich in deinem Prompt immer auf die skill.md, damit Claude weiß, dass es die genaue Scroll-Logik auf dein neues Video-Asset anwenden soll!
Zusammenfassung des Workflows
Dank der dualen MCP-Anbindung steuerst du deinen gesamten Design- und Entwicklungsprozess direkt aus Claude heraus. Claude weist Higgsfield an, das Video zu erstellen, liest die Regeln deiner skill.md und baut deine Seite inklusive Scroll-Effekt in Onepage vollautomatisch auf.
💡 Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂