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
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.