WooCommerce-Relaunch mit einem KI-Agenten: 68 Befunde

Vom 8. bis 10. November 2026 hat ein autark arbeitender KI-Agent einen laufenden WordPress-Reiseblog mit WooCommerce-Shop auf Leitvia neu gebaut, nur mit den Agent-Skills von Leitvia und den Abilities von Studio. Jede Lücke wurde ein Befund: 68 in drei Tagen, geschlossen in 12 Runden in Theme, Studio, Pro und Skills, damit jede Website mit Leitvia dieselben Lösungen bekommt.

Hier liest du, was wir dabei gelernt haben, was seit unserem letzten Beitrag vom 28. Oktober neu ist und wohin es mit Leitvia geht. Am Ende steht das Changelog je Paket, bis zum Theme Leitvia 1.2.42, Leitvia Studio 1.3.40, Leitvia Pro 0.8.28 und Leitvia Skills 1.4.44.

Wie der KI-Agent einen echten Shop neu gebaut hat

Testszenarien finden viel, echte Websites den Rest. Deshalb haben wir einen KI-Agenten eine laufende Website neu bauen lassen: einen Reiseblog mit langen Berichten und Shop, knapp 200 Beiträge und Seiten und rund 180 veröffentlichte Produkte, viele mit Varianten und bis zu 26 Fotos. Der Wortlaut blieb, Form und Aufbau sind neu. Die Website gehört einem Kunden, deshalb zeigt dieser Beitrag keine Namen, Texte oder Bilder daraus. Die Screenshots unten stammen aus einem frischen WordPress mit den aktuellen Releases.

Der KI-Agent war Claude Code, gestartet in einem eigenen Projektordner. Er sah nur, was auch ein Kunde hat: die Agent-Skills, das Handbuch, die Workflows und die Abilities der Website über MCP, aber keinen Code des Produkts.

Die Regeln waren streng. Der KI-Agent baut nur mit den Skills und den Abilities, schreibt kein eigenes CSS und kein Markup außerhalb der Blöcke des Themes. Wo Leitvia etwas nicht konnte, hat er es auf der Website nicht umgangen. Er hat die Lücke als Befund notiert, und wir haben sie im Produkt geschlossen: als Standard im Theme, als Pattern, als Pro-Block, als neue Ability oder als Regel in den Skills. Jede Lösung lief durch das volle Test-Gate und ging als Release raus, und die Website bekam das Release-Zip, nie einen Arbeitsstand.

• 68 Befunde in drei Tagen, vom 8. bis 10. November.
• 12 Runden im Produkt, jede mit Test-Gate und Release: Theme 1.2.32 bis 1.2.42, Studio 1.3.30 bis 1.3.40, Pro 0.8.19 bis 0.8.28 und Skills 1.4.31 bis 1.4.44.
• Jede Lösung wirkt auf jeder Website mit Leitvia gleich. Vom Kunden ging nichts ins Produkt: keine Namen, Texte, Bilder oder Zugangsdaten.

Ein Raster von der ersten Zeile bis zur letzten Karte

Ein Reiseblog lebt von Fotos. Breite Bildbänder neben einer schmalen Textspalte wirkten unruhig, und das Ende jedes Beitrags stand nach einem breiten Band schmal und nach links versetzt. Diese Änderungen bringen eine Seite zurück in ein Raster:

• Zwei neue Token-Rollen, size.content und size.wide, legen die Breite der Textspalte und breiter Blöcke je Marke fest (Studio 1.3.34). Eine Marke mit vielen Fotos kann Text und Bänder in derselben Breite laufen lassen. Ohne Angabe bleiben die Werte des Themes.
• Das Ende eines Beitrags mit Trennlinie, Autorbox, Beitragsnavigation und ähnlichen Beiträgen läuft jetzt im breiten Raster (Theme 1.2.36). Ähnliche Beiträge stehen ab Tablet in drei Spalten, die Autorbox ist eine ruhige Fläche mit Name und Biografie, weiter ohne Profilbild eines Drittanbieters.
• Ist die Textspalte breiter als 48rem, bleiben Bilder ohne Breitenangabe im Text bei 40rem und der Bildstil Illustration bei 20rem, damit eine Zeichnung nicht über die ganze Seite wächst (Theme 1.2.37).
• Bild-Blöcke mit fester Höhe, aber ohne Seitenverhältnis, wie sie Inhalte von alten Websites oft mitbringen, nehmen ihre Höhe aus dem Bild, statt gestreckt zu werden. Studio warnt vor solchen Bildern, wenn ein KI-Agent sie schreibt.
• Ein Block mit voller Breite in einer Spalte, in Details, in Medien und Text, in einem Tab oder einer Karte kann nie bis an den Fensterrand reichen. Bisher behielt er trotzdem den großen seitlichen Abstand der Seite: Ein Tipp in einer Spalte einer Produktbeschreibung schrumpfte auf 360 Pixel. Solche Blöcke behalten jetzt den normalen Abstand, mit einer Regel für jeden Container, auch für die anderer Plugins (Theme 1.2.41).
• KI-Agenten setzen die vertikale Ausrichtung oft nur am Spalten-Block, wo sie nichts bewirkt. Studio gibt sie jetzt an jede Spalte ohne eigenen Wert weiter.

Fotos als Collage

Zu Personen, Reisen und Gruppen gehören oft drei bis fünf Fotos und ein kurzer Text. Bisher gab es dafür in Leitvia eine Galerie im Raster oder die Scroll-Galerie. Das neue Pattern Fotocollage setzt die Fotos gegeneinander versetzt und leicht überlappend neben Eyebrow, Überschrift, Vorspann, Absatz und Button (Theme 1.2.36). Die Reihenfolge der Fotos im Code ist die Lesereihenfolge, Screenreader und Tastatur gehen sie also so durch, wie du sie siehst. Auf dem Smartphone stehen die Fotos in zwei versetzten Spalten ohne Überlappung. Mit dem Blockstil Medien rechts wandern die Fotos nach rechts, so können Abschnitte abwechseln.

Lange Texte und Reiseberichte

Manche Berichte des Blogs haben mehrere tausend Wörter und erzählen von Wochen unterwegs. Sie brauchten mehr als Überschriften hintereinander.

• Das Inhaltsverzeichnis von Studio kann mitlaufen: Ein Knopf „Kapitel“ bleibt am unteren Rand und öffnet die Liste als Dialog. In Beiträgen mit Teilen gruppiert es die Überschriften nach Teil und verlinkt Überschriften anderer Teile mit der Adresse dieses Teils. Anker-Links im Text, die in einen anderen Teil zeigen, bekommen beim Schreiben die Adresse des Teils, und das Website-Audit meldet die, die ins Leere zeigen.
• Beiträge in Teilen bekommen unter dem Inhalt eine Navigation „Teil 2 von 4“ (Theme 1.2.34).
• Der neue Block Reiseroute von Leitvia Pro zeigt eine Reise als Etappen mit Kennzahlen und einer Skizze der Route, ohne Kartenkacheln eines Drittanbieters. Seine Halte verlinken auf den richtigen Teil eines Beitrags. Halte am selben Ort werden zusammengefasst.
• Die Scroll-Galerie von Leitvia Pro zeigt die Fotos neben einer Box, die beim Scrollen stehen bleibt, und wird auf dem Smartphone zu einer Wischreihe mit Punkten. Ab sieben Fotos nutzt sie zwei Spalten, damit die Box nicht ewig steht. Speichert ein KI-Agent die Galerie ohne ihre Box, ergänzt Pro sie beim Ausgeben und Studio beim Schreiben.
• Das Pattern Autorentipp zeigt ein Zitat der Autorin oder des Autors mit rundem Foto und kehrt als synchronisiertes Pattern alle paar Abschnitte eines langen Ratgebers wieder.
• Die Datenkarte von Leitvia Pro verlinkt jeden Ort mit seinem Beitrag, richtet den Ausschnitt an den Markern aus, behält Orte ohne Koordinaten in der Liste und klappt Listen mit mehr als zwölf Orten in ein Details-Element. Das Popup der Karte ist mindestens 18rem breit, nimmt den Fokus und gibt ihn mit Escape an den Marker zurück.
• Der Newsletter-Block von Leitvia Pro meldet Leute vom Server aus bei Klaviyo, Mailchimp oder Brevo an, mit Pflicht-Einwilligung und ohne Skript des Dienstes auf der Seite.

WooCommerce-Produktseiten, die halten

Der Shop brachte die meisten Befunde. Auf Produktseiten kostet ein kleiner Fehler im Layout Geld, deshalb haben wir sie an der Wurzel gelöst:

• Die Varianten-Kacheln von Leitvia Pro steuern jetzt das eine Kaufformular der Seite, statt ein zweites auszugeben. Wo Kacheln für ein Merkmal stehen, ist dessen Auswahlfeld für Sehende verborgen und bleibt im Code für das Formular und für Besucher ohne JavaScript.
• Upsells stehen als Raster wie ähnliche Produkte, in der Reihenfolge der Upsell-Liste, höchstens acht. Die Box neben der Galerie nutzt die Kurzbeschreibung mit ihrer Formatierung, Listen bleiben also Listen.
• Ein Auswahlfeld mit langen Variantenwerten bleibt bei 390 Pixeln im Formular, Produktraster von WooCommerce zeigen auf dem Smartphone zwei Spalten, und die Kaufleiste von Leitvia Pro bricht nach ihrem Inhalt um: Der Produktname rückt in eine eigene Zeile, bevor er auf nichts schrumpfen würde.
• WooCommerce 11.1 bis 11.2.2 lädt das Modul des Mini-Warenkorbs auf Warenkorb und Kasse, wo es immer wieder eine falsche Adresse abfragt. Das Theme nimmt das Modul auf diesen beiden Seiten heraus, nur in Versionen vor 11.3.
• Produktbeschreibungen laufen durch dieselbe Blockverarbeitung und Sicherheitsprüfung wie Seiten. Synchronisierte Patterns in einer Beschreibung behalten ihren Verweis, ein Speichern, das Blockattribute verlieren würde, schlägt fehl und nennt den Block, und die Beschreibung hat keine feste Länge mehr (Studio 1.3.39). Die Kurzbeschreibung behält ihre Grenze von 5.000 Zeichen.
• Neue Abilities lesen globale Produktmerkmale und ihre Werte und benennen sie um, und sie lesen Rezensionen. Ein KI-Agent darf eine fehlende Sternwertung nachtragen; eine andere Wertung, die Kennzeichnung als verifiziert oder der Status sind Moderation und brauchen das Recht einer Person, die Rezensionen moderiert. E-Mail, IP und Benutzerkonto der Rezensenten verlassen die Website nie.

Migration: Inhalte von einer alten Website übernehmen

Die meiste Arbeit in einem Relaunch ist, alte Inhalte umzuziehen, ohne unterwegs etwas zu verlieren. Der Skill für Migrationen und Studio haben dabei viel gelernt:

• Lehnt Studio unsicheres Markup ab, nennt es jetzt Block, Tag, Attribut und einen kurzen Ausschnitt. Harmlose Reste aus Textverarbeitungen werden bereinigt statt abgelehnt, und nur in Texten, die die Änderung berührt.
• Shortcodes alter Page-Builder, die kein Plugin mehr kennt, erscheinen als Text. Studio warnt beim Schreiben davor, die Gliederung einer Seite listet sie, und der Skill verlangt null davon auf der neuen Website.
• Neben dem Vergleich des Wortlauts ist der Vergleich der Links Pflicht: Jeder interne Link und jedes verlinkte Bild der alten Seite muss auf der neuen zum selben Ziel führen. Verlinkte Bilder bleiben Links und werden keine Lightbox.
• Erklärungen, die die alte Website nur beim Darüberfahren zeigte, werden sichtbarer Text, ein Satz in Klammern oder ein Details-Block nach dem Absatz. Wer mit Tastatur oder Touch unterwegs ist, kam an diese Erklärungen nie heran.
• Rezensionen ziehen mit ihren Sternwertungen um und werden gegen die alte Website gezählt. Das Website-Audit meldet Links ohne Ziel, zum Beispiel aus einer Plugin-Einstellung, die noch auf keine Seite zeigt.

Lange Wörter auf kleinen Bildschirmen

Deutsche Komposita und lange Bezeichner aus Code haben auf dem Smartphone das Layout gesprengt, in Kacheltiteln, Bildunterschriften und Buttons. Um jeden Fall zu finden, haben wir an jeden Text aller 193 Seiten unserer Testwebsite einen Bezeichner mit 44 Zeichen ohne Umbruchstelle gehängt und alles bei 320 Pixeln angesehen. Vor der Lösung scrollten 87 Seiten seitlich. Mit Theme 1.2.42 brechen lange Wörter in ihrer Box um, auch in Karten, Buttons, Tabs, Formularbeschriftungen und der Beitragsnavigation. Ein Wort bricht nur dort, wo es gar nicht passt, und Tabellen behalten ganze Wörter und scrollen in ihrem Rahmen. Die 27 Seiten, die im Stresstest noch überlaufen, haben nur feste kurze Beschriftungen wie Seitenzahlen oder den Suchknopf, an die echte Inhalte nicht heranreichen.

Das CSS des Themes hat jetzt ein Budget von 40 KB. Ausgeliefert werden 33.747 Byte, die neue Grenze ist also Spielraum, kein Anlass, ihn zu füllen.

Barrierefreiheit: viele Seiten in Sekunden prüfen

Ein Relaunch dieser Größe braucht eine Prüfung, die nach jeder Runde läuft. Der Skill leitvia-a11y bringt dafür jetzt das Skript check-pages.mjs mit. Es lädt jede Seite einmal und prüft sie im selben Tab bei 1920, 1440, 390 und 320 Pixeln: axe nach WCAG 2.2 AA, seitliches Scrollen mit dem Element, das es auslöst, zu schmal gequetschte Textspalten, Anfragen an fremde Hosts vor der Einwilligung, kaputte Links und Bilder, die h1 und übrig gebliebene Shortcodes. Mit einer alten Website vergleicht es auch Wortlaut und Links, samt Tabs, geschlossenen Details und allen Teilen eines Beitrags. Screenshots macht es nur, wo es etwas findet, das Ergebnis ist JSON.

Gemessen an 12 Seiten von leitvia.com brauchte die Prüfung vorher 235 Sekunden, jetzt 18. Der erste Lauf fand einen Fehler auf unserer eigenen Website: Lange Bezeichner im Changelog scrollten auf dem Smartphone seitlich. Mit diesem Befund begann die Lösung für lange Wörter oben.

Außerdem neu seit dem 28. Oktober

Vor dem Shop brachten ein erstes Kundenprojekt und unsere eigene Arbeit diese Änderungen:

• Deutsch für Theme, Studio, Pro und das Konto, dazu deutsche Seiten auf leitvia.com unter /de/. Das Sprachmenü von Leitvia Pro arbeitet mit Polylang und WPML.
• Kits als Bausteine: Die Branchen-Kits von Leitvia Pro fügen einer bestehenden Website einzelne Teile hinzu, mit einem Assistenten in fünf Schritten und einem Probelauf, bevor sich etwas ändert. Die Anleitung zu Kits erklärt es.
• Bewegung: Einblend-Effekte in Studio mit der Einstellung aus, dezent oder ausdrucksstark und einem Schalter „Bewegung aus“ in der Barrierefreiheitsleiste.
• Schnellere Seiten: Das CSS der Blöcke steht inline, Schriften werden nur in den Stärken vorgeladen, die eine Seite nutzt, Skripte von Leitvia laden spät.
• KI-Agenten verlieren alle Rechte, sobald Studio deaktiviert oder gelöscht wird, ein Ergebnis des Reviews auf WordPress.org.
• Neu in Studio: ein Block für Kontaktformulare, SEO-Titel und Beschreibung für Websites ohne SEO-Plugin, Abilities für Templates, Bildzuschnitte und Alternativtexte für bis zu 100 Bilder in einer Änderung. Neu in Pro: der Block Showcase, eigene Marken-Icons und Koordinaten aus Adressen für die Datenkarte.

Wohin es mit Leitvia geht

• Eine Demo für Reiseblogs. Die Bausteine aus diesem Projekt bekommen eine eigene Demo auf demo.leitvia.com, mit eigener Marke, eigenem Logo und eigenen Bildern und ohne Inhalte des Kunden: Reiseroute, Scroll-Galerie, Autorentipp, das mitlaufende Inhaltsverzeichnis und Beiträge in Teilen.
• Mehr echte Websites. Weitere Relaunches laufen genauso. Jede Lücke wird im Produkt geschlossen, und jede Lösung erreicht mit dem nächsten Release alle Websites.
• WordPress.org. Die Aufnahme von Theme und Leitvia Studio ist in Vorbereitung. Bis dahin liegen beide mit jedem Release auf GitHub.
• Mehr Sprachen. Nach Englisch und Deutsch sollen die kostenlosen Pakete auf translate.wordpress.org übersetzt werden, sobald sie dort gelistet sind.
• Leitvia Agent. Ein gehosteter KI-Agent, der sich um deine Website kümmert und nach Nutzung abgerechnet wird, ist geplant. Die Preisseite führt ihn als geplant, bis er gebaut ist.

Fragen zum Shop-Relaunch mit einem KI-Agenten

Changelog

Alle Releases seit unserem letzten Beitrag, nach Paket. Die Versionshistorie (englisch) nennt jede Änderung jeder Version.

Theme Leitvia 1.2.10 bis 1.2.42

• 1.2.42: Lange Wörter und Bezeichner brechen in ihrer Box um, Tabellen behalten ganze Wörter, CSS-Budget 40 KB.
• 1.2.41: Blöcke mit voller Breite in verschachtelten Containern behalten den normalen Abstand.
• 1.2.39 und 1.2.40: Upsells als Raster in Listenreihenfolge, Kurzbeschreibung mit Formatierung, lange Variantenwerte im Formular.
• 1.2.36 bis 1.2.38: Beitragsende im breiten Raster, Bilder mit fester Höhe, Umgehung für den Mini-Warenkorb, Pattern Fotocollage, Grenzen für Bilder in breiter Textspalte, lange Wörter in Kacheltiteln, Produktraster mit zwei Spalten auf dem Smartphone.
• 1.2.32 bis 1.2.35: Pattern Autorentipp, Beiträge in voller Breite wie Seiten, Navigation für Beiträge in Teilen, Token-Rolle für den Radius von Fotos, Icon-Kacheln.
• 1.2.10 bis 1.2.31: Deutsch, Hover und Bewegung, Abstand unter klebendem Header, schnelleres CSS und schnellere Schriften, Silbentrennung, Header-Button auf jeder Breite.

Leitvia 1.2.42 auf GitHub · alle Releases des Themes · Changelog des Themes (englisch)

Leitvia Studio 1.3.10 bis 1.3.40

• 1.3.40: Ortsliste der Karte und Icon-Liste brechen lange Wörter um.
• 1.3.37 bis 1.3.39: Abilities für Produktmerkmale und Rezensionen, Produktbeschreibungen mit synchronisierten Patterns und ohne feste Länge, leere Links im Website-Audit.
• 1.3.33 bis 1.3.36: unsichere Inhalte mit Fundstelle, Breiten-Tokens size.content und size.wide, Warnungen für feste Bildhöhen und unbekannte Shortcodes, Inhaltsverzeichnis und Anker-Links über Teile, lesbares Kartenpopup.
• 1.3.30 bis 1.3.32: mitlaufendes Inhaltsverzeichnis, Abilities für Templates und Bildzuschnitte, zusätzliche Flächenfarben, Marken-Icons als Erweiterungspunkt.
• 1.3.10 bis 1.3.29: Kits als Bausteine, Bewegungseffekte, Rechte für KI-Agenten nur bei laufendem Studio, Kontaktformular, SEO ohne Plugin, deutsche Texte im PHP-Teil.

Leitvia Studio 1.3.40 auf GitHub · alle Releases von Studio · Changelog von Studio (englisch)

Leitvia Pro 0.8.5 bis 0.8.28

• 0.8.28: Reiseroute, Showcase, Eintragsliste und Datenkarte brechen lange Wörter um, breitere Spalten in langen Ortslisten.
• 0.8.26 und 0.8.27: Kacheln verbergen ihr Auswahlfeld, die Kaufleiste bricht nach ihrem Inhalt um.
• 0.8.22 bis 0.8.25: Datenkarte mit Link je Ort, Filtern und eingeklappten langen Listen, Halte mit Links in Teile, Scroll-Galerie ab sieben Fotos zweispaltig, Kacheln steuern das Formular der Seite.
• 0.8.19 bis 0.8.21: neue Blöcke Scroll-Galerie, Newsletter und Reiseroute, Marken-Icons, Koordinaten aus Adressen.
• 0.8.5 bis 0.8.18: Deutsch, Sprachmenü, Kits als Bausteine mit Assistent, Block Showcase, Bewegung in den Kits.

Leitvia Pro kommt auf Websites mit aktiver Lizenz als signiertes Update in WordPress unter Dashboard, Aktualisierungen. Changelog von Leitvia Pro (englisch)

Leitvia Skills 1.4.12 bis 1.4.44

• 1.4.43 und 1.4.44: das Prüfskript check-pages.mjs, ohne Fehlalarme bei großen Überschriften, mit Tabs, Teilen und Weiterleitungen im Vergleich des Wortlauts.
• 1.4.34 bis 1.4.42: Linkvergleich bei Migrationen, Breiten, feste Bildhöhen, unbekannte Shortcodes, Erklärungen als sichtbarer Text, Rezensionen, Produktmerkmale, volle Breite nur auf oberster Ebene.
• 1.4.31 bis 1.4.33: lange Texte mit Inhaltsverzeichnis, Teilen und Autorentipp, der Wortlaut bleibt und die Form ist neu, der Radius von Fotos.
• 1.4.12 bis 1.4.30: News mit Screenshots, SEO und GEO, der Shop-Skill, Bewegung, Kits als Bausteine.

Leitvia Skills 1.4.44 auf GitHub · alle Releases der Skills · Changelog der Skills (englisch)

Leitvia-Konto 0.1.42

Das Konto auf leitvia.com und der Token-Playground ziehen mit jedem Release nach. Die Vorschau in WordPress Playground lädt jetzt das Theme 1.2.42 und Leitvia Studio 1.3.40.

Was kostenlos ist und was Pro

Theme, Leitvia Studio und die Skills bleiben kostenlos, mit jeder Lösung für Layout, Barrierefreiheit und Migration aus diesem Beitrag. Reiseroute, Scroll-Galerie, Newsletter, die Datenkarte, die Varianten-Kacheln und die Kaufleiste sind Blöcke von Leitvia Pro. Die Preisseite nennt die Tarife.