Figma to Bricks
Hand a Figma frame to your agent and get a class-based, token-bound Bricks page — the kind a maintainer wants to inherit, not a pile of inline styles.
About this skill
Rebuilds a Figma frame as an editable Bricks page with BEM global classes and the frame's palette imported into the Bricks design system. Writes to a draft so nothing live is touched.
Read-only by default. Migrations duplicate every page before any change so the original stays intact and you have an undo handle. All execution runs through Respira's MCP server with your existing credentials.
What it does
4 capabilities run in one pass — each one focused on a single failure mode.
BEM classes, not inline styles
Every Figma section becomes a scaffolded BEM block with styling on reusable global classes.
Palette into the design system
The frame's colors import into the Bricks color palette and CSS variables, with one-call rollback.
ACSS aware
When Automatic.css is installed, spacing and typography map onto ACSS utilities instead of raw values.
Health-checked
The Bricks health check runs after the build: orphans, duplicate ids, broken refs and empty containers get fixed before handover.
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.
