Wie man mit KI eine Fitness-App erstellt

Bevor Sie etwas generieren, definieren Sie die erste Version klar. Fitness-Apps werden oft unübersichtlich, weil sie auf einmal Workouts, Ernährung, Coaching, Zahlungen, Wearables und Community-Funktionen abdecken wollen.

Für einen ersten Build sollte der Umfang klein bleiben. Eine praktische Start-App braucht normalerweise:

• einen Startbildschirm mit dem Fortschritt des Tages
• einen Bildschirm für das Workout-Log
• einen Verlauf- oder Kalenderbildschirm
• einen Profil- oder Einstellungsbildschirm
• eine Möglichkeit, Workouts zu erstellen oder zu bearbeiten

Legen Sie dann fest, welche Daten die App speichert. Für einen einfachen Fitness-Tracker können das sein:

• Benutzerprofil
• Workout-Name
• Übungsliste
• Sätze, Wiederholungen, Gewicht, Dauer oder Distanz
• Workout-Datum
• Notizen
• abgeschlossene Einheiten

Entscheiden Sie auch, ob Nutzer Konten brauchen. Wenn die App persönliche Historie geräteübergreifend speichert, ergibt eine Anmeldung Sinn. Wenn es nur ein Prototyp oder ein persönlicher Tracker im Offline-Stil ist, können Sie ohne Authentifizierung starten und sie später hinzufügen.

Wenn Sie für Coaching-Pläne oder Abonnements Gebühren verlangen möchten, notieren Sie das ebenfalls früh. Moremade hat einen integrierten Stripe-Connector für Checkout mit den von Ihnen festgelegten Preisen, aber fügen Sie Zahlungen nur hinzu, wenn die App sie in Version 1 wirklich braucht.

Moremade funktioniert am besten, wenn Sie die App in einfacher Sprache beschreiben. Für mobile Apps generiert es React Native mit Expo, und Sie können die App per Chat weiter verändern, während Sie die Live-Vorschau prüfen.

Ein schwacher Prompt ist meist zu vage, etwa „Erstelle eine Fitness-App“. Ein besserer Prompt erklärt die Zielgruppe, die wichtigsten Bildschirme, die zentralen Daten und den Interaktionsstil.

Verwenden Sie einen Prompt wie diesen:

Erstelle eine mobile Fitness-Tracking-App für Menschen, die Krafttraining protokollieren möchten. Verwende ein klares, einfaches Layout mit deutlichen Buttons und großer Schrift. Erstelle diese Bildschirme: Home, Workout loggen, Verlauf und Profil. Auf Home sollen der heutige Workout-Status und kurze Statistiken angezeigt werden. Auf Workout loggen soll der Nutzer Übungen, Sätze, Wiederholungen und Gewicht sowie Notizen und die Workout-Dauer hinzufügen können. Im Verlauf soll eine scrollbare Liste früherer Workouts mit Datum angezeigt werden. Im Profil sollen grundlegende Nutzerinformationen und Trainingsziele stehen. Starte mit Mock-Daten und mache die Navigation auf dem Smartphone einfach.

Ein solcher Prompt gibt der KI genug Struktur, um etwas Prüfbarkeit zu erzeugen, ohne jede kleine Implementierungsentscheidung vorzugeben.

Der erste Entwurf ist meist ein Ausgangspunkt, nicht die fertige App. Öffnen Sie die Live-Vorschau und prüfen Sie die App wie ein Produkt reviewer, nicht nur wie ein Builder.

Achten Sie auf praktische Probleme:

• Ist die wichtigste Aktion klar erkennbar?
• Kann ein Nutzer ein Workout in unter einer Minute protokollieren?
• Sind die Textgrößen auf dem Smartphone gut lesbar?
• Sind die Daten so gruppiert, wie Menschen tatsächlich trainieren?
• Gibt es zu viele Felder auf einem Bildschirm?

Moremade enthält einen visuellen Inspector, mit dem Sie ein Element auswählen und ändern können, und außerdem eine Code-Ansicht, wenn Sie den generierten Code direkt prüfen möchten.

Gute Folge-Prompts sind konkret. Zum Beispiel:

• „Ändere den Bildschirm Workout loggen so, dass jede Übung als Karte mit den Buttons Satz hinzufügen und Satz entfernen angezeigt wird. Halte das Layout kompakt für mobile Geräte.“
• „Füge dem Home-Bildschirm eine wöchentliche Fortschrittsübersicht hinzu, die absolvierte Workouts, Gesamtzahl der Sätze und die gesamte Workout-Zeit zeigt.“
• „Vereinfache die Navigation, indem du die Profil-Einstellungen in einen kleineren Bereich verschiebst und den Verlauf leichter scannbar machst, indem du Workouts nach Wochen gruppierst.“

Ändern Sie beim Verfeinern immer nur einen Bereich auf einmal. Wenn Sie visuelles Redesign, Datenänderungen und neue Funktionen in einer Nachricht anfordern, wird die Überprüfung schwieriger und Regressionen sind leichter zu übersehen.

Viele Fitness-Apps brauchen dauerhafte Daten. Wenn Nutzer ihre Workout-Historie speichern, geräteübergreifend teilen oder mit einem Konto verknüpfen möchten, fügen Sie ein Backend hinzu. Moremade enthält Supabase für Datenbank, Anmeldung und Dateispeicherung.

Ein sinnvoller Ablauf ist:

• mit Mock-Daten starten
• die Bildschirme und Abläufe validieren
• Supabase hinzufügen, wenn die Struktur passt

Für diese App ist Supabase nützlich, wenn Sie Folgendes brauchen:

• E-Mail- oder konto-basierte Anmeldung
• gespeicherte Workout-Historie
• nutzerspezifische Ziele
• Profildaten
• gespeicherte Fortschritte über die Zeit

Sie könnten zum Beispiel Folgendes anfordern:

• „Verbinde diese App mit Supabase. Füge Anmeldung hinzu, speichere Workouts pro Nutzer und sichere Übungseinträge mit Datum, Sätzen, Wiederholungen, Gewicht, Dauer und Notizen.“

Fügen Sie Stripe nur hinzu, wenn Sie etwas verkaufen, etwa ein Coaching-Abonnement oder einen kostenpflichtigen Trainingsplan. Moremade hat einen integrierten Stripe-Connector für Checkout mit den von Ihnen festgelegten Preisen. Wenn die App nur ein persönlicher Tracker ist, lassen Sie Zahlungen weg und halten Sie das Produkt einfacher.

An dieser Stelle sollten Sie auch an die Datenstruktur denken. Wenn Workout-Einträge viele Übungen enthalten können und jede Übung viele Sätze, sagen Sie das in Ihren Anweisungen klar, damit die generierte App die Daten so modelliert, wie Sie es erwarten.

Fitness-Apps werden in Bewegung genutzt, oft einhändig, in hellen Studios oder zwischen Sätzen. Mobiles Testen ist hier wichtiger als bei vielen internen Tools.

Gehen Sie häufige Nutzeraufgaben durch:

• ein Workout starten
• eine Übung hinzufügen
• Sätze schnell aufzeichnen
• einen falschen Eintrag korrigieren
• ein Workout beenden
• die vorherige Einheit ansehen

Prüfen Sie typische Mobile-Probleme:

• Buttons zu klein für Daumen
• zu viel Text auf einem Bildschirm
• schlechter Kontrast bei hellem Licht
• Formulare, die sich bei wiederholter Eingabe langsam anfühlen
• wichtige Statistiken zu weit unten auf der Seite

Wenn sich ein Ablauf umständlich anfühlt, ändern Sie die konkrete Interaktion. Wenn das Protokollieren von Wiederholungen und Gewicht zu langsam ist, fragen Sie nach größeren Eingabesteuerelementen, weniger Klicks oder einem schnelleren Muster zum Hinzufügen von Sätzen.

Da Moremade echten React Native- (Expo-)Code für mobile Apps generiert, sind Sie nicht auf ein geschlossenes Mockup beschränkt. Sie können den Quellcode jederzeit als ZIP exportieren oder auf GitHub pushen, wenn Sie außerhalb des Tools weiterentwickeln möchten.

Sobald die grundlegende Erfahrung funktioniert, veröffentlichen Sie sie. Moremade ermöglicht die Veröffentlichung mit einem Klick auf eine kostenlose yourname.moremade.ai-Subdomain. Das ist nützlich, um einen funktionierenden Prototypen, eine interne Prüfung oder frühes Nutzerfeedback zu teilen.

Wenn Sie einen kostenpflichtigen Plan nutzen, können Sie eine eigene Domain verbinden. Domains können auch direkt in Moremade gekauft werden.

Vor der Veröffentlichung sollten Sie einen kurzen Release-Check durchführen:

• prüfen, ob Bildschirmentitel und Labels konsistent sind
• Platzhalterinhalte entfernen, die Sie nicht mehr brauchen
• sicherstellen, dass Mock-Daten ersetzt wurden, falls echte Nutzerdaten nötig sind
• prüfen, ob die Anmeldung funktioniert, falls sie aktiviert ist
• prüfen, ob der Checkout funktioniert, falls Sie Stripe hinzugefügt haben
• kontrollieren, dass die Navigation Nutzer nach dem Speichern wieder an den richtigen Ort führt

Wenn Sie die Codebasis für Ihr eigenes Repository oder den Team-Workflow brauchen, exportieren Sie den gesamten Quellcode als ZIP oder pushen Sie ihn auf GitHub. Moremade bindet Sie für den generierten App-Code nicht an eine proprietäre Laufzeitumgebung.

Das häufigste Problem ist, zu breit zu starten. Ein nützlicher Fitness-Tracker ist besser als eine halbfertige Trainingsplattform.

Vermeiden Sie diese Fehler:

• Vage Prompts schreiben. „Erstelle eine Fitness-App“ ist zu offen. Nennen Sie Bildschirme, Nutzer und die genaue Art des Trackings.
• Konten zu früh hinzufügen. Starten Sie mit Mock-Daten, es sei denn, geräteübergreifende Historie ist von Anfang an unverzichtbar.
• Zahlungen ohne echtes Bezahl-Feature hinzufügen. Stripe sollte ein echtes Angebot unterstützen, nicht nur existieren, weil der Connector verfügbar ist.
• Den Log-Bildschirm überladen. Wenn Nutzer Daten zwischen den Sätzen eingeben, ist Geschwindigkeit wichtiger als visuelle Komplexität.
• Zu viele Dinge pro Prompt ändern. Kleinere Überarbeitungen sind leichter zu prüfen und brechen frühere Arbeit seltener.
• Das Testen auf dem Smartphone auslassen. Ein Layout, das in der Desktop-Vorschau gut aussieht, kann auf einem kleinen Bildschirm trotzdem unpraktisch sein.

Achten Sie auch auf die Nutzung. Moremade misst Arbeit in Build Units. Ein erster Website-Build kostet etwa 8 Units und eine kleine Bearbeitung etwa 1. Das gibt Ihnen ein grobes Gefühl für die Iterationskosten, während Sie die App verfeinern.