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-create-template | write | Generate a validated Bricks template from a design, URL or Figma. |
| nibwp/bricks-detect | read | Detect the Bricks version and global class setup. |
| nibwp/bricks-list-elements | read | List the whitelisted core elements available. |
| nibwp/bricks-validate | read | Validate a template against the element & token rules. |
| nibwp/bricks-apply | destructive | Persist the approved template into your site. |