Bricks Pro is a NIBWP Pro Skill — a validated, workflow-level capability that goes far beyond a single tool call. Convert a screenshot, live URL or Figma frame into a validated Bricks template — real core elements, brand-scoped global classes and your ACSS tokens, with query loops backed by CPT + ACF. Where a built-in ability performs one typed operation, a Pro Skill orchestrates a whole expert workflow and checks its own work against domain rules before anything is written to your site. The result is not a rough first draft you have to fix, but production-grade output you can trust.
Convert a screenshot, live URL or Figma frame into a validated Bricks template — real core elements, brand-scoped global classes and your ACSS tokens, with query loops backed by CPT + ACF. A premium, validated skill you invoke by prompt — it plans, validates, and (on your approval) builds.
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.
- Screenshots, URLs & Figma frames to editable Bricks templates
- Core-element whitelist — no junk markup
- BEM global classes, brand-scoped
- Query loops backed by CPT + ACF
What makes it different
Bricks Pro maps every node to a real Bricks element and every style to a global class — so the output opens cleanly in the builder, stays on-system, and never locks you into a frozen blob.
validate-template
✓ core elements only
✓ BEM classes (12)
✗ raw <form> found
→ swapped to native formHow it compares to generic AI output:
| Generic AI output | Bricks Pro |
|---|---|
| Flattened HTML you can't edit | Real, editable Bricks elements |
| Random hex & inconsistent spacing | ACSS tokens enforced |
| Raw <form> and non-native markup | Native elements only |
| Static repetition | Query loops on CPT + ACF |
| No accessibility checks | WCAG AA validated before save |
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.
A real run
What it looks like when the skill runs:
nibwp/bricks-create-template
elements: whitelisted
classes: .brand__hero
✓ validated · editableCapabilities
The abilities it uses
Under the hood, Bricks Pro is powered by these abilities:
| Ability | 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… |
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 +… |
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… |
nibwp/bricks-pro-url-to-component | read | Fetch a target URL, return its raw HTML + inline / linked stylesheets to the agent. |
Getting it
Bricks Pro is a Pro Skill — included in every NibWP Pro plan. Once licensed, install it from NIBWP › Pro Skills and invoke it by describing what you want. See how to install & use Pro Skills.
FAQ
Do I need ACSS installed?
Will output overwrite my work?
Does it support query loops?
Is it included in Pro?
Build validated Bricks templates in minutes.
Bricks Pro is included in every NibWP Pro plan, with every other Pro Skill.
See pricing