Vollständiges Tutorial: Erstellen Sie in 16 Minuten eine schöne mobile App mit Claude Code und Pencil

In This Article

Liebe Abonnenten, heute möchte ich Ihnen zeigen, wie Sie eine schöne mobile App erstellen, um Ihre Trainingseinheiten zu verfolgen. Früher war für die Entwicklung einer mobilen App ein Team von Ingenieuren erforderlich. Aber KI-Tools wie Claude Code und Pencil haben es Ihnen leicht gemacht, selbst eine schöne App zu entwickeln, auch wenn Sie nicht wissen, wie man programmiert. Sehen Sie sich mein Tutorial an, um zu sehen, wie ich das in nur 16 Minuten durchführe. Zeitstempel: (0:00) Was wir erstellen werden: Eine schöne mobile App, um Ihre Trainingseinheiten zu verfolgen (2:01) Schritt 1: Anforderungen mit Claude definieren (6:11) Schritt 2: Designs mit Pencil erstellen (8:56) Schritt 3: Erstellen Sie die App mit Claude Code (14:21). Holen Sie sich die App im App Store (15:19). Zusammenfassung aller drei Schritte. Sehen Sie sich jetzt auf YouTube an oder lesen Sie die schriftliche Anleitung unten. Ich bin stolz auf die Partnerschaft mit … GranolaGranola hat gerade Spaces gestartet – eine neue Möglichkeit für Ihr Team, Besprechungsnotizen zu organisieren und miteinander zu teilen. Sie können beispielsweise mit Ihren Interviews einen Bereich für „Benutzeranrufe“ erstellen, in dem jeder Fragen zu Benutzerbedürfnissen stellen kann. Mit den neuen APIs und MCP von Granola können Sie sogar Fragen direkt in Claude, ChatGPT oder Gemini stellen. Probieren Sie Granola kostenlos aus. Was wir erstellen werden: Eine mobile App zum Verfolgen Ihrer Trainingseinheiten. Wir leben in einer Zeit, in der es einfacher ist, Ihre eigene mobile App mit Vibe-Code zu erstellen, als eine bestehende zu finden, die Ihnen gefällt. Lassen Sie uns also eine App erstellen, die: Trainings erstellen kann, indem Sie eine Übung und dann die Anzahl der Sätze und Wiederholungen auswählen. Trainings live verfolgen, indem Sie auf jeden Übungssatz tippen, um ihn abzuschließen. Messen Sie den Fortschritt anhand eines Kalenders und Diagramms für jede Übung. Im Folgenden erkläre ich Ihnen, wie Sie die Übung in drei Schritten aufbauen.1. Definieren Sie die Anforderungen mit Claude. Bitten Sie Claude immer, Ihnen Fragen zu stellen, wenn Sie gemeinsam die Anforderungen definieren. Beginnen wir mit dem Einfügen dieser Aufforderung in Claude: Lassen Sie uns gemeinsam an den Anforderungen für eine mobile Fitness-App arbeiten. Ich möchte drei Bildschirme: Trainings hinzufügen/bearbeiten: Trainings erstellen und Übungen mit Sätzen und Wiederholungen hinzufügen. Trainingssitzung: Trainings in Echtzeit verfolgen, tippen, um Sätze abzuschließen. Kalender: Sehen Sie, an welchen Tagen Sie trainiert haben, und sehen Sie sich Trainingsdetails an. Dies sind die Grundlagen, aber lassen Sie uns gemeinsam an der Spezifikation arbeiten. Ich möchte, dass Sie sich über die Anforderungen im Klaren sind, und wenn Sie Fragen haben, stellen Sie diese in einer nummerierten Liste. Der wichtigste Teil dieser Aufforderung lautet: „Wenn Sie Fragen haben, stellen Sie diese in einer nummerierten Liste.“ Wenn ich Anforderungen mit Claude bespreche, füge ich diese Zeile immer hinzu, damit er mir Fragen stellen kann, um die Spezifikation zu verbessern. Hier ein paar Beispielfragen und -antworten:Claude: Möchten Sie einen Ruhetimer? Ich: Ja, lass es mich auch in den Einstellungen anpassen. Claude: Möchtest du automatisches Entladen nach fehlgeschlagenen Sätzen? Ich: Nein, lassen Sie es uns einfach halten. Nachdem Claude die Spezifikation in einen Zustand gebracht hat, mit dem Sie zufrieden sind, bitten Sie ihn: „Teilen Sie die Spezifikation in Design und technische Anforderungen auf. Gehen Sie bei den Designanforderungen nicht zu detailliert vor, damit sie Spielraum für Flexibilität haben.“ Fügen Sie die letzte Zeile ein, da Pencil (unser KI-Designer) besser im Design ist als Claude. 🙂 Lassen Sie uns das als nächstes behandeln. Je besser die Modelle werden, desto fauler werde ich in meinen Eingabeaufforderungen (und schlechter in der Rechtschreibung)2. Entwerfen Sie die mobilen Bildschirme mit PencilPencil hat nach unseren Anforderungen 8 wunderschöne Bildschirme von Grund auf erstellt. Hier geschieht die Magie. So erstellen Sie mit Pencil wunderschön gestaltete mobile Bildschirme anstelle von KI-Einsätzen: Lesen Sie mehr

You May Also Like

13 Trending Songs on TikTok in March 2026 (+ How to Use Them)

Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)

China’s Cybersecurity Agency Issues Security Warning About OpenClaw