// Blog
// KI, Entwicklung

Wie ich mit Claude Code arbeite – am Beispiel dieser Webseite

Ein Blick in die Werkstatt – wie ein KI-Agent beim Umbau dieser Webseite mitgearbeitet hat und warum jede Änderung trotzdem über meinen Tisch geht

Screenshot der Webseite michael-becker-berlin.de im neuen Design „Technical Grid“

Viele lesen gerade, dass KI „jetzt programmiert“. Was das im Alltag eines Webentwicklers konkret bedeutet, bleibt dabei meist offen. Ich zeige es Ihnen an einem Projekt, das Sie gerade vor sich haben: dieser Webseite. Sie hat 2026 ein neues Design, neue Inhalte und ein neues technisches Fundament bekommen – und an fast allen Änderungen hat der KI-Agent Claude Code mitgearbeitet.

Was ist Claude Code?

Claude Code ist ein Programmier-Agent von Anthropic. Anders als ein Chat-Fenster im Browser arbeitet er direkt in einem Software-Projekt: Er kann Dateien lesen, Befehle im Terminal ausführen, Code ändern und testen, ob das Ergebnis funktioniert. Gesteuert wird er in natürlicher Sprache.

Das klingt nach „die KI baut die Webseite“. So ist es aber nicht. Treffender ist: Ich habe eine sehr schnelle, sehr belesene Hilfskraft, die alles vorschlägt und umsetzt – und die ich ständig kontrollieren muss. Welche anderen Arten von KI-Werkzeugen es gibt und wann sie sich eignen, habe ich im Artikel Webseiten bauen mit KI im Jahr 2026 zusammengefasst.

Ausschnitt aus einer Claude-Code-Sitzung im Terminal: Der Agent ändert zwei Zeilen in einem Test, rot die alte und grün die neue Fassung, führt danach die Tests aus und legt als Nächstes eine neue Komponente an.

Was an dieser Webseite gemacht wurde

Die Änderungen lassen sich in der Versionsgeschichte des Projekts nachlesen. Die wichtigsten Schritte waren:

  • Umstellung auf das neue Nera-Modell: Die Webseite läuft mit Nera, meinem eigenen Static-Site-Generator. Statt einer Kopie des gesamten Generators enthält das Projekt jetzt nur noch Inhalte, Konfiguration und Design und bindet Nera als ein einziges Paket ein. Warum ich Nera überhaupt gebaut habe, erkläre ich im Artikel Warum ich meinen eigenen Static-Site-Generator gebaut habe.
  • Neue Funktionen von Nera: ein Kontaktformular ohne Server, automatisch erzeugte Sitemap und sogenanntes Asset-Hashing, damit Browser nach einer Änderung keine veralteten Dateien aus dem Zwischenspeicher anzeigen.
  • Modernisierung der Stylesheets: Die Sass-Dateien wurden vom veralteten @import auf das aktuelle Modulsystem umgestellt.
  • Neues Design „Technical Grid“: Das bisherige Design liegt weiterhin im Projekt und lässt sich mit einer Zeile in der Konfiguration wieder aktivieren.
  • Acht neue Referenzen, nach Datum sortiert und als Kundenprojekt, eigenes Produkt oder Open Source gekennzeichnet.

In der Versionsgeschichte ist jeder dieser Schritte mit dem Vermerk „Co-Authored-By: Claude“ versehen. Ich finde es richtig, das transparent zu machen.

Und wie viel Zeit hat das gespart? Die eigentliche Umstellung hat mit dem Agenten etwa eine Stunde gedauert. Ohne ihn hätte ich die Webseite einfach neu aufgesetzt und die Inhalte „rübergezogen“ – das hätte ich auf einen halben bis ganzen Tag geschätzt. Fairerweise liegt das nicht nur an der KI: Nera ist sehr einfach aufzusetzen, ein Teil der Ersparnis geht also auch auf das Werkzeug.

So sieht die Zusammenarbeit aus

Der Ablauf ist bei fast jeder Aufgabe gleich:

  1. Ich gebe das Ziel vor. Zum Beispiel: „Die Referenzen sollen anzeigen, ob es ein Kundenprojekt, ein eigenes Produkt oder Open Source ist.“ Dazu gehören auch Entscheidungen, die nur ich treffen kann – etwa welche Projekte überhaupt gezeigt werden.
  2. Der Agent liest sich ein. Er schaut sich die betroffenen Vorlagen, Inhalte und die Konfiguration an, bevor er etwas ändert.
  3. Er schlägt vor und setzt um. Bei größeren Aufgaben bespricht er zuerst einen Plan, bei kleinen ändert er direkt.
  4. Ich prüfe jede Änderung. Ich lese den geänderten Code, baue die Seite lokal und schaue mir das Ergebnis im Browser an – auf dem Desktop und auf dem Smartphone.
  5. Kleine Schritte, einzeln gesichert. Jede abgeschlossene Änderung wird als eigener Schritt in der Versionsverwaltung Git gespeichert. Geht etwas schief, lässt es sich gezielt rückgängig machen.

Git ist dabei mein Sicherheitsnetz. Weil jeder Schritt klein und nachvollziehbar ist, verliere ich nie den Überblick darüber, was sich geändert hat.

Für Entwicklerinnen und Entwickler: ein paar Details

  • Kontext ist alles. Ein gutes README und eine klare Projektstruktur helfen dem Agenten genauso wie einem neuen Teammitglied.
  • Prüfwerkzeuge laufen lassen. Build, Linter und nera validate decken viele Fehler auf, bevor ich überhaupt in den Browser schaue.
  • Nicht zu viel auf einmal. Ein Auftrag pro Schritt führt zu besseren Ergebnissen als eine lange Wunschliste.
  • Diffs lesen, nicht nur Ergebnisse anschauen. Eine Seite kann richtig aussehen und trotzdem unnötigen oder fehlerhaften Code enthalten.
  • Wiederkehrende Aufgaben als Skills festhalten. In Claude Code lassen sich eigene Skills anlegen: Anleitungen im Projekt, die der Agent per Befehl abruft. In diesem Projekt gibt es zum Beispiel einen Skill für Blogartikel und einen für saubere Commits. So muss ich nicht jedes Mal von vorn erklären, wie ich etwas haben möchte.
  • Aufgaben in einem festen Ablauf abarbeiten. Größere Änderungen laufen bei mir über Snagio, ein eigenes Werkzeug zur Aufgabenverwaltung. Jede Aufgabe durchläuft dieselben Schritte: planen, umsetzen, prüfen, freigeben – und erst nach meiner Freigabe geht es weiter. Snagio ist noch nicht veröffentlicht, ich nutze es bisher nur lokal.

Was gut funktioniert hat – und wo ich korrigieren musste

Gut funktioniert haben aus meiner Sicht:

  • mechanische Umbauten über viele Dateien hinweg, wie die Umstellung der Stylesheets
  • das Aufräumen, etwa das Entfernen nicht mehr genutzter Bilder
  • das Anlegen vieler gleichartiger Inhalte, wie der neuen Referenzen
  • die Umsetzung des neuen Designs

Zum Design muss ich etwas ehrlich zugeben, auch wenn es für Designer:innen sicher keine gute Nachricht ist: Als Entwickler arbeite ich inzwischen viel mit Claude Design, einem Werkzeug von Anthropic, das aus einer Beschreibung Entwürfe und klickbare Prototypen erzeugt. Mit den Ergebnissen bin ich meistens sehr zufrieden. Die zentrale Rolle spielt dabei natürlich die Kostenersparnis.

Korrigieren muss ich vor allem dann, wenn der Agent über das Ziel hinausschießt: Er bezieht Dinge mit ein, die so gar nicht gefordert waren. Einmal habe ich ihn nur um die Analyse eines Fehlers gebeten – ich wollte wissen, woran genau es lag. Der Agent legte sofort los und behob den Fehler gleich mit. Dabei hielt er sich nicht an meinen festgelegten Ablauf, der bestimmte Schritte vorschreibt, damit ich Änderungen konkret nachvollziehen und bei Bedarf eingreifen kann. Das war ärgerlich, und ein Teil der Änderungen musste wieder rückgängig gemacht werden. Deshalb ist ein klarer, eng gefasster Auftrag so wichtig – und deshalb lese ich jede Änderung, bevor ich sie übernehme.

Umgekehrt hat der Agent auch Fehler gefunden, die teilweise schon seit Jahren in der alten Version steckten: Eine Referenz war in der englischen Fassung falsch zugeordnet und erschien dadurch doppelt auf der deutschen Startseite, aber gar nicht auf der englischen. Die englische Fehlerseite trug den Titel „Fehler 500“. Behoben wurde das in einem eigenen, kleinen Schritt. Fehler passieren – mit und ohne KI. Entscheidend ist, dass sie auffallen.

Übrigens: auch dieser Artikel

Auch die Entwürfe für diesen und weitere Blogartikel hat Claude Code vorbereitet – auf Grundlage der Informationen auf dieser Webseite. Dahinter steckt ein eigener Skill, der so genau wie möglich festlegt, was wie gemacht werden soll und was am Ende herauskommen muss. Der Agent schlägt ein Thema vor, schreibt einen Entwurf mit klarer Struktur und fragt mich anschließend Punkt für Punkt nach meinen Erfahrungen, die er dann in den Text einbaut.

Das passt gut zu mir: Bei der Themenfindung bin ich eher unkreativ. Wenn aber ein Thema und die Struktur eines Artikels stehen, kann ich sehr gut meine eigenen Ideen und Punkte ergänzen und Dinge umschreiben. Die Erfahrungen in diesem Artikel – die gesparte Zeit, das Über-das-Ziel-Hinausschießen – stammen deshalb von mir, nicht von der KI.

Fazit

Ein KI-Agent wie Claude Code macht mich bei vielen Aufgaben deutlich schneller. Die Verantwortung bleibt trotzdem bei mir: Ich gebe die Richtung vor, treffe die Entscheidungen und prüfe jede einzelne Änderung, bevor sie online geht. Für Sie als Kundin oder Kunde heißt das: mehr Ergebnis für Ihr Budget, ohne Abstriche bei der Sorgfalt. Die Zeit, die ich durch den Agenten spare, gebe ich 1:1 an Sie weiter.

Wenn Sie wissen möchten, wie Ihre Webseite oder Web-Applikation von dieser Arbeitsweise profitieren kann, melden Sie sich gerne bei mir.

Ihr Michael Becker