Code für LLM kopieren

Überblick

Grab Code verwandelt den aktuell ausgewählten Kadence Block in eine vollständige CSS-Anfrage für einen KI-Assistenten – inklusive Block-Markup und Kadence-spezifischen Anweisungen.

Kadence Blocks verwenden eine eigene HTML-Architektur mit uniqueID-Attributen, die auf generierte Klassennamen abgebildet werden, plus ein spezielles Schlüsselwort selector in CSS-Feldern auf Blockebene. Allgemeine KI-Tools kennen diese Muster nicht, deshalb raten sie meist bei Selektoren und CSS-Platzierung und liegen oft falsch.

Grab Code löst dieses Problem, indem es das Block-Markup mit einem Kadence-spezifischen Systemprompt bündelt, sodass die KI weiß:

• Wie Kadence Block-HTML und uniqueID-Attribute auf reale Klassen abgebildet werden

• Wie sich das Schlüsselwort selector in Kadence Block-CSS-Feldern verhält

• Wann block-spezifisches CSS vs. globales CSS sinnvoll ist und wo du es einfügen solltest

Grab Code verwenden

Verwende Grab Code immer dann, wenn du block-spezifische CSS-Hilfe von einem KI-Assistenten möchtest.

Wenn die KI antwortet, kennt sie bereits die Kadence-Selektoren und weiß, wo du das CSS einfügen solltest.

Was kopiert wird

Grab Code sendet ein Paket aus vier Teilen in deine Zwischenablage, damit die KI alles hat, was sie braucht.

1. Block-Identifikations-Header

Ein kurzer Header, der der KI mitteilt, mit welchem Kadence Block und welchem HTML-Tag sie arbeitet, zum Beispiel ein Row Layout vs. eine Column vs. ein Advanced Heading.

Das orientiert die KI am Typ des Elements, an der erwarteten Struktur und daran, wie spezifisch das CSS sein sollte.

2. Kadence CSS-Systemprompt

Ein detaillierter Anweisungssatz, der der KI beibringt, wie sie Kadence-sicheres CSS schreibt:

• Wie das Kadence-Schlüsselwort selector in CSS-Feldern des Blocks funktioniert

• Wie uniqueID-Attribute in die korrekten CSS-Klassen aufgelöst werden

• Wie sie eine passende Spezifität wählt, damit CSS-Overrides funktionieren, ohne übertrieben zu sein

• Wie sie zwischen Block-Ebene und globalen Styles entscheidet und wo du jeden Typ einfügst

• Wie sie deine Sprache erkennt und entsprechend antwortet

• Wie sie CSS-Kommentare kurz hält (maximal eine Zeile)

Die KI verwendet diesen Prompt als ihre Spielregeln, wann immer sie CSS für den Block schreibt oder erklärt.

3. Block-Markup

Grab Code enthält:

• Das serialisierte Gutenberg-Kommentar-Markup mit Attributen des Blocks

• Das gerenderte HTML für den Block, so wie er auf der Seite erscheint

Damit hat die KI den vollständigen Kontext über:

• Die Struktur des Blocks und seiner inneren Blöcke

• Die tatsächlichen uniqueID-Werte, die zu Kadence-Klassen werden

• Alle weiteren Klassen oder Attribute, die das Styling beeinflussen

Dadurch muss die KI dein HTML nicht raten – sie sieht den echten Quellcode.

4. Request-Prompt-Suffix

Am Ende des Pakets fügt Grab Code eine Zeile Request: an.

Dein Cursor landet direkt hinter Request:, wenn du in die KI einfügst. Dort schreibst du deine Anweisungen:

• Request: Make the background darker on hover and soften the box shadow.

• Request: Only change typography on mobile for this section.

So bleibt der Systemkontext klar vom eigentlichen Wunsch getrennt, was die KI tun soll.

Wie die KI den Kontext nutzt

Sobald du den Grab Code eingefügt hast, kann ein fähiger KI-Assistent die eingebetteten Regeln nutzen, um praxistaugliches, Kadence-sicheres CSS zu erzeugen.

Spracherkennung

Der Systemprompt weist die KI an:

• Deine natürliche Sprache aus dem von dir getippten Request-Text zu erkennen

• In derselben Sprache zu antworten, wenn sie Schritte und Kommentare erklärt

• Kommentare kurz zu halten – höchstens eine Zeile pro Kommentar

Das CSS selbst bleibt gleich, aber Erklärungen, Hinweise und Anleitungen erscheinen in deiner Sprache.

Auswahl des CSS-Geltungsbereichs

Der Prompt führt die KI dazu, je nach deiner Anfrage den passenden Scope zu wählen.

• Block-spezifischer Scope (Standard):

  • Für Row Layout- und Section-Blöcke verwendet die KI das Kadence-Schlüsselwort selector (zum Einfügen in das CSS-Feld des Blocks) oder die aufgelöste uniqueID-basierte Klasse in Erklärungen.

  • Für innere Blöcke löst die KI uniqueID-Attribute in block-spezifische Klassen auf und sagt dir, welches X-Bar- oder Block-CSS-Feld du öffnen sollst.

• Globaler Scope (nur wenn impliziert):

  • Wenn deine Anfrage klar eine Änderung für die gesamte Website andeutet (zum Beispiel „Use this button style on all buttons site-wide“), wechselt die KI zu globalem CSS.

  • Für globales CSS verwendet die KI normale Klassenselektoren und weist dich an, X-Bar im Frontend (oder dein Theme-Stylesheet) zu öffnen, um den Code einzufügen.

Wenn sowohl block-spezifische als auch globale Lösungen sinnvoll sind, kann die KI separate Codeblöcke bereitstellen, entsprechend beschriftet, damit du die passende Variante wählen kannst.

Kommentar- und Ausgabestil

Der Prompt ermutigt die KI dazu:

• CSS-Kommentare kurz und fokussiert zu halten

• Code und Erklärung zu trennen, in der Regel, indem das CSS in einem eigenen Codeblock steht

• Genau zu erklären, wo du jedes Snippet einfügen sollst (Block-CSS vs. Custom CSS Editor vs. global)

So entsteht aufgeräumtes CSS, das du später leichter prüfen und anpassen kannst.

Beispiele für die Auflösung von Selektoren

Grab Code bringt der KI bei, wie Kadence-uniqueID-Attribute in CSS-Selektoren umgesetzt werden, damit sie die richtigen Klassen verwendet, statt zu raten.

Hier sind die genauen Selektor-Muster, auf die sie sich stützt:

• Row Layout

  .kb-row-layout-id49_ea2717-be
  

• Column

  .kadence-column49_9aceb3-73
  

• Advanced Heading

  .kt-adv-heading4996_28713c-fa
  

Der Systemprompt erklärt dazu:

• Jede uniqueID wird im Frontend zu einer konkreten Klasse.

• Für CSS-Felder auf Blockebene darf die KI statt der vollständigen Klasse das Schlüsselwort selector verwenden.

• Für globales oder X-Bar-CSS muss die KI echte Klassen verwenden, nicht selector.

Tipps, um das Maximum herauszuholen

Nutze Grab Code zusammen mit deinen bestehenden X-Bar- und Kadence-Tools, um Styling und Debugging zu beschleunigen.

• Mit Custom CSS Editor kombinieren

  Verwende Grab Code, um gut strukturiertes CSS von der KI zu bekommen, und:

  • Füge block-spezifisches CSS in das CSS-Feld des Blocks oder ins entsprechende X-Bar-Blockpanel ein.

  • Füge globales CSS in deinen Custom CSS Editor oder das siteweite Stylesheet ein.

• Layout-Probleme debuggen

  Wenn ein Layout bricht, kopiere Grab Code für den betroffenen Block und frage nach:

  • Warum sich ein bestimmtes Element nicht wie erwartet ausrichtet oder umbricht

  • Wie du Abstände oder Responsivität nur für diesen Block korrigierst

  Die KI kann auf die relevanten Klassen verweisen und prägnante Fixes vorschlagen.

• Kadence-Muster lernen

  Wenn du Grab Code regelmäßig nutzt, erkennst du nach und nach Kadence-spezifische Selektormuster:

  • Wie uniqueID-Werte zu Klassen werden

  • Wie sich selector in Block-CSS-Feldern verhält

  • Wie sich Spezifität auf Kadence Blocks auswirkt

  Mit der Zeit wirst du viele dieser Muster wiedererkennen und mehr CSS direkt selbst schreiben – und die KI vor allem als Helfer einsetzen.