Art Direction: the designer’s vision, kept faithful by every AI

One saved design direction per site: palette, fonts, spacing and the don'ts, written into the builder's own token stores, enforced on every AI build, and verified against the real rendered page. Free on every paid plan.

every designer who has let an AI touch a site knows the feeling: the work was good, and then it drifted. a purple gradient here, Inter everywhere, a third equal card because three felt safe. Art Direction is the answer that shipped today: one saved design direction per site, and every AI that builds on that site reads it first, follows it, and gets checked against it.

the direction is an artifact, not a suggestion

a direction holds the palette with named roles, the font pair, the spacing scale, and the guidance in your own words, including the don’ts. it lives on the site with real revisions. values the AI guessed instead of found stay visibly marked as guesses until you confirm them, and a direction that is missing its core roles cannot be activated: the system tells you plainly what is absent instead of pretending readiness.

A palette and type specimen card reading Alan Sans and Georgia, propped on a desk beside a brass loupe and stacked paper swatches
the palette and the type pair, read as a live specimen, not a swatch nobody opens.

it speaks every token language you already use. import DTCG, a Tokens Studio export, a Tailwind config, or a pasted block of CSS variables, always as a dry run first so you see what would change before anything is written. export is strict DTCG, so your direction is portable and never captive.

Figma now has three real lanes onto the same direction: export through the Tokens Studio plugin, paste a file URL and a personal access token straight into the dashboard’s import panel, or, when your connected AI already has Figma access, let the art-direction skill read the file through Figma’s own MCP server with no token to paste at all. Claude Design comes in too: share the project, export it as Project HTML (standalone), and drop the file into the same import box, or paste it through the art-direction skill in a chat. it reads as tokens and guidance both, guidance layered on top of what is already saved, never replacing it.

applied where builders actually keep their colors

applying a direction writes tokens into the builder’s own stores: Bricks global colors, the Elementor kit, Divi and Beaver Builder global colors, Oxygen, Breakdance and Oxygen 6 variables, and WordPress theme.json presets for Gutenberg and the block libraries built on it. no parallel token database, no overlay. every apply leaves a receipt naming what was written where, and the receipts live on the new Art Direction page in your dashboard, in a rail called Provenance.

A drafting-table tablet showing the Art Direction guidance panel beside checked photograph prints and a brass loupe
the same panel a designer would sketch by hand, now something an agent reads before it builds.

a check that can say “not done yet”

the design check reads what a build produced and judges it against your direction: off-palette colors and fonts, filler copy, placeholder names, the familiar AI defaults, and probes generated from your own don’ts. it also runs the manifesto rule pack now: twenty two universal rules, adapted in part from the impeccable design skill under an Apache 2.0 license, that catch the tells no direction has to spell out on its own — the eyebrow label above every heading, gradient text, costume shadows, 01 02 03 section ornaments, auto-scrolling marquees, and the rest. every one a warning, every one waivable.

in rendered mode it opens the real page at desktop and mobile widths and checks what was actually painted: contrast, type scale coherence, three equal cards, a hero swallowing the viewport, section repetition, spacing rhythm, broken layout. screenshots come attached. and where the check cannot see, it says so, listing what it did not verify instead of hiding it.

The Art Direction guidance panel showing DO and DON'T rules beside a tray of color study swatches
DO, DON’T: a designer’s own words, run as checks on every build.

your intent outranks the rules. anything deliberate can be waived, and waived findings stay visible instead of disappearing, because a decision on the record is worth more than a silent pass.

watch the real page, not a simulation

the Art Direction page includes a live pane showing your actual rendered page, refreshing as the AI works, through a short lived signed link that never weakens caching, passwords or visibility for anyone else. no theater, no replay: the page itself, converging on the direction.

for the people whose taste is the product

this does not replace a designer. it is how a designer’s decisions survive every future edit, from any AI, in any client’s hands. set the direction once and the site stops drifting; hand a client the keys and their AI edits inherit your taste instead of eroding it. it is included on every paid plan, no separate purchase, and the full picture is on the feature page.

Mihai

Join the conversation

0 comments · Respira account

No comments yet. Be the first to weigh in.

You're not the only one talking to WordPress.

The Respira community is where agency owners debug Divi migrations at 11pm, where vibe coders swap prompts that actually ship, and where the roadmap gets written out loud. Breathe with us.

Lines of code pushed through Respira
16,208,582
Live from the Respira ecosystem · updates as the agent ships