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-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. |
Getting it
Bricks Pro is a Pro Skill — available on a Pro plan or in the Bundle. 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 in the Bundle?
Build validated Bricks templates in minutes.
Bricks Pro is included in the Bundle, or available as a standalone Pro Skill.
See pricing