AI 在生成 HTML 方面很出色，但默认输出往往是一堆嵌套的 <div> 和工具类，转换为深层容器树。几条提示规则就能解决这个问题。
要求使用语义化 HTML
告诉模型使用真正的标签：<h1>–<h3> 用于标题，<p> 用于文本，<button> 或 <a class="button"> 用于行动号召，<ul> 用于列表。原生标签对应原生组件。
限制嵌套
补充：“保持 DOM 扁平——每个区块一个包装，不要有冗余嵌套。” 这直接减少了转换后得到的容器层数。
优先使用内联样式或单个样式块
要求使用内联样式或一个 <style> 块，而不是外部框架。转换器读取的是计算样式，所以自成一体的 CSS 转换效果最好。
一个起步提示
“为 [主题] 生成一个响应式 HTML 区块。使用语义标签（h2, p, button, ul），保持 DOM 扁平，每个区块一个包装，把所有 CSS 放在一个样式块中，并使用 Font Awesome 图标类（类似 <i class=”fas fa-check”>，不要用内联 SVG 或 Base64）。不要引入外部脚本或字体。”
将结果粘贴到转换器中，切换到原生组件模式，然后查看结构图——你应该会看到容器大幅减少，并且多数行是绿色的“直接转换”状态。