Grab code for LLM

Use X-Bar Grab Code to copy Kadence block markup plus a tailored CSS system prompt so AI tools return correct selectors and scoped styles.

Overview

Grab Code turns the currently selected Kadence block into a complete CSS request for an AI assistant, including the block markup and Kadence-specific instructions.

Kadence blocks use a custom HTML architecture with uniqueID attributes that map to generated class names, plus a special selector keyword in block-level CSS fields. Generic AI tools do not know these patterns, so they usually guess the wrong selectors and placement for your CSS.

Grab Code solves this by bundling the block markup with a Kadence-aware system prompt so the AI knows:

How Kadence Block HTML and uniqueID attributes map to real classes
How the selector keyword behaves in Kadence Block CSS fields
When to use block-specific CSS vs global CSS, and where you should paste it

The Kadence Block CSS selector keyword is only valid inside Kadence Block CSS fields in the WordPress editor. Do not use selector in X-Bar or in your global stylesheets; Grab Code makes this clear in the prompt it sends to the AI.

How to use Grab Code

Use Grab Code whenever you want block-specific CSS help from an AI assistant.

Select the Kadence block

Click once on the Kadence block in the Gutenberg editor so it is selected.
Confirm the correct block is active in the sidebar (Row Layout, Section, Column, Advanced Heading, etc.).

Open the Grab Code button

On Row Layout and Section blocks, find the〈〉code button in the editor footer, in the X-Bar area when you are in CSS mode.
On inner blocks (Columns, Advanced Headings, Buttons, etc.), find the〈〉code button in the block header row, just under the drag handle, when you are in classes mode.

Copy the Grab Code to your clipboard

Click the〈〉button once.
X-Bar copies a prepared prompt and the block's markup to your clipboard.

Paste into your AI assistant

Paste into ChatGPT, Claude, or any other AI assistant.
Your cursor lands after the text that starts with Request: — this is where you type your actual design request, for example: Make the heading larger on desktop and centered on mobile.

When the AI replies, it already knows how to resolve Kadence selectors and where you should paste the CSS.

What gets copied

Grab Code sends a four-part payload to your clipboard so the AI has everything it needs.

1. Block identification header

A short header that tells the AI which Kadence block and HTML tag it is working with, for example a Row Layout vs a Column vs an Advanced Heading.

This orients the AI to the type of element, expected structure, and how specific the CSS should be.

2. Kadence CSS system prompt

A detailed instruction set that teaches the AI how to write Kadence-safe CSS:

How the Kadence selector keyword works in block CSS fields
How to resolve uniqueID attributes into the correct CSS classes
How to choose appropriate specificity so CSS overrides work without being excessive
How to decide between block-level vs global styles and where you will paste each one
How to detect your language and respond accordingly
How to keep CSS comments short (one line at most)

The AI uses this prompt as its rules of engagement whenever it writes or explains CSS for the block.

The system prompt explicitly states that selector is not valid in X-Bar or in your global stylesheet. For global CSS, the AI uses normal class selectors; for block CSS fields, it may use selector where appropriate.

3. Block markup

Grab Code includes:

The block's serialized Gutenberg comment markup with attributes
The rendered HTML for the block as it appears on the page

This gives the AI full context about:

The structure of the block and its inner blocks
The actual uniqueID values that will become Kadence classes
Any other classes or attributes that affect styling

Because of this, the AI does not have to guess your HTML — it sees the real source.

4. Request prompt suffix

At the end of the payload, Grab Code adds a Request: line.

Your cursor lands right after Request: when you paste into the AI. Type your instructions there:

Request: Make the background darker on hover and soften the box shadow.
Request: Only change typography on mobile for this section.

This keeps a clear separation between the system context and what you actually want the AI to do.

How the AI uses the context

Once you paste the grabbed code, a capable AI assistant can follow the embedded rules to generate practical, Kadence-safe CSS.

Language detection

The system prompt tells the AI to:

Detect your natural language from the request text you type
Respond in the same language when explaining steps and comments
Keep comments short — one line per comment at most

CSS itself stays the same, but explanations, notes, and instructions match your language.

Choosing CSS scope

The prompt guides the AI to choose the correct scope based on your request.

Block-specific scope (default):
- For Row Layout and Section blocks, the AI uses the Kadence selector keyword (to paste into the block's CSS field) or the resolved uniqueID-based class in explanations.
- For inner blocks, the AI resolves uniqueID attributes into block-specific classes and tells you which block's X-Bar or block CSS field to open.
Global scope (only when implied):
- When your request clearly implies a site-wide change (for example, "Use this button style on all buttons site-wide"), the AI switches to global CSS.
- For global CSS, the AI uses normal class selectors and tells you to open X-Bar on the frontend (or your theme stylesheet) to paste the code.

When both block-specific and global solutions make sense, the AI can present separate code blocks, labeled accordingly, so you can choose the right one.

Comment and output style

The prompt encourages the AI to:

Keep CSS comments short and focused
Separate code and explanation, usually by putting CSS in a dedicated code block
Explain exactly where to paste each snippet (block CSS vs Custom CSS Editor vs global)

This produces clean CSS that is easier to audit and adjust later.

Selector resolution examples

Grab Code teaches the AI how Kadence uniqueID attributes map to CSS selectors, so it uses the correct classes instead of guessing.

Here are the exact selector patterns it relies on:

Row Layout
```
.kb-row-layout-id49_ea2717-be
```
Column
```
.kadence-column49_9aceb3-73
```
Advanced Heading
```
.kt-adv-heading4996_28713c-fa
```

The system prompt explains that:

Each uniqueID turns into a concrete class on the front end.
For block-level CSS fields, the AI may use the selector keyword instead of repeating the full class.
For global or X-Bar CSS, the AI must use real classes, not selector.

Tips for getting the most value

Use Grab Code alongside your existing X-Bar and Kadence tools to speed up styling and debugging.

Combine with Custom CSS Editor

Use Grab Code to get well-structured CSS from the AI, then:
- Paste block-specific CSS into the block's CSS field or the relevant X-Bar block panel.
- Paste global CSS into your Custom CSS Editor or site-level stylesheet.
Debug layout issues

When a layout breaks, copy Grab Code for the affected block and ask:
- Why a specific element does not align or wrap as expected
- How to fix spacing or responsiveness for that block only
The AI can point to the relevant classes and suggest concise fixes.
Learn Kadence patterns

Repeatedly using Grab Code exposes you to Kadence's selector patterns:
- How uniqueID values become classes
- How selector behaves in block CSS fields
- How specificity affects Kadence blocks
Over time, you will start recognizing these patterns and may write more CSS directly, using the AI mainly as a helper.

When a response from the AI looks off, run Grab Code again to ensure you copied from the correct block, then restate your Request: clearly, including whether the change should be block-specific or global.

Was this page helpful?