Was mich aufhorchen ließ, war nicht das Neon. Es war der Helm.
Stell dir eine dunkle, nebelverhangene Hero-Sektion vor — eine einsame Figur in einem Chrom-Exosuit, sichtbarer Atem, ein Planet, der tief am Himmel hängt. Darunter eine Produktreihe: drei freigestellte Helmaufnahmen, jede auf einem sauberen transparenten Hintergrund, schwebend in ihren Karten, als wären sie in einem echten Studio fotografiert worden. Und dasselbe Gesicht der Figur, wiedererkennbar, durchgehend in jeder Sektion. Kein Designer. Kein Fotograf. Kein Photoshop-Pfadwerkzeug-Marathon zum Freistellen. Das Ganze hat sich in einem einzigen Terminalfenster zusammengebaut, während eine Designdatei in einem anderen Tab geöffnet war.
Das ist der Workflow, den ich dir zeigen möchte: den Bau einer Sci-Fi Landing Page mit Figma, Claude Code und Higgsfield als verbundene Pipeline, bei der das Design in Figma beginnt, die Entwicklung in Claude Code stattfindet und jedes Bild- und Video-Asset generiert und eingebunden wird, ohne jemals den Editor zu verlassen. Am Ende wirst du in der Lage sein, ein Figma-Design an Claude Code zu übergeben, konsistente Charaktere und freigestellte Produktfotos auf Abruf zu generieren, ein Standbild in ein scroll-ausgelöstes Video zu verwandeln, alles responsive zu machen und es kostenlos auf Cloudflare Pages live zu schalten.
Ich bin ehrlich darüber, was hands-on ist und was der dokumentierte Workflow ist, denn die zweite Hälfte davon — die Asset-Generierungstricks und die Deploy-Automatisierung — ist der Punkt, an dem die meisten Tutorials vage werden und du hängen bleibst. Das machen wir hier nicht. Lass mich dir zeigen, warum genau dieser Drei-Tool-Stack 2026 eine Grenze überschritten hat, die er zuvor nicht hatte.
Warum Diese Figma-to-Live Pipeline 2026 Plötzlich Funktioniert
Drei Teile sind nah genug zusammengekommen, dass die Nahtstellen dazwischen praktisch verschwunden sind.
Erstens, Figmas Dev Mode MCP-Server ist zu etwas herangereift, das Claude Code tatsächlich lesen kann. Er legt strukturierten Design-Kontext offen — Komponenten, Variablen, Layout-Daten, sogar FigJam-Inhalte — direkt für ein agentisches Coding-Tool, statt es zu zwingen, von einem flachen Screenshot zu raten. Die Nachfrage stieg von praktisch null auf rund 2.400 monatliche Suchanfragen bis Februar 2026, was zeigt, wie schnell sich dieses Übergabemuster verbreitet. Am 24. März 2026 erweiterte Figma es weiter, sodass Agenten direkt auf dem Canvas arbeiten können, und das Feature ist während der Beta kostenlos (es wird später auf nutzungsbasierte Preise umgestellt).
Zweitens, am 30. April 2026 veröffentlichte Higgsfield seinen offiziellen MCP-Server — ein gehosteter Endpunkt, der über 30 Bild- und Videomodelle über eine einzige Verbindung bereitstellt. Seedance 2.0, Sora 2, Veo 3.1, Kling 3.0 für Video; Nano Banana Pro, Soul 2.0, Flux 2, GPT Image 2 für Bilder. Keine API-Schlüssel zu verwalten, keine modellspezifischen SDKs. Du authentifizierst dich einmal per OAuth im Browser, und Claude Code kann jedes dieser Modelle aus derselben Sitzung heraus nach einem Hero-Bild oder einem cinematischen Clip fragen, in der es gerade dein CSS schreibt.
Hier ist der Zusammenhang, den die meisten übersehen. Der Agent, der dein Markup schreibt, ist derselbe Agent, der die Assets generiert, die dieses Markup braucht. Das Helmfoto wird generiert, in deinen public/-Ordner heruntergeladen und in der Komponente referenziert — alles in einer durchgehenden Schleife, alles ohne dass du eine zweite App öffnest. Das ist die Sache, die eine mehrwöchige Design-Build-Fotoshoot-Timeline auf einen Nachmittag komprimiert.
Ich habe kreative Pipelines auf dieser Grundlage schon früher gebaut und eine frühe Version in meinem automatisiertes Kreativagentur-Build mit Claude und Higgsfield dokumentiert. Was hier neu ist, sind nicht die einzelnen Tools — es ist, dass Figma jetzt das Design sauber am oberen Ende einspeist und Cloudflare das Deploy am unteren Ende auffängt, sodass die gesamte Kette läuft, ohne das Terminal zu verlassen.
Eine Namenskorrektur bevor wir weitermachen, weil die automatischen Transkripte das ständig verfälschen: MCP steht für Model Context Protocol. Es ist der offene Standard, der einem KI-Agenten erlaubt, über eine konsistente Schnittstelle mit externen Tools und Datenquellen zu kommunizieren. Es ist kein "Multimodal Content Platform." Sowohl Figma als auch Higgsfield stellen ihre Fähigkeiten Claude Code über MCP zur Verfügung — dieses gemeinsame Protokoll ist der Grund, warum diese Pipeline überhaupt zusammenhält.
Also, wo beginnt das Design eigentlich? In Figma — und wie du es nach Claude Code bringst, ist die erste echte Entscheidung.
Das Sci-Fi Layout Zuerst in Figma Entwerfen
Alles beginnt mit einem Layout, nicht mit einem Prompt. Diese Reihenfolge ist wichtiger als es klingt.
Wenn du Claude Code ein Layout aus dem Nichts erfinden lässt, bekommst du etwas Plausibles — einen Hero, ein paar Karten, einen Footer — aber es driftet ins Generische ab. Eine futuristische Sci-Fi Landing Page steht und fällt mit intentionaler Komposition: wo der Negativraum sitzt, wie das Auge von der Überschrift hinunter zur Produktreihe wandert, wo ein Video hingehört und wo es nur Rauschen wäre. Das ist eine Design-Entscheidung, und Design-Entscheidungen gehören in ein Design-Tool.
Der Workflow beginnt also in Figma mit einem vollständigen Layout der fiktiven Sci-Fi Landing Page:
- Eine Hero-Sektion mit einem dunklen, atmosphärischen Hintergrund und einem einzigen starken Fokuspunkt
- Eine Überschrift und Unterüberschrift mit bewusster typografischer Hierarchie
- Eine Produktreihe — Karten mit freigestellten Objekten (im Quellbuild: Sci-Fi-Helme)
- Eine oder mehrere Sektionen, die für kurze Loop- oder scroll-ausgelöste Videos gebaut sind
- Eine Navigationsleiste, die auf kleineren Bildschirmen elegant einklappen muss
Du finalisierst hier nicht das visuelle Design. Du legst die Struktur und Intention fest — das, worin Claude Code aufrichtig schlecht beim Erfinden und aufrichtig gut beim Ausführen ist, sobald es vorgegeben wird. Betrachte Figma als den Ort, an dem du die schwierigen Geschmacksentscheidungen triffst, und Claude Code als den Ingenieur, der genau das baut, was du spezifiziert hast.
Eine ehrliche Anmerkung: Du musst kein Figma-Profi sein. Selbst ein grobes, aber bewusstes Layout schlägt kein Layout. Das Ziel ist, dem Agenten eine klare Blaupause zu geben, kein pixelperfektes Meisterwerk.
Jetzt die Entscheidung, an der Leute stolpern — das Design in Claude Code zu bekommen. Es gibt zwei Wege, und sie sind nicht gleich.
JPEG-Export vs. Figma MCP: Welche Übergabe Nutzen
Es gibt zwei Wege, ein Figma-Design in Claude Code zu bringen, und die richtige Wahl hängt allein davon ab, ob du für Figma bezahlst.
Weg eins — das gesamte Design als einzelnes JPEG exportieren. Du machst das gesamte Layout zu einem Bild, wirfst es in deine Claude Code-Session und sagst dem Agenten, er soll eine Website bauen, die dazu passt. Das ist die einfache, günstigere Option, und sie funktioniert. Claude Fable-Klasse Modelle haben eine ausreichend starke Bildverarbeitung, um einen ganzseitigen Screenshot zu betrachten, das Layout zu verstehen und die Struktur in HTML und CSS zu reproduzieren. Wenn du einen kostenlosen Figma-Plan hast oder nur skizzierst, ist das dein Weg.
Der Trade-off: Ein JPEG ist flach. Der Agent sieht Pixel, keine Struktur. Er kann deine exakten Spacing-Tokens, Farbvariablen oder welche Elemente Komponenten versus Einmalige sind, nicht lesen. Er leitet das alles ab — meistens gut, manchmal nicht. Du wirst mehr Folgeprompts für Spacing- und Farbkorrekturen brauchen als beim reicheren Weg.
Weg zwei — der Figma Dev Mode MCP-Server. Das ist die empfohlene Route, wenn du ein Figma-Abo hast, das Dev Mode einschließt. Statt eines flachen Bildes liest Claude Code den strukturierten Design-Kontext direkt aus der Datei: Komponenten, Variablen, Layout-Daten, alles. Der Figma MCP "verwandelt Figma-Designs in akkuraten Code, indem er Figma-Kontext direkt in agentische Coding-Tools bringt," was genau das ist, was du willst — der Agent rät dein Spacing nicht, er liest es.
Die Einrichtung ist kurz. Laut Figmas eigener Setup-Anleitung:
- Öffne deine Figma Design-Datei, ohne dass etwas auf dem Canvas ausgewählt ist.
- Wechsle mit dem Toggle in der Toolbar in den Dev Mode.
- Aktiviere den MCP-Server über die rechte Seitenleiste.
- Füge in Claude Code die Figma MCP-Verbindung hinzu und richte den Agenten auf den Frame, den du bauen willst.
Dann sagst du Claude Code etwas wie: "Lies den ausgewählten Figma-Frame über den MCP und baue ihn als responsive Landing Page. Verwende die Design-Variablen für Farbe und Spacing — erfinde keine Werte." Der letzte Satz ist wichtig. Ohne Anweisung rundet der Agent manchmal dein Spacing auf "hübsche" Zahlen. Sag ihm, die Tokens zu respektieren.
Ich bin tiefer darauf eingegangen, Claude dazu zu bringen, ein Design System tatsächlich einzuhalten — Tokens, Komponenten und alles — in meinem KI Design System Workflow mit Claude und Figma. Wenn dir Output wichtig ist, der nicht wie generischer KI-Müll liest, passt das Stück direkt zu diesem hier.
Meine ehrliche Empfehlung: Wenn du für Figma bezahlst, nutze den MCP-Weg. Der Genauigkeitsunterschied bei Spacing und Farbe ist real und spart dir ein Dutzend Korrektur-Prompts weiter unten. Wenn nicht, ist der JPEG-Weg vollkommen gangbar — rechne nur mit ein paar extra Verfeinerungsrunden. So oder so, das Design ist jetzt in Claude Code. Jetzt geben wir ihm eine Möglichkeit, die Assets zu erstellen.
Die Higgsfield MCP mit Claude Code Verbinden
Das ist die Brücke, die "ein codiertes Skelett" in "eine fertige, bildreiche Seite" verwandelt. Und die Einrichtung ist tatsächlich ein Einzeiler.
Der Higgsfield-Connector ist ein gehosteter MCP-Server, du hostest also nichts selbst und verwaltest keine API-Schlüssel. Öffne dein Terminal und führe aus:
# Füge den Higgsfield MCP-Server zu Claude Code auf Benutzerebene hinzu
claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp
Claude Code übernimmt die Authentifizierung über einen Browser-OAuth-Flow — keine API-Schlüssel zum Einfügen, keine .env-Datei zum Pflegen. Generierungen ziehen Credits von deinem Higgsfield-Plan. Einmal verbunden kann der Agent jedes Modell auf der Higgsfield-Plattform aus deiner Build-Session heraus erreichen: über 30 Bild- und Videogeneratoren, Output bis 4K, Clips bis 15 Sekunden in jedem Seitenverhältnis.
Ein paar Setup-Realitäten, die ehrlich erwähnt werden sollten, da der Quell-Walkthrough sie übergeht:
- Die genauen Connector-Schritte über diesen Befehl hinaus sind nicht in jedem Tutorial ausführlich dokumentiert. Die offiziellen Docs von Higgsfield und der obige Befehl sind deine Quelle der Wahrheit; behandle Drittanbieter-Schritte als Plausibilitätsprüfung, nicht als Evangelium.
- Verifiziere die Verbindung bevor du baust. Führe nach dem Hinzufügen
claude mcp listin deinem Terminal aus, um zu bestätigen, dasshiggsfieldals verbunden erscheint. Wenn OAuth nicht abgeschlossen wurde, behebe es jetzt — das Debuggen eines halb verbundenen MCP mitten im Build ist miserabel.
Sobald das live ist, hier das Denkmodell, das den Rest verständlich macht: Du "gehst nicht mehr ein Bild machen und kommst zurück." Du bleibst im Build-Gespräch und fragst nach dem Bild. "Generiere einen Hero-Hintergrund: dunkles nebliges Alien-Stadtbild, kaltes blaues Kantenlicht, cinematisch, 16:9." Claude Code leitet das an das richtige Higgsfield-Modell weiter, bekommt das Asset zurück, und du sagst ihm, wo es eingebunden werden soll. Der Plattformwechsel, der früher deinen Fokus gebrochen hat, verschwindet einfach.
Wenn du lieber möchtest, dass jemand genau dieses Figma-zu-Higgsfield-zu-Cloudflare-Setup für dich baut, übernehme ich KI-Entwicklungs- und Automatisierungsaufträge — du kannst sehen, was ich gebaut habe auf fiverr.com/s/EgxYmWD.
Jetzt der spaßige Teil: die eigentliche Generierung der Sci-Fi Assets, und der Konsistenz-Trick, der eine echte Seite von einem Moodboard unterscheidet.
Konsistente Sci-Fi Assets mit Nano Banana Pro Generieren
Der Unterschied zwischen einer amateurhaften KI-Seite und einer überzeugenden ist Konsistenz. Hier hört Modellwahl auf, Trivia zu sein, und wird zum ganzen Spiel.
Nano Banana Pro — Googles Gemini-gestütztes Bildmodell, von der Community "Nano Banana" getauft — ist das Modell, nach dem du greifst, wenn Assets zueinander passen müssen. Es ist spezialisiert auf Kontinuität und Charakterkonsistenz: dasselbe Gesicht, dieselbe Lichtsprache, dasselbe Materialgefühl über eine ganze Reihe von Bildern. Für eine Landing Page, auf der ein Charakter im Hero erscheint und ein Produkt in drei Karten, ist diese Kohärenz das, was die Illusion verkauft, dass ein einzelner Art Director alles gemacht hat.
Hier ist der realistische Asset-Durchlauf für eine Sci-Fi-Seite, in der Reihenfolge, wie er tatsächlich passiert:
- Hero-Hintergrund. Ein breiter, atmosphärischer Establishing Shot — das Stadtbild, der Planet, der Nebel. Generiere ihn im 16:9-Format und überdimensioniert, damit du Beschnittspielraum hast.
- Der Charakter. Eine konsistente Figur, die du wiederverwenden kannst. Nano Banana Pro hält die Identität über Generierungen hinweg, sodass die Person in deinem Hero in einem Testimonial oder einer sekundären Sektion wieder auftauchen kann, ohne wie ein anderes Modell auszusehen.
- Freigestellte Produktfotos. Die Helme, die Gadgets — generiert als saubere Studio-Objekte. Diese kommen in die Produktkarten.
- Sektionsakzente. Kleinere unterstützende Visuals, Icons-mit-Tiefe, Hintergrundtexturen.
Ein praktischer Konsistenz-Tipp direkt aus dem Verhalten des Modells: Füttere es mit starken Referenzbildern (hohe Auflösung, mehrere Winkel) und verwende explizite identitätsbewahrende Sprache im Prompt — sag ihm wörtlich, es soll "das Gesicht und den Exosuit des Charakters exakt gleich wie die Referenz halten." Einmalige Generierung driftet; iterative Verfeinerung mit einer gesperrten Referenz hält. Das ist kein Zauber-Prompt, es respektiert einfach, wie das Modell Kontinuität bewahrt.
Eine ehrliche Einschränkung: Konsistenz ist stark, nicht perfekt. Über einen langen Generierungslauf bekommst du noch gelegentlich ein Bild, bei dem die Kieferlinie leicht abweicht oder die Paneele des Anzugs sich verschieben. Plane ein, zwei Neugenerierungen pro kritischem Asset ein. Es sind immer noch Minuten Arbeit statt einem halben Tag Fotoshooting — aber "einstellen und vergessen" ist übertrieben.
Du hast jetzt Bilder. Aber ein Helm auf weißem Hintergrund fügt sich nicht sauber in eine dunkle Sci-Fi-Karte ein. Das ist das nächste Problem, und es hat eine saubere Lösung.
Weiße Hintergründe in Transparente PNGs für Layering Umwandeln
Hier ist eine Kleinigkeit, die einen unverhältnismäßig großen Unterschied macht: Ein freigestelltes Produktfoto, das auf weißem Hintergrund generiert wurde, sieht auf einer dunklen Seite falsch aus. Der weiße Rahmen um den Helm zerstört den Schwebend-im-Weltraum-Effekt sofort.
Die Lösung ist, diese Assets in transparente PNGs umzuwandeln, damit das Objekt sauber über dem Hintergrund liegt. Innerhalb dieser Pipeline verlässt du den Editor nicht dafür — du bittest den Higgsfield MCP, das Bild zu verarbeiten, den weißen Hintergrund zu entfernen und ein transparentes PNG zu exportieren. Der Helm sitzt jetzt in seiner Karte mit der dunklen Seite, die durch die Ränder durchscheint, genau wie ein echtes freigestelltes Produktfoto.
Warum das über Ästhetik hinausgeht: Transparente Assets sind komponierbar. Dasselbe Helm-PNG kann in einer Karte sitzen, in einer Parallax-Ebene schweben oder einen Glow dahinter in CSS bekommen — weil kein Hintergrund deine Effekte stört. Flache JPEGs sperren dich auf den Hintergrund ein, mit dem sie kamen. PNGs mit Alpha geben dir Gestaltungsraum.
Ein praktischer Hinweis zum Dateigewicht: Transparente PNGs von großen Hero-Objekten können schwer werden. Wenn du mit der Komposition zufrieden bist, lass Claude Code sie optimieren — auf die tatsächlichen Anzeigeabmessungen skalieren und komprimieren — damit deine schöne Seite nicht lädt, als wäre es 2014. Hübsch und langsam vergrault Besucher immer noch.
Statische Bilder tragen eine Seite schon weit. Aber eine Sci-Fi Landing Page, die sich bewegt, ist eine andere Kategorie von beeindruckend — also lassen wir ein Standbild zum Leben erwachen.
Scroll-Ausgelöstes Video aus einem Standbild Erstellen
Das ist der Schachzug, der die Seite von "schön" zu "wie haben die das gebaut" pusht.
Mit einem Videomodell — Seedance ist das, das im Quell-Workflow dafür genannt wird — nimmst du ein statisches Bild und generierst einen kurzen Clip daraus. Zehn Sekunden, 16:9, im cinematischen Stil, den du vorgibst. Das Hero-Standbild, das du bereits erstellt hast, wird zu einem langsamen Kameraschwenk über das Stadtbild; der Exosuit des Charakters fängt ein Lichtflackern; der Nebel treibt. Dann bindest du diesen Clip als scroll-ausgelöste Animation in die Seite ein, sodass das Filmmaterial beim Scrollen des Lesers voranschreitet, statt einfach in einer Schleife abzuspielen.
Die vollständige Kette, innerhalb von Claude Code:
- Generiere oder wähle das Standbild, das du animieren willst (dein Hero-Bild).
- Bitte den Higgsfield MCP, es durch das Seedance Videomodell laufen zu lassen — spezifiziere Dauer (10s), Seitenverhältnis (16:9) und die gewünschte Bewegung ("langsame Vorwärtsfahrt, subtile atmosphärische Drift").
- Lade den Clip in dein Projekt herunter.
- Sage Claude Code, er soll ihn als scroll-ausgelösten Hero einbinden — die Scroll-Position steuert den Abspielkopf.
Ein Realitätscheck zu Kosten und Qualität: Videogenerierung verbraucht mehr Credits als Bilder, und nicht jeder Clip gelingt beim ersten Versuch. Die Bewegung kann zu schnell herauskommen, zu ruckelig oder seltsam wörtlich. Generiere, schau, regeneriere den Prompt — dieselbe iterative Schleife wie bei den Bildern. Und scroll-synchronisierte Video-Mathematik ist wirklich knifflig; wenn der Clip gegen die Scrollbar stottert, ist es meist die Frame-Mapping-Logik, nicht das Video. Ich habe genau diese Art von scroll-locked cinematischem Effekt in meinem 3D-Scroll-Animationen mit KI und Claude Code Breakdown vertieft — die Technik ist direkt übertragbar.
Das Ergebnis, wenn es klappt, ist das, was Leute screenshotten: ein Hero, in dem der Film auf den Leser reagiert. Das ist der Moment, in dem die Seite aufhört, sich wie ein Template anzufühlen.
Jetzt der Teil, den alle vergessen, bis ihr Handy die Seite kaputt macht: Responsiveness.
Die Sci-Fi Landing Page Responsive Machen
Ein cinematischer Desktop-Hero, der auf einem Handy zu einem unlesbaren Chaos wird, ist ein Fehlschlag, Punkt — und über 60% deiner Besucher sind mobil unterwegs. Responsiveness ist also kein Polierschritt, es ist eine Anforderung.
Die gute Nachricht: Das ist eines der Dinge, die Claude Code mit einer direkten Anweisung gut meistert. Sag ihm explizit, was du willst:
"Mache die gesamte Seite responsive. Das Navigationsmenü soll auf Tablet und Mobil zu einem Burger-Icon einklappen. Staple die Produktkarten auf kleinen Bildschirmen vertikal. Behalte das Hero-Video, aber beschränke seine Höhe auf Mobil, damit es den Fold nicht dominiert. Halte die Spacing-Skala aus dem Figma-Design über alle Breakpoints hinweg ein."
Die letzte Klausel verdient ihren Platz — ohne sie neigt der Agent dazu, Mobil zu "reparieren", indem er alles zusammenquetscht, und dein sorgfältig aufgebauter Spacing-Rhythmus bricht zusammen. Benenne die Breakpoints und benenne das Verhalten.
Hier der ehrliche Teil: Responsive ist die Phase, in der du am meisten manuell nachjustierst. Claude Code bringt dich 90% dorthin — das Burger-Menü funktioniert, die Karten stapeln sich — aber du fängst die kleinen Dinge mit dem Auge:
- Eine Überschrift, die bei genau 768px Breite unschön umbricht
- Eine Produktkarte mit inkonsistentem Padding verglichen mit ihren Nachbarn
- Ein Video, das technisch beschränkt ist, aber immer noch zu hoch über dem Fold sitzt
- Touch-Targets, die einen Tick zu klein für einen Daumen sind
Keines davon ist ein schwieriger Fix. Es sind "öffne die Dev Tools, ziehe den Viewport, zeige Claude Code auf das spezifische Element"-Fixes. Plane zwanzig Minuten für diesen Durchlauf ein und du bist gut. Überspringe es, und deine preiswürdige Desktop-Seite blamiert dich auf dem Gerät, auf dem die meisten Leute sie tatsächlich öffnen.
Ich habe das übergreifende Prinzip — wo KI den Großteil erledigt und ein Mensch die Urteilsentscheidungen trifft — in meinem Beitrag über KI-Webdesign mit menschlicher Aufsicht behandelt. Dieser Responsive-Durchlauf ist dieses Prinzip im Kleinen.
Die Seite funktioniert jetzt auf jedem Bildschirm. Zeit, sie irgendwo real zu platzieren, kostenlos.
Kostenlos auf Cloudflare Pages aus Claude Code Deployen
Das Deployment ist der sauberste Teil der gesamten Pipeline, und hier löst das Versprechen "bleib im Terminal" sich vollständig ein.
Du promptest Claude Code, die Veröffentlichungskette zu übernehmen, und er automatisiert die Schritte, die früher eine lästige manuelle Checkliste waren:
- Pushe den Code zu GitHub. Der Agent initialisiert das Repo (falls nötig), committet und pusht.
- Verbinde das Repo mit Cloudflare Pages. Cloudflare bietet Auto-Deploy von GitHub mit eingebauter CI/CD.
- Binde die Domain ein. Füge eine benutzerdefinierte Domain in den Pages-Projekteinstellungen hinzu; du kannst bis zu 100 benutzerdefinierte Domains pro Projekt im kostenlosen Plan anbinden.
- Geh live. Cloudflare baut und serviert die Seite.
Warum genau Cloudflare Pages? Weil der kostenlose Tier aufrichtig großzügig ist, keine beschnittene Testversion. Du bekommst ein globales CDN, automatisches HTTPS, unbegrenzte Bandbreite im kostenlosen Tier und 500 Builds pro Monat ohne Rechenzeitlimit. Für eine Landing Page — selbst eine medienreiche Sci-Fi-Seite — wirst du diese Limits nicht erreichen. Hosting, CDN, CI/CD und SSL sind alle kostenlos; das einzige Geld auf dem Tisch ist die Domain selbst, etwa 10 $ pro Jahr für eine .com.
Ein paar ehrliche Deployment-Hinweise:
- DNS und SSL sind nicht sofort da. Nachdem du deine Nameserver auf Cloudflare zeigst, laufen DNS-Propagation und SSL-Bereitstellung automatisch, aber gib dem Zeit — Minuten bis ein paar Stunden. Debugge nicht panisch eine Seite, die einfach noch nicht propagiert ist.
- Medienreiche Seiten brauchen einen Optimierungsdurchlauf vor dem Deploy. Dieses Hero-Video und diese transparenten PNGs machen den Großteil deines Seitengewichts aus. Optimiere sie (der Schritt, den ich vorher markiert habe) bevor du deployest, sonst schneidet deine wunderschöne Seite in realen Ladezeiten schlecht ab.
- Der kostenlose Tier ist real, aber lies die Limits. Für eine einzelne Landing Page bist du nirgendwo in der Nähe. Wenn du zwanzig Kundenseiten deployest, lies Cloudflares aktuelle Limits nochmal — sie entwickeln sich weiter.
Das ist die gesamte Pipeline: Figma-Design → Claude Code-Build → Higgsfield-Assets → Responsive-Durchlauf → Live auf Cloudflare. Jetzt erzähle ich dir die Teile, die die polierten Demos leise überspringen.
Was die Demos Dir Nicht Sagen
Ich will dir die unglämouröse Wahrheit geben, denn die Highlight-Reel-Version dieses Workflows bereitet dich darauf vor, dich wie ein Versager zu fühlen, wenn du es eigentlich nicht bist.
"Ein Prompt" ist Marketing. Du wirst diesen Stack als nahezu instant angepriesen sehen. Die Realität ist eher: Ein starker Setup-Prompt gibt dir einen kompletten Entwurf, und dann verbringst du eine Stunde mit Iteration — Platzhalter-Assets gegen echte tauschen, die zwei Helme regenerieren, die leicht daneben kamen, die Überschrift fixen, die bei einem Breakpoint seltsam umbricht. Diese Stunde ist immer noch absurd schnell verglichen mit den Wochen, die eine Agentur anbietet. Aber jeder, der dir einen buchstäblichen Walk-Away-Workflow verkauft, zeigt dir die Demo, nicht den Job.
Asset-Konsistenz ist stark, nicht fehlerfrei. Nano Banana Pro hält aufrichtig einen Charakter über ein Set — besser als alles, was es vor achtzehn Monaten gab. Aber über einen langen Generierungslauf bekommst du immer noch Drift. Plane Neugenerierungen für deinen Hero und deine wichtigsten Produktfotos ein. Das Modell gibt dir einen riesigen Vorsprung; es gibt dir keinen Freifahrtschein beim Urteilsvermögen.
Kosten sind real und es lohnt sich, sie im Auge zu behalten. Der Quell-Build wurde auf ungefähr einem 20-$/Monat-Plan mit einem Nutzungsfenster von etwa fünf Stunden demonstriert — und das ist ein aufrichtig kosteneffektives Setup. Aber Videogenerierung frisst Credits schneller als Bilder, und wenn du unvorsichtig regenerierst, verbrennst du dein Fenster. Sei bewusst. Generiere mit Absicht, nicht durch Prompt-Streufeuer.
Das ist für echte Projekte, nicht nur Demos. Der wirklich aufregende Teil ist nicht die Sci-Fi-Neuheit — es ist, dass dieselbe Pipeline eine echte Landing Page für ein lokales Unternehmen oder ein Startup baut. Tausche das Alien-Stadtbild gegen einen sauberen Produkt-Hero und die Helme gegen echte SKUs, und du hast ein legitimes Kundenergebnis. Das Sci-Fi-Thema ist nur ein Stresstest, der beweist, dass die Pipeline schwere Fälle bewältigen kann.
Der letzte Punkt ist der, den ich auf einen Klebezettel tätowieren würde. Lass mich damit schließen, warum.
Die Echte Verschiebung Hier Ist Nicht Geschwindigkeit — Es Ist, Wer Bauen Kann
Geh kurz zum Helm zurück.
Vor einem Jahr hätte dieses einzelne transparente Produktfoto — generiert, freigestellt, farbkonsistent mit einem Charakter im Hero — einen Fotografen, ein Studio, eine Photoshop-Sitzung und einen Designer zum Platzieren bedeutet. Vier Leute, oder ein sehr müder Generalist und eine lange Woche. Die Sci-Fi Landing Page darüber? Füge einen Entwickler und einen Video-Editor hinzu. Das ist ein Team und ein Budget und eine Timeline, gemessen in Wochen.
Die Verschiebung, die diese Figma-plus-Claude-Code-plus-Higgsfield-Pipeline darstellt, ist nicht, dass sie dieses Team schneller macht. Es ist, dass sie einer Person mit Geschmack ermöglicht, das Ganze an einem Nachmittag zu erledigen — und der Engpass verschiebt sich von "kannst du ausführen" zu "weißt du, wie gut aussieht." Die Tools übernehmen die Ausführung. Dein Urteil über Komposition, darüber welche Generierung der Keeper ist, wo ein Video hingehört und wo es Rauschen ist — das ist der Teil, der jetzt der gesamte Job ist.
Also hier ist deine Herausforderung für die nächsten 24 Stunden: Öffne Figma, skizziere eine bewusste Hero-Sektion — nur den Hero — für irgendeine Idee, die du in einer Notizen-App liegen hast. Verbinde dann den Higgsfield MCP mit Claude Code mit diesem einen Befehl, generiere ein einzelnes Hero-Bild und binde es ein. Bau nicht die ganze Seite. Bau den Beweis, dass die Schleife in deinen eigenen Händen funktioniert. Alles danach ist nur Wiederholung.
Das erste Mal, wenn du siehst, wie ein Asset, das du in einfachem Deutsch beschrieben hast, in deinem Projektordner erscheint und in ein Layout einrastet, das du entworfen hast — das ist der Moment, in dem das aufhört, ein Tutorial zu sein, das du gelesen hast, und anfängt, etwas zu sein, das du kannst.
Häufig Gestellte Fragen
Wie verbinde ich den Higgsfield MCP mit Claude Code?
Führe claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp in deinem Terminal aus und schließe den Browser-OAuth-Flow ab, wenn du dazu aufgefordert wirst. Es werden keine API-Schlüssel benötigt — Claude Code übernimmt die Authentifizierung, und Generierungen ziehen von deinen Higgsfield-Plan-Credits. Bestätige, dass es funktioniert, mit claude mcp list.
Soll ich einen JPEG-Export oder den Figma MCP verwenden, um mein Design an Claude Code zu senden?
Verwende den Figma Dev Mode MCP, wenn du ein Figma-Abo hast — er übergibt strukturierten Design-Kontext (Komponenten, Variablen, Spacing), sodass der Code genauer passt. Verwende den Einzel-JPEG-Export, wenn du einen kostenlosen Plan hast; es funktioniert über die Bildverarbeitung des Modells, braucht aber mehr Korrektur-Prompts für Spacing und Farbe. Siehe den Übergabe-Abschnitt oben für beide Setups.
Was ist MCP in diesem Workflow?
MCP steht für Model Context Protocol — der offene Standard, der einem KI-Agenten wie Claude Code erlaubt, sich über eine konsistente Schnittstelle mit externen Tools zu verbinden. Sowohl Figma als auch Higgsfield stellen ihre Fähigkeiten Claude Code über MCP zur Verfügung, weshalb ein einziger Agent dein Design lesen und deine Assets in einer einzigen Sitzung generieren kann.
Welches KI-Modell hält Sci-Fi-Charaktere auf einer Landing Page konsistent?
Nano Banana Pro, Googles Gemini-gestütztes Bildmodell, ist auf Kontinuität und Charakterkonsistenz über eine Reihe von Bildern ausgelegt. Füttere es mit hochauflösenden Referenzbildern und expliziten identitätsbewahrenden Prompts ("halte das Gesicht exakt gleich wie die Referenz") und iteriere, statt dich auf einmalige Generierung zu verlassen. Für den vollständigen Asset-Durchlauf siehe den Konsistenz-Abschnitt oben.
Ist Cloudflare Pages wirklich kostenlos für diese Art von medienreicher Seite?
Ja — der kostenlose Tier von Cloudflare Pages umfasst ein globales CDN, automatisches HTTPS, unbegrenzte Bandbreite und 500 Builds pro Monat ohne Rechenzeitlimit, was eine einzelne Landing Page bequem abdeckt. Die einzigen Kosten sind die Domain selbst, etwa 10 $/Jahr für eine .com. Optimiere dein Video und deine PNGs vor dem Deploy für schnelle reale Ladezeiten.
Lass Uns Zusammenarbeiten
Du suchst nach dem Aufbau von KI-Systemen, der Automatisierung von Workflows oder der Skalierung deiner Tech-Infrastruktur? Ich helfe gerne.
- Fiverr (Maßanfertigungen & Integrationen): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (Enterprise-Lösungen): ramlit.com
- ColorPark (Design & Branding): colorpark.io
- xCyberSecurity (Sicherheitsdienste): xcybersecurity.io
