Figma to Divi
Hand a Figma frame to your agent and get a real, editable Divi page. Auto-layout becomes sections, rows and columns; text, color and images carry across; everything lands on a safe draft.
About this skill
Rebuilds a Figma frame as an editable Divi page. Reads the Figma node tree and maps each node to native Divi sections, rows, columns and modules (Divi 5 blocks or Divi 4 shortcodes, auto-detected), writing 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.
Divi-native output
Real sections, rows, columns and modules in the generation your site runs — Divi 5 blocks or Divi 4 shortcodes — never pasted HTML.
Smart module recognition
FAQ stacks become Accordions, number+label pairs become Counters, icon cards become Blurbs, image rows become Galleries.
Panel-faithful styling
Inset rounded panels, framed images and shadows — the signatures of modern SaaS designs — carried via section styling and page CSS.
Screenshot-verified
The build is compared against the Figma frame visually before it is handed over, and drifted elements are fixed, not shipped.
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.
