WebsiteFramework: KI-gebaute Websites pflegen wie mit einem CMS
2
Wege: manuell oder per KI-Agent
0
KI-Credits für manuelle Änderungen
3
eng begrenzte Agenten-Werkzeuge
1
Snapshot je Speichern und Agentenlauf
Ausgangslage
KI-gebaute Websites sind statisches HTML ohne Redaktionssystem. Für die Betreiber heißt jede Änderung: Code öffnen oder die KI erneut beauftragen, Credits bezahlen und hoffen, dass sie nicht mehr umschreibt als nötig. Ein Team kann so nicht gemeinsam und nachvollziehbar pflegen. Und ein klassisches CMS nachträglich darunterzulegen, würde genau das Design zerstören, das die KI gerade gebaut hat.
Lösung
Zwei Wege zum selben Ergebnis: Im manuellen Modus arbeitet man wie in einem klassischen CMS, mit Seitenübersicht, visuellem Editor, Bausteinen und Stilpanel. Wer lieber beschreibt, was sich ändern soll, beauftragt den KI-Agenten im Chat, für die ganze Website oder für einen einzelnen Block.
Die Website bleibt, wie sie gebaut wurde. Beim Speichern wird nur der Inhalt des body ersetzt, Kopfbereich und Struktur bleiben byte-identisch. SEO-Angaben pro Seite werden chirurgisch in den head geschrieben. Farben, Schriften und Textstile liest das Framework aus der Website selbst aus und macht sie zentral anpassbar.
Der Agent ändert nur gezielt: Er hat drei eng begrenzte Werkzeuge (Seite lesen, Text byte-genau ersetzen, Seite schreiben) und bevorzugt die kleinste mögliche Änderung. Jede Schreibaktion erzeugt Backup, Versionsprüfung und Protokolleintrag. Abgerechnet wird über einen eigenen, lokal hinterlegten API-Schlüssel, und nur dann, wenn man die KI tatsächlich beauftragt.
Jede Änderung ist ein Git-Snapshot. Eine Wiederherstellung sichert zuerst den aktuellen Stand, damit auch das Zurücksetzen umkehrbar bleibt. Größere Umbauten mache ich weiterhin mit Claude Code im selben Projekt: Die Flexibilität eines CMS und volle Entwicklungsfreiheit schließen sich nicht aus.
Die Oberfläche
Screenshots
Highlights
- 1Manueller ModusSeitenübersicht als zoombare Landkarte, visueller Editor mit Bausteinen, Stilpanel und Ebenen, mehrere Seiten in Tabs.
- 2KI-Agent im ChatWebsite-weite Aufträge wie „Ton der Startseite formeller“ oder gezielte Änderungen an einem Block, direkt im Editor und rückgängig machbar.
- 3Keine Credits für KleinigkeitenEin Wort korrigieren oder ein Bild tauschen kostet nichts. KI kommt nur zum Einsatz, wenn man sie bewusst beauftragt.
- 4Design-Tokens & TextstileFarben, Schriften und Radien aus den CSS-Variablen der Website, dazu alle erkannten Text-, Button- und Flächenstile, zentral anpassbar.
- 5SEO pro SeiteTitel und Beschreibung mit SERP-Längenzähler, Canonical-URL und Social Image, chirurgisch in den head geschrieben.
- 6Snapshots & WiederherstellungJedes Speichern und jeder Agentenlauf mit Änderungen erzeugt einen Snapshot. Jeder frühere Stand lässt sich wiederherstellen.
- 7Responsive BearbeitungDesktop-, Tablet- und Mobilansicht schreiben passende Media Queries.
- 8AbgesichertAlle Dateizugriffe bleiben im Projektordner, geschützt gegen Path Traversal und Symlink-Ausbrüche. Der API-Schlüssel bleibt lokal.
- 9Offen für Claude CodeDas Framework pflegt Inhalte und Stile. Neue Seiten und größere Umbauten entstehen weiter mit Claude Code im selben Projekt.
Tech-Stack
- Next.js 16 (Node-Runtime), React 19, TypeScript
- GrapesJS-Editor, Cheerio nur zur Analyse
- Anthropic SDK: Tool Use, NDJSON-Streaming, Prompt Caching
- simple-git für Snapshots
- Zod-Validierung, Tailwind CSS 4