In fünf Tagen zur eigenen Telegram-App: ein Abo-Manager mit KI

Ausgangslage

Abos sind schnell abgeschlossen und schnell vergessen: Streaming, KI-Werkzeuge, Cloud-Speicher, Mobilfunk. Jedes hat einen eigenen Rhythmus, eine eigene Währung und einen eigenen Abbuchungstag, und kostenlose Testphasen gehen unbemerkt in bezahlte Abos über. Ich wollte eine App, die eine einzige Frage beantwortet: Wie viel zahle ich, wofür und wann ist die nächste Zahlung?

Zugleich war ABOS ein Test: Wie schnell bringen mich aktuelle KI-Werkzeuge von der Idee zu einem Produkt, das andere Menschen tatsächlich nutzen? Als Plattform habe ich Telegram gewählt. Eine Mini App braucht keinen App Store und keine Installation, die Anmeldung läuft über das Telegram-Konto, und Erinnerungen kommen als Nachricht direkt in den Chat.

Meine Rolle

• Produkt: Idee, Zielbild und Pflichtenheft mit sieben Entwicklungsetappen und einer Definition of Done aus elf Punkten.
• Design: Oberfläche gemeinsam mit OpenAI Codex entwickelt, vom hellen Entwurf aus dem Pflichtenheft bis zum dunklen Design mit violettem Akzent. Dabei stütze ich mich auf über 15 Jahre Erfahrung im Design, unter anderem mit Figma und Photoshop.
• Entwicklung: Frontend, API, Telegram-Bot, Datenbank und Deployment mit Claude Code. Steuerung, Prompts, Review und Tests lagen bei mir.
• Test: eigene Nutzung und eine Testgruppe aus zehn Freunden.

Vorgehen

Erst das Pflichtenheft, dann der Code

Bevor die erste Zeile Code entstand, habe ich das Produkt vollständig beschrieben: Ziel, Stack, Designsystem, Datenmodell, Sicherheitsregeln, API-Routen, Leerzustände und Fehlermeldungen. Ebenso klar steht darin, was nicht gebaut wird: keine Kündigungen, keine Bankanbindung, keine echten Zahlungen, keine native App, keine Währungsumrechnung.

Für jeden Bildschirm galt eine Regel: Er muss helfen, schnell zu beantworten, wie viel man zahlt, wofür und wann die nächste Zahlung fällig ist. Was diese Frage nicht beantwortet, kommt nicht ins MVP.

Entwicklung mit Claude Code

Das Pflichtenheft gab Claude Code sieben Etappen vor:

1. Grundgerüst, Telegram-Anmeldung und Datenbank mit Zugriffsregeln
2. UI-Gerüst mit Navigation und Designkomponenten
3. Abos anlegen, bearbeiten, archivieren und löschen
4. Übersicht und Zahlungskalender
5. Erinnerungen im Bot
6. Upload mit KI-Erkennung
7. Feinschliff: Ladezustände, Fehlerzustände, haptisches Feedback

Im Projekt habe ich Agent Skills eingebunden, etwa ui-ux-pro-max für Designregeln. Der erste Commit stammt vom 13. Mai 2026, der fertige Stand vom 17. Mai.

Design mit OpenAI Codex

Das Design habe ich gemeinsam mit OpenAI Codex entwickelt und dabei meine Erfahrung aus über 15 Jahren Gestaltung eingebracht. Das Pflichtenheft sah ein helles, streng minimalistisches Design vor. Im Ergebnis ist daraus ein dunkles Theme mit violettem Akzent und der Schrift Manrope geworden. Ziel war, dass sich ABOS in Telegram wie eine echte mobile App anfühlt und nicht wie ein Chatbot. Dazu gehören ein Bottom Sheet für die Details eines Abos, eine Datumsauswahl als Drehrad wie unter iOS, haptisches Feedback über das Telegram-SDK und Leerzustände mit Beispielen.

KI im Produkt

Ein Abo aus Foto oder Screenshot

Statt Felder abzutippen, fotografiert man einen Beleg oder lädt einen Screenshot hoch, etwa eine SMS der Bank, eine E-Mail-Bestätigung oder eine Rechnung. Die KI erkennt darauf das Abo und trägt Name, Betrag, Währung, Rhythmus, nächste Zahlung und das Ende einer Testphase selbst ein:

1. Ein Hinweis erklärt vorab: Die Datei geht zur Erkennung an OpenAI, Dokumente mit Passwörtern oder Zahlungsdaten gehören nicht hinein.
2. Das Foto wird im Browser auf höchstens 1.600 Pixel verkleinert und in einem privaten Speicher abgelegt. Das Modell erhält nur einen Link, der fünf Minuten gültig ist.
3. gpt-4o-mini liest das Bild und antwortet in einem festen JSON-Schema mit allen Feldern des Abos, dazu Anbieter und Kategorie.
4. Zu Name, Preis, Rhythmus und Datum liefert das Modell jeweils, wie sicher es ist. Unsichere Felder werden markiert, Hinweise der KI stehen unter dem Formular.
5. Ein Tipp auf „Abo speichern“ legt das Abo in der Datenbank an, die Erinnerungen plant das System dabei automatisch. Vorher lässt sich jedes Feld prüfen und korrigieren.

Der Prompt enthält feste Regeln für typische Fehler. Die nächste Zahlung ist nicht das Kaufdatum: Aus einem Monatsabo, gekauft am 12. Mai, wird die nächste Zahlung am 12. Juni. Fehlende Angaben erfindet das Modell nicht, sondern lässt sie leer.

Upload in drei Schritten: Hinweis, Analyse, Prüfung. Der Hinweis der KI zum Rhythmus steht unter dem Formular. Demo-Daten

Erinnerungen im Telegram-Bot

Ein Cron-Endpunkt prüft für jeden Nutzer dessen Zeitzone und die gewählte Uhrzeit und schickt über den Bot eine Nachricht, einen oder drei Tage vor der Abbuchung, einstellbar für jedes Abo. Die Nachricht ist kurz und enthält alles Nötige:

🔔 Zahlungserinnerung
Netflix
💳 13.99 EUR
📅 Abbuchung in 3 Tagen, am 3. Oktober

Im Original ist die Nachricht auf Russisch. Mit /start begrüßt der Bot neue Nutzer und öffnet die App über eine Schaltfläche direkt im Chat.

Sicherheit und Daten

• Anmeldung über Telegram: Jede Anfrage trägt die signierten Startdaten von Telegram. Der Server prüft die HMAC-SHA256-Signatur mit dem Bot-Token und lehnt Daten ab, die älter als 24 Stunden sind. Das gilt für 12 von 14 API-Endpunkten, die übrigen zwei sind der Cron-Endpunkt mit eigenem Schlüssel und der Webhook des Bots.
• Datenbank: sechs Tabellen in Supabase, jede mit Row Level Security: Nutzer, Abos, Dateien, KI-Ergebnisse, Erinnerungen und Ereignisse.
• Dateien: nur JPG, PNG, WEBP und PDF bis 10 MB, gespeichert in einem privaten Bucket.
• Kontrolle: Über die Einstellungen lassen sich alle Abos, Erinnerungen und Daten des Nutzers löschen.

Technischer Stack

• KI in der Entwicklung: Claude Code, OpenAI Codex, Agent Skills (ui-ux-pro-max, find-skills)
• KI im Produkt: OpenAI gpt-4o-mini mit Bildeingabe und JSON-Modus
• Frontend: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4
• Telegram: Mini App über @twa-dev/sdk, Bot mit grammY
• Backend und Daten: Next.js-API-Routen, Supabase (PostgreSQL mit Row Level Security, privater Storage)
• Betrieb: Railway, Cron-Endpunkt für Erinnerungen

Ergebnis

Quellen: Git-Historie, Code und Pflichtenheft des Projekts.

• Fünf Tage bis zum MVP: erster Commit am 13. Mai 2026, fertiger Stand am 17. Mai.
• Getestet: von mir selbst und von zehn Freunden.
• Funktionsumfang: Anmeldung über Telegram, manuelle Eingabe, KI-Erkennung aus Foto oder Screenshot (Beleg, SMS, E-Mail), Monats- und Jahreskosten in mehreren Währungen, Zahlungskalender, Testphasen, Archiv und Erinnerungen im Bot.
• Ausbaufähig: Frontend, API und Datenbank sind sauber getrennt. Deshalb lässt sich ABOS leicht als App für den App Store und Google Play umsetzen. Neu wären vor allem ein eigenes Login statt der Anmeldung über Telegram und Push-Benachrichtigungen statt Bot-Nachrichten.
• Status: ABOS war ein Test und nie für eine breite Veröffentlichung gedacht, sondern als Praxisfall für die Produktentwicklung mit KI. Nach der Testphase ist die App offline. Die Screenshots stammen aus einer lokalen Kopie mit Demo-Daten.

Fazit

ABOS zeigt, wie ich mit KI-Werkzeugen arbeite: Ich beschreibe Ziel und Grenzen präzise, die KI setzt um, und ich prüfe jeden Schritt. So ist in fünf Tagen ein Produkt entstanden, das meine Freunde und ich tatsächlich genutzt haben. Dasselbe Vorgehen lässt sich auf Aufgaben in Ihrem Unternehmen übertragen: Prototypen neuer Ideen, interne Werkzeuge, Bots und KI-Funktionen, die Daten aus Belegen, Nachrichten und Dokumenten auslesen und direkt in die Datenbank übernehmen.