FilmoTvor.AI
Zurück zu den Tutorials

Apps

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

8 Min. LesezeitFortgeschritten/app-builder
Film Movie StudioRendern
Baue aus einem Satz eine fu…Neues Projekt
60%
frame_01.png1024²
RemixVariationen
frame_02.png1024²
RemixVariationen
frame_03.png1024²
RemixVariationen

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. 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
    Workspace öffnen und Projek…Neues Projekt

    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. 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
    App-Idee mit /app-builder b…Neues Projekt

    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. 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
    Gerät wählen — Smartphone, …Neues Projekt

    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. 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
    Die App-Karte mit mehreren …Neues Projekt

    Bild hierher ziehen oder zum Hochladen klicken

    reference.png
  5. 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
    Auf Vorschau klicken und du…Neues Projekt
    60%
    frame_01.png1024²
    RemixVariationen
    frame_02.png1024²
    RemixVariationen
    frame_03.png1024²
    RemixVariationen
    frame_04.png1024²
    Wird generiert… 80%
    RemixVariationen
    Tipp: Die Daten sind echte Seed-Daten, sodass Listen, Diagramme und Profile mit Inhalt gefüllt sind, nicht leere graue Kästen.
  6. 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
    Per Chat verfeinern — einen…Neues 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. 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
    Daten binden und ein Formul…Neues Projekt
    60%
    frame_01.png1024²
    RemixVariationen
    frame_02.png1024²
    RemixVariationen
    frame_03.png1024²
    RemixVariationen
    frame_04.png1024²
    RemixVariationen
    frame_05.png1024²
    RemixVariationen
    frame_06.png1024²
    Wird generiert… 61%
    RemixVariationen
    Tipp: Listen und Feeds kommen aus Sammlungen, also wirken sie gefüllt und aktualisieren sich, wenn du ein Formular absendest.
  8. 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
    Lauffähigen React- / React-…Neues Projekt
    Finaler Render1080p · MP4
    SpeichernDateien
    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

Weitere Tutorials

Erste Schritte

Dein erstes Projekt: vom Launchpad bis zum fertigen Export

Video

Inszeniere ein Kurzdrama: von der Idee zu gerenderten Episoden

E-Commerce

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