Framer-Blog mit KI-Agenten: vom Entwurf zur klaren Struktur

Ein Blog muss zum vorhandenen Geschäft passen

Der Ausgangspunkt war ein Shop, bei dem organische Suche bereits eine Rolle spielte. Deshalb wollte ich Inhalte ergänzen, die Fragen zu Produkten und ihren Anwendungen beantworten. Die im Video genannte Umsatzverteilung ist eine damalige persönliche Angabe; sie ist hier weder eine aktuelle Kennzahl noch ein Beweis dafür, dass ein Blog automatisch mehr Bestellungen erzeugt. Der nachvollziehbare Anlass bleibt: Menschen suchen Informationen, bevor sie ein Produkt auswählen.

Das verändert die Aufgabe. Ein Blog für diesen Shop sollte nicht bloß zeigen, dass das Unternehmen regelmäßig etwas veröffentlicht. Er sollte Besucher zu einer verständlichen Antwort führen. Wer mit einer konkreten Frage kommt, braucht einen erkennbaren Einstieg und eine hilfreiche Reihenfolge. Für mich war deshalb die Nutzerabsicht die sinnvollere Vorgabe als eine gewünschte Zahl an Karten, Kategorien oder Animationen.

Der erste Auftrag war eine Bestandsaufnahme

Bevor der Agent den Blog ausarbeiten sollte, ließ ich ihn die vorhandene Website analysieren. Wie sind die Seiten gegliedert? Welche Farben, Abstände und Abschnittstypen kommen vor? Wie wirken die Überschriften? Im Video beschreibe ich diesen Schritt ausdrücklich, weil der Blog nicht wie ein fremder Anbau aussehen sollte. Das bestehende System war der Ausgangspunkt, auch wenn das Template selbst keine passende Blogstruktur mitbrachte.

Diese Reihenfolge ist besonders bei Erweiterungen wichtig. Ein Agent kann schnell einen eigenständigen Vorschlag erzeugen, der auf einer leeren Fläche gut aussieht. Auf einer vorhandenen Website muss er zusätzlich Rücksicht auf Navigation, wiederkehrende Elemente und die Erwartungen der Besucher nehmen. Die praktische Aufgabe lautet daher: erkennen, was bereits funktioniert, und neue Inhalte damit verbinden. Ein vollständiger Neubeginn würde die bisherige Arbeit ohne Not zur Diskussion stellen.

Die technische Verbindung zum Framer-Projekt ist im Video Teil des Vorgehens. Ich beschreibe hier aber keine heutige Installationsanleitung und übernehme keine damaligen Modell- oder Tarifangaben. Der dauerhaftere Teil ist der Arbeitsauftrag: erst untersuchen, dann eine passende Erweiterung vorschlagen und anschließend gezielt umsetzen. Das lässt sich später gegen den tatsächlichen Entwurf prüfen.

Warum ein brauchbarer erster Entwurf noch nicht gut genug war

Der Agent traf nach meiner Einschätzung früh die visuelle Richtung. Unter anderem entstand eine Möglichkeit, Artikel nach Themen zu ordnen. Gleichzeitig war die Seite zu voll. Im Video sage ich ausdrücklich, dass die frühe Version nicht mehr vollständig sichtbar ist, weil bereits weitergearbeitet wurde. Deshalb wäre es ungenau, den Film als lückenlose Aufzeichnung jedes Zwischenschritts zu behandeln. Er ist ein Rückblick mit sichtbaren Arbeitsständen.

Mein Feedback wurde dann konkreter: weniger visuelle Ablenkung, kompaktere Darstellung und schnelleres Verständnis. Ein Besucher sollte nicht erst die Gestaltung entschlüsseln müssen, bevor er einen geeigneten Artikel findet. Das ist eine andere Anweisung als „mach es schöner“. Sie nennt eine Aufgabe, an der sich die nächste Version messen lässt. Eine zusätzliche Box kann hübsch sein und diesem Ziel trotzdem im Weg stehen.

Für eine eigene Überarbeitung würde ich jede Sektion mit einer einfachen Frage prüfen: Hilft sie beim Finden oder Verstehen eines Artikels? Falls ihre einzige Begründung lautet, dass die Seite sonst leerer wirkt, ist das ein guter Kandidat zum Weglassen. Diese Prüfung ist meine redaktionelle Ableitung aus dem gezeigten Kürzen, kein gemessener Conversiontest des Blogs.

Die Übersicht soll eine Auswahl ermöglichen

Die überarbeitete Übersicht erklärt oben, worum es geht. Danach folgen hervorgehobene Artikel und die übrigen Beiträge mit thematischer Ordnung. Im Video spreche ich bei einer Gruppe von meistgelesenen Artikeln. Daraus sollte man nicht ohne einen eigenen Datenbeleg eine dynamisch berechnete Beliebtheitsrangliste ableiten. Sichtbar ist vor allem die redaktionelle Hierarchie: Einige Inhalte bekommen einen früheren Einstieg, andere lassen sich über Kategorien finden.

Eine gute Übersicht muss den ganzen Artikel noch nicht vorwegnehmen. Sie braucht genug Information für die Auswahl: Thema, konkrete Frage und einen verständlichen Unterschied zu benachbarten Beiträgen. Werden alle Karten ähnlich allgemein beschrieben, hilft auch die schönste Kategorieauswahl wenig. Für den hier gezeigten Shop ergibt sich daraus die Aufgabe, Artikel über echte Produktfragen voneinander abzugrenzen statt dieselben allgemeinen Vorteile immer neu zu formulieren.

Die Artikelseite darf anders funktionieren

Auch die erste Detailseite enthielt zu viele Abschnitte. Nach der weiteren Betrachtung anderer Blogs entwickelte sich eine klarere Reihenfolge: wichtige Punkte früh zeigen, eine kurze Antwort anbieten und danach den ausführlichen Text. Am Ende stehen verwandte Artikel. Diese Gliederung hat einen nachvollziehbaren Zweck. Wer nur eine schnelle Orientierung braucht, findet sie oben; wer das Thema genauer verstehen möchte, kann weiterlesen.

Ich würde daraus kein starres Gesetz ableiten, dass jeder Beitrag exakt drei Merksätze oder immer dieselben Module braucht. Manche Fragen lassen sich knapp beantworten, andere verlangen zuerst eine Einschränkung. Die Struktur sollte dem Inhalt helfen. Der ausführliche Teil darf nicht bloß die Kurzantwort wiederholen, sondern muss erklären, wann sie gilt und wo sie nicht weiterhilft. Andernfalls entsteht mehr Seitenlänge, aber kaum zusätzliches Verständnis.

Für einen Shop kommt eine weitere Abwägung hinzu: Ein passendes Produkt kann eine sinnvolle nächste Station sein, muss aber nicht jeden Absatz unterbrechen. Im gezeigten Aufbau stehen am Ende verwandte Inhalte im Vordergrund. Das ist für mich ein guter Hinweis, zunächst den Informationsbedarf ernst zu nehmen, statt jede Artikelseite wie eine verlängerte Produktanzeige zu behandeln.

Änderungen getrennt entwickeln und anschließend ansehen

Im Video erläutere ich das Arbeiten mit Branches als getrennten Entwurfsständen. Die beabsichtigte Funktion ist klar: Änderungen prüfen können, während die veröffentlichte Version erhalten bleibt. Das ist eine Beschreibung des gezeigten Vorgehens und keine pauschale Garantie, dass jede Art von Änderung in jedem verbundenen System automatisch isoliert wäre. Vor der Arbeit sollte feststehen, welcher Entwurf bearbeitet wird und was davon tatsächlich öffentlich ist.

Später zeige ich den Blog auf der Live-Website und bespreche Desktop, Tablet und Smartphone. Der Agent hat die Anpassungen über verschiedene Größen hinweg übernommen. Trotzdem würde ich einen Bericht über gelungene Anpassungen nicht mit einer vollständigen Geräteprüfung gleichsetzen. Artikelaufruf, längere Überschriften, Bilder und die Orientierung auf schmalen Ansichten müssen am Ergebnis kontrolliert werden. Genau dort zeigt sich, ob die vorher getroffenen Strukturentscheidungen auch unter weniger Platz funktionieren.

Was ich aus diesem Aufbau mitnehme

Die im Video erzählte Beschleunigung ist eine persönliche Projekterfahrung, keine Lieferzusage für andere Websites. Der Aufwand hängt auch davon ab, wie klar die vorhandene Struktur ist, welche Inhalte bereitliegen und wie viele Entscheidungen offenbleiben. Der Film zeigt selbst, dass mehrere Runden und menschliche Rückmeldungen nötig waren. Das sollte bei der Planung nicht hinter dem schnellen ersten Entwurf verschwinden.

Wenn du einen bestehenden Auftritt erweitern möchtest, würde ich zuerst eine Übersicht und einen echten Beispielartikel bearbeiten. Daran lässt sich prüfen, ob Auswahl und Lesen funktionieren und ob die Erweiterung zum Bestand passt. Erst danach würde ich die übrigen Inhalte nach demselben Muster einpflegen. Fehler an einer gemeinsamen Struktur sind zu diesem Zeitpunkt noch überschaubar; später ziehen sie sich durch viele Beiträge.

Was bleibt.

Die wichtigste Verbesserung dieses Blogs war das bewusste Weglassen. Der Agent konnte passende Elemente erzeugen. Ich musste entscheiden, welche davon den Besuchern helfen.

Eine gute Zusammenarbeit beginnt deshalb mit einem klaren Bestand und endet mit einem geprüften Leseweg, nicht mit dem ersten vorzeigbaren Screenshot.