HTML to Bricks Builder
Designer hands you HTML from a Webflow or Figma export? Convert it into native Bricks elements — design system bound, ACSS aware, never inline HTML.
About this skill
Convert raw HTML/CSS into native Bricks Builder elements. Maps colors, typography, and spacing to your design system tokens so the result is drift-resistant. ACSS class mapping when ACSS is installed.
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.
Bricks-native conversion
Output is a tree of native Bricks elements (section, block, container, heading, text-basic, button, image) — never inline HTML.
Design system mapping
Raw CSS hex values map to your design system color tokens. Raw font sizes map to your typography scale. The converted page stays in sync when the design system updates.
ACSS class mapping
If ACSS is installed, common CSS patterns map to ACSS utility classes instead of inline settings.
Three input modes
Paste HTML, give a URL (external images flagged not silently mirrored), or reference a file.
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.
