Alle Artikel
·14 Min. Lesezeit

Eine Woche Freizeit. Ein Relaunch. Und ein neues Gefühl für Produktivität.

MitKids.de gibt es seit über zehn Jahren. Lange habe ich mich gefragt, ob das allein noch ein guter Grund ist, das Projekt weiterzuführen.

Meine Frau und ich haben die Plattform damals als Freizeitprojekt gestartet, um Familien bei der aktiven Freizeitgestaltung mit Kindern zu unterstützen. Über die Jahre hatte die Seite konstant hohe Besucherzahlen. Und vor allem: viel positives Feedback.

Gleichzeitig hat sich das Umfeld stark verändert. Neue Plattformen sind entstanden. Und mit AI gibt es heute ganz andere Möglichkeiten, nach Freizeittipps zu suchen.

Irgendwann stand deshalb eine Frage im Raum, die ich lange vor mir hergeschoben habe: Lassen wir das Projekt auslaufen - oder geben wir ihm einen bewussten Neustart?

Warum dieser Relaunch kein klassisches Redesign war

Ich bin nicht mit der Erwartung in dieses Projekt gegangen, dass AI Entwickler ersetzt. Das glaube ich nach wie vor nicht.

Aber ich sehe sehr klar, wie stark sich unsere Arbeitsweise gerade verändert. Und wie viele Möglichkeiten entstehen, wenn man AI nicht als Spielerei nutzt, sondern als festen Bestandteil der eigenen Arbeit.

Der Relaunch von MitKids.de war für mich deshalb weniger ein klassisches Redesign als ein Testlauf. Mich hat vor allem eine Frage interessiert:

Wie würde ich heute ein solches Projekt starten, wenn ich AI und Coding Agents von Anfang an bewusst einsetze?

Nach dem Projekt war ich ehrlich gesagt überrascht, wie gut das funktioniert hat. Die Arbeit an dem Projekt hat sich fast schon so anfühlt, als hätte ich mich selbst geklont und multipliziert.

Gedacht habe ich nicht weniger. Geschafft aber deutlich mehr - in viel kürzerer Zeit. Der komplette Relaunch ist in meiner Freizeit innerhalb einer Woche entstanden. Und mit einer Qualität, die früher so nicht möglich gewesen wäre.

Überblick: So bin ich das Projekt angegangen

Ich habe das Projekt grob in sechs Schritte unterteilt:

  1. Planung und Konzeption
  2. Design und Prototypen
  3. Überführung in die Zielarchitektur
  4. Backend-Aufbau und Integration
  5. Migration der bestehenden Daten
  6. Iterative Weiterentwicklung von Features und Qualität

Die Schritte sind aus vielen Softwareprojekten vertraut. Neu war für mich, wie ich sie dieses Mal durchlaufen habe.

1. Planung: Konzepte als Gespräch, nicht als Dokument

Am Anfang stand weder Design noch Code. Stattdessen habe ich ein inhaltliches und technisches Konzept erarbeitet gemeinsam mit ChatGPT.

Es ging dabei nicht um schnelle Antworten, mehr geholfen hat mir, unterschiedliche Perspektiven einzubringen und für mich relevante Fragen zu besprechen:

  • Wo steht MitKids.de heute - nach zehn Jahren Betrieb?
  • Welche Inhalte werden wirklich genutzt?
  • Was unterscheidet die Plattform noch von anderen Angeboten?
  • Und welche Rolle können Verzeichnis-Websites in einer Welt mit AI überhaupt noch spielen?

Die Konzepte habe ich immer weiter verfeinert, überarbeitet und bewusst hinterfragt. Neben ChatGPT, habe ich einzelne Konzepte zusätzlich von Gemini und Claude gegenlesen lassen, um unterschiedliche Perspektiven zu bekommen. Rückblickend war die Planungsphase einer der größten Hebel im gesamten Projekt. Und hat sich später deutlich bemerkbar gemacht - in weniger Rückfragen, weniger Korrekturen, weniger Umwegen.

2. Design & Prototypen: Denken in Varianten

Erst als das Konzept stabil war, ging es ins Design. Ziel war kein fertiges Layout, mehr ein Gefühl für mögliche Richtungen.

Ich habe verschiedene Design- und Prototyping-Tools ausprobiert - unter anderem Magic Patterns, Base44, Lovable, Replit und v0.

Am Ende habe ich mich für Magic Patterns entschieden, weil es für dieses Projekt am besten gepasst hat. Der eigentliche Unterschied lag aber nicht im Tool. Sondern im Zusammenspiel. Ich habe Design-Screenshots Schritt für Schritt zurück in den Chat genommen mit dem gesamten Kontext der Konzepte. So konnte ich die Entwürfe gezielt reviewen:

  • Passt das zur Zielgruppe?
  • Trägt das die Idee?
  • Ist das klar oder nur hübsch?

Entscheidend waren die kurzen Schleifen. Idee im Kopf, Entwurf auf dem Bildschirm und direkt ein Review mit vollem Kontext.

3. Vom Prototyp zur Zielarchitektur

Bevor ich Code geschrieben habe, habe ich ein technisches Zielbild definiert: Architektur, Performance-Anforderungen, SEO-Grundlagen.

Der erste Schritt war bewusst eine reine Frontend-Anwendung. Mit statischen Daten und Local Storage. Ohne Backend-Logik.

Für die Umsetzung habe ich mit Coding Agents gearbeitet. In früheren Projekten unter anderem mit Claude Code. Für dieses Projekt habe ich Codex getestet.

Wichtig war dabei vor allem eines: Kontext.

Ich habe eine AGENTS.md gepflegt, in der grundlegende Regeln, Konventionen und Projektziele festgehalten waren. Zusätzlich standen dem Agenten die Konzepte und Design-Prototypen zur Verfügung.

Parallel habe ich ein Storybook aufbauen lassen. Als Werkzeug, um das Designsystem sauber zu durchdenken – nicht primär als Dokumentation.

4. Backend-Aufbau und Integration

Als das Frontend stabil war, ging es ans Backend. Ich habe mich bewusst für Supabase entschieden. Es deckt viele grundlegende Themen sauber ab. So konnte ich sehr schnell ein funktionierendes Backend aufbauen – inklusive Datenbank, Authentifizierung und Rollenmodellen.

Auf Basis des bestehenden Frontends wurde die Datenstruktur definiert. Das technische Konzept iterativ erweitert und erneut reviewed - wieder mit Hilfe eines LLMs.

Statische Daten wurden Schritt für Schritt durch dynamische Daten aus Supabase ersetzt.

Besonders geholfen hat, dass die AI die Supabase-Dokumentation und gängige Best Practices bereits kannte. Der Backend-Aufbau fühlte sich dadurch weniger nach Suchen an, sondern mehr nach gemeinsamem Umsetzen.

5. Migration der bestehenden Daten

Ein großer Teil des Projekts war die Migration der bestehenden Inhalte.

Die alte Datenbankstruktur habe ich als SQL exportiert. Die Inhalte als CSV.

Auf dieser Basis hat der Coding Agent Migrationsskripte erstellt, die:

  • bestehende Daten überführen
  • neue Felder sinnvoll befüllen
  • Inkonsistenzen auflösen

Die Migration lief iterativ: Erster Import. Testen. Anpassungen am Skript. Nächster Import.

So lange, bis die Daten wirklich gepasst haben.

Beeindruckend war, wie schnell die alte Datenbankstruktur und ihre Inhalte verstanden waren. Ich konnte direkt Migrationsskripte bauen, die meine Supabase-Struktur kannten, bestehende Daten analysierten und gezielt erweiterten - und das Ergebnis kurz darauf bereits auf der Website überprüfen.

6. Features iterativ weiterentwickeln

Nach der Migration begann die eigentliche Feinarbeit.

Die Features habe ich iterativ mit Codex entwickelt. Sehr geholfen hat es meine Ideen im Zusammenspiel mit den Konzepten im Kontext von ChatGPT zu einem neuen Prompt für Codex umzuwandeln. Die Prompts wurden so deutlich konkreter, die Ergebnisse erwartbarer und die Features ausgereifter.

Typische Schleifen sahen so aus:

  • Anwendung testen
  • Screenshots durch ChatGPT reviewen
  • bessere Prompts für Codex generieren
  • nächste Iteration

Dasselbe mit Performance:

  • PageSpeed-Reports analysieren
  • Empfehlungen einordnen
  • gezielte Anpassungen im Code

Und auch aus UX-Sicht:

  • Screenshots bewerten
  • Design anpassen
  • Umsetzung wieder gegen die Konzepte prüfen

Und das alles jeweils in wenigen Minuten. Durch die kurzen Schleifen konnte ich mehr Varianten ausprobieren. Und jede davon sofort überprüfen - direkt im laufenden System.

Eine kleine Spaßbremse gibt es trotzdem. Wenn man einmal im Flow ist und gut mit einem Coding Agent arbeitet, stößt man früher oder später an Nutzungslimits. Zusätzliche Credits sind nicht gerade günstig. Und bei meinen Tests waren die Limits bei Claude Code sogar schneller erreicht als bei Codex.

Das zwingt zu einer neuen Frage:

Wie viel Kontext ist wirklich nötig – und wo verbrauche ich ihn nur, weil es bequem ist?

Für mich heißt das gerade: bewusster arbeiten. Kontext gezielter aufbauen. Und weiter experimentieren, bis sich eine gute Balance ergibt.

Was sich konkret verändert hat

Im Zuge des Relaunchs sind Dinge entstanden, die ich in klassischen Projekten oft nach hinten geschoben hätte - oder gar nicht gebaut hätte.

Qualität & Performance

Ein Ergebnis dieser Arbeitsweise war für mich besonders greifbar: Die Startseite erreicht inzwischen bei PageSpeed sowohl mobil als auch auf dem Desktop 100 Punkte in allen Kategorien.

MITkids PageSpeed dashboard

Dazu mussten einige Herausforderungen analysiert und gelöst werden, die mich ohne Coding Agents deutlich mehr Zeit gekostet hätten. Für mich ein klares Zeichen, dass die krasse Geschwindigkeit in der Umsetzung und Qualität im Ergebnis sich nicht ausschließen müssen.

Neue Funktionen für Nutzerinnen und Nutzer

Mit dem Relaunch sind mehrere neue Funktionen entstanden, die direkt aus dem klareren Gesamtkonzept heraus gewachsen sind:

  • eine Merkliste für Eltern
  • eine komplett neu aufgebaute Suche mit zusätzlichen Filtern
  • ähnliche Aktivitäten auf Detailseiten
  • mehrere Fotos pro Aktivität
  • die Möglichkeit, neue Fotos oder Öffnungszeiten einzureichen

Das Besondere daran war weniger die einzelne Funktion. Sondern, dass wie sie sich nahtlos ins Gesamtbild eingefügt haben - technisch, konzeptionell und von der Gestaltung. Auch war es klasse zu sehen, wie meine Prompts für Codex durch ChatGPT konkreter und besser wurden und wie schnelle Feedback-Loops das Ergebnis verbessern.

Bessere Werkzeuge im Hintergrund

Auch intern hat sich viel verändert:

  • eine deutlich bessere Admin-Oberfläche
  • klarere Rollen und Berechtigungen
  • ein Login-Bereich für Mitglieder

Dinge, die nicht sichtbar sind. Aber entscheidend dafür, dass die Plattform langfristig wartbar bleibt.

Was ich aus dem Projekt mitnehme

AI hat mich nicht ersetzt. Sie hat mir geholfen, vorhandenes Wissen besser zu nutzen.

Bekannte Schritte, kürzere Iterationen. Entscheidungen wurden schneller klar. Änderungen ließen sich direkt überprüfen. Das hat meine Arbeit spürbar verändert und mir vor allem Lust gemacht, mehr solcher Projekte anzugehen.

Für mich fühlt sich das an, wie die Arbeit mit wirklich guten Teams: klarer Kontext, unterschiedliche Perspektiven, frühes Feedback. AI hat diese Arbeitsweise möglich gemacht - nicht als Ersatz, sondern als Verstärker.

Veränderung gehört in der Softwareentwicklung seit jeher dazu. Vielleicht ist sie heute schneller. Vielleicht sichtbarer.

Aber der wichtigste Teil bleibt für mich: neugierig zu bleiben, zu experimentieren und aus dem, was funktioniert - und dem, was nicht funktioniert - zu lernen.

Eine Woche Freizeit. Ein Relaunch. Und ein neues Gefühl für Produktivität. · Holger Rüprich