Claude
Claude Cowork
Cursor
ChatGPT
Codex
Hermes Agentthe designer's vision, kept faithful on every WordPress page an AI touches
taste is human. keeping it is now enforceable.
every site gets one saved design direction: the palette, the font pairs, the spacing, and the designer's own rules in plain language, including the don'ts. agents read it before building anything, the build resolves values against it, and a check verifies the rendered page afterwards. the design survives the people and the AIs who come later.
included on every paid plan. import runs dry first, export is standard DTCG.
one direction per site, written down where it can be enforced
a design system that lives in a PDF cannot stop anyone. the direction lives on the site itself, structured enough for machines to obey and plain enough for people to read.
- palette
- the colors that are allowed on the site, with roles. everything else counts as off-palette.
- font pairs
- which family carries headings and which carries body text, so type stays coherent across every page an agent touches.
- spacing
- the rhythm the layout breathes in. sections and gaps resolve against it instead of whatever number an AI felt like today.
- guidance
- the designer's rules in plain language, including the don'ts. "no gradient blobs" written once beats correcting it forever.
- waivers
- an explicit, recorded exception when a rule genuinely has to bend. a waiver is a decision with a name on it, not a silent override.
- readiness
- how complete the direction is, honestly. values the system had to guess are marked as guessed until someone confirms them.
readiness is the honesty layer. when the system infers a value it could not confirm, that value is flagged as guessed, visibly, until a human confirms or corrects it. a direction that pretends to be complete is worse than one that admits its gaps.
enforced while building, verified after
two moments matter: when the page is built and when it is judged. the direction is present at both. build_page resolves colors, fonts and spacing against the active direction, so drift is prevented before it needs correcting. then check_design runs twenty two universal rules, adapted in part from impeccable, plus your own direction's don'ts, and says, concretely, whether the page is done.
the deterministic rules
fast, exact, no model in the loop. the check flags:
- colors and fonts that are not in the direction
- filler copy the direction bans, and the usual suspects
- placeholder names like Acme and Jane Doe left in real pages
- the AI-tell catalog: eyebrow kickers, gradient text, costume shadows, 01 02 03 section ornaments, and the rest of the twenty two universal rules
- probes generated from the direction's own don'ts
the rendered check
the real page is rendered, desktop and mobile, and judged as painted. screenshots come attached to the verdict. it looks for:
- contrast on the page as painted, not as coded
- type-scale coherence across headings and body
- the three-equal-cards reflex and other section repetition
- a hero that fills the viewport instead of stopping short
- spacing rhythm, and layout that is plainly broken
- off-palette color as it actually renders
what it cannot see, it says it cannot see. every check result carries an unchecked list: the things this run could not verify, named instead of glossed over. most tools return a green check and let you discover the gaps yourself. this one tells you where its eyes end.
it lives in your dashboard, not a PDF
open your workspace and Art Direction sits in the sidebar, next to Sites and Memory. one direction per site, editable in plain language, with a live pane beside it: the Live Page shows the actual rendered page, refreshing as the agent works, through a signed preview link that expires in 15 minutes. not a simulation of the page, the page.
the Live Page needs plugin 8.6.22 or newer on the site. everything else in the dashboard works today.
receipts, not theater
plenty of tools let you watch an AI work. a spectator view is reassuring in the moment and worthless an hour later: when the show ends, you are left with a feeling, not a record.
beside the Live Page sits the Provenance rail: what was written, where, and when. every apply, every token pushed into a builder's native store, every check verdict, kept as receipts you can read tomorrow.
trust built on watching evaporates when you look away. trust built on receipts is still there in the morning. this is the part i will not compromise on.
- apply
- 12 tokens written to Bricks global colors
- apply
- type pair written to the Elementor kit
- check
- rendered, desktop and mobile, 2 findings, 3 unchecked
your tokens come in from anywhere, and leave whenever you want
a design direction you cannot take with you is a hostage. import accepts the formats design systems actually live in, every import runs as a dry run first, and export produces strict DTCG that any standards-aware tool can read.
-
DTCG 2025.10
the W3C community group token format, first stable spec. lenient on the way in, strict on the way out.
-
Figma, via Tokens Studio
export from the Tokens Studio Figma plugin and import the file directly. one of three Figma routes onto the same direction.
-
Figma, direct
paste a file URL and a personal access token on the dashboard's Import tokens panel. it reads variables (or published styles on plans without the Variables API), guesses roles from names and lightness, and previews as the same dry run. the token is used once and never stored.
-
Figma, via your agent
when the AI you connected has Figma access through MCP, the art-direction skill reads the file straight from Figma's own server: no token to paste, no export step, the same dry run before anything saves.
-
Tailwind config
paste the theme section of a tailwind.config and the colors, fonts and spacing scale come across.
-
pasted :root CSS
plain CSS custom properties work too. if your design system is a stylesheet, that is enough to start.
-
Claude Design
share the project, export it as Project HTML (standalone), and drop the file into the dashboard's import box, or paste it through the art-direction skill in a chat. it reads as tokens and guidance both: colors and type land the usual way, voice, imagery and the don'ts get added on top of what is already saved, never replacing it.
apply is where it becomes real: tokens are pushed into the builder's own native stores, Bricks global colors, the Elementor kit, Oxygen variables, WordPress theme.json presets, with a receipt per builder. not a parallel system the builder ignores. the builder's own store, carrying your values.
a design system WordPress can actually enforce
WordPress has never had one place to keep a design system. theme.json holds presets for the block editor, and every page builder keeps its own separate store: Bricks has global colors, Elementor has the kit, Oxygen and Breakdance have variables. a site running a builder plus blocks has two design systems that do not know about each other, and a brand guideline PDF that neither one reads.
one direction is saved above all of them. apply pushes it down into each builder's own native store, so the values sit where the builder already looks, and check_design then judges the page as rendered. these are the stores it writes to today:
-
Bricks global colors -
Elementor the kit -
Divi global colors -
Beaver Builder global colors -
Oxygen variables -
Breakdance variables - Oxygen 6 variables
-
Gutenberg theme.json presets -
Kadence theme.json presets -
Spectra theme.json presets -
GenerateBlocks theme.json presets -
GreenShift theme.json presets
reading and enforcement run on all 17 supported builders, including the ones with no token store of their own. a builder without a store cannot receive a token, so apply says so rather than reporting a write that went nowhere.
for the people whose work gets mangled
designers and agencies know this story. you hand over a site with a considered palette, a deliberate type scale, spacing that breathes. six months of AI-assisted edits later it has three new blues, a gradient hero and a font nobody chose.
the direction is how your taste survives contact with every tool that edits the site after you. write the rules once, in your own words, and every agent that connects reads them before building anything. the don'ts you are tired of repeating become checks that run without you.
for agencies it also changes the handoff. a site delivered with its art direction saved is a site that stays looking like your work, which is the thing your next client judges you on.
free on every paid plan
Art Direction is not a SKU. it ships with every paid plan because a page built against a direction is a better page, and better pages are the point of the whole product. no separate price, no meter on the checks.
questions
can you have a design system in WordPress?
Partly, and that is the problem. theme.json gives the block editor presets for color, type and spacing, and each page builder keeps its own store: Bricks global colors, the Elementor kit, Oxygen and Breakdance variables. None of them know about each other, none of them cover voice or the don'ts, and none of them stop an AI from ignoring the whole thing on the next page. Art Direction saves one design system above all of them, pushes it down into each builder's native store, and then checks the rendered page against it.
does it work with theme.json and the block editor?
Yes. Applying a direction on a block site writes real theme.json presets, so your colors and sizes show up in the editor's own pickers as named presets and blocks reference them as --wp--preset-- custom properties. The block libraries built on Gutenberg (Kadence, Spectra, GenerateBlocks, GreenShift) inherit the same write, because they read the same presets.
how do i keep Elementor and Bricks on the same design system?
Save the direction once, then apply it to each site or each builder. The tokens land in the Elementor kit on one and Bricks global colors on the other, from the same source, so the two stay in step without anyone retyping hex codes. Copying a direction from one site onto another is a single action in the dashboard, and it runs as a dry run first.
does this replace my designer?
No. Art Direction has no taste of its own. It takes the decisions a human designer already made and keeps them enforced on the live site, every time an AI touches a page. The direction is only ever as good as the designer who wrote it.
what happens when the AI goes off-direction?
check_design says "not done yet" and lists exactly what is off: the off-palette color, the banned phrase, the hero that does not fill the viewport. The agent gets a concrete list to fix instead of a vague score. And because build_page resolves values against the direction in the first place, most drift never makes it onto the page at all.
what are the twenty two universal rules?
A manifesto rule pack the check runs on every page, direction or no direction: the eyebrow label above every heading, gradient text, costume shadows, hero metric templates, 01 02 03 section ornaments, monospace used as a technical costume, emoji standing in for icons, auto-scrolling marquees, decorative grid backgrounds, inverted heading rhythm, and more, adapted in part from impeccable (impeccable.style). Every one a warning, and every one waivable: the check teaches, your direction decides.
can i waive a rule?
Yes. A waiver is an explicit, recorded exception: this rule, bent on purpose, on the record. The check respects waivers, so an intentional exception stops showing up as a failure without weakening the rest of the direction.
what formats can i import?
DTCG 2025.10, a Tokens Studio export, a Tailwind config, or pasted :root CSS custom properties. Figma comes in three ways now: the Tokens Studio export, a direct paste of a file URL and personal access token on the dashboard, or straight through Figma's own MCP server when your connected agent has access, via the art-direction skill. Claude Design output, or any Markdown design doc, comes in through the art-direction skill or by pasting it straight into the dashboard, which recognizes it and separates tokens from guidance. Every import runs as a dry run first, so you see what would change before anything does.
does exporting lock me in?
The opposite. Export produces strict DTCG, the standard token format, portable to any tool that reads it. Your design system arrived as your file and it leaves as your file. A direction held captive would be a contradiction of the whole idea.
which builders does apply write to?
Apply writes into the builder's own token store, so the values live where the builder already looks: Bricks global colors, the Elementor kit, Divi global colors, Beaver Builder global colors, Oxygen variables, Breakdance and Oxygen 6 variables, and WordPress theme.json presets for Gutenberg and the block libraries built on it (Kadence, Spectra, GenerateBlocks, GreenShift). Each write comes back with its own receipt. Reading and enforcement work across all 17 supported builders, including ones with no token store of their own.
what does the rendered check cost?
Nothing extra. Art Direction is included on every paid plan, the rendered check with it. There is no separate SKU, no add-on, no per-check meter.
