Automatic.css + MCP: let AI read and tune your ACSS design system

Automatic.css is the design system behind a lot of serious WordPress builds: one set of variables for colour, typography, space, radius and breakpoints, consumed by every builder on the site. An AI that does not know those variables produces hard-coded values; an AI that can read them produces work that looks like yours. NibWP exposes the ACSS configuration as typed read-and-write tools.

That matters twice. When the agent builds a page, it pulls the real tokens first. When you want to change the system — a new brand colour, a tighter type scale, a different radius — it edits the variables in one place and every page follows. No exports, no CSS overrides, no spelunking in the dashboard.

Automatic.css is one of the 35+ integrations inside NibWP's WordPress MCP server — 4 typed Automatic.css tools on top of 132 WordPress tools. The full tool reference lives on the Automatic.css integration page; this page is about what those tools let you do.

What AI can do in Automatic.css

The Automatic.css tools NibWP exposes

Every Automatic.css capability is a typed MCP tool with a schema the AI client can read, so it calls the right thing with the right arguments instead of guessing at your database. Read tools are free to explore; write tools go through the approval flow.

• nibwp/automaticcss-list — List the ACSS variable groups: palette, typography, spacing, radius, breakpoints and options.
• nibwp/automaticcss-get — Read one group or variable with its current value and computed variants.
• nibwp/automaticcss-create — Add a colour, a custom variable or a new shade set to the system.
• nibwp/automaticcss-update — Update palette, type, space, radius or breakpoint values in place.

Example prompts

Plain English is the interface. These are the kinds of requests agencies run against Automatic.css every day:

• “Show me the full palette with shade variants and where the primary colour is used.”
• “Change the primary colour to #ff9148 and keep the light and dark variants in proportion.”
• “Tighten the heading scale one step and show me the new h1–h6 sizes.”
• “Audit the home page for hard-coded colours that should be ACSS variables.”
• “Add a 'brand-green' colour with a full shade set.”

How it works with Automatic.css

There is no new dashboard to learn. You describe an outcome, NibWP plans it, and you approve before anything is written.

1. Connect — install NibWP, connect Claude, Cursor, ChatGPT or any MCP client. Automatic.css is detected automatically and its tools appear in the client.
2. Describe — ask for what you want to know or change — a palette read, a new colour, a tighter scale. NibWP reads the current variables and shows the before/after before writing.
3. Approve — NibWP shows the plan: which records it will create or change, and what will stay untouched. Nothing happens until you say yes.
4. Done — it writes real Automatic.css data through the plugin's own APIs and reports back in plain English, with every change in the audit log.

Why not just a generic AI?

A general-purpose assistant can write text about Automatic.css; it cannot safely operate it. The difference is structure, context and control.

A generic assistant

• Invents hex codes and pixel values
• Does not know your type scale or spacing system exists
• Cannot change a token, so it overrides CSS page by page

Automatic.css + NibWP

• Reads palette, type, space, radius and breakpoints as data
• Updates variables once and every page follows
• Builds new pages with var(–primary) and var(–space-m) by default

Safe by default

NibWP is built for agencies running client sites, so control and traceability come first:

• Nothing is written without your approval — you see the plan first, and you can run in draft mode.
• Every action is recorded in a full audit trail, per site and per user.
• It runs on Automatic.css's own functions and APIs — your data stays on your server, nothing is copied to a third-party service.
• Changes are shown as before/after per variable before they are written, and the previous values are logged so a change can be reverted.

Related integrations

Most sites pair Automatic.css with other plugins NibWP already speaks: Etch + MCP, Bricks + MCP, Breakdance + MCP, GeneratePress + MCP, Figma + MCP, Divi + MCP. All of them ship in the same plugin — see pricing for what each plan includes.