← ClaudeAtlas

html-to-brickslisted

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.
respira-press/agent-skills-wordpress · ★ 31 · Web & Frontend · score 84
Install: claude install-skill respira-press/agent-skills-wordpress
# HTML to Bricks Builder **Version:** 1.0.0 **Updated:** 2026-05-24 **Category:** migration **Status:** stable **Requires:** Respira for WordPress plugin 7.1+ + Bricks Builder active + MCP server --- ## Description Convert raw HTML/CSS — pasted from a design export, a Figma extraction, an existing landing page on another platform, or a competitor's source code — into native Bricks Builder elements. Not a screenshot-to-builder pass; this is a structural conversion that respects Bricks' element schemas, ACSS classes (if installed), and the site's design system. Resolves [open feature request: HTML to Bricks Builder]. Uses the existing `respira_convert_html_to_builder` MCP tool, with a Bricks-specific workflow layered on top. --- ## When to Use - A designer hands you HTML/CSS from a Webflow export, a Framer export, or a CodePen - You're rebuilding a competitor's landing page (legally — don't copy proprietary work) and want to start from their structure - You have an old static HTML page you want to bring into your live Bricks-powered site - You're prototyping a section in HTML and want to land it in Bricks for further editing --- ## Trigger Phrases - "convert this html to bricks" - "import this design into bricks" - "paste html into bricks" - "html to bricks" - "turn this html into a bricks page" - "bring this codepen into bricks" --- ## Execution Workflow ### Step 1 — Verify Bricks is active Call `respira_get_builder_info`. If the active builder is NOT Bricks, st