Baue aus einem Satz eine funktionierende App — von der Idee zum React-Code

Der App Builder verwandelt einfachen Text in funktionierende App-Bildschirme, die du direkt in einem Geräterahmen ansehen, bearbeiten und schließlich als lauffähigen Code exportieren kannst. Du schreibst keine Zeile Code — du beschreibst, wofür die App da ist und welche Bildschirme du willst, und die App plant den gesamten Ablauf, befüllt sie mit realistischen Daten, baut jeden Bildschirm und verdrahtet die Navigation. Sie funktioniert für Smartphone (iOS/Android), Tablet und Desktop (Web). In dieser Anleitung gehen wir von einem Satz im Chat bis zu einem fertigen React- und React-Native-Projekt.

Was Sie brauchen

FilmMovie Studio installiert (macOS oder Windows).
Mindestens ein Generierungsanbieter in den Einstellungen konfiguriert (für etwaige Bilder in der App).
Eine grobe Vorstellung von deiner App — wofür sie da ist und welche paar Bildschirme sie braucht.

Schritt für Schritt

1
Workspace öffnen und Projekt anlegen
Starte FilmMovie Studio, klicke im Launchpad auf „Neues Projekt“, benenne es (z. B. „Fitness-App“) und bestätige. Der Workspace öffnet sich mit der Leinwand (Canvas) links und dem Chat-Panel rechts.
Film Movie StudioRendern
Infinite Photo VaultNeues Projekt
LaunchpadHubAlle Projekte
Zuletzt
project 1project 2project 3
Einstellungen
Film Movie Studio
Eine neue Art, Medien mit KI zu erstellen
Beschreibe, was du erstellen möchtest…
SkillsModelle
Tippe /, um KI-Skills zu entdecken
Short DramaE-commerceMusic VideoGamesDocumentary
Tipp: Der ganze App Builder lebt im Chat — es gibt keine Design-Tools zu lernen. Du beschreibst, und die App baut sich vor dir zusammen.
2
App-Idee mit /app-builder beschreiben
Wähle im Chatfeld den Skill /app-builder und beschreibe in eigenen Worten, was die App tun soll, z. B. „Ein Fitness-Tracker mit Home-Dashboard, einer Workout-Liste und einem Profil“. Zähle keine Komponenten auf — sag einfach, wofür die App da ist und welche 1–5 Bildschirme du willst.
Film Movie StudioRendern
Infinite Photo VaultNeues Projekt
LaunchpadHubAlle Projekte
Zuletzt
project 1project 2project 3
Einstellungen
Film Movie Studio
Eine neue Art, Medien mit KI zu erstellen
Beschreibe, was du erstellen möchtest…
SkillsModelle
Tippe /, um KI-Skills zu entdecken
Short DramaE-commerceMusic VideoGamesDocumentary
Tipp: Beschreibe den Zweck und die Bildschirme, nicht Buttons und Karten. Die App wählt die passenden Komponenten und das Layout selbst.
3
Gerät wählen — Smartphone, Tablet oder Desktop
Die App fragt, welches Format gebaut und welcher Look verwendet werden soll. Wähle Smartphone für eine iOS/Android-App, Tablet oder Desktop für ein Web-Dashboard. Wähle außerdem ein Farbthema (z. B. Indigo, Smaragd, Dunkel).
Film Movie StudioRendern
Infinite Photo VaultNeues Projekt
LaunchpadHubAlle Projekte
Zuletzt
project 1project 2project 3
Einstellungen
Film Movie Studio
Eine neue Art, Medien mit KI zu erstellen
Beschreibe, was du erstellen möchtest…
SkillsModelle
Tippe /, um KI-Skills zu entdecken
Short DramaE-commerceMusic VideoGamesDocumentary
Tipp: Wörter wie „Dashboard“ oder „Web-App“ bedeuten Desktop; „iPad“ bedeutet Tablet; ansonsten ist Smartphone die Vorgabe.
4
Die App-Karte mit mehreren Bildschirmen auf der Leinwand entstehen sehen
Die KI plant die Bildschirme (z. B. Login → Home → Profil), befüllt sie mit realistischen Daten und baut jeden Bildschirm als Komponentenbaum. Eine App-Karte landet auf der Leinwand mit einem Geräterahmen und einer Live-Vorschau jedes Bildschirms.
Film Movie StudioRendern
Infinite Photo VaultNeues Projekt
Dateien
frame_1.pngframe_2.pngframe_3.png
Bild hierher ziehen oder zum Hochladen klicken
reference.png
Chat
Atemberaubende Berglandschaft zur goldenen Stunde, dramatische Gipfel, Spiegelung in einem Alpensee, professionelle Landschaftsfotografie, hohe Detailtreue
/app-builder → working…
Beschreibe, was du erstellen möchtest…
SkillsModelle
5
Auf Vorschau klicken und durch die Bildschirme navigieren
Klicke auf „Vorschau“ auf der App-Karte — der Geräterahmen öffnet sich. Tippe auf Buttons, Listenzeilen und die untere Navigation, um zwischen den Bildschirmen zu wechseln, genau wie in einer echten App — die Navigation ist bereits verdrahtet.
Film Movie StudioRendern
Infinite Photo VaultNeues Projekt
Dateien
frame_1.pngframe_2.pngframe_3.pngframe_4.png
60%
prompt
frame_01.png
Remix
frame_02.png
Remix
frame_03.png
Remix
frame_04.png
Wird generiert… 80%
Remix
output
Chat
Atemberaubende Berglandschaft zur goldenen Stunde, dramatische Gipfel, Spiegelung in einem Alpensee, professionelle Landschaftsfotografie, hohe Detailtreue
/app-builder Hier ist der Plan — freigeben und fortfahren?
FreigebenAnpassenNeu generieren
Tipp: Die Daten sind echte Seed-Daten, sodass Listen, Diagramme und Profile mit Inhalt gefüllt sind, nicht leere graue Kästen.
6
Per Chat verfeinern — einen Bildschirm hinzufügen
Tippe in den Chat, z. B. „Füge einen Einstellungs-Bildschirm mit Benachrichtigungen und einem Abmelden-Button hinzu“. Eine neue Bildschirm-Karte erscheint, automatisch in die Navigation der anderen Bildschirme eingebunden.
Film Movie StudioRendern
Infinite Photo VaultNeues Projekt
Einstellungen
KontoDarstellungAnbieterNutzungPreise
Anbieter
kie.aisk-••••••••••••
deAPIsk-••••••••••••
OpenRoutersk-••••••••••••
OpenAIAPI-Schlüssel einfügenTest
ElevenLabsAPI-Schlüssel einfügenTest
Z.AIAPI-Schlüssel einfügenTest
7
Daten binden und ein Formular hinzufügen
Bitte z. B. „Füge ein Registrierungsformular hinzu, das in users speichert“ oder „Lass den Feed aus einer posts-Sammlung ziehen“. Die App deklariert Datenmodelle und bindet Listen und Formulare, sodass Eingaben erfasst werden und Feeds sich live aus echten Daten direkt in der Vorschau füllen.
Film Movie StudioRendern
Infinite Photo VaultNeues Projekt
Dateien
frame_1.pngframe_2.pngframe_3.pngframe_4.pngframe_5.pngframe_6.png
60%
prompt
frame_01.png
Remix
frame_02.png
Remix
frame_03.png
Remix
frame_04.png
Wird generiert… 80%
Remix
output
Chat
Atemberaubende Berglandschaft zur goldenen Stunde, dramatische Gipfel, Spiegelung in einem Alpensee, professionelle Landschaftsfotografie, hohe Detailtreue
/app-builder → working…
Beschreibe, was du erstellen möchtest…
SkillsModelle
Tipp: Listen und Feeds kommen aus Sammlungen, also wirken sie gefüllt und aktualisieren sich, wenn du ein Formular absendest.
8
Lauffähigen React- / React-Native-Code exportieren
Wenn du zufrieden bist, bitte um den Export. Die App erzeugt ein lauffähiges Vite + React (Web)-Projekt und ein Expo + React Native-Projekt in einem Ordner, den du wählst. Öffne es in deinem Editor und starte es.
Film Movie StudioRendern
Infinite Photo VaultNeues Projekt
Dateien
frame_1.pngframe_2.pngframe_3.png
Finaler Render1080p · MP4
SpeichernDateien
Chat
Atemberaubende Berglandschaft zur goldenen Stunde, dramatische Gipfel, Spiegelung in einem Alpensee, professionelle Landschaftsfotografie, hohe Detailtreue
/app-builder → working…
Beschreibe, was du erstellen möchtest…
SkillsModelle
Tipp: Wähle nur Web für eine Desktop-App, nur Native für eine Smartphone-App, oder beides — standardmäßig werden beide exportiert.

Was Sie erhalten

Aus einem Satz hast du eine funktionierende App mit mehreren Bildschirmen: geplante Bildschirme, echte Seed-Daten, verdrahtete Navigation und eine Live-Vorschau im Geräterahmen — plus ein lauffähiges React- und React-Native-Projekt, bereit zum Öffnen in deinem Editor. Dasselbe Muster — Idee beschreiben → Gerät wählen → Leinwand beobachten → per Chat verfeinern → exportieren — funktioniert für Smartphone, Tablet und Desktop.

Profi-Tipps

Plane alle Bildschirme im Voraus — nenne in einer Nachricht jeden gewünschten Bildschirm, dann wird die Navigation korrekt verdrahtet.
Du kannst einen Screenshot einer App, die dir gefällt, anhängen und um Nachbau von Layout und Farben bitten.
Alles läuft live in der Vorschau mit Seed-Daten — kein Backend nötig, bis du beim Export ausdrücklich eines verlangst.

Probieren Sie es selbst aus

FilmMovie Studio ist eine Desktop-App, die Sie von der Idee bis zum fertigen Export begleitet. Laden Sie sie herunter und legen Sie los.

FilmMovie Studio holen

Baue aus einem Satz eine funktionierende App — von der Idee zum React-Code

Workspace öffnen und Projekt anlegen

Film Movie Studio

App-Idee mit /app-builder beschreiben

Film Movie Studio

Gerät wählen — Smartphone, Tablet oder Desktop

Film Movie Studio

Die App-Karte mit mehreren Bildschirmen auf der Leinwand entstehen sehen

Auf Vorschau klicken und durch die Bildschirme navigieren

Per Chat verfeinern — einen Bildschirm hinzufügen

Anbieter

Daten binden und ein Formular hinzufügen

Lauffähigen React- / React-Native-Code exportieren

Dein erstes Projekt: vom Launchpad bis zum fertigen Export

Inszeniere ein Kurzdrama: von der Idee zu gerenderten Episoden

Produktfotos für den Onlineshop: Hauptbild, Hero, Detail und Lifestyle in Minuten