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-build-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-from-design | write | Generate a validated EtchWP component from a design, URL or Figma. |
nibwp/etchwp-pro-detect | read | Detect the Etch version and global style setup. |
nibwp/etchwp-pro-list-styles | read | List the available Etch global styles and tokens. |
nibwp/etchwp-pro-validate | read | Validate a payload against BEM, tokens and anti-patterns. |
nibwp/etchwp-pro-html-to-component | destructive | Persist the approved component into etch_styles + the post. |
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