Overview
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.
Key capabilities
Pixel-perfect
Output is checked against the source for faithful structure.
ACSS-ready BEM
Tokens mapped with safe fallbacks; BEM grammar enforced.
Smart props
Reusable props so one component serves many pages.
Conditional rendering
Parts render only when their data exists.
Responsive
Container queries instead of clamp() font hacks.
Approval gate
Nothing is persisted until you review and approve.
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.
AI abilities
| Tool | 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. |