EtchWP 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 pixel-perfect, responsive EtchWP components — ACSS-ready, semantically clean, with smart props and conditional rendering. 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 pixel-perfect, responsive EtchWP components — ACSS-ready, semantically clean, with smart props and conditional rendering. A premium, validated skill you invoke by prompt — it plans, validates, and (on your approval) builds.
What it does
EtchWP Pro recreates your design as native Etch elements with a reusable component system — ACSS tokens with safe fallbacks, production-grade BEM, and props so one component serves many pages.
- Pixel-perfect, faithful recreation of the original
- ACSS-ready output mapped to tokens with safe fallbacks
- Production-grade BEM, reusable component system
- Smart props & conditional rendering built in
What makes it different
Etch components are real, editable and responsive by construction — mapped to your tokens, structured with BEM, and faithful to the original design down to the breakpoint.
validate-component
✓ tokens mapped (18)
✓ container queries
✗ clamp() font-size
→ rewritten to rampHow it compares to generic AI output:
| Generic AI output | EtchWP Pro |
|---|---|
| Flattened markup, no component system | Native Etch elements & reusable props |
| Hardcoded font-size with clamp() | Token-driven type ramp |
| Random hex values | ACSS tokens with safe fallbacks |
| Breaks on small screens | Container-query responsive |
| No structure or naming | Production-grade BEM |
How it works
Drop a source
A screenshot, live URL, or a Figma frame.
Build components
Nodes become native Etch elements with BEM and props.
Validate
Tokens, container queries and BEM grammar are enforced.
Approve & persist
Review, then write the component — only on your OK.
A real run
What it looks like when the skill runs:
nibwp/etchwp-pro-html-to-component
props: { title, cta }
✓ responsive · ACSS-ready
✓ BEM validatedCapabilities
The abilities it uses
Under the hood, EtchWP Pro is powered by these abilities:
| Ability | Type | What it does |
|---|---|---|
nibwp/etchwp-pro-figma-to-component | write | Converts a Figma frame URL into a reusable EtchWP component with ACSS tokens, BEM naming, props, conditions, and loops. |
nibwp/etchwp-pro-html-to-component | write | Validates an agent-built Etch payload against the EtchWP Pro playbook (BEM, ACSS tokens, no clamp() font-size, style-hoist, form shortcode) and… |
nibwp/etchwp-pro-image-to-component | write | Converts an image (URL or media-library ID) into a fully controllable EtchWP atomic component using ACSS spacing tokens and global classes. |
nibwp/etchwp-pro-refine-component | write | Applies a natural-language refinement to an existing EtchWP component JSON while preserving BEM grammar, ACSS tokens, stable data-etch-sid IDs… |
nibwp/etchwp-pro-surecart | write | Design a SureCart storefront section (buy-button, product, product-grid, pricing, checkout, dashboard) as a validated EtchWP component — the… |
Getting it
EtchWP 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?
Are components reusable?
Is the output responsive?
Is it in the Bundle?
Ship responsive Etch components in minutes.
EtchWP Pro is included in the Bundle, or available as a standalone Pro Skill.
See pricing