Divi 5 mit KI bearbeiten: Der Diviskit Agent im Detail

Wer schon mal versucht hat, ein Divi-Layout aus einem KI-Chat per Copy-Paste in WordPress zu ziehen, kennt das Ergebnis: Export-JSON, das der Visual Builder nicht frisst, oder generisches HTML ohne ein einziges natives Modul. Der Engpass ist nicht die KI — es ist die Schnittstelle. Der Diviskit Agent schließt genau diese Lücke: Er macht eine WordPress-Site mit Divi 5 für KI-Coding-Agenten steuerbar — nativ, editierbar, mit Sicherungsleinen.

Was der Diviskit Agent ist

Der Agent ist kein Chatbot im Backend und kein Seitengenerator mit eigener Ausgabesprache. Er ist eine authentifizierte REST-Brücke (Namespace diviskit/v1, aktuell 106 Routen) zwischen WordPress und dem Diviskit-MCP-Server. Der Aufbau:

• WordPress-Plugin — stellt die diviskit/v1-Endpunkte, das Dashboard und den Capability-Handshake. Voraussetzung: Divi 5.
• MCP-Server (@diviskit/mcp-server, via npx) — übersetzt MCP-Tool-Aufrufe in REST-Requests, kapselt Divi-Details und Validierung.
• AI-Client — Devin, Claude Code, Codex, Claude Desktop oder jeder andere MCP-kompatible Agent läuft auf deiner Maschine und steuert die Site über ein WordPress Application Password.

Wichtig zu wissen: Der Agent steht unter GPL-2.0, der komplette Quellcode liegt offen auf GitHub. Externe Verbindungen gibt es genau zwei: den Download des MCP-Servers aus der npm-Registry und eine anonyme Update-Prüfung gegen diviskit.com, damit neue Versionen im WordPress-Dashboard erscheinen. Keine Telemetrie, kein Account.

Der Workflow: Prompt → native Divi-Blöcke

Der entscheidende Punkt ist nicht, dass die KI Inhalte schreibt, sondern was sie schreibt: native Divi-5-Block-Serialisierung. Sections, Rows, Columns, Module — alles als echte Divi-Blöcke. Das Ergebnis bleibt im Visual Builder vollständig editierbar, Presets und globale Tokens greifen, und es gibt keinen Custom-HTML-Friedhof, den du später wegräumst.

Möglich wird das durch den Schema-Dump: Das Plugin liefert das komplette Modulschema der installierten Divi-Version als JSON — inklusive Schema-Fingerprint, der sich exakt dann ändert, wenn Divis Attribut-Pfade sich ändern. Nach einem Divi-Update regeneriert ein Kommando die lokalen Referenzen, und der Agent schreibt wieder versionsgenau statt zu raten.

Die Tool-Oberfläche: 93 MCP-Tools im Free-Kern

Der kostenlose Kern bringt 93 diviskit_*-Tools mit, mit Pro und Vendokit kommen 18 Commerce-Tools dazu (111 insgesamt). Sie decken den gesamten Site-Authoring-Stack ab, nicht nur „Seite bauen":

• Seiten & Inhalte — Pages/Posts lesen, anlegen, publizieren; Sections und Module gezielt anfügen, ersetzen, verschieben, klonen, sperren.
• Design-System — globale Farben und Fonts, Variable-Manager-Tokens ($variable()-Referenzen), Divi-Presets samt Audit, Orphan-Scan und Registry-Doctor.
• Theme Builder — Templates mit Conditions, Header-/Body-/Footer-Layouts, gezieltes Block-Insert in bestehende Layouts.
• Struktur — Nav-Menüs mit Theme-Locations, Divi-Library-Einträge, Canvases für Popups und Off-Canvas-Panels.
• Daten & SEO — SCF-Feldgruppen lesen und syncen, The-SEO-Framework-Metadaten get/set mit Readback, WP-CLI-Passthrough für Audits.
• Commerce (Pro) — Vendokit-Produkte, Varianten, Bestellungen, Lizenzschlüssel und Gateways als eigene Tool-Familie.

Ein konkretes Beispiel aus diesem Blog: Das Einzelpost-Template, in dem du gerade liest — Hero mit dynamischem Titel, Meta-Zeile, Prev/Next-Navigation und den „Weitere Artikel"-Cards unten — ist ein Theme-Builder-Body-Layout, das der Agent per tb_template_create und Layout-Write angelegt hat. Kein Hand-Klicken im Visual Builder, trotzdem überall editierbar.

Safety first: Handshake, Dry-Run, Rollback

Eine KI mit Schreibzugriff auf die Site braucht Leitplanken. Der Agent bringt sie mit:

• Capability-Handshake — beim Connect meldet die Site, welche Operationen sie unterstützt. Tools, die die Site nicht kann, tauchen im Client gar nicht erst auf.
• Dry-Run-Pläne — Schreib-Tools akzeptieren dry_run: true und liefern den Änderungsplan, ohne etwas anzufassen.
• Block-Validierung — diviskit_validate_blocks prüft Markup vor dem Speichern auf bekannte Silent-Failures (fehlende Layout-Attribute, falsche Content-Pfade, kaputte Button-Formate).
• Rollback-Snapshots — Content-Writes können bewachte Snapshots auslösen; Restore läuft mit Checksum-Drift-Check statt blindem Überschreiben.
• Echte WP-Permissions — jeder Endpoint mappt auf WordPress-Capabilities (edit_posts, edit_pages, manage_options), dazu Application-Password-Auth und Rate-Limits. Fehler kommen als maschinenlesbares Envelope { ok, error: { code, message, hint } } — kein Silent Fail.

Skills: dem Agenten Divi beibringen

Rohe Tools reichen nicht — der Agent muss auch wissen, wie Divi-Markup korrekt aussieht. Dafür shippt das Plugin die Diviskit-Skills direkt mit und serviert sie versioniert über REST (/wp-json/diviskit/v1/skills):

• diviskit-builder — Block-Formate, auto-generierte Modul-Maps aus dem Schema-Dump, Minimal-Snippets und die Liste bekannter Fallstricke (etwa: ein Button braucht icon.enable: "off", sonst zeigt Divi einen Hover-Pfeil).
• diviskit-scf — Automatisierung von SCF-Feldgruppen, Post-Types und Loops.
• diviskit-mega-menu und diviskit-vendokit (Pro) — Muster für Mega-Menüs, Off-Canvas-Drawer und Theme-Builder-Header bzw. die Commerce-Tools.
• Design Library (Add-on) — CSS-Effekte und WebGL-Shader-Backgrounds als fertige Bausteine.

Praktisch heißt das: Du sagst „Bau eine Landing-Section mit drei Feature-Cards" — und der Agent kennt die korrekte Attribut-Struktur für Blurbs, Group-Flex und Hover-States, statt generisches HTML zu raten.

Free und Pro

Die Free-Version ist kostenlos (GPL-2.0) und als Zip direkt von GitHub zu haben. Sie enthält die komplette Authoring-Brücke: Seiten, Sections, Module, Theme Builder, Presets, Variablen, Snapshots, Menüs, SCF-Basics. Pro fügt die Commerce-Automatisierung für Vendokit hinzu (18 eigene Tools für Produkte, Bestellungen und Lizenzen) sowie weitere Advanced-Workflows. Was deine Installation kann, entscheidet nicht das Marketing — sondern der Handshake: Der Client sieht nur die Tools, die die Site tatsächlich anbietet.

Setup in fünf Minuten

Der Einstieg ist bewusst unspektakulär:

1. diviskit-agent.zip laden, unter Plugins → Installieren → Hochladen aktivieren. Divi 5 muss aktiv sein.
2. Application Password anlegen (wp user application-password create admin diviskit-mcp --porcelain).
3. MCP-Config in den Client übernehmen — das Dashboard liefert den fertigen JSON-Block.
4. Handshake per curl verifizieren (compatible: true + Capabilities-Map).
5. Skills synchronisieren: install-skills.sh --client devin|claude|codex|cursor (liegt im Plugin unter bin/).
6. Client neu starten — die diviskit_*-Tools stehen.

Zusätzlich schreibt das Plugin eine markierte Sektion in die AGENTS.md deines Projekts: REST-Base, fertige Client-Config, Verifikations-Kommandos und einen kopierbaren Setup-Prompt, den du einem beliebigen AI-Editor vor die Füße werfen kannst.

Fazit

Der Diviskit Agent macht aus einer KI, die über Divi redet, eine, die Divi bedient: native Blöcke statt HTML-Fragmente, Schema-Wissen statt geratener Attribut-Pfade, und ein Safety-Layer aus Handshake, Dry-Run und Snapshots. Wir nutzen ihn für diese Site selbst — das Blog-Template, die Übersichtsseite und ein großer Teil des Designs sind agenten-gebaut.

Der Agent ist als Open Beta verfügbar: Version 1.7.4 direkt herunterladen, Details und Showcase auf der Produktseite, Einrichtung Schritt für Schritt in der Dokumentation. Updates zu neuen Releases gibt's per Newsletter: