html-to-bricks

Convert raw HTML/CSS exports into native Bricks Builder elements.

40|7|Updated Mar 7, 2026

Search Tags:#html #migration #builder #design-system #mapping #acss #bricks

Ready to run

npx skills add https://github.com/respira-press/agent-skills-wordpress --skill html-to-bricks

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: html-to-bricks
Source: https://github.com/respira-press/agent-skills-wordpress/tree/main/skills/html-to-bricks
Command: npx skills add https://github.com/respira-press/agent-skills-wordpress --skill html-to-bricks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

Uses the existing respira_convert_html_to_builder MCP tool, with a Bricks-specific workflow layered on top. This skill is suitable when migrating static HTML exports into Bricks-powered pages for designers and developers, preserving structure and design tokens. It maps raw HTML structure to Bricks elements, applies ACSS class mappings when available, and respects the site's design system tokens for drift resistance.

Quick Start

Paste your HTML/CSS design export into the skill and start the conversion to Bricks elements.

Frequently Asked Questions about html-to-bricks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert HTML to Bricks Builder elements?▼

To convert HTML to Bricks Builder elements, you paste raw HTML/CSS exports into the tool, which structurally maps the code to native Bricks elements while respecting the site's design system tokens and ACSS classes.

Does this HTML to Bricks conversion work with ACSS class mappings?▼

Yes, the HTML to Bricks conversion applies ACSS class mappings when available, ensuring that your migrated design exports retain their styling structure and remain consistent with your existing design system.

Can I migrate static HTML exports from other platforms into Bricks?▼

You can migrate static HTML exports from other platforms into Bricks by feeding the raw code into the converter, which maps the HTML structure to native Bricks elements rather than relying on screenshots.

What do I need to convert HTML to Bricks Builder elements?▼

Converting HTML to Bricks Builder elements requires Bricks Builder, an MCP server, and access to the respira_convert_html_to_builder tool with ACSS support and design-system token mapping capabilities.

Does this tool convert Figma HTML extractions to Bricks?▼

Yes, this tool converts Figma HTML extractions to Bricks by performing a structural conversion that maps the raw HTML/CSS output into native Bricks elements, preserving the design structure and tokens.

Why convert HTML to Bricks elements instead of rebuilding designs manually?▼

Converting HTML to Bricks elements saves time by automating the structural mapping of raw code, preventing design system drift through token mapping, and avoiding the errors of manual reconstruction.