Figma to Elementor
Hand a Figma frame to your agent and get a real, editable Elementor page. It reads layers, auto-layout, type, color, and images, and builds it on a safe draft.
About this skill
Rebuilds a Figma frame as an editable Elementor page. Reads the Figma node tree (layers, auto-layout, text, color, images), maps each node to its Elementor widget or container, and writes clean Elementor JSON to a draft duplicate 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.
Auto-layout aware
Figma auto-layout becomes Elementor flex containers: direction, gap, padding, and alignment carried across.
Type and color fidelity
Fonts, sizes, weights, line-height, and the frame's palette map to Elementor typography and global colors.
Smart widgets
Recognises FAQ to Accordion, image rows to Gallery or Carousel, number plus label to Counter, icon rows to Social Icons.
Safe by default
Builds on a draft duplicate with a snapshot first, so your live pages are never touched.
Trigger phrases
Say any of these in your AI agent. The skill recognizes intent — exact wording isn't required.
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.
