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-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 persists it into… |
| 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, and the existing… |
| nibwp/etchwp-pro-surecart | write | Design a SureCart storefront section (buy-button, product, product-grid, pricing, checkout, dashboard) as a validated EtchWP component — the SureCart blocks wrapped… |