AI CSS editing | Pinegrow Web Editor

Ask AI Assistant for a style change and it inspects the CSS that applies to the element, then edits the right rule in your CSS, Sass or Less file, style block or inline style, with live preview and undo.

Requires Pinegrow 10

AI Assistant can restyle pages that use regular CSS, not only Tailwind or Bootstrap classes. Describe the result you want. The assistant looks at the CSS that actually applies to the element, then edits the rule where the style belongs, in your own stylesheet.

AI CSS editing is new in Pinegrow 10. It is part of the Smart HTML edit action (Pages or Element) in AI Assistant, in Pinegrow Desktop and Pinegrow Online. Smart HTML edit needs a smart model, such as GPT-5 or Claude Sonnet.

What the assistant can do with CSS

Inspect the cascade. For an element on the page, the assistant sees every rule and declaration that applies, the computed result, and which declaration wins. It can inspect the hover, focus, active and visited states too.
Edit the right source. It changes rules in the CSS, Sass (SCSS) and Less files the page loads and in existing <style> blocks. It can also add or change inline style attributes and add a new <style> block.
Add new CSS. It can add rules, overrides, media and container queries, and @keyframes animations.

Each edit goes through Pinegrow's live stylesheet model instead of rewriting the stylesheet as a text file. So Sass and Less sources stay connected to the compiled CSS, the preview updates right away, and the change goes into the undo history.

Restyle a page

Open the page and type your request in the AI Assistant prompt. Describe the result, not the CSS. You don't need selectors, colors or class names.

Pinegrow with the Fieldwork page open. Three workshop cards have plain grey borders and default link styling, and the AI Assistant prompt contains the request Make the workshop cards look more polished. — Describe the result you want in AI Assistant. The request doesn't need selectors or colors.

Click Send. The assistant first inspects the CSS of the elements it needs to change. You can follow the steps in the conversation, such as Inspecting CSS for… and Getting styles.css….

The AI Assistant conversation during the task, with the steps Updating task plan, Inspecting CSS for 202, a progress note about the workshop-card class in styles.css, and Getting styles.css, followed by Processing and a Cancel link. — The assistant first inspects the CSS that applies to the cards and reads the stylesheet.

The assistant then patches the stylesheet, shown as Patching CSS from…. The page updates as soon as the patch is applied. The task ends with Task completed and a short summary.

The Fieldwork page after the task: the three workshop cards have rounded corners, a soft shadow, small uppercase category labels, serif titles and full-width Explore workshop buttons. The AI Assistant shows Patching CSS from cssctx_1, Task completed and Done. — The assistant patches the stylesheet and the preview updates. The cards now use the page's colors, type and spacing.

To check the result, open the stylesheet in the Project panel. The new rules are ordinary CSS. In this example, the assistant added card rules that reuse the page's own color variables, such as var(--paper), var(--line) and var(--ink), and a :hover rule.

The styles.css code editor showing the workshop-card rule with background var(--paper), border 1px solid var(--line), border-radius 10px, color var(--ink), a box-shadow and a transition, followed by a workshop-card:hover rule with translateY(-3px), a larger shadow and a new border color. — The new rules are plain CSS at the end of styles.css, built on the page's own color variables.

Press Cmd+S (Ctrl+S on Windows and Linux) to save the page and the changed stylesheet.

You can keep editing these rules by hand, with Pinegrow's style tools or with another request.

Style one element

To change just one part of the page, select the element first, then refer to it in the request, for example this form or this mascot.

The Orbit Donuts page with the Sprinkles mascot image selected (img.mascot) and the AI Assistant prompt containing Give this mascot a playful animation when I hover over it. — Select an element on the page, then describe the effect you want. The assistant works on the selected element.

For the hover request above, the assistant inspected the mascot's CSS and added three things to styles.css: a transition on the mascot, a @keyframes animation and a :hover rule that plays it.

The styles.css code editor showing a .mascot rule with cursor, transform-origin and transition, an @keyframes mascot-playful block with steps from 0% to 100% that combine translateY, rotate and scale, and a .mascot:hover rule that runs the animation and adds a drop shadow. — For the hover request, the assistant added a keyframe animation and a hover rule that plays it to styles.css.

Example requests

Make the workshop cards look more polished. (whole page, nothing selected)
Style this sign-up form to match the rest of the page. (sign-up section selected)
Give this mascot a playful animation when I hover over it. (image selected)

How changes are checked

Validation. Pinegrow parses and validates the new CSS before applying it. Invalid CSS is rejected, and the assistant gets the error to fix.
All or nothing. All edits in one CSS patch are applied together. If applying them fails, Pinegrow rolls the whole patch back.
Verification. After the patch, Pinegrow compares the computed styles of the element. If a change has no effect, for example because another rule still wins, the assistant is told so it can correct it.
Undo. Undo a CSS patch like any other edit. To compare the whole project before and after a task, turn on Review AI changes.

A stylesheet can be used by several pages. A change to it affects every page that loads it.

Protected styles

Some CSS is visible to the assistant but is not edited directly:

Generated Tailwind CSS. The assistant changes Tailwind classes or the Tailwind theme instead.
CSS generated by the Design panel, including the generated sections of a Bootstrap custom.scss file. The assistant changes the Design theme instead. Rules outside the generated sections stay editable.
Locked stylesheets. Pinegrow locks stylesheets that are framework resources and, in Pinegrow Desktop, remote stylesheets. You can also lock a stylesheet yourself. For these, the assistant adds an override to an editable stylesheet.
Rules Pinegrow can't map to their source. If the source line of a rule can't be found, the assistant adds an override instead. Sass or Less rules whose source can't be confirmed are inspect-only.

The assistant also doesn't delete, move or rename existing rules and selectors. Ask it to add an override instead, or make that change yourself.

On Tailwind and Bootstrap pages, the assistant prefers the framework's classes and uses custom CSS only when classes can't express the change. On a plain CSS page, it can't rely on Tailwind-style utility classes: every new class it adds must have a CSS rule.

Limitations

In CMS Mode and Quick Test, the assistant can inspect CSS to explain a style, but it can't change it.
The element must be on the page open in the editor.
Inspection can show the hover, focus, active and visited states. Other states, such as :focus-visible, can't be selected for inspection.

Other AI tools

The same inspection and patch steps are available to the Codex and Claude Code providers in Pinegrow Desktop, and to external assistants connected through Pinegrow's MCP server, or through WebMCP in Pinegrow Online. See Using Codex in Pinegrow and MCP server and WebMCP.