La IA es excelente para generar HTML, pero el resultado predeterminado suele ser un enredo de <div>s anidados y clases utilitarias que se convierten en árboles de contenedores profundos. Unas pocas reglas en el prompt lo solucionan.
Pide HTML semántico
Dile al modelo que use etiquetas reales: <h1>–<h3> para encabezados, <p> para texto, <button> o <a class="button"> para llamadas a la acción, <ul> para listas. Las etiquetas nativas se asignan a widgets nativos.
Limita el anidamiento
Añade: «Mantén el DOM poco profundo: un envoltorio por sección, sin anidamiento redundante.» Esto reduce directamente la cantidad de capas de Contenedor que obtienes después de la conversión.
Prefiere estilos en línea o un solo bloque de estilo
Pide estilos en línea o un bloque <style> en lugar de un framework externo. El convertidor lee los estilos calculados, por lo que el CSS autocontenido se transfiere mejor.
Un prompt inicial
«Genera una sección HTML responsiva para [tema]. Usa etiquetas semánticas (h2, p, button, ul), mantén el DOM poco profundo con un envoltorio por bloque, coloca todo el CSS en un solo bloque de estilo y usa clases de íconos de Font Awesome para los iconos (como <i class=”fas fa-check”>, no SVG en línea ni Base64). Sin scripts ni fuentes externas.»
Pega el resultado en el convertidor, cambia al modo de Componentes nativos y verifica el mapa de Estructura: deberías ver muchos menos contenedores y en su mayoría filas verdes de «conversión directa».