Wie ich mit Claude Code und Codex mein allererstes Windows-Softwareprogramm .exe erstellt habe
Es ist jetzt zwei Monate her, dass ich vibe-code, zuerst mit Claude Code und dann mit Codex CLI. In den letzten Wochen hatte ich eine Menge Tokens zur Verfügung und wenig Projekte, also habe ich mich, nur zum Spaß, daran gemacht, ein Tool zu entwickeln, mit dem man Dokumente als Audio anhören und gleichzeitig annotieren kann (eine Mischung aus Audible und Kindle). Am Ende hat es sich als wirklich nützlich erwiesen: Meine Eltern, deren Sehkraft stark nachgelassen hat, brauchen es dringend, um sich Bücher mit Hilfe der KI vorlesen zu lassen. Ich habe beschlossen, die Windows-Softwareversion (einfach einen .exe) zu erstellen, damit sie es auf ihrem Computer installieren können.
Es ist das erste Mal, dass ich Software erstelle. Auch wenn ich etwas Erfahrung habe, bin ich absolut kein Entwickler; ich weiß, was ein Algorithmus ist, und ich habe viele Skripte geschrieben, um meine Arbeit (im Marketing) zu automatisieren. Aber ich habe noch nie etwas kompiliert und weiß nicht einmal, was Electron ist.
Als ich (im Marketing) für ein Softwareunternehmen arbeitete, bewunderte ich besonders die Teams für Product Management (die Funktionen erfinden) und das Team QA (Quality Assurance (deren Aufgabe es ist, nur Fehler und Schwachstellen zu finden). Mit meiner eigenen Software konnte ich endlich „Product Management & QA spielen“. Yessss!!

Ich gebe diesen Prompt in chatGPT ein.
Ich möchte eine Software wie Audible erstellen, die im lokalen Web unter Windows funktioniert. Man kann URLs hochladen, aber auch Dateien wie EPUB, HTML, TXT, PDF. Sobald die Datei hochgeladen ist, werden die Kapitel automatisch erkannt. In der linken Spalte gibt es Schaltflächen "Datei hochladen", "URL hochladen", "Zur Bibliothek gehen". Wenn man auf "Zur Bibliothek gehen" klickt, sieht man rechts die Liste der bereits hochgeladenen Dateien; man kann sie nach Datum des Hinzufügens oder A bis Z oder Z bis A sortieren, man kann auch den Titel der Datei ändern, man kann jede Datei einfach löschen. Wenn man die Wiedergabe einer Datei starten möchte, klickt man auf den Titel der Datei, der Text der Datei wird angezeigt + die Schaltflächen Play, einen Absatz/Kapitel vorwärts, die Liste der Kapitel, + Sprachauswahl (EN, FR, VN) Stimme (männlich/weiblich), Stimmentypen, Geschwindigkeit, Tonhöhe. Die Software muss den aktuell gespielten Absatz anzeigen und die Position speichern, wenn man die Software stoppt oder schließt. Schlage mir eine passende UI vor, hast du Ergänzungen oder Verbesserungsvorschläge?
chatGPT schlägt mir einige Verbesserungen vor, ich nehme einige Änderungen vor, das ist eine kleine Herausforderung. Wir kommen zu einem detaillierten Plan, dann erstellt er mir Mock-ups, die mir sehr gefallen:

Ich finde sie wirklich gut und bitte ihn um einen Prompt für Claude Code , um die Software tatsächlich zu codieren. Wir starten im Plan-Modus, um den technischen Plan zu validieren, dann geht’s los!
Das Projekt wird in mehreren Phasen behandelt, Claude Code wird jede Phase codieren, anhalten, ich überprüfe, gebe Feedback, er korrigiert, und dann machen wir mit einer anderen Phase weiter.

Das Skelett der Software ist sehr schnell fertig, und jedes Mal kann ich die Software „anfassen“, bevor ich Änderungen vorschlage.
Ich mag den Prozess sehr, sehr gern, er erfordert viel Nachdenken, um die UI einfach und logisch zu bedienen und Funktionen hinzuzufügen, an die niemand denkt, die aber alle nützlich finden! Nur weil es wenige Schaltflächen gibt, heißt das nicht, dass es wenig Arbeit gibt, denn genau diese Arbeit wurde im Vorfeld erledigt, um so wenige Schaltflächen und Klicks wie möglich zu haben.
Das erinnert mich an ein Mittagessen, bei dem mein ehemaliger Manager mir vor 13 Jahren sagte, dass er mich gut in einem Beruf sehen könnte, in dem ich die Brücke zwischen Experten und Entwicklern schlagen würde, das heißt, ich würde die „fachlichen“ Anforderungen in Spezifikationen für Entwickler übersetzen … eine Art interner Produktmanager. Damals war der Zeitpunkt nicht günstig für eine weitere Umschulung, aber es zeigt, dass er so visionär und intuitiv war, dass er den richtigen Weg für mich sah. Wenn Sie jemanden in Ihrem Umfeld haben, der genauso visionär und intuitiv ist, laden Sie ihn zum Mittagessen ein, das ist effektiver als eine Kompetenzbilanz.
Das Risiko bei solcher Software ist die Sicherheit. PDFs & Epubs, die man online findet, können Skripte enthalten, die ausgeführt werden und einen Computer ruinieren können. Daher muss man Claude Code bitten, die Sicherheit zu maximieren.
Dafür habe ich einen auf Cybersicherheit spezialisierten Agenten, einen auf UX-UI spezialisierten Agenten und einen QA-Agenten erstellt – die jede Projektphase prüfen, Fehler verfolgen und korrigieren.
Für die Stimmen verwende ich sowohl die Stimmen vonEdge TTS (kostenlos, erfordert eine Internetverbindung) als auch Microsoft (kostenlos, offline, aber weniger natürlich).
Ich habe entdeckt, dass das „Kompilieren einer Software“ am Ende des Prozesses steht. Electron ermöglicht es, eine Weboberfläche mit Chromium und Node.js zu verpacken, um daraus eine klassische Windows-Anwendung zu machen. Am Ende des Prozesses erhält man eine Installationsdatei in .exe, aber es bleibt noch, die Software auf einem anderen Computer (dem meiner Eltern) zu testen, Fehler automatisch zu melden und Updates zu verwalten (bald).



Meine Lieblingspunkte
- Automatische Aufteilung des Dokuments in Kapitel: das war ein heikler und schwieriger Punkt, denn man muss eine breite Palette von Formaten und schlecht formatierten Dateien abdecken. Ich habe mehrere KI-Lese-Softwares verwendet und sie alle haben große Schwierigkeiten mit den Kapiteln.
- Markieren & Anmerkungen: Ich liebe es zu markieren und Anmerkungen zu machen – und ich liebe es, in den „Vollmarkierungsmodus“ zu gehen, die Maus verwandelt sich in einen Marker. Das ist ein Punkt, den ich im Vergleich zu Kindle verbessert habe, wo man 2 Klicks brauchte, um das geringste Ding zu markieren. Man kann die Markierungen & Anmerkungen leicht exportieren.
- Die vietnamesischen Stimmen : Ich bin sehr zufrieden mit der Qualität der vietnamesischen Stimmen, ich habe andere Apps getestet und es hat mir nicht so gut gefallen wie meine Software 🙂 ich hoffe, meine Eltern werden auch zufrieden sein
- Und abgesehen von den Entwicklungskosten, die ich an die KI bezahlt habe, wird diese Software UMSONST zu benutzen
- Das aufgeräumte Design, ich bin kein Profi in UX UI, aber ich finde, die KI und ich haben uns ganz gut geschlagen!
- Die Software verwaltet die Bibliothek der Bücher auf dem Computer, öffnet aber auch einen Zugriff auf das Smartphone über das lokale Netzwerk (das liegt daran, dass ich keine iPhone-App oder eine Website erstellen möchte). Auf dem Smartphone ist es eine Light-Version, die sich fast wie Audible verhält. Aber mit der Möglichkeit, den Text gleichzeitig mit dem Audio zu verfolgen (wenn man es wünscht).


| Schicht | Technologien und Rolle |
|---|---|
| Desktop-Anwendung | Electron 43 — wandelt die Weboberfläche in eine Windows-Anwendung um |
| Sprache | TypeScript für den Hauptprozess, das Preload, die Oberfläche und den gemeinsamen Code |
| Oberfläche | React 19, React Router und benutzerdefiniertes CSS, ohne Tailwind |
| Zustand der Oberfläche | Zustand |
| Datenvalidierung | Zod für die IPC-Kommunikation, die lokale API und die gemeinsamen Schemata |
| Kompilierung und Build | Vite 7 und electron-vite |
| Automatisierte Tests | Vitest und jsdom — etwa 210 Tests |
| Codequalität | ESLint und Prettier |
| Windows-Installationsprogramm | electron-builder mit NSIS-Ziel und benutzerdefiniertem NSIS-Skript für das Verhalten des Installationsprogramms (Wahl der Standardsprache). |
| Lokale Datenbank | SQLite über node-sqlite3-wasm, ohne C++-Compiler |
| Import der Dokumente | pdfjs-dist für die PDFs, node-html-parser für HTML und fflate für EPUBs und ZIP-Archive |
| Sprachsynthese | Edge TTS mit msedge-tts und Web Speech API für Windows-Stimmen |
| Mobile Audio im lokalen Netzwerk | HLS-Streaming, mit FFmpeg, das von einem lokalen Server auf Port 8789 ausgeführt wird |
| Internationalisierung | Oberfläche verfügbar auf Französisch, Englisch und Vietnamesisch, mit den Übersetzungen gebündelt in messages.ts |
| Icons | lucide-react |
Ich kannte keine dieser Technologien (außer SQL und CSS) bis vor 3 Tagen 😀 Das vibe coding besteht nicht nur darin, einen großen Prompt zu schreiben und darauf zu warten, dass die KI alles macht. Man muss das Projekt in kleine Schritte aufteilen, jede Funktion testen, seltsames Verhalten erkennen und präzise umformulieren, was man will (man kann auch zwischendurch seine Meinung ändern).
Es fehlen noch erweiterte Funktionen, aber ich bin mit der v1 sehr zufrieden. Überlassen wir die erweiterten Funktionen den Versionen 1.1, 1.2… Ich habe auch die Grundlagen für die zukünftige Verwaltung von Fehlerberichten und Updates vorbereitet, falls ich mich entscheide, die Software einem breiteren Publikum zugänglich zu machen.



