Tutorial: In 15 Minuten zur eigenen App (1/2)

Bild: ChatGPT

Noch vor Kurzem brauchtest du Programmierkenntnisse, um dir eine eigenes App zu bauen. Heute genügt ein Satz in Alltagssprache. In diesem Tutorial baust du mit Codex, dem Coding-Agenten in ChatGPT (also einem KI-Werkzeug, das eigenständig Software schreibt und testet), deine erste eigenen App: Einen QR-Code-Generator. Und zwar ohne selbst eine Zeile Code zu tippen.

Dies ist der Auftakt zum praktischen Teil unserer Vibe-Coding-Serie. Vibe Coding bedeutet, dass du in Alltagssprache beschreibst, was entstehen soll, und die KI den passenden Code schreibt. Wie unser Autor Nik Thomi als kompletter Laie damit anfing, liest du im Erfahrungsbericht «Wie mich Claude Code in eine neue Sucht getrieben hat». Dort war Claude Code das Werkzeug, hier zeigen wir dir den günstigeren Einstieg mit ChatGPT. Das Tutorial selbst besteht aus zwei Teilen. In Teil 1 baust du die App, in Teil 2 stellst du sie online.

In Kürze:

• Mit Codex in der ChatGPT-Desktop-App baust du ein kleines Tool wie einen QR-Code-Generator per Textbefehl, ohne zu programmieren.

• Tests sind kostenlos möglich, für brauchbare Resultate benötigst du aber mindestens einen Go-Plan von ChatGPT(rund CHF 7.- im Monat).

Schritt 1: Das brauchst du

Codex steckt seit Juli 2026 direkt in der ChatGPT-Desktop-App für macOS und Windows. Du brauchst also nur diese App und ein ChatGPT-Konto. Die App kannst du hier runterladen.

Grundsätzlich kannst du Codex im kostenlosen Plan ausprobieren, für einen ersten Versuch reicht das. Sobald du aber eine komplette App entwickeln willst, ist das Gratis-Kontingent meist schnell aufgebraucht, und du musst warten, bis dein Nutzungslimit zurückgesetzt wird. Für dieses Tutorial empfehlen wir deshalb mindestens den ChatGPT Go-Plan. In der Schweiz kostet er rund CHF 7.- im Monat und reicht für ein kleines Projekt wie unseren Generator locker aus.

Alternativ funktioniert das Gleiche mit Claude Code, dem Coding-Agenten von Anthropic. Der ist im Claude-Pro-Plan ab rund CHF 20.- im Monat enthalten.

Schritt 2: Das richtige Modell wählen

Öffne die ChatGPT-Desktop-App und starte einen neuen Chat. Bevor du startest, lohnt sich ein Blick in die Modelleinstellungen von ChatGPT. Die findest du unten rechts im Chat-Eingabefenster. Wähle GPT-5.5, also das Sprachmodell hinter ChatGPT, und stelle den Aufwand auf «Hoch». Aufwand bedeutet vereinfacht, wie gründlich das Modell nachdenkt, bevor es antwortet. Im Test war «Hoch» die Untergrenze für brauchbare Resultate. Mehr Aufwand liefert in der Regel bessere Ergebnisse, verbraucht aber auch mehr von deinem Nutzungskontingent.

Schritt 3: Den ersten Auftrag schreiben

Schreib folgenden Prompt in den Chat:

Erstelle eine App, mit der ich QR-Codes generieren kann.

ChatGPT erkennt, dass es sich um ein Programmierprojekt handelt, und fragt, ob du in den Work-Modus wechseln willst. Das ist der Bereich, in dem ChatGPT Dateien anlegt und Code schreibt. Bestätige mit «Weiter mit Work», und ChatGPTs Coding-Agent Codex legt los.

Schritt 4: Codex arbeiten lassen und testen

Codex analysiert deinen Auftrag und entscheidet eigenständig, wie sich dein Projekt am besten umsetzen lässt, und du kannst ihm live dabei zusehen. In meinem Fall dauerte die Entwicklung des ersten Prototypen der App 7 Minuten und 14 Sekunden.

Schritt 5: Berechtigungen bestätigen

Während der Arbeit fragt Codex nach Berechtigungen, etwa nach Zugriff auf den Projektordner oder darauf, einen Browser zu öffnen. Bestätige diese Anfragen, damit der Agent die App erstellen und gleich testen kann. Wichtig ist dabei: Codex greift danach wirklich auf die freigegebenen Bereiche deines Computers zu. Erteile solche Rechte deshalb nur, wenn du den Vorgang nachvollziehen kannst.

Nachdem Codex die App fertig gebaut hat, wird die App einerseits als blauer Vorschau-Link angezeigt, andererseits als Kachel-Link mit «Öffnen in»-Button. Dort kannst du deine App direkt im Browser anzeigen lassen.

Für den QR-Code-Generator hat Codex eine einfache HTML-Anwendung gewählt, also eine Webseite, die ohne Installation direkt im Browser läuft. Das ist für diesen Zweck ideal. Die erste Version funktionierte bei uns bereits, war optisch aber schlicht, komplett auf Englisch und an einer Stelle im Layout noch nicht sauber. Das ist normal, die erste Fassung ist selten die letzte.

Schritt 6: Änderungen per Sprache statt Code

Nun folgt der zeitintensivste Teil des Vibe Codings: Der sogenannte iterative Prozess. Wir schleifen den Rohdiamanten mit Änderungsanweisungen. Am einfachsten geht das mit einem Screenshot deiner App, den du in ChatGPT einfügst und dazu deine Änderungswünsche formulierst. Codex liest den Screenshot aus und nimmt die Anpassungen vor.

Sobald die Funktion der App deinen Vorstellungen entspricht, kannst du dich an die Design-Gestaltung machen. Auch das geschieht wieder per Texteingabe.

Schritt 7: Die fertige App

Je umfangreicher deine App ist, desto länger dauert der Anpassungsprozess. Doch irgendwann ist es soweit: Deine erste App ist fertig.

Mit einem Rechtsklick auf den blauen Vorschau-Link in ChatGPT gelangst du zum Speicherort deiner HTML-Datei.

Von dort kannst du die Datei in einem eigenen Ordner ablegen oder per Doppelklick im Browser öffnen. Wenn du den Generator regelmässig nutzt, speicherst du ihn am besten zusätzlich als Lesezeichen.

Vorschau Teil 2

In Teil 2 dieses Tutorials zeigen wir dir, wie du diese HTML-Datei kostenlos ins Internet stellst. Danach nutzt du deinen QR-Code-Generator von überall und teilst ihn mit anderen.

Lust auf mehr KI?

Ein QR-Code-Generator ist nur ein Anfang. In unseren KI-Workshops zeigen wir dir weitere Anwendungen, Tools und Lifehacks für den Alltag und ordnen auch Themen wie Ethik und Datenschutz praxisnah ein.

Weitere Infos zu unseren KI-Workshops findest du hier: https://www.deeds.ch/ki-workshops