Basel Editions: Wie aus drei Printmagazinen mit KI-Support ein digitaler Auftritt wurde

Gute Inhalte verdienen es, auf mehreren Kanälen präsent zu sein. Genau das war der Ausgangspunkt für ein Projekt, das wir gemeinsam mit unserem langjährigen Kunden und Partner StadtKonzeptBasel umgesetzt haben: Die Basel Editions gibt es jetzt auch online – unter basel-editions.ch ↗.

Drei Magazine, drei Perspektiven, eine Stadt

Die Basel Editions sind drei kuratierte Publikationen, die Basel in seiner Vielfalt zeigen: Places als kompakter Stadtguide mit ausgewählten Adressen aus Gastronomie, Shopping, Kultur und Freizeit. Experiences als vielseitiges Stadtmagazin, das kuratierte Orte mit Porträts und redaktionellen Geschichten verbindet. Und Moments als hochwertige Issue Edition, die Menschen, Orte und Ideen in starken Bildwelten erzählt.

Bisher lebten diese Inhalte primär auf Papier. Redaktionell aufwendig recherchiert, sorgfältig gestaltet. Porträts wie das der Geigenbauerin Anna Reber oder Geschichten über das Industrie-Areal Klybeck sind zu gut, um in einem Stapel alter Hefte zu verschwinden.

Die technische Realisierung: eine echte Co-Produktion

Spannend war für uns vor allem die Arbeitsteilung. Dieses Projekt war keine klassische Agenturbeziehung mit Briefing, Angebot und Abnahme, sondern eine Co-Produktion mit klar verteilten Rollen:

• Wir von Flyo stellten initial die Strukturen bereit und stellten die technische Qualität sicher: das technische Setup für die Nitro HeadlessCMS Integration, inklusive eines geteiltes Github-Repo mit Anbindung zu Claude Code und automatisierten Code-Testing Routinen. Menschliche Code-Reviews und anschliessendes Feedback stellten die Qualität und Stringenz im Projekt sicher.
• StadtKonzeptBasel entwickelte die Designsprache und programmierte die einzelnen Komponenten mit Hilfe von Claude Code selbstständig und fügte die einzelnen Bausteine anschliessend im Nitro CMS zu einem kompletten Webauftritt zusammen.

Das Resultat ist ein Auftritt, der sich bewusst wie ein Magazin anfühlt und nicht wie eine Website, die zufällig Magazininhalte zeigt. Grosszügige Bildwelten, ruhige Typografie, klare Führung durch die drei Editionen. Diese Handschrift kommt vollständig von StadtKonzeptBasel. Statt mit einem vorgefertigen Template in einem Webbuilder zu starten, erschuf StadtKonzeptBasel in diesem Projekt kurzerhand ihr eigenes, komplett modulares und headlessfähiges Template.

KI-gestützte Kollaboration: Was den Launch erst möglich machte

Es ist glasklar: In dieser Form und in diesem Zeitrahmen wäre das Projekt ohne KI-gestützte Entwicklung nicht entstanden. Wenige Wochen vom ersten Kontext bis zum fertigen Auftritt – schneller, günstiger und mit deutlich weniger Übergaben als in einem klassischen Setup.

StadtKonzeptBasel hat die Komponenten mit Claude Code entwickelt und die Änderungen direkt als Pull Request in unseren Review-Prozess eingereicht. Automatische Smoke Tests prüfen jeden Pull Request, automatisch erzeugte Screenshots zeigen, was sich visuell verändert hat, und die Preview-URL aus der CI erscheint automatisiert in Claude Code – das Resultat ist sofort im Browser prüfbar, statt auf ein Deployment zu warten. Validierung und Freigabe blieben bei uns: Jede Änderung ging von Hand durch unser Review. Der Kunde ist damit nicht mehr Auftraggeber am Rand der Entwicklung, sondern schreibt mit, ohne dass die Qualitätssicherung darunter leidet.

Damit zur eigentlichen Frage: Wie kommt man auf diesem Weg zu einem wartbaren, modularen Setup und nicht zu einem Prototyp, der bloss aussieht wie ein Projekt? Drei Dinge waren entscheidend.

Das Datenmodell war vorher da, nicht nachher. Struktur und Beziehungen zwischen Editionen, Stories und Orten standen, bevor die erste Komponente geschrieben wurde. Entscheidend ist dabei, dass diese Struktur nicht nur eine Absprache ist: Flyo Nitro generiert für jede Komponente automatisch eine eigene OpenAPI-Deklaration. Die KI arbeitet damit gegen einen maschinenlesbaren Vertrag und nicht ins Blaue hinaus. Sie weiss zu jedem Zeitpunkt, welche Felder es gibt, welche Typen sie haben und wie sie zusammenhängen. Wo die Datenstruktur den Rahmen so verbindlich setzt, kann die Implementierung nicht beliebig auseinanderlaufen. Auch nicht, wenn sie schnell entsteht.

Es wurden Komponenten gebaut, keine Seiten. Jede Einheit hat eine überschaubare Aufgabe und eine klare Schnittstelle zu den Inhalten. Das macht Änderungen lokal und Wiederverwendung möglich, statt für jede neue Seite ähnlichen Code ein zweites Mal zu erzeugen.

Das Review entscheidet über die Architektur. Tests und Screenshots fangen das Offensichtliche ab. Die relevante Frage beantworten wir von Hand: nicht, ob der Code funktioniert, sondern ob er an der richtigen Stelle sitzt.

Dazu kommt der strukturelle Vorteil des Headless-Setups: Inhalte und Darstellung sind getrennt. Das Frontend liesse sich ersetzen, ohne einen Inhalt anzufassen und die Inhalte in einen weiteren Kanal ausspielen, ohne das Frontend anzufassen. KI beschleunigt in diesem Modell die Umsetzung. Die Entscheidungen über Struktur, Grenzen und Qualität bleiben bei den Menschen im Projekt.

Unser Spirit: Partnerschaft und Speed

Von der ersten Auseinandersetzung mit dem Vorhaben bis zum fertigen Webauftritt dauerte es nur wenige Wochen. Partnerschaftliche Zusammenarbeit und viel Speed – das ist es, wofür wir bei Flyo stehen. Bei den Basel Editions hat diese Zusammenarbeit selbst für uns eine neue Stufe erreicht. Ein Kunde, der Komponenten selbst entwickelt und unsere Strukturen als Baukasten nutzt: So stellen wir uns die Zukunft von Flyo Nitro vor.

Danke an StadtKonzeptBasel, die seit Jahren mit Flyo arbeiten und uns immer wieder mit progressiven Ideen fordern und dadurch besser machen. Wir freuen uns jetzt schon riesig auf das nächste Projekt.

Jetzt anschauen: basel-editions.ch ↗