Eine animierte App mit Higgsfield und Fable 5.1 bauen

Wir wissen, warum Apps wie Duolingo oder Finch funktionieren, und es liegt selten an der Funktionsliste: Auf dem Bildschirm lebt eine Figur. Solche Animationen brauchten bislang Illustration und Motion Design — für Einzelentwickler war die Tür damit zu.

Das gilt nicht mehr. Generative Bild- und Videomodelle füllen diese Lücke, und vor allem können Sie sie aus Ihrem Coding-Agenten heraus aufrufen. Dieser Artikel geht den kompletten Ablauf durch, von der Figur bis zur Vorschau auf dem Telefon.

Die Methode habe ich aus Jason Lees Aufnahme Watch Me Vibe Code an Animated App with Claude Fable 5.1 + Seedance 2.5 weiterentwickelt und an meine Arbeitsweise angepasst.

Die Bausteine

Baustein	Aufgabe
Coding-Agent (ein designstarkes Modell wie Fable 5.1)	Planung, Code, Designentscheidungen
Higgsfield MCP	Bild- und Videoerzeugung aus dem Agenten heraus
Bildmodell	Figur und Hintergrund
Videomodell (etwa Seedance)	das erzeugte Asset animieren
LottieFiles	fertige Mikroanimationen (Konfetti, Häkchen)
React Native + Expo	die App selbst und die Vorschau auf dem Telefon

Entscheidend ist der MCP-Connector. Ohne ihn lautet die Schleife: Agent fragen, zum Bildwerkzeug wechseln, Prompt schreiben, erzeugen, herunterladen, ins Projekt kopieren, zurückkehren. Mit ihm bleibt alles in einer Sitzung: Sie beschreiben, was Sie wollen, das Modell schreibt den Prompt, und die erzeugte Datei landet direkt im Projekt.

1. Kontext per Bildschirmaufnahme geben

Der wertvollste Kniff kostet nichts: Nehmen Sie die Referenz-App als Bildschirmvideo auf und geben Sie es dem Modell.

Warum das so gut wirkt? Weil eine App schwer zu beschreiben ist. „Auf dem Startbildschirm ist eine Figur, darunter Aufgabenkarten, beim Abhaken kommt Konfetti" vermittelt ein Zehntel dessen, was vierzig Sekunden Aufnahme zeigen. Das Modell sieht Seiten, Schaltflächenverhalten und Übergänge.

Geben Sie drei Dinge:

• eine Bildschirmaufnahme der Referenz-App (Hauptablauf und Onboarding getrennt),
• eine Bildreferenz für die Figur,
• den Link zur Store-Seite — das Modell kann Funktionsliste und Rezensionen lesen. Rezensionen sind besonders wertvoll: Dort steht, welche Funktion viele wollen und nicht bekommen.

Verlangen Sie dann einen Plan, keinen Code: „Liste zuerst Funktionen und Bildschirme auf, schreibe noch nichts." Eine Sitzung, die in der ersten Runde Code erzeugt, baut sehr schnell das falsche Gerüst.

2. Figur und Hintergrund erzeugen

Der häufigste Fehler: ein Bild erzeugen und weitergehen. Eine App braucht dieselbe Figur in Dutzenden Zuständen: fröhlich, traurig, müde, feiernd.

Die Reihenfolge, die ich empfehle:

1. Auf eine Referenz festlegen. Stil, Palette und Proportionen entscheiden sich hier.
2. Bereinigen lassen. Referenzbilder tragen Unerwünschtes mit sich — Sticker-Konturen, Sterne, Herzen. Lassen Sie es entfernen, sonst wandert alles in die App.
3. Den Ausdruckssatz in einem Durchgang verlangen. „Dieselbe Figur in diesen sechs Ausdrücken" ist günstiger und konsistenter als sechs Einzelerzeugungen.
4. Den Hintergrund gegen die Figur erzeugen. Passt der Stil nicht, wirkt die App wie eine Collage. Übergeben Sie die Figur selbst als Referenz.

Auch das Farbthema aus der Figur abzuleiten funktioniert gut: Stammt die Palette aus derselben Familie, ordnet sich das Design von selbst.

3. Erst das Gerüst, dann die Animation

Die Reihenfolge zählt. Animationserzeugung dauert Minuten — für ein einzelnes Asset bis zu zehn. Lassen Sie den Agenten in dieser Zeit nicht warten.

Die richtige Reihenfolge:

1. Alle Bildschirme mit statischen Assets bauen.
2. Den Onboarding-Ablauf bauen (der meistvernachlässigte Teil einer App und der mit dem größten Einfluss auf die Conversion).
3. Die Animationserzeugung starten.
4. Während des Wartens die Backend-Arbeit erledigen lassen: Datenmodell, Zustandsverwaltung, Persistenz.

Punkt vier beschleunigt den Ablauf spürbar. Wartezeit auf generatives Video muss keine verlorene Zeit sein.

4. Die Animation beschreiben

„Animiere die Figur" funktioniert nicht; heraus kommt meist Zittern mit kaputter Schleife. Ein funktionierender Prompt ist eine Choreografie:

„Die Figur geht von links nach rechts, hält an, dreht sich zur Bildmitte, nimmt eine Kaffeetasse, trinkt, stellt sie ab und geht zum Ausgangspunkt zurück. Im Hintergrund bleiben die Wolken still, Wasser und Pflanzen bewegen sich."

Drei Regeln stecken darin:

• Anfang und Ende am selben Punkt. Nur so wirkt eine Schleife nahtlos.
• Sagen Sie auch, was sich nicht bewegen soll. Ein dauernd driftender Hintergrund ermüdet in einer App.
• Ein Ereignis beschreiben. Drei Verhaltensweisen bedeuten drei Assets.

Für Korrekturen schlägt eine kurze Bildschirmaufnahme mit gesprochenem Kommentar Screenshots: Mit dem Mauszeiger zu zeigen und dabei zu sagen „hier zittert es, diese Schleife hält nicht" geht deutlich schneller als Pfeile zu zeichnen.

5. Nicht jede Animation erzeugen lassen

Für Standard-Mikroanimationen — Konfetti, Häkchen, Ladeanzeigen — ein generatives Modell zu bemühen, ist Verschwendung. Bibliotheken wie LottieFiles haben sie fertig, mit anpassbarer Farbe und Geschwindigkeit; Sie passen sie an Ihre Palette an und laden sie herunter.

Die Trennlinie: Was zur Figur gehört, wird erzeugt; was zur Oberfläche gehört, nimmt man fertig. Lottie-Dateien sind vektorbasiert, bleiben klein und in jeder Auflösung scharf, während erzeugtes Video schwer und auflösungsgebunden ist.

6. Vorschau auf dem Telefon: Expo Go oder EAS Build?

Das Mockup im Browser täuscht. Wie sich eine Animation anfühlt, zeigt sich erst auf dem Gerät. Zwei Wege:

Expo Go — schnell und kostenlos. Reicht, um Seiten durchzugehen und den Ablauf zu spüren. Datenbank und Social Login funktionieren allerdings nicht.

EAS Build — zeigt die App, als käme sie aus dem Store; sie hat ein eigenes Symbol, echte Anmeldeabläufe funktionieren. Dafür braucht es ein (jährlich kostenpflichtiges) Apple-Entwicklerkonto und ein Expo-Konto.

Zum Ausprobieren Expo Go, für eine echte Veröffentlichung EAS Build. Den kompletten Store-Prozess habe ich in der Anleitung zur App-Veröffentlichung beschrieben.

Kosten und Erwartungen

Ein ehrlicher Rahmen:

• Bilderzeugungen sind günstig, Animationserzeugungen teuer und langsam. Legen Sie vorab fest, wie viele Animationen Sie wirklich brauchen — „jeder Bildschirm soll sich bewegen" ruiniert Budget und App zugleich.
• Das erste Ergebnis ist nicht brauchbar. Verrutschende Größen, nicht haltende Schleifen, abgeschnittene Ränder sind normal; eine Korrekturrunde gehört dazu.
• Dieser Ablauf löst Design und Assets. Das Produkt selbst — Datenmodell, Abos, Benachrichtigungen, Store-Prozess — bleibt gewöhnliche Softwarearbeit.

Und zum Kopieren: Ziehen Sie die Linie zwischen Referenz und Kopie vorab. Eine Bildschirmaufnahme dient dazu, den Aufbau eines Ablaufs zu lernen, nicht dazu, Bildschirme eins zu eins nachzubauen. Figur, Thema und Ton sollten Ihre sein.

Was das eigentlich bedeutet

Vor wenigen Jahren standen hier zwei Mauern: Illustration und Animation. Beides dauert lange zu lernen und ist teuer einzukaufen. Jetzt liegt beides in einer Chat-Sitzung und landet direkt im Projekt.

Der verbleibende Engpass ist Regie: zu wissen, was man will, Schlechtes zu erkennen, die Korrektur zu beschreiben. Es ist die Video-Variante des Satzes, den ich in meinen Vibe-Coding-Artikeln wiederhole: Die Entscheidungen liegen bei Ihnen, die Ausführung beim Modell.

Referenzvideos

• Watch Me Vibe Code an Animated App with Claude Fable 5.1 + Seedance 2.5 — eine durchgehende Aufnahme dieses Ablaufs.

Werkzeugnamen, Modellversionen und Preise ändern sich schnell; prüfen Sie sie vor dem Start in der aktuellen Dokumentation.

Häufig gestellte Fragen

Wofür ist der Higgsfield-MCP-Connector gut?

Er erlaubt, Bild- und Videoerzeugung aus dem Coding-Agenten heraus aufzurufen. Der Agent schreibt den Prompt selbst, und die erzeugte Datei landet direkt im Projekt — der Umweg über ein separates Werkzeug zum Erzeugen, Herunterladen und Kopieren entfällt.

Wie erstelle ich In-App-Animationen mit KI?

Figur und Hintergrund mit einem Bildmodell erzeugen, dann mit einem Videomodell animieren. Der Prompt muss wie eine Choreografie klingen: Anfang und Ende am selben Punkt, sagen was stillsteht, ein Ereignis pro Erzeugung. Für Oberflächenanimationen wie Konfetti nehmen Sie besser eine fertige Lottie-Datei.

Wie lange dauert eine Animationserzeugung?

Bilderzeugung dauert Sekunden, Animation Minuten — für ein einzelnes Asset bis zu zehn. Richten Sie den Ablauf danach aus: Erzeugung starten und den Agenten währenddessen am Backend arbeiten lassen.

Wie sehe ich die App auf dem Telefon?

Zwei Möglichkeiten. Expo Go ist kostenlos und schnell und reicht, um die Bildschirme durchzugehen, aber Datenbank und Social Login funktionieren nicht. EAS Build zeigt die App wie aus dem Store installiert; dafür brauchen Sie ein Apple-Entwicklerkonto und ein Expo-Konto.

Wie bleibt die Figur auf allen Bildschirmen gleich?

Auf ein Referenzbild festlegen, unerwünschte Elemente (Konturen, Verzierungen) entfernen lassen und die benötigten Ausdrücke in einem Durchgang gegen dieselbe Referenz erzeugen. Leiten Sie auch die Farbpalette der App aus der Figur ab; passen die Stile nicht, wirken die Bildschirme wie eine Collage.

Kopiere ich mit dieser Methode eine fremde App?

Referenzieren und Kopieren sind verschiedene Dinge. Eine Bildschirmaufnahme soll dem Modell zeigen, wie ein Ablauf aufgebaut ist, nicht Bildschirme eins zu eins reproduzieren. Figur, Thema und Ton sollten Ihre sein — rechtlich und damit das Produkt eine eigene Identität bekommt.