Solution · Pro Skill

Bricks Pro

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.

4
input types
0
div soup
BEM
global classes
CPT+ACF
query loops

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
nibwp/bricks-create-template elements: whitelisted classes: .brand__hero ✓ validated · editable

It refuses to ship div soup

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 form
How it works

From design to validated output

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.

Guardrails

Every rule it enforces

The checks that keep generated output coherent, accessible and on-system.

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.

Abilities

Tools in this skill

ToolTypeWhat it does
nibwp/bricks-create-templatewriteGenerate a validated Bricks template from a design, URL or Figma.
nibwp/bricks-detectreadDetect the Bricks version and global class setup.
nibwp/bricks-list-elementsreadList the whitelisted core elements available.
nibwp/bricks-validatereadValidate a template against the element & token rules.
nibwp/bricks-applydestructivePersist the approved template into your site.
Why it matters

The difference, side by side

Generic AI output

  • Flattened HTML you can't edit
  • Random hex & inconsistent spacing
  • Raw <form> and non-native markup
  • Static repetition
  • No accessibility checks

Bricks Pro

  • Real, editable Bricks elements
  • ACSS tokens enforced
  • Native elements only
  • Query loops on CPT + ACF
  • WCAG AA validated before save
Results

What teams say

A screenshot became an editable Bricks template with real global classes. Hours saved per page.

Marco T.
Marco T.
Studio lead

The query loops it wired to our CPT just worked. No hand-fixing.

Dana R.
Dana R.
WordPress developer

Finally AI output that opens cleanly in Bricks.

Sam K.
Sam K.
Agency owner
Pairs well with

Build on it

FAQ

Questions, answered

Do I need ACSS installed?

ACSS is recommended for token mapping; Bricks Pro produces safe fallbacks when it is absent.

Will output overwrite my work?

Never without approval — it generates, validates, and waits for you to confirm.

Does it support query loops?

Yes — repeating content is wired to CPT + ACF query loops, not static copies.

Is it in the Bundle?

Yes — Bricks Pro and the other three Pro Skills are included in the Bundle.

Build validated Bricks templates in minutes.

Bricks Pro is included in the Bundle, or available as a standalone Pro Skill.