WP-LIT-MCP/docs/guides/divi-design-system.md

Divi-Designsystem

lit-divi-design-system liest das Designsystem der Website live aus Divi:

• Globale Farben (colors): ID (gcid-…), Name, Wert und der Platzhalter für neue Inhalte, z. B. {{color:primary}} für die Primärfarbe oder {{color:Nachtblau}} für eine eigene globale Farbe. Die fünf Theme-Farben heißen primary, secondary, heading, body und link.
• Globale Variablen (variables): Zahlen, Texte, Bilder, Links (gvid-…), Platzhalter {{var:<Name>}}.
• Theme-Schriften (fonts): Überschrift und Fließtext, Platzhalter {{font:heading}} / {{font:body}}.
• Größen (sizes): Schriftgrößen, Inhaltsbreite und Spaltenabstand aus den Theme-Optionen.
• Presets (presets): Modul-Presets je Modul (kind: module, z. B. alle Button-Presets) und Gruppen-Presets (kind: group); default: true markiert das Standard-Preset eines Moduls.

Auf großen Websites eingrenzen: only (Liste aus colors, variables, presets) liefert nur diese Teile (Schriften und Größen sind immer dabei), module (z. B. "button") nur die Presets dieses Moduls; höchstens 200 Presets je Antwort (notes sagt, wenn es mehr gibt).

Regeln:

1. Vor dem Gestalten einer Seite das Designsystem lesen.
2. Globale Farben, Variablen und Presets vor festen Werten verwenden; feste Farben oder Schriften nur, wenn der Nutzer es ausdrücklich möchte.
3. Gibt es für einen Zweck noch keine Farbe, Variable oder kein Preset, dem Nutzer vorschlagen, es im Divi-Builder anzulegen, statt feste Werte zu verteilen.

Presets anlegen, ändern, löschen

Über mcp-adapter-execute-ability:

• lit/divi-preset-get – ein Preset mit Einstellungen (attrs als Pfad → Wert wie bei lit-divi-node-get), verschachtelten Gruppen-Presets und den Seiten, die es verwenden (usage).
• lit/divi-presets-set – items mit module (z. B. "button") oder group (z. B. "font-body"):
  • neu: name + Einstellungen (name nur für neue Presets); ändern: preset (Name oder ID), optional rename (nur zusammen mit preset); Namen 1–100 Zeichen ohne HTML, innerhalb des Moduls bzw. der Gruppe eindeutig;
  • Einstellungen in attrs (Vollform, Platzhalter {{color:…}}, {{var:…}}, {{font:…}}) oder aus einem gestalteten Modul: from_node = {"post_id": 12, "id": "s0.r0.c1.m2"} (Pfad-ID aus lit-divi-outline);
  • Presets tragen nur Gestaltung – Texte, Links und Bilder gehören ins Modul (sonst validation_failed);
  • group_presets (nur Modul-Presets), z. B. {"font": "Button-Schrift"}; make_default: true macht das Preset zum Standard seines Moduls bzw. seiner Gruppe;
  • neue Gruppen-Presets brauchen das Modul, aus dem die Gruppe stammt: source_module oder from_node.
• lit/divi-presets-delete – nur Presets, die nirgends ausdrücklich verwendet werden (Seiten, Bibliothek, Theme Builder, verschachtelt in anderen Presets); sonst in_use mit den Fundstellen. Ein Standard-Preset darf gelöscht werden, auch wenn Module es ohne eigenes Preset nutzen: der Probelauf listet diese Seiten, danach zeigen sie das Divi-Standardaussehen.
• lit/divi-design-snapshots / lit/divi-design-restore – vor jeder Änderung legt LIT MCP einen Snapshot an (je Bereich die letzten 20); wiederherstellen mit snapshot_id.

Ablauf jeder Änderung: Aufruf ohne confirm = Probelauf (confirm_required mit diff, betroffenen Seiten und design_rev), dem Nutzer die Änderung zeigen, dann derselbe Aufruf mit confirm: true und design_rev. Hat sich der Bestand inzwischen geändert (z. B. im Divi-Builder), kommt rev_mismatch – neu prüfen. confirm: true ohne design_rev ergibt validation_failed; läuft gerade eine andere Änderung, kommt conflict – kurz warten und den Probelauf wiederholen.

Rechte: Presets ändern verlangt das Recht, das Design anzupassen, und in Divis Rollen-Editor den Visual Builder. Konten ohne das Recht unfiltered_html (z. B. Redakteure) werden abgewiesen (forbidden), wenn vorhandene Presets HTML oder CSS enthalten – Divi würde es beim Speichern entfernen; dann einen Administrator bitten. Das gilt auch für das Löschen und für lit/divi-design-restore.