Conversion Workflows

Conversion Workflows

A conversion should preserve useful content, semantics and behavior while making the result editable with native blocks. Fewer wrappers are useful only when the layout still works.

HTML and CSS

Use html-to-generateblocks. Supply the HTML, all relevant styles, images, links and information about interactions. A screenshot alone does not reveal hover states, breakpoint rules or dynamic data.

• Map layout owners to Element blocks and prose/headings to Text or core blocks.
• Keep inline links inside rich text; use Element links containing child blocks for block-level actions.
• Distribute supported CSS to the owning blocks' styles and matching css.
• Replace custom interactive code with suitable native Pro components.
• Describe any effect that must be simplified instead of silently dropping it.

Long stylesheets are not an exception to the local-style default. Do not wrap the original page in Custom HTML or move its entire stylesheet into a script manager and call that a native conversion.

Elementor

Use elementor-to-generateblocks. Include the export or readable source, current rendering and the behaviors that must survive.

Remove wrapper layers only when they own no semantics, layout, positioning, clipping, conditional visibility or anchor. Preserve actual query filters and form behavior; a screenshot of a post grid is not a replacement for its data source.

Typical mappings include heading → Text, image → Media, posts → Query/Looper, accordion → Pro accordion or an appropriate core Details fallback, and tabs → Pro tabs. For forms, identify the configuration and integrations that need migration; converting only the visible fields does not preserve submission behavior.

Figma

Use figma-to-generateblocks. Provide an accessible design through the assistant's available Figma tools or supply an export/screenshot, measurements and assets. The skill itself does not grant access to a Figma file.

Identify the frame to implement, typography, spacing, layout constraints and any mobile design. Distinguish specified values from choices inferred from a screenshot. Supply interactions or prototype details when they matter; do not assume a static frame proves them.

Conversion acceptance check

Compare the source and destination for:

• Copy, heading levels, images, alternative text and destinations.
• Layout and wrapping at relevant widths, including source-specific breakpoints.
• Open/closed accordions, tab switching, focus states and keyboard behavior.
• Dynamic queries, empty results, pagination and real form configuration.
• Editor validity and stored-content integrity after saving.

An empty rich-text block can still be valid. Empty decorative formatting tags can also disappear during serialization. Verify what is rendered, not just a success message from the parser.

Use the Prompt Library for requests and Troubleshooting when a conversion fails. Detailed mappings: HTML/CSS, Elementor, Figma.

---

Back to wiki home · Reference library