Overview
What it does
Hand Bricks Pro a design and it returns an editable Bricks template that uses only whitelisted core elements, brand-scoped BEM global classes, and your ACSS tokens — never flattened HTML you can't touch in the builder.
Key capabilities
Core-element whitelist
Only real Bricks elements are emitted — no junk markup.
BEM global classes
Styles become brand-scoped global classes, not inline mess.
ACSS token mapping
Colors, type and spacing map to your ACSS tokens.
Query loops
Repeating content becomes loops backed by CPT + ACF.
Native form element
Forms route through the native element — never raw <form>.
Approval gate
Nothing is persisted until you review and approve.
How it works
Drop a source
A screenshot, live URL, or a Figma frame.
Map to Bricks
Nodes become whitelisted core elements with BEM global classes.
Validate
Element whitelist, tokens and query loops are checked.
Approve & persist
Review, then write the template — only on your OK.
AI abilities
| Tool | Type | What it does |
|---|---|---|
| nibwp/bricks-pro-figma-to-component | write | Discoverable entry for Figma → Bricks. |
| nibwp/bricks-pro-html-to-component | write | Validates an agent-built Bricks payload against the Bricks Pro playbook (element whitelist, ACSS tokens, global classes, no inline @media, no raw form/iframe) and… |
| nibwp/bricks-pro-image-to-component | write | Agent extracts the layout from an image / screenshot URL, builds the Bricks element tree, then submits via html-to-component for validation + persistence. |
| nibwp/bricks-pro-refine-component | read | Discoverable entry for natural-language refinements to an existing Bricks template. |
| nibwp/bricks-pro-surecart | write | Design a SureCart storefront section (buy-button, product, product-grid, pricing, checkout, dashboard) as a Bricks template — the SureCart blocks hosted in a styled… |