Get clean conversions by writing (or prompting for) clean code

The Converter can handle a wide range of HTML, CSS, and JavaScript. But the closer your code follows a few standard conventions, the more of it lands as native Webflow elements instead of as embedded code. Sections written with these patterns convert quickly, look right in the Designer, and need almost no cleanup afterward.

‍

The patterns that convert best

These are the patterns the Converter is built around. Code that follows them produces the cleanest possible Webflow output:

• Vanilla HTML and CSS. No CSS-in-JS, no styled-components, no Tailwind compiler output, no framework-specific markup. Just standard HTML elements with class-based styling.
• REM units instead of pixels. REM gives you responsive scaling for free and matches how Webflow’s class system thinks about sizing.
• BEM-style class names. Descriptive, hyphenated class names like [class]card[/class], [class]card__header[/class], [class]card--featured[/class]. These map cleanly onto Webflow’s class system.
• Class-only styling. Style everything via classes — not tag selectors ([class]h2 { ... }[/class]) or ID selectors ([class]#hero { ... }[/class]). Webflow’s class system has no concept of tag-based styles, so anything written that way ends up embedded as custom CSS.
• Simple selectors. Single-class selectors are ideal. Avoid descendant selectors ([class].card .title[/class]), child selectors ([class].card > .title[/class]), or complex chains.
• Minimal utility classes. A few utility classes are fine; thousands of them (the Tailwind output pattern) are harder to convert cleanly.
• No complex pseudo-selectors. [class]:hover[/class], [class]:focus[/class], and [class]:active[/class] work great. [class]:nth-child(odd)[/class], [class]:not(:first-of-type)[/class], and exotic combinators don’t always have native Webflow equivalents and may end up embedded.

If you’re writing code yourself, follow these by hand. If you’re generating with AI, use the prompt below.

‍

The example AI prompt

This is the prompt we recommend handing to your AI tool when you want code that converts well. It’s also visible on the Converter page itself, so you can copy it from there anytime.

‍

Write vanilla HTML and CSS using REM units instead of PX, BEM-style class naming, class-only styling (no tag or ID selectors), no descendant selectors, simple selectors only, minimal utility classes, no complex pseudo-selectors.

Come up with a [SECTION TYPE] section for [YOUR PROJECT]. Add smooth animations using GSAP. Only use free GSAP plugins (ScrollTrigger, Flip, Observer, ScrollTo, Draggable, MotionPathPlugin, EasePack, CustomEase).

‍

Replace [class][SECTION TYPE][/class] with what you want (a pricing section, a hero, a testimonial row, etc.) and [class][YOUR PROJECT][/class] with a short description of the brand or product. The first paragraph sets the technical rules. The second paragraph tells the AI what to build.

This prompt works in Claude, ChatGPT, Lovable, v0, Cursor, and any other AI tool that can generate HTML. Drop it in, fill in the brackets, and the output should convert with very little extra work.

‍

Pairing the prompt with a Design System

The prompt above gives you technically clean code. To get code that also follows the visual style of a BYQ template, combine it with a Design System:

1. Open your AI tool.
2. Attach a Design System’s DESIGN.md file from BYQ.
3. Paste the example prompt above, filled in with your section type and project.

The Design System tells the AI how it should look. The prompt tells the AI how it should be coded. Together you get a section that’s both visually polished and technically clean — ready for the Converter to bring into Webflow as native elements.

‍

A note on animations

The example prompt includes GSAP because GSAP is the most reliable way to get sophisticated, smooth animations out of AI tools. The trade-off is that GSAP-driven motion lands as an embedded script in Webflow (as covered in How the Converter works), so it won’t render in the Designer and isn’t editable via Webflow’s interactions panel.

If you’d prefer animations that are editable inside Webflow, you can swap that line for something like:

‍

Use CSS transitions and keyframe animations only — no JavaScript animation libraries.

‍

The result is less elaborate motion but fully native Webflow CSS that you can tweak in the style panel.

‍

What to avoid

A short list of things that consistently produce embeds instead of native elements:

• Framework markup (React, Vue, Svelte components) — paste only the rendered HTML, never the component source
• Tailwind utility soup — fine in small doses, but a long chain of utility classes on every element is harder to convert cleanly
• Inline styles ([class]style="..."[/class] on elements) — these come through as overrides instead of class-based styles
• Heavy JavaScript dependencies beyond GSAP — most other animation libraries embed as code with no native equivalent
• <canvas> and WebGL content — these embed as-is and aren’t editable in Webflow

None of these will break a conversion. They just produce more custom code embeds and less editable Webflow structure.

‍

Why this matters

Code that follows these patterns converts in seconds and gives you a Webflow section you can edit normally. Code that doesn’t follow them still converts — it just produces more embedded blocks and more cleanup work after. Spending a moment on the prompt before generating saves you that cleanup later, every time.