divilovewp/divi5-skill

Divi 5 Skill

Erstelle Divi-5-Seitenlayouts als gültiges Builder-Markup. Der Skill ist modular: Diese Datei leitet zu spezifischen Referenzdateien weiter – lies nur die, die für eine Aufgabe benötigt werden.

🚦 VERPFLICHTENDER Workflow zum Erstellen einer Seite (nicht überspringen)

Das Erstellen einer Seite ist ein gestaffelter, mehrstufiger Prozess. Springe nicht direkt zum Markup oder rufe divi_create_page / POST /pages auf.

▸WARTEN bedeutet: Beende deine Nachricht und warte auf die tatsächliche Antwort des Benutzers. Stelle keine Fragen und beantworte sie dann selbst, und fahre nicht im selben Zug mit dem nächsten Schritt fort. Frage → stopp → lass den Benutzer antworten → dann mach weiter. Das ist das #1-Ding, das Modelle hier falsch machen – du musst wirklich innehalten.

1. ▸WARTEN – Verbindungsmodus. Frage: Live-Site (Divi Connect) oder nur JSON? Wenn live, Site-URL + API-Key abrufen und /design-system aufrufen, um echte Tokens zu laden. (Überspringen, wenn aus dem Kontext offensichtlich.)
2. ▸WARTEN – Discovery (fast immer erforderlich). Stelle einen fokussierten, gebündelten Satz von Fragen – Ziel/Angebot, Zielgruppe, wichtige Sections, Marke/Ton, Pflichtinhalte, primärer CTA (~4–6, jeweils mit sinnvollem Standardwert), dann STOPP und warte. Ein kurzes oder allgemeines Briefing reicht nicht, um dies zu überspringen – z. B. "Erstelle eine Seite für einen Business-Mentor" sagt dir nichts über das Angebot, die Zielgruppe, die Sections oder den CTA, also MUSST du zuerst fragen, nicht raten. Überspringe Discovery nur, wenn der Benutzer wirklich detaillierte Anforderungen gegeben ODER explizit "mach einfach / bau es einfach" gesagt hat.
3. ▸WARTEN – Seitenplan + Genehmigung. Präsentiere einen prägnanten, schriftlichen Seitenplan (Intention → Erzählung → Section-Blaupause → welche Design-System-Tokens wozu passen) und eine einzeilige Selbstkritik. Frage dann explizit den Benutzer, ob er zustimmt oder Änderungen wünscht, und STOPP. Generiere kein Markup und erstelle keine Seite, bis er zustimmt. Wenn er Feedback gibt, überarbeite, präsentiere erneut und frage wieder – iteriere bis zur Zustimmung.
4. Erstellen. Erst nach Zustimmung: Generiere das Markup (mit echten Tokens), erstelle dann die Seite (Live-Modus) und gib die URL zurück. Nach dem Erstellen kann der Benutzer immer noch Änderungen wünschen – wende sie an (bearbeiten/neu erstellen) und bestätige erneut.

Dies ist der Kernwert des Skills – der Plan ist das Denken; das Markup ist nur Transkription. Vollständige Methode: DIVI5-DESIGN-PROCESS.md (lesen). Die EINZIGE Möglichkeit, dies zu umgehen: Der Benutzer sagt explizit "bau es einfach / mach einfach" – dann fahre mit genannten Annahmen fort, zeige aber zuerst einen 2-zeiligen Plan.

Referenzdateien zum Lesen während der Erstellung

• Immer: DIVI5-BASE.md (Regeln/Validierung) + DIVI5-DESIGN-PROCESS.md (der obige Workflow).
• Live-Veröffentlichung: DIVI5-CONNECT.md (Design-System-Tokens, Seite erstellen).
• Module/Styling: die Feature-Dateien in der Tabelle unten.
• Markup mit echten Design-Tokens generieren; vor dem Erstellen gegen BASE validieren.

⚠️ KRITISCHE Block-Markup-Regeln (führen zu stillen LEERSEITEN)

Lies diese, auch wenn du nichts anderes liest. Der Divi-Connect-Server-seitige Validator lehnt Seiten ab, die die Regeln 1–3 verletzen, also vermeidet ein korrektes Befolgen einen fehlgeschlagenen Aufruf.

1. Modulattribute NIEMALS in attrs verpacken. Das JSON nach einem Blocknamen ist das Attribute-Objekt – setze title/content/module/builderVersion auf die oberste Ebene. ❌ <!-- wp:divi/heading {"attrs":{"title":{...}}} /--> → rendert LEER ✅ <!-- wp:divi/heading {"title":{...},"builderVersion": "5.11.1"} /--> (attrs ist nur ein Schlüssel in Preset-Definitionen – niemals in Modulblöcken.)

2. divi/text-Inhaltsschlüssel ist exakt content – niemals body oder text. ❌ "body":{...} oder "text":{...} → rendert LEER ✅ "content":{"innerContent":{"desktop":{"value":"<p>Hallo.</p>"}}} (body existiert nur als die bodyFont-Styling-Gruppe.)

3. HTML in einem value wird ROH übergeben (<p>, <strong>) – niemals vorher escapen. ❌ "value":"<p>Hallo.</p>" ✅ "value":"<p>Hallo.</p>" Schreibe auch Nicht-ASCII-Typografie als numerische HTML-Entities (Gedankenstrich —, geschweifte Anführungszeichen ’/“/”), ODER verwende einfaches ASCII (-, gerade Anführungszeichen). Der claude.ai-Connector korrupt rohe Multibyte-Zeichen, und ein JSON-\uXXXX-Escape überlebt den Transport wörtlich, sodass der Besucher es buchstäblich liest.

4. Jedes Modul benötigt "builderVersion": "5.11.1". Selbstschließende Module enden mit /-->. Verpacke die ganze Seite in <!-- wp:divi/placeholder --> ... <!-- /wp:divi/placeholder -->.

Vollständige Details + alle anderen Fallstricke: Lies DIVI5-BASE.md.

⚠️ Bei Verbindung mit einer Live-Site (Divi Connect / MCP)

Nach dem Aufruf von divi_get_design_system MUSST du mit dessen Tokens bauen:

• Verwende den exakten token-String (das gesamte $variable(...)$) für jede Farbe UND Größe – Schriftgrößen, Abstände, Padding/Margin, Lücken, Radius – nicht nur Farben. Hartcodiere keinen Wert, wenn ein passender Token existiert (Überschriften sind der #1-Übeltäter – nie Schriftgrößen von Überschriften hartcodieren).
• Erfinde niemals eine gvid-/gcid--ID. Verwende nur IDs, die von /design-system zurückgegeben werden (kein gcid-primary, gcid-heading, gvid-h1 etc., es sei denn, genau diese ID wurde zurückgegeben). Erfundene IDs rendern als nichts.
• Gleiche per label ab (z. B. H1 Desktop, Section Gap). Hartcodiere nur, wenn kein Token existiert. Detail: DIVI5-CONNECT.md §3.

Referenzdateien

Datei	Wann lesen
DIVI5-BASE.md	Immer – Kernregeln, Verschachtelung, Validierung, häufige Fehler
DIVI5-DESIGN-PROCESS.md	Immer – Discovery-Fragen + Seitenplanung vor JSON
DIVI5-CONNECT.md	Live-Veröffentlichung über das Divi-Connect-Plugin (Design-System lesen, Seiten erstellen, Tokens verwalten)
DIVI5-WORDPRESS.md	Seiten programmatisch über REST-API / WP-CLI erstellen
DIVI5-LAYOUT.md	Seitenstruktur (Section/Row/Column/Group), Grid-Layout, global-layout
DIVI5-STYLING.md	Hintergründe, Verläufe + Verlaufsvariablen, Abstände, Rahmen, Typografie, Texteffekte, Seitenverhältnis, Rahmung, Variablen, Pseudo-Klassen
DIVI5-MODULES-CONTENT.md	heading, text, button, image, blurb, CTA, testimonial, team, icon, divider, code, fullwidth-header, svg, timeline, breadcrumbs
DIVI5-MODULES-INTERACTIVE.md	accordion, toggle, tabs, contact-form, signup, dropdown, contact-form-7, interactions
DIVI5-MODULES-MEDIA.md	video, gallery, slider, video-slider, lottie, audio, before-after-image
DIVI5-MODULES-DATA.md	counters, pricing tables, social, table-of-contents, instagram-feed
DIVI5-MODULES-DYNAMIC.md	blog, portfolio, post modules, menu, search, login, sidebar, comments, map, Loop Builder
DIVI5-MODULES-WOOCOMMERCE.md	shop, single-product, cart & checkout modules
DIVI5-PRESETS.md	Global Presets – Speicherformat, attrs-Schlüsselpfade, REST-Endpunkt, Helfer
DIVI5-PATTERNS.md	Praxisnahe Layoutmuster + Python-Generierungshelfer
DIVI5-COVERAGE.md	Was ist bestätigt, quellgeprüft und ungetestet

Typische Kombinationen

Beginne immer mit BASE + DESIGN-PROCESS.

• Landing-Page (nur JSON): BASE + DESIGN-PROCESS + LAYOUT + STYLING + MODULES-CONTENT + PATTERNS
• Erstellen und live veröffentlichen (Divi Connect): + CONNECT
• Import via REST-API / WP-CLI: + WORDPRESS
• Interaktive Sections: + MODULES-INTERACTIVE
• Medien/Video: + MODULES-MEDIA
• Preise/Zähler: + MODULES-DATA
• Blog/Portfolio/Theme Builder: + MODULES-DYNAMIC
• WooCommerce-Shop: + MODULES-WOOCOMMERCE

Version

V0.6.9 – Builder-Version 5.11.1 (folgt der Divi-5.11.x-Linie). Der builderVersion-Stempel auf generiertem Markup sollte mit der Divi-Version deiner Website übereinstimmen ("5.11.1" auf aktuellen Installationen; ältere Werte werden noch über Abwärtskompatibilität importiert). 🆕 v0.6.9 macht Schriftgrößen eines Designs zu einer Frage, nicht zu einer Schätzung – ein als Vektor-PDF aus Figma exportiertes, oder ein Screenshot, dessen Canvas-Breite der Benutzer angibt, trägt tatsächlich exakte Schriftgrößen, sodass die Referenzleiter eine vierte Stufe und ein Schriftgrößen-Gate erhält: einmal fragen, dann size_policy exact | snap | presets an divi_build_page übergeben und mitteilen, welche verwendet wurde. Siehe DIVI5-CONNECT §"Match a reference". 🆕 v0.6.8 deckt vier neue Module von Divi 5.11 ab – divi/charts, divi/gravity-forms, divi/imagely-gallery, divi/payment-button – und dessen native backdrop-filter-Steuerung, die den Custom-CSS-Workaround früherer Versionen dieses Skills ersetzt. Siehe DIVI5-BASE §0. 🚨 v0.6.7 behob einen Breakpoint-Fehler, der mobile Stylings stumm ins Leere laufen ließ: phoneWide ist standardmäßig deaktiviert und erzeugt kein CSS – verwende phone. Siehe DIVI5-BASE §6. v0.6.6 ist ein Korrektur-Release (gleiches 5.9.0-Schema). Es korrigiert zwei Regeln, die in jeder unter 0.6.5 oder früher heruntergeladenen Kopie falsch waren, und die beide stumm fehlschlagen: text-transform kommt nur von capitalization (das alte style:["uppercase"] speichert zwar sauber, erzeugt aber nichts), und htmlAttributes nimmt den Breakpoint außen – htmlAttributes.desktop.value.{id, class}, nicht htmlAttributes.id.desktop.value, was überhaupt keine id rendert, sodass #anchor-Links auf der Seite nirgendwo hinführen. Außerdem wird Rich-Text-Escaping an einem Ort festgelegt (rohes HTML, niemals vorher escapen) und die native Größenanpassung → Ausrichtung-Steuerung dokumentiert (module.decoration.sizing.{bp}.value.alignSelf), die den alten sizing.alignment-Preset-Pfad ersetzt. Fügt DESIGN-PROCESS §11b (Nachbearbeitungs-Politur) und §8c (Landing-Page-Heuristiken), CONNECT §5 (Match a reference), PRESETS §1b (das vierstufige Preset-Modell) sowie einen Adobe-Typekit / Nicht-Divi-Schriftarten-Abschnitt (STYLING) hinzu. v0.6.5 wurde nur innerhalb des Divi-Connect-Plugin-Bundles ausgeliefert – nie als Repo-Release oder Download – daher sind seine Notizen hier eingeflossen: Rich-Text-Inhalte werden als rohes HTML dokumentiert, weil ein JSON-\uXXXX-Escape den MCP-Transport wörtlich überlebt (die alte Anleitung setzte wörtliches \u003cp\u003e auf die Seite), und Nicht-ASCII-Typografie verwendet aus demselben Grund numerische HTML-Entities (—). v0.6.4 ist ein Dokumentations-/Patterns-Release (gleiches 5.9.0-Schema): Es dokumentiert die Divi-Connect-Section-Pattern-Bibliothek – 28 fertige, meist native Section-Patterns (Hero, Pricing, Testimonials, FAQ, Timeline, Gallery, Comparison und mehr) plus das divi_list_patterns-Discovery-Tool und die divi_build_page-Fidelity-Primitive (Hintergrundbild-Overlays, Badges, Tilt, Variable Fonts). v0.6.3 fügte den Divi-5.9.0-Grid-Editor (gridOffsetRules; LAYOUT §5b) und einen Abschnitt "KI-Design-Klischees vermeiden" hinzu. v0.6.0 fügte das Tooltip-Modul + den Batch für erweiterte Textstylings hinzu. Siehe DIVI5-COVERAGE.md für das, was echtes Rendern getestet vs. quellgeprüft ist.