Wie man mit KI eine Mobile App erstellt

Bevor Sie einen KI-Builder öffnen, schreiben Sie die Grundlagen in einfacher Sprache auf.

Halten Sie es kurz:

• für wen die App gedacht ist
• welche eine Hauptaufgabe sie unterstützt
• welche 3 bis 5 Bildschirme sie zuerst braucht
• welche Daten jeder Bildschirm anzeigt oder erfasst
• ob Nutzer Konten benötigen
• ob Zahlungen nötig sind

Beispiel für einen einfachen Habit-Tracker:

• Nutzer: Personen, die tägliche Gewohnheiten verfolgen
• Hauptaufgabe: Gewohnheiten jeden Tag als erledigt markieren
• Bildschirme: Startseite, Detailansicht der Gewohnheit, Gewohnheit hinzufügen, Profil
• Daten: Name der Gewohnheit, Zielhäufigkeit, Verlauf der Erledigungen
• Konten: ja, wenn der Fortschritt geräteübergreifend synchronisiert werden soll
• Zahlungen: nein, außer Sie planen eine kostenpflichtige Stufe

Dieser Schritt ist wichtig, weil KI mit klaren Vorgaben besser arbeitet als mit vagen Ideen wie „Erstelle mir eine Fitness-App“."

In Moremade beschreiben Sie die App in natürlicher Sprache, und der KI-Agent schreibt den Quellcode. Mobile Apps werden als React-Native-Apps mit Expo erstellt.

Ihr erster Prompt sollte Folgendes abdecken:

• den Zweck der App
• die Zielgruppe
• die erforderlichen Bildschirme
• die wichtigsten Aktionen auf jedem Bildschirm
• den visuellen Stil
• was noch nicht enthalten sein soll

Halten Sie die erste Version bewusst klein. Bitten Sie um einen brauchbaren Entwurf, nicht um das fertige Produkt.

Erstelle eine Mobile App für iPhone und Android mit dem Namen Habit Day. Sie hilft Nutzern, tägliche Gewohnheiten zu verfolgen. Erstelle vier Bildschirme: Startseite, Detailansicht der Gewohnheit, Gewohnheit hinzufügen und Profil. Auf der Startseite sollen die heutigen Gewohnheiten mit einem klaren Button zum Abschließen angezeigt werden. Die Detailansicht der Gewohnheit soll den Namen der Gewohnheit, die Zielhäufigkeit, Notizen und den aktuellen Verlauf der Erledigungen zeigen. Auf „Gewohnheit hinzufügen“ soll der Nutzer einen Namen eingeben, täglich oder wöchentlich auswählen und speichern können. Verwende ein klares, einfaches Layout mit großen Touch-Zielen und neutralen Farben. Füge vorerst keine Zahlungen, Social Features oder Benachrichtigungen hinzu.

Dieses Detailniveau führt meist zu einem deutlich besseren ersten Ergebnis als eine Ein-Satz-Anfrage.

Nach dem ersten Build prüfen Sie die Live-Vorschau so, wie ein Nutzer die App sehen würde. Achten Sie auf fehlende Zustände, unklare Beschriftungen, ungünstige Abstände und Probleme bei der Navigation.

Moremade erlaubt Änderungen per Chat und bietet außerdem einen visuellen Inspektor sowie eine Code-Ansicht. Nutzen Sie den visuellen Inspektor, wenn ein bestimmtes Element nicht stimmt, etwa die Button-Größe oder der Innenabstand. Nutzen Sie den Chat, wenn die Änderung Verhalten oder Layout über mehrere Bildschirme hinweg betrifft.

Gute Folge-Prompts sind konkret. Zum Beispiel:

• „Verschiebe auf dem Startbildschirm den Button zum Hinzufügen einer Gewohnheit an eine feste Schaltfläche am unteren Rand und zeige erledigte Gewohnheiten unter den nicht erledigten an.“
• „Füge auf der Startseite einen Empty State hinzu, der erklärt, was vor der ersten Gewohnheit zu tun ist, mit einem Button, der ‚Gewohnheit hinzufügen‘ öffnet.“
• „Vereinfache den Profilbildschirm: Entferne Avatar-Platzhalter und zeige nur Name, E-Mail und einen Abmelde-Button.“

Kurze Überarbeitungsschleifen funktionieren am besten. Nehmen Sie eine Gruppe zusammenhängender Änderungen vor, prüfen Sie die Vorschau erneut und machen Sie dann weiter.

Ein erster App-Entwurf braucht nicht immer ein Backend. Wenn die App nur ein Prototyp oder eine lokale Demo ist, können Sie den Ablauf oft schon validieren, bevor Sie Konten oder Zahlungen hinzufügen.

Wenn Sie Backend-Funktionen benötigen, bietet Moremade integrierte Verbindungen für Supabase und Stripe.

Verwenden Sie Supabase, wenn Sie Folgendes brauchen:

• Nutzeranmeldung
• eine Datenbank für App-Daten
• Dateispeicher

Typische Fälle sind Aufgaben-Apps mit gespeichertem Fortschritt, Marktplätze mit Nutzerkonten oder interne Tools, bei denen Daten dauerhaft gespeichert werden müssen.

Verwenden Sie Stripe, wenn Sie Folgendes brauchen:

• bezahlte Abonnements
• Einmalzahlungen
• Checkout mit von Ihnen festgelegten Preisen

Fügen Sie Stripe nicht hinzu, wenn es im Nutzerfluss keinen echten Zahlungsschritt gibt.

Eine praktische Anweisung könnte lauten:

• „Füge die E-Mail-Anmeldung mit Supabase hinzu und speichere Gewohnheiten pro Nutzer, damit jede Person nur ihre eigenen Daten sieht.“
• „Füge einen Stripe-Checkout-Bildschirm für einen Premium-Plan hinzu, aber lass die kostenlose Version ohne Zahlung nutzbar.“

Fügen Sie diese Bausteine erst hinzu, wenn die Kernbildschirme funktionieren. Sonst debuggen Sie Produktumfang und Integration gleichzeitig.

Eine Mobile App, die in einem browsergroßen Rahmen gut aussieht, kann auf einem echten Gerät trotzdem scheitern.

Prüfen Sie möglichst die Grundlagen auf iPhone und Android:

• Größe der Touch-Ziele
• Textumbrüche auf kleineren Bildschirmen
• Tastatur, die Formularfelder überdeckt
• lange Listen und Scrollverhalten
• Lade- und Empty States
• Zurück-Navigation

Da Moremade Mobile Apps in React Native mit Expo erstellt, arbeiten Sie auf eine echte Codebasis hin und nicht nur auf ein Mockup. Deshalb lohnt sich das Testen auf Geräten frühzeitig.

Notieren Sie beim Testen konkrete Fehlerbehebungen:

• „Der Speichern-Button ist verborgen, wenn sich die Tastatur auf ‚Gewohnheit hinzufügen‘ öffnet. Halte den Button über der Tastatur sichtbar.“
• „Der Bildschirm mit den Gewohnheitsdetails braucht mehr Abstand zwischen dem Notizfeld und der Liste mit dem Erledigungsverlauf.“
• „Auf Android sollte der Titel in der Kopfzeile kürzer sein und nicht in zwei Zeilen umbrechen.“

An diesem Punkt fühlt sich die App meist schon deutlich solider an.

Wenn Sie eine Version haben, die sich zu teilen lohnt, können Sie sie aus Moremade veröffentlichen.

Was Moremade bietet:

• Veröffentlichung mit einem Klick auf eine kostenlose yourname.moremade.ai-Subdomain
• Verbindung einer eigenen Domain in kostenpflichtigen Plänen
• Domain-Kauf direkt in Moremade
• ZIP-Export des vollständigen Quellcodes jederzeit
• Push zu GitHub für den Quellcode

Für interne Reviews oder frühes Feedback reicht die kostenlose Subdomain meist aus. Wenn die App Teil eines Kundenprojekts oder eines öffentlichen Launches ist, nutzen Sie einen kostenpflichtigen Plan und verbinden Sie eine eigene Domain.

Die Versionshistorie ist in den Standard- und Pro-Plänen verfügbar, was hilfreich ist, sobald mehrere Änderungsrunden beginnen.

Auch wenn Sie aus Moremade veröffentlichen, sind Sie nicht daran gebunden. Der Quellcode kann als ZIP exportiert oder zu GitHub gepusht werden.

Die meisten Probleme entstehen durch Umfang und unklare Anweisungen, nicht durch das Tool selbst.

Achten Sie auf diese Fehler:

• in der ersten Anfrage zu viel verlangen
• Prototyp-Ziele mit Produktionsanforderungen vermischen
• Anmeldung und Zahlungen hinzufügen, bevor der Kernablauf funktioniert
• Design-Feedback wie „Mach es besser“ geben, statt das Problem zu benennen
• nicht auf einem echten Telefon testen
• Randfälle vergessen, etwa leere Listen, fehlerhafte Formulareingaben und langsame Ladezustände

Ein besserer Prozess ist:

1. die kleinste nützliche Version bauen
2. die Vorschau sorgfältig prüfen
3. mit konkreten Prompts verfeinern
4. Daten oder Zahlungen nur bei Bedarf hinzufügen
5. den Code exportieren, sobald die Richtung stabil ist

Dieser Ansatz hält die App verständlich und reduziert Nacharbeit.