The gap between a design and a live site has always been hours of manual rebuilding — eyeballing spacing, re-typing copy, wiring components, fixing responsiveness. NIBWP’s Pro Skills close that gap. Hand an agent a screenshot, a live URL or a Figma frame and it returns real, editable builder components — mapped to your design tokens, structured with clean BEM, responsive by construction. Not a flat export; actual components you can reuse and edit.
This is the difference between AI that describes a design and AI that builds it. The Pro Skills validate their output against tokens, naming and anti-patterns before anything is written, so what you get is production-grade, not a first draft you have to untangle.
The Pro Skills (EtchWP, Bricks, Elementor, ACSS) turn a screenshot, URL or Figma frame into validated, token-mapped components in your builder of choice — reusable, responsive, and clean enough to ship.
Who this is for
Designers who want their work in a builder without hand-rebuilding it, developers who would rather review than retype, and agencies converting client designs at speed. You bring the design; the skill brings the structure.
Pick your builder
| Layer | What handles it |
|---|---|
| EtchWP | EtchWP Pro — native Etch components, ACSS-ready, with smart props |
| Bricks | Bricks Pro — validated Bricks templates |
| Elementor | Elementor Pro — widget trees with global classes and dynamic tags |
| Tokens | ACSS Pro — generate the design-token config your components map to |
Before you start
You need the relevant builder active (EtchWP, Bricks or Elementor), the matching Pro Skill installed, NIBWP connected to an MCP client, and a source — a screenshot, a public URL, or a Figma frame. For best results, also run ACSS so components map to a real token system.
Step 1 — Drop a source
Give the skill something to work from. A screenshot is fastest; a live URL gives it real structure; a Figma frame gives it the most fidelity. You can also describe a section in words and let it draft.
You: Recreate this hero section from the screenshot as EtchWP\n components, mapped to our ACSS tokens.\nnibwp/etchwp-pro-image-to-component { source: screenshot }\n- validating: tokens, container queries, BEM...\nComponent drafted - 18 tokens mapped, BEM validated
Step 2 — Generate components
The skill turns the design’s nodes into native builder elements — with BEM naming, reusable props, and structure that matches the original down to the breakpoint. It is building a component system, not flattening pixels.
Step 3 — Validate
Before anything persists, the skill checks its work: are tokens mapped with safe fallbacks? Are container queries used instead of clamp() hacks? Is the BEM grammar clean? Anything that fails is rewritten or flagged — you never inherit a mess.
Step 4 — Approve and persist
Nothing is written to your site until you review and approve. When you say go, the component is persisted into your builder, ready to drop into pages and reuse.
Going further
- Whole pages — convert section by section to rebuild an entire front end.
- Component library — build a reusable set your team drops into every project.
- Token-first — generate the ACSS config first, then map every component to it for perfect consistency.
- Cross-builder — the same source can target EtchWP, Bricks or Elementor depending on the project.