AI Chat Capabilities And Limits
What the Protuno in-editor AI chat can and cannot do, when to use code instead, and how to get the best results from iterative prompts.
The AI chat builds and edits sections by reading the current widget HTML and writing changes back to it. Understanding what it has access to — and what it does not — helps you write better prompts and know when to use the code editor instead.
What The AI Can Do
| Capability | Example prompt |
|---|---|
| Generate a complete section from a description | "A three-column pricing table, dark background, one column highlighted" |
| Edit or refine an existing section | "Make the headline larger and move it above the image" |
| Add elements to an existing section | "Add a fourth feature card to match the others" |
| Remove elements | "Remove the subtitle text, keep only the headline and button" |
| Change colors, spacing, and typography | "Change the background to #1a1a2e and make the buttons rounded" |
| Fix responsive / mobile layout | "Stack the columns vertically on mobile and add 24px padding" |
| Add JavaScript interactions | "Make the tabs switch on click, animate with a fade" |
| Write CSS animations | "Add a subtle fade-in-up animation when the section enters the viewport" |
| Refactor or clean up messy code | "Simplify the HTML, remove redundant wrapper divs" |
What The AI Cannot Do
It cannot access your WordPress site content. The AI only sees the HTML, CSS, and JavaScript currently inside the widget. It cannot read your posts, pages, media library, or database. If you want post titles or images in a section, use Dynamic Tags or Twig expressions — the AI can write the Twig syntax for you if you ask, but the data comes from WordPress, not from the AI.
It cannot fetch content from a URL. Asking the AI to "use the hero image from my homepage" or "copy the layout from example.com" will not work. Provide a description of the layout you want instead.
It cannot apply your site's global colors or fonts automatically.
The AI does not know what CSS variables, typography classes, or color tokens you have defined in the Protuno Global Style Manager. To use them, tell the AI explicitly: "Use the CSS variable --color-primary for the button background" or "Apply the class text-heading-h1 to the main heading."
It cannot produce reliable server-side output. The widget runs HTML, CSS, and JavaScript. Asking the AI to write a WordPress shortcode that loads data, a WooCommerce hook, or PHP logic inside the widget will not work — those execute on the server, outside the widget.
It cannot remember previous sessions. Chat history is not saved between Elementor sessions. When you reopen the editor, the AI has no memory of earlier conversations. It can read the current widget HTML, so it will understand the design that exists — but not the conversation that produced it.
It cannot guarantee first-try output. Complex sections or unusual layouts often need two or three rounds of refinement. This is expected behavior, not a failure — follow up with specific correction prompts rather than starting over.
Limits To Know
It works one widget at a time. Each AI chat is scoped to the Proton widget you have open. It cannot edit other widgets, other pages, or your theme settings in the same session.
Token limits affect very long sections. If your widget's HTML is extremely long (thousands of lines), the AI may not be able to process the full context in one turn. Break large sections into smaller, independently editable widgets.
Output quality depends on the AI provider. Protuno routes requests to whichever AI provider you have configured in Protuno → Settings → AI. Different providers have different output quality for HTML/CSS generation. If results are poor, try a different provider or model.
Getting The Best Results
Be specific about layout. "A hero section" is vague. "A full-width hero, dark navy background, centered headline and subtitle, white text, one CTA button, 120px vertical padding" gives the AI enough to produce a useful first draft.
Reference what already exists. "Keep the existing card structure but change the icon style to outlined SVG icons" is more effective than rebuilding from a description, because the AI reads the current HTML before responding.
Use follow-up prompts for corrections. Do not restart for small issues. "The button is too close to the headline — add 32px margin between them" is faster than regenerating the whole section.
Ask the AI to use your design tokens.
If you use the Global Style Manager, tell the AI which variables exist: "Use --color-accent for the highlighted card border and --spacing-section for the vertical padding."
When To Use The Code Editor Instead
| Use code editor when | Reason |
|---|---|
| You need exact pixel measurements from a Figma file | Faster to paste Figma values directly |
| You are integrating a specific third-party JavaScript library | Easier to paste the library's snippet and wire it up yourself |
| The section is very simple (a single heading + button) | Faster to type than to prompt |
| You need to replicate a design already in HTML | Paste and adjust is faster than describing it |
The AI chat and the code editor are not mutually exclusive. A common workflow is to generate a starting point with the AI, then switch to the code editor to fine-tune specific values.