Claude
Claude Cowork
Cursor
ChatGPT
CodexArt Direction
Your art direction, followed and checked on every build. The agent loads your saved direction before the first element is written, self-critiques its plan against your donts, and proves the result with a design check on the real rendered page.
About this skill
The taste layer for every page an agent builds. Loads the site's saved Art Direction before any visual work, plans tokens in two passes against the direction's donts and the known AI-default aesthetics, builds with tokens preserved, checks the result with respira_check_design (rendered mode on published pages), and mints a live preview so the human watches the real page. Also the import lane for Claude Design output and other design-system documents.
Read-only by default. Any write operation creates a duplicate first, so the original page stays intact and you have an undo handle. All execution runs through Respira's MCP server with your existing credentials.
What it does
6 capabilities run in one pass — each one focused on a single failure mode.
Direction first, always
No visual work starts without the site's Art Direction loaded. If none exists, the agent synthesizes one from the site or imports the one you bring, before building.
Two-pass token planning
The agent proposes palette, type, and spacing from your direction's tokens, then self-critiques the proposal against your donts and the three AI-default aesthetics (ai-purple gradient minimalism, warm-craft sameness, corporate-slop filler) before anything is built.
Builds that keep tokens
Pages reference the direction's tokens instead of copied values. Conversions preserve :root custom properties as builder global tokens, and respira_apply_design_direction pushes the direction into the builder's native store with a per-builder report.
Checked, not eyeballed
respira_check_design runs after every build. On published pages, rendered mode fetches the real page and checks contrast, layout, and type scale with screenshot evidence. Every unwaived fail gets fixed before the work is called done.
Figma and Claude Design import lanes
With Figma MCP access, read a file's variables (get_variable_defs), guess roles by name the same way the plugin does, and import as a DTCG dry run. Bring output from Claude Design or any design-system document the same way: tokens convert to DTCG with a dry run and readiness delta first; voice, imagery guidance, and donts land in the direction's guidance additively, on top of what is already saved. Guessed values carry inferred:true so the dashboard stays honest. Both lanes also run without an agent, on the dashboard's Import tokens panel.
Live receipts
A short-lived signed preview lets you watch the real page while work lands, and respira.press/dashboard/art-direction shows the saved direction, readiness, and apply reports.
What you'll need
Respira for WordPress plugin installed on the target site, with a valid API key.
An AI agent that supports Skills + MCP — Claude Code, Codex, Antigravity, or Cursor.
SKILL.md saved where your agent looks for skills (see install panel above).
Community feedback
What people say
Rate this skill and share what worked (or what needs to improve).
Community rating
—
/ 5
0 ratings
Community Ratings
Showing: Most helpful
One agent. Many skills.
Browse the full catalog or build your own — the bar is low and the standards are real.
