AI is great at generating HTML, but the default output is often a tangle of nested <div>s and utility classes that convert into deep container trees. A few prompt rules fix that.
Ask for semantic HTML
Tell the model to use real tags: <h1>–<h3> for headings, <p> for text, <button> or <a class="button"> for calls to action, <ul> for lists. Native tags map to native widgets.
Limit nesting
Add: “Keep the DOM shallow — one wrapper per section, no redundant nesting.” This directly reduces the number of Container layers you get after conversion.
Prefer inline styles or a single style block
Ask for inline styles or one <style> block rather than an external framework. The converter reads computed styles, so self-contained CSS transfers best.
A starter prompt
“Generate a responsive HTML section for [topic]. Use semantic tags (h2, p, button, ul), keep the DOM shallow with one wrapper per block, put all CSS in a single style block, and use Font Awesome icon classes for icons (like <i class=”fas fa-check”>, not inline SVG or Base64). No external scripts or fonts.”
Paste the result into the converter, switch to Native components mode, and check the Structure map — you should see far fewer containers and mostly green “direct convert” rows.